N 플래너 디자인 가이드 — 2026-10-22

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

한 줄: 정돈된 업무 도구, 그 위에 살아 있는 시간. 밝은 판 흰 카드, 분야 색 블록, 패밀리 주황은 지금·주 행동에만. 끌면 그림자가 깊어지고 놓으면 눈금으로 튕겨 맞는다. 코드: ui/Kit.kt(부품·분야 색) · ui/TimeGrid.kt(시간 축·끌기·지금 선·요일 머리줄) · 화면 TodayCalendar·TasksProjects·FocusReview·Editors·SettingsScreen · 껍데기 NovaPlannerApp.kt · 스플래시 ui/splash/NovaSplash.kt. 색·글자는 노바 패밀리 디자인 시스템(nova-design, NovaTheme).

1. 원칙

시간이 바탕 — 오늘·일·주는 같은 시간 축. 블록 높이 = 시간, 겹치면 나란히(DayLayout).
분야 색으로 읽힌다 — 깊은 일(주황)·회의(남청)·관리·메일(하늘)·학습(보라)·개인(청록). 블록·막대·점·리뷰 막대가 같은 색.
주황은 지금 — 지금 선, 오늘 날짜 원, 고른 탭, 주 단추, 집중 고리. 핵심 경로만 빨강.
손맛 — 끌 때 그림자 깊어짐, 놓으면 15분 눈금으로 튕겨 맞음, 체크는 톡 커졌다 채워짐, 탭 사이는 옆으로 미끄러짐. 「움직임 줄이기」면 모두 바로.

2. 색

노바 패밀리 밝은/어두운 판(NovaTheme) 그대로. 분야 팔레트(Area.PALETTE): #FF7B00 주황 · #3D6BE0 남청 · #7A4FD6 보라 · #0E9A84 청록 · #D9465F 장미 · #4F7A28 올리브 · #2B8CC4 하늘 · #8A5A2B 갈색. 블록 면은 분야 색 16~22% + 테두리, 집중 블록은 분야 색 꽉 채움. 토요일 남청·일요일/공휴일 빨강. 4분면: 지금 하기 빨강·계획하기 주황·맡기기 남청·줄이기 회색.

3. 배치

PC(≥ 900dp): 사이드바 220dp(로고·「말로 넣기」 주황 단추·탭 일곱·아래 집중 막대) · 가운데 · 오른쪽 「자세히」 340dp(고르면 미끄러져 나옴).
- 오늘: 요약 타일 셋 → 시간 축(왼쪽 큰 판) + 할 일 받은편지함 320dp.
- 일정: 일·주·월 고르개 + ＋ 일정, 요일 머리줄 + 종일 줄 + 시간 축 / 월 6주 칸.
- 할 일: 4분면 2×2(PC 기본) 또는 목록. 프로젝트: 이름 칸 150dp + 날짜 34dp 칸 간트(가로 스크롤) 또는 칸반 네 칸.
- 리뷰: 타일 다섯 → 계획 대비 실제 막대 + 분야별 → 넘길 일.
휴대폰: 위 작은 머리(✦·집중·설정) · 본문 · 집중 막대 · 아래 탭 다섯. 오늘은 할 일 띠(150dp) 아래 시간 축. 고르면 편집 창이 바로 열린다.

4. 부품

ScreenHeader(큰 제목 + 작은 설명 + 둥근 단추) · Segmented(알약 고르개, 고른 칸이 미끄러짐) · Panel(흰 카드, 모서리 18) · StatTile · Tag · CheckDot · RoundIcon.
TimeGrid — 15분 눈금 끌기, 블록 ▶(집중 시작), 지금 선(빛나며 흐름), 끌어 넣는 할 일 자리 미리 보기(GhostSlot).
간트 막대 — 분야/핵심 경로 색 22% 면 + 진행률 55% 채움 + 오른쪽 손잡이. 마일스톤 ◆ 18dp. 선후 화살표는 꺾은선 + 화살촉.
집중 고리 — 280dp, 줄어드는 호 + 끝 점 빛(1.6초 숨), 쉼은 청록.

5. 아이콘·스플래시(패밀리 규칙 `_nova-brand/ICON-SYSTEM.md`)

아이콘: 주황 대각 그라데이션 + 흰 달력 한 장(고리 둘) + 주황 간트 막대 셋(엇갈린 길이). N 데이즈(같은 달력 + 주황 초승달)와 디테일로 갈린다. 만드는 곳 tools/make_icon.py(Android 전경·단색, iOS 1024·시작 화면 표식, PC png/ico/icns, 웹). _nova-brand/glyphs.py 에 합칠 땐 이 좌표로 planner_parts() 를 더한다.
스플래시(1.1초 + 머무름): 「흩어진 할 일 점 여덟이 반짝이며 모여 주황 달력 판이 되고 → 고리 둘이 톡 내려앉고 → 바탕색 일정 막대 셋이 왼쪽에서 차례로 미끄러져 들어와 맞물리는 순간 햅틱·파문」 → 「N 플래너」 + 「계획하고, 집중하고, 돌아봐요」. 마지막 장면 = 아이콘의 반전.

6. 말투

업무 말투로 짧게: 「남은 빈 시간 2시간 45분」, 「D-1」, 「실행률 82%」, 「이번만 · 이후 모두 · 모두」. 날짜는 「10월 22일 (목)」, 시각은 24시간 「14:00–15:00」(말로 넣기 확인은 「오후 2:30」).