N 월렛

N 월렛 디자인 가이드 (2026-10-08)

원본 docs/DESIGN-GUIDE-2026-10-08.md · 부품·화면 규칙은 v1(DESIGN-GUIDE.md)

웹페이지판: https://138.3.221.237.sslip.io/docs/novawallet/design-guide.html 바탕은 노바 패밀리 디자인 시스템(:nova-design) — 강조 주황 accent #FF7B00, Pretendard, 4dp 격자, 터치 48dp, 카드 R16. 색은 토큰 이름으로만 쓴다. 이 문서는 그 위에서 N 월렛만의 결정을 적는다. 10/7 「노바 기프티콘」 시절 문서(DESIGN-2026-10-07.md)를 대신한다. 근거: Material 3 · Apple HIG · WCAG 2.2 · 패밀리 규칙(_nova-brand/ICON-SYSTEM.md).

0. 이 앱의 얼굴 — 지갑

N 월렛은 두 순간에 연다.

순간사용자화면이 할 일
집에서, 천천히「뭐가 곧 만료되지?」홈 맨 위에서 개수와 급한 것을 바로
계산대·극장 입구, 급하게한 손, 줄 서 있음상세를 열자마자 바코드·QR 이 가장 크게

원칙 세 가지:

  1. 남은 날이 주인공이다. 카드 오른쪽의 큰 D-day. 급한 것만 색이 있다(색만으로 알리지 않는다 — 글자가 다르다).
  2. 쿠폰은 쿠폰처럼. 절취선과 반원 홈이 있는 종이 쿠폰 모양 — 「이건 쓰는 물건」이라는 것을 모양으로 말한다.
  3. 바코드 판은 언제나 흰색. 어두운 테마에서도 흰 판(#FFFFFF 고정 — 유일한 예외). 계산대 스캐너가 읽게.

1. 이름·아이콘·스플래시

곳규칙
이름홈 화면·앱 머리 N 월렛 / N Wallet, 문장 속 노바 월렛(「노바 월렛이 잠겨 있어요」). 디버그 「N Wallet DEV」
아이콘주황 그라디언트(#FF9A3D → #FF7B00 → #E86C00) 위 흰 지갑, 지갑에 꽂힌 쿠폰(주황 바코드), 주황 고리. 원본 _nova-brand/out/wallet.svg · 생성기 tools/make_icon.py(손으로 고치지 않는다)
스플래시흩어진 쿠폰 넷 → 지갑 뒤로 빨려 들어가 한 장으로 꽂힘 → 고리 「딸깍」(점·파문·햅틱) → 「N 월렛 / 흩어진 기프티콘, 한 지갑에」. 마지막 장면 = 앱 아이콘. 가리기만 하고 한 번만, 움직임 줄이기면 마지막 장면만. 앱 잠금 인증 창은 스플래시가 끝난 뒤
시스템 시작 화면빈 그림(아이콘이 연출 앞뒤로 두 번 보이지 않게)

2. 홈 — 지갑

```
┌──────────────────────────────────────┐
│ N 월렛 ⌕ 🔔 ⋮ │ 머리: 앱 이름 · 검색 · 알림 내역 · 메뉴
│ ┌──────────────────────────────────┐ │
│ │ 지금 쓸 수 있는 기프티콘 │ │ 주황 요약 카드(accent 그라디언트, R24)
│ │ 4개 [지갑 무늬] │ │ 큰 숫자 · 바탕 지갑 무늬는 카드 안에 온전히
│ │ ( ⏳ 7일 안에 만료 2개 › ) │ │ 흰 알약 — 누르면 그 필터
│ └──────────────────────────────────┘ │
│ 다가오는 영화 │ 영화표가 있을 때만(§5)
│ [CGV 용산…][롯데시네마 …] → │
│ 곧 만료돼요 │ 7일 안 기프티콘, 가로 쿠폰
│ [D-1 아이스 아메리카노][D-4 …] → │
│ [사용 가능 8] 사용 완료 · 만료 · 전체 │ 탭 넷(긴 언어는 글자 자동 축소, 최소 10sp)
│ (전체)(☕카페)(편의점)(🎬영화) … │ 있는 분류만 칩
│ ┌─────[사진]──────────────┬──────┐ │ 절취선 쿠폰 카드
│ │ 스타벅스 ┊ D-1 │ │ 왼쪽 사진·사용처·이름 / 오른쪽 큰 D-day
│ │ 아이스 아메리카노 T ┊ 10.09│ │
│ └─────────────────────────┴──────┘ │
│ ( + 기프티콘 추가 ) │ 확장 FAB(빈 화면에 가운데 단추가 있으면 숨김)
└──────────────────────────────────────┘
```

3. 상세 — 쿠폰 한 장

```
┌──────────────────────────────────────┐
│ ⌄ ⇪ ⋮ │
│ ┌──────────────────────────────────┐ │
│ │ [사진] 스타벅스 · 카페 │ │ 머리: 사진·사용처·분류·이름
│ │ 아이스 아메리카노 T │ │
│ │ D-1 2026.10.09까지 │ │ 큰 D-day + 날짜
│ ◖ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ◗ │ 절취선(양옆 반원 홈)
│ │ ▌▌▌ ▌▌ ▌▌▌▌ ▌ ▌▌▌ (흰 판) │ │ 바코드 판 — 흰색 고정
│ │ 8801 0000 00050 ⧉ │ │ 번호 4자리 띄움 + 복사
│ └──────────────────────────────────┘ │
│ [📍 가까운 스타벅스 찾기 ›] │ 사용처를 알고 쓸 수 있을 때만
│ (☕ 카페) ✎ 수정 │
│ ┌──────────────────────────────────┐ │
│ │ ✓ 사용 완료 │ │ 주 단추 — 엄지 자리
│ └──────────────────────────────────┘ │
└──────────────────────────────────────┘
```

4. 편집·시트·설정

화면규칙
편집맨 위 쿠폰 미리보기(칸을 고치면 바로 바뀜) → 상품명·사용처·분류 칩·유효기간(노바 색 날짜 고르개, 고정 크기 없음)·「사진에서 다시 읽기」. 최대 640dp
추가 시트두 줄: 「사진 골라 추가」(권한 없어도) · 「기간 지정해 찾기」
길게 누르기사용 완료·번호 복사·공유·수정·삭제(위험색)
정리 창묶음 카드(만료·사용 완료 / 기간 모름), 대화상자 안 카드는 그림자 없이 옅은 바탕
설정패밀리 여백(NovaFullScreenSurface 16dp), 맨 위 주황 요약 카드(알림 시각·자동 찾기 주기·잠금), 순서: 알림 → 자동 찾기 → 위젯 → 보안 → 화면 → 언어 → 휴지통 → 정보. 최대 640dp
잠금앱 아이콘 타일 + 자물쇠 배지, 「노바 월렛이 잠겨 있어요」, 주 단추 「잠금 해제」

5. 영화표

기프티콘과 같은 쿠폰 모양이되 극장 색과 상영 일시가 주인공.

곳규칙
홈 「다가오는 영화」가로 표 카드. 머리 띠는 극장 색(CGV #E51937·롯데시네마 #D81E28 빨강, 메가박스 #351F67 보라, 씨네Q #0068B7 파랑, 그 밖 주황) + 🎬 + 「극장 지점」. 몸통: 제목 · D-day 알약 · 「10.12 19:30」 · 「상영관 · 좌석」. 날짜·시각순. 「곧 만료돼요」·요약 개수에는 넣지 않는다
상세 머리「극장 지점 · 영화」 / 제목 / D-day + 「2026.10.12 19:30」(오늘이면 「오늘 19:30」)
QR 판QR 이 있으면 흰 판에 QR + 번호. QR 이 아직 없으면(상영 1시간 전까지 가려진 캡처) 캡처 원본 + 「입장 QR은 상영 1시간 전부터 극장 앱에 나와요. 그때 티켓을 다시 캡처하면 여기에 붙어요.」
정보 카드상영관 · 좌석 · 예매번호(복사) — 있는 줄만
극장 지도「○○ 지도에서 보기」 — 그 극장 한 곳(주변 검색 아님). 지점을 모르면 줄을 숨긴다
알림상영 당일 한 번 「오늘 보는 영화」 — 「19:30 범죄도시5 · CGV 용산아이파크몰」(시각이 먼저)

6. 위젯(Android)

위젯크기규칙
다음 만료2×2머리 「임박 기프티콘」, 큰 D-day(급한 것만 색), 이름, 「사용처 · ~ 날짜」
바코드 바로쓰기4×2이름 + D-day 칩 + 흰 판 바코드(번호로 새로 그린다)
전체 목록4×2~급한 순, 높이(MAX_HEIGHT)에 맞춰 1~5줄

7. 움직임

8. 접근성