N 크로노N 크로노 디자인 가이드 — 2026-10-22
원본 docs/DESIGN-GUIDE-2026-10-22.md
한 줄: 정밀 계기. 어두운 판 위에서 주황 바늘이 ms 단위로 매끄럽게 돈다. 숫자는 흔들리지 않고(고정폭), 움직임은 시간을 보여 줄 때만 쓴다. 코드:
composeApp/src/commonMain/kotlin/com/eys/novachrono/ui/theme/ChronoTheme.kt(색·글자) ·ui/components/Dials.kt(다이얼·고리·막대) ·ui/splash/NovaSplash.kt.
1. 원칙
- 시간이 주인공 — 화면마다 가장 큰 것은 숫자 하나(시계·남은 시간·경과). 나머지는 그 둘레에 작게.
- 숫자는 고정폭(
tnum) — 초가 바뀔 때 글자 폭이 흔들리지 않는다. 큰 시계는 가는 굵기(300~400), ms 는 주황 작은 글씨. - 움직임은 시간의 표현 — 바늘·밀리초 고리·카운트다운 고리·마지막 10초 박동·울림 파문. 장식 움직임은 없다. 「움직임 줄이기」면 모두 멈추고 초 바늘이 1초씩 뛴다(숫자는 0.25초마다 갱신).
- 색에 뜻 — 주황 = 지금·주요 동작, 민트 = 표준시·맞춤·최고 기록, 하늘 = 쉼, 보라 = 긴 쉼, 노랑 = 주의(10초 전), 빨강 = 최저·지우기.
2. 색(어두운 판 / 밝은 판)
| 토큰 | 어두운 | 밝은 | 쓰임 |
|---|---|---|---|
| bg | #07090E | #F4F5F8 | 바탕 |
| surface / 2 / 3 | #0E121A #151A25 #1D2331 | #FFFFFF #F0F2F6 #E6E9EF | 카드·칩·누름 |
| text / 2 / 3 | #F3F5F9 #9AA3B5 #5C6577 | #0D1118 #566074 #8B94A6 | 글자 단계 |
| accent(Hi/Lo) | #FF7B00(#FF9A3D/#E86C00) | #F07300 | 패밀리 주황 |
| live | #2EE6B6 | #0FA982 | 표준시·맞춤·최고 |
| rest / longRest | #4CC4FF / #9D8CFF | #0C8FD6 / #6A55E8 | 인터벌 쉼 |
| warn / danger | #FFB020 / #FF4D6A | #D48A00 / #E02B4C | 10초 전 / 최저·지우기 |
| dialFace | #0B0E15→#131826 | #FFFFFF→#F1F3F7 | 다이얼 판(방사 그라데이션) |
어두운 판이 기본. 설정 「화면 판」에서 밝은 판·기기 따름.
3. 글자(Pretendard)
| 이름 | 크기·굵기 | 쓰임 |
|---|---|---|
| hero | 64 Light tnum | 큰 시계(휴대폰), 울림 화면 72 |
| big | 40 Light tnum | 다음 알람·알람 카드 시각 |
| numL / numM / numS | 28 / 20 / 15 tnum | 남은 시간·랩·표 |
| title / section | 22 Bold / 15 Bold | 머리·카드 제목 |
| body / caption / overline | 14 / 12 / 11 SemiBold 자간 1.2 | 설명·보조·라벨 |
4. 부품
- 정밀 다이얼(
PrecisionDial) — 바깥 고리 100칸(10ms)에 주황 호가 1초마다 한 바퀴, 안쪽 60칸 초 눈금, 시·분·초 바늘이 ms 로 이어서 돈다. 날짜 창(「10.22 목」), 6시 자리에 작은 초 다이얼. - 진행 고리(
ProgressRing) — 카운트다운·타이머. 마지막 10초 박동(크기 1.0↔1.04), 끝 점에 빛. - 구간 막대(
PhaseBar) — 인터벌·포모도로의 구간을 색으로(운동 주황·쉼 하늘·긴 쉼 보라·준비 회색), 지금 자리에 흰 선. - 랩 막대(
LapBars) — 최저~최고 사이로 높이를 편 막대(가장 빠른 랩도 30%), 민트→주황. 막대 폭 24dp 까지. - 울림 화면(
RingOverlay) — 바탕 전체, 주황 파문이 퍼지고 큰 시각·제목·「다시 울림 · N분」「끄기」. 끄는 길이 늘 있다.
5. 배치
- 휴대폰(폭 < 840dp): 위 머리(탭 이름 + 오른쪽에 「도는 타이머 N」 또는 지금 시각) · 가운데 내용 · 아래 탭 다섯(시계·알람·타이머·스톱워치·설정).
- PC·태블릿(≥ 840dp): 왼쪽 사이드바(탭 + 아래 「지금 · 다음 알람 · 도는 타이머」 요약) + 본문. 시계 탭은 큰 다이얼 + 오른쪽 세계 시각·기준 시계 목록, 1280dp 이상이면 알람·타이머 카드가 세 줄.
- 시트(알람 편집·새 타이머·시각 정하기·도시 더하기)는 휴대폰은 아래에서, PC 는 가운데 창.
6. 아이콘·스플래시(패밀리 규칙 _nova-brand/ICON-SYSTEM.md)
- 아이콘: 주황 대각 그라데이션 바탕 + 흰 시계판(상징) + 주황 바늘 셋(시 10시·분 2시·초 7시 쪽, 디테일). 눈금·글자 없음. N 트리거(스톱워치 + 12시 눈금)와 꼭지 유무로 갈린다. 만드는 곳
scripts/make_icon.py(Android 전경·단색·알림 아이콘, PC png/ico/icns, iOS 1024)._nova-brand/glyphs.py에 합칠 땐 이 파일의 좌표를 옮긴다. - 스플래시(1.1초 + 머무름 0.2 + 사라짐 0.26): 「저마다 어긋나 돌던 바늘 셋(기기·사이트·표준시, 하늘·민트·주황)이 12시에서 하나로 겹치고(햅틱) — 주황 원판과 흰 시계판이 차오르며 바늘이 10시 10분으로 펼쳐진다」 → 이름 + 「모든 시각을, 밀리초까지」. 마지막 장면 = 아이콘.
7. 말투
- 짧고 정확하게: 「기기 시계와 +12ms 차이 · 정확도 ±3ms」, 「25분 뒤」, 「앞 랩 대비 −0.77」.
- 사람은 「대표님」이 아니라 쓰는 사람 기준 존댓말(「~해요」). 영어판은 같은 길이로.
- 화면 문구에 줄표(—) 금지, 안드로이드 탈출 문자 금지(빌드가 검사).