N 길찾기N 길찾기 디자인 가이드
원본 docs/DESIGN-2026-10-08.md · 근거 docs/research/DESIGN-RESEARCH.md
2026-10-08 · 바탕은 노바 패밀리 디자인 시스템
:nova-design(주황accent#FF7B00 은 면에만, Pretendard, 4dp 격자, 터치 48dp, 카드 R16, 해요체, 「—」 금지). 근거와 전체 와이어(S1~S9)·대비 계산·출처:research/DESIGN-RESEARCH.md. 이 문서는 채택한 결정만 적는다. 길찾기 부품(경로 시트·타임라인·노선 배지·노선도)은 포크한route-sdk+ 이실장 패밀리 디자인(family-design)이 그린다. 두 디자인 체계는 같은 주황·회색 단계·Pretendard 라 섞여도 한 앱으로 보인다. 앱이 새로 그리는 화면(첫 화면·검색·출발 비서·즐겨찾기·설정)은nova-design으로.
0. 이 앱의 얼굴(원칙 다섯 줄)
- 답이 먼저다. 시트를 열면 「몇 분 · 몇 시 도착 · 얼마」가 첫 줄. 지도는 그 답을 확인하는 무대다.
- 엄지로 끝난다. 검색 칸·수단 탭·주 단추·내 위치가 화면 아래 55% 안에. 위쪽엔 읽기만.
- 색은 노선의 것. 노선색은 자료값 그대로, 주황은 우리 행동(주 단추·선택·도착 핀)에만. 색만으로 말하지 않는다(배지 글자·무늬·모양).
- 살아 있는 숫자만 움직인다. 실시간 도착과 출발까지 남은 시간만, 나머지는 가만히.
- 짧게, 해요체. 카드 한 줄 16자, 안내 한 문장 40자 이하.
1. 화면과 그릇
| # | 화면 | 그릇 | 주 행동(화면당 주황 면 하나) |
|---|---|---|---|
| S1 | 첫 화면 | 지도 + 비모달 시트 3단계 | 「어디로 갈까요?」 |
| S2 | 장소 검색 | 전체 화면 | 장소 고르기 |
| S3 | 장소 카드 | 시트 중간 | 「길찾기」 |
| S5 | 경로 결과 | route-sdk RouteSheet | 카드 누르기 |
| S6 | 경로 상세 | RouteSheet 상세 | 「출발 알림」(N 길찾기가 더함) · 「네이버 지도로」 |
| S10 | 출발 비서 | 아래 시트 | 「알림 받기」 |
| S8 | 즐겨찾기 | 전체 화면 | 「장소 더하기」 |
| S9 | 설정 | 전체 화면 | — |
| — | 지하철 노선도 | route-sdk SubwayMapScreen | 역 고르기 |
1-1. 시트 높이(S1·S3)
접힘 188dp(손잡이 20 + 검색 칸 52 + 바로가기 칩 + 여백 — 120dp 는 칩을 가려 10/8 에뮬에서 늘림) · 중간 화면 50% · 펼침(위에 지도 56dp 남김). 손잡이 32×4dp borderStrong, 누르면 단계를 돈다. 위 모서리 24. 폭 최대 640dp.
1-2. S1 첫 화면
- 시트 안 검색 칸(52dp,
surfaceSunken, 둥근 알약) 「어디로 갈까요?」. - 바로가기 칩(가로 스크롤): ⌂ 집 · ▣ 회사 · ★ 즐겨찾기 장소 · ＋. 등록 안 된 집은 「집 등록하기」(
onAccentSoft글자, 점선 테두리). - 최근: 52dp 행(시계 아이콘 · 이름 · 날짜), 맨 아래 「모두 지우기」.
- 지도 오른쪽 아래(시트 위 12dp): 내 위치 48dp, 노선도 48dp.
- 첫 실행 빈 상태: 「자주 가는 곳을 등록하면 한 번에 출발해요」 + 「집 등록하기」.
1-3. S2 장소 검색
- 상단 56dp: ‹ · 검색 칸(포커스) · ✕.
- 결과 64dp 두 줄: 이름(
bodyStrong) + 주소(caption textTertiary), 오른쪽 거리(numeric textSecondary). 거리 글자에 색을 쓰지 않는다. - 결과 없음: 「「강남엑」을 찾지 못했어요. 맞춤법을 확인해 주세요」. 위치 없음 띠: 「위치를 켜면 가까운 곳부터 보여요」 + 「켜기」.
1-4. S10 출발 비서(간판)
╭──────────────────────────────────────╮
│ 출발 알림 ✕ │ title 18
│ 서울특별시청까지 · 대중교통 38분 │ caption
│ [ 도착 시각 ] [ 출발 시각 ] │ NovaSegmented
│ 오전 9 : 00 │ 시간 바퀴(5분 단위) · 오늘/내일 칩
│ ──────────────────────────────────── │
│ 8:12에 나가세요 │ display 32 Bold, tnum (살아 있는 답)
│ 여유 5분 포함 · 10분 전에 미리 알려요 │ caption textSecondary
│ [ 알림 받기 ] │ 주 단추(accent 면, 화면 하나)
╰──────────────────────────────────────╯- 나갈 시각이 이미 지났으면 「지금 나가도 9:06에 도착해요」(
warning글자) + 단추 「지금 출발」. - 예약된 알림은 첫 화면 시트 맨 위에 알약 「8:12 출발 · 서울특별시청」(누르면 취소·바꾸기).
- 정확한 알람이 꺼진 기기(Android 14+)는 단추 아래 한 줄 「정확한 시각에 알리려면 「알람 및 리마인더」를 허용해 주세요」 + 고스트 단추 「허용」. 주황 면은 여전히 「알림 받기」 하나.
- 디버그판의 「시연 자료」가 켜져 있으면 첫 화면 왼쪽 위에
warningSoft알약 「시연 자료」 — 실제 경로로 착각하지 않게.
2. 결과 카드(경로 결과의 주인공) — route-sdk 가 그린다
| 칸 | 규칙 |
|---|---|
| ① 라벨 | 「최적」「최소환승」… label textSecondary |
| ② 시간 | 24 Bold 고정폭 「38분」 + 「오후 3:21 도착」 + 오른쪽 요금. 38분 = 지금 나서면 도착까지(도보·기다림 포함) |
| ③ 보조 | 「환승 1회 · 도보 9분」 |
| ④ 막대 | 시간 비례, 칸 안에 노선 기호(②, 402)를 넣어 색 없이도 구분 |
| ⑤ 탈것 줄 | 노선 배지 + 승차역 + 실시간 「● 3분 뒤 · 다음 9분」 |
3. 노선색·지도 선
- 노선색은 바꾸지 않고 테두리(케이싱) 로 대비를 만든다: 밝은 지도 = 노선색에 검정 45% 섞은 테두리 1.5dp, 어두운 지도 = 노선색에 흰색 35% 섞고
background테두리. - 주황은 경로선에 쓰지 않는다(밝은 지도 대비 2.26).
- 도보 = 회색 둥근 점선, 출발 = 속 빈 고리, 도착 = 주황 물방울 핀 — 모양으로 갈려 적록 색약에도 읽힌다.
4. 아이콘·스플래시
- 아이콘: 패밀리 주황 그라데이션 둥근 사각 + 흰 경로 핀 + S자 점선 길(왼쪽 아래 출발 원 → 점 셋 → 오른쪽 위 핀) + 주황 디테일 하나(핀 속 점 #E86C00).
- 스플래시 「흩어진 점이 한 길로」: 0–420ms 회색 점 넷 + 주황 점 하나가 떠돈다 → 420–700 S자 자리로 줄 서며 점선 길이 된다 → 700 주황 점이 끝에 닿는 순간 흰 핀이 꽂히고(1→1.06→1) 햅틱 → 760–1100 「N 길찾기」 + 「가는 길을 한눈에」. 가리기만, 한 번 본 뒤엔 안 뜸, 움직임 줄이기면 마지막 장면만.
5. 움직임
시트 스프링(감쇠 0.9), 경로선 그리기 480ms, 바뀐 숫자만 200ms 굴림, 실시간 갱신 30초보다 자주 하지 않음. 움직임 줄이기는 앱 설정(시스템 따름/켬/끔) — 시스템 애니메이션 배율 0 기기에서 움직임이 통째로 빠지지 않게.
6. 접근성
- 대비: 본문 4.5:1, 경로선·표식 3:1(케이싱으로). 주황 글자는
onAccentSoft. - 화면 읽기: 결과 카드 한 덩어리(「최적 경로, 38분, 오후 3시 21분 도착, 1,550원, 환승 1회…」), 시트 손잡이에 「시트 크게/작게」.
- 터치 48dp, 글자 200% 에서 자르지 않음.
7. 패밀리에 올릴 문제(디자인 분석 §9)
- 기본 단추 흰 글자 on 주황 #FF7B00 대비 2.60(WCAG AA 미달) — 패밀리 차원 결정 필요(먹색 글자면 6.64).
onAccentSoft#C45A00 은background위 4.00 — 작은 글자 미달. 이 앱의 밝은 판 주황 글자는 #A34B00(warning, 5.89)을 쓴다.