CASE · MOBILE APP · DESIGN STUDY · 2026

다노뱅크
Danobank

가상의 테크핀 뱅킹 앱 다노뱅크의 하이피델리티 UI/UX 디자인. 11개 화면과 클릭으로 실제 작동하는 라이브 프로토타입을 한 세트로 정리했습니다. 브랜드 시스템·다크모드·화면 전환·상태 유지까지 모두 픽셀 단위로 구현.

BRANDDanobank
가상 브랜드

SCOPEUI/UX · 브랜드
라이브 프로토타입

SCREENS11 화면 · Light/Dark
iPhone 402×874

YEAR2026

Live Prototype · 아래에서 바로 만져보세요

홈 → 송금 → 금액 → 완료 클릭 플로우 · Light/Dark 토글 지원 전체화면

11 SCREENS · LIGHT + DARK

01 온보딩 / 로그인 Face ID · 다크 그라디언트

02 홈 · Light 계좌 · 자산 · 지출 트렌드

03 계좌 상세 · Light 거래 내역 · 카테고리 필터

04 송금 · 받는사람 최근 · 연락처 · 자음별 그룹

05 송금 · 금액 키패드 · 캐럿 애니메이션

06 송금 · 완료 성공 애니메이션 · 영수증

07 카드 실물 카드 · 이용금액 · 결제

08 혜택 / 이벤트 포인트 · 카테고리 · 미션

09 내 정보 / 설정 프로필 · 계정 · 보안

10 홈 · Dark 다크모드 최적화 톤

11 계좌 상세 · Dark 다크모드 리스트 대비

Live · 01

클릭 플로우

홈 카드 → 송금 → 금액 → 완료. 실제 앱처럼 화면이 넘어가고 상태가 이어집니다. 하단 탭바 5개도 클릭 전환.

Live · 02

Light / Dark

상단 토글로 라이트↔다크 즉시 전환. 홈·계좌 두 화면은 다크 전용 톤으로 재설계 — 단순 색상 반전이 아닌 톤 재조정.

Live · 03

상태 유지

localStorage로 현재 화면·모드 저장. 새로고침해도 위치 복원. 화면 전환은 translateX + fade 280ms cubic-bezier.

System 01

디자인 토큰

컬러·타이포·스페이싱·라디우스·섀도우까지 CSS 변수로 체계화. Pretendard + Space Grotesk 조합.

System 02

컴포넌트

Button · Chip · Icon tile · Progress · Tab bar · Section head 등 재사용 가능한 UI 프리미티브 정의.

System 03

인터랙션

iOS 표준 트랜지션 · 캐럿 blink · 카드 press scale · skeleton shimmer 등 마이크로 인터랙션 설계.

DESIGN STUDY

이 프로젝트는 실제 서비스나 공개된 뱅킹 앱이 아닙니다. 가상의 테크핀 브랜드 다노뱅크를 설정하고 진행한 자체 UI/UX 디자인 스터디입니다. 프로토타입은 브라우저 프리뷰용이며 실제 기능은 동작하지 않습니다.

NEXT CASE

브랜드 아이덴티티 · 3향 트릴로지 · 라벨 시스템

丹