N 플로우 디자인 가이드 — 2026-10-16

원본 docs/DESIGN-GUIDE-2026-10-16.md

대표님 주문: 「화려하고 동적이면서 세련되게」. 노바 패밀리 규칙(_nova-brand/ICON-SYSTEM.md)과 nova-design 을 지킨다.

1. 주제 — 밤 고속도로의 빛줄기

머리·내 길 카드·고른 곳 카드 바탕은 먹남색 세 겹(#0B1220 → #1A2440 → #26315A) + 오른쪽 위 주황 노을 한 점.
그 위로 다섯 차선을 따라 흰 전조등(마주 오는 차)·붉은 꼬리등(앞차)이 흐른다. 길이 막히면 꼬리등이 주황·빨강으로 바뀌고 느려진다 — 바탕만 봐도 길 상태가 읽힌다.
빛줄기는 화면 아래쪽 절반에만 둔다(제목 글자를 가로지르지 않게, 10/16 화면 사진에서 고침).

쓰임	값
원활 · 서행 · 정체	`#1FC46B` · `#FFA41B` · `#F2453D` — 네이버 지도 교통 색과 같은 세 단계
기록 중(모름)	`#8A94A6`
노바 주황(주 단추·탭 알약·강조)	`#FF7B00` (그라데이션 `#FF9A3D → #FF7B00`)
정보 탭 칸	칸마다 두 색 그라데이션 10쌍(밤 하늘·청록·보라·노을·초록·호박·하늘·장미·먹·빨강)

밝은·어두운 모드 모두 바탕·글자는 nova-design NovaColors 를 따른다. 빛줄기 카드는 두 모드에서 같은 어두운 판(밤 장면).

떠 있는 탭 바: 둥근 알약(64dp) 위로 주황 빛 알약이 스프링으로 미끄러진다. 시스템 막대 위로 띄운다.
흐름 게이지: ¾ 바퀴 호, 초록→주황→빨강 쓸기 그라데이션, 끝에 숨 쉬는 빛 점. 몫 = (지금 ÷ 막힘 없을 때 − 1) ÷ (1.6×1.25 − 1).
LIVE 점: 퍼지는 고리 맥박. 실시간 자료 옆에만.
꺾은선: 오늘 잰 값, 아래로 옅게 채움, 마지막 점 = 지금.
숫자 올라가기: 분은 0 에서 올라와 자리 잡는다(0.7초).
등장: 목록은 차례로(60ms 간격) 아래에서 떠오른다. 누르면 0.96 배로 눌린다.
범례: 세 색 띠 위로 흰 빛이 지나간다(정체 띠일수록 느리게).

연속 움직임은 withFrameNanos 프레임 시각 — 시스템 애니메이션 배율 0 기기에서도 돈다(패밀리 10/8 교훈). 프레임 값은 그리기 단계에서만 읽어 화면 전체를 다시 짜지 않는다.
앱 설정 「움직임 줄이기」를 고른 때만 멈춘 한 장면으로 그린다.

아이콘: 주황 바탕 + 흰 세 갈래 물결 차선 + 가운데 차선 위 주황 점(지금 달리는 나). 정의 _nova-brand/glyphs.py flow, 생성 tools/make_icon.py.
스플래시(1.1초): 가운데 엉켜 떨던 빨간·회색 점(정체) → 세 차선으로 풀려 나가며 길이 그어지고 → 주황 점이 가운데 차선을 달려 제자리에(0.8초, 햅틱·파문) → 「N 플로우」 + 「막힘 없는 길, 한눈에」. 마지막 장면은 아이콘의 반전.

먹남색 그라데이션 둥근 판, 「N 플로우 · 내 길」 주황 머리, 길 셋 — 색 점 · 이름 · 「서행 · 평소보다 8분 더 · 오후 2:32 도착 예상」 · 큰 분. 누르면 내 길 탭.