N 하이N 하이 디자인 가이드 — 2026-10-13 (연령별 다시)
노바 하이 디자인 가이드 · 2026-10-12
대표님 10/13: 「네 앱이 내용·아이콘만 다르고 화면이 공통 — 연령에 맞게」. N 하이(16~18세)는 수능까지 가는 학습 플래너. 정본 코드:
ui/theme/HighTheme.kt(토큰Hi) ·ui/components/HighKit.kt(부품) ·data/Planner.kt(D-day·진도 셈). 패밀리 로드맵:../../_nova-brand/LEARNING-ROADMAP-2026-10-13.md§3.
1. 누구를 위한 화면인가
| 6~8세(N 키즈) | 16~18세(N 하이) | |
|---|---|---|
| 동기 | 이야기·칭찬 | 목표(대입)·효율·약점 |
| 첫 화면이 답할 것 | 「오늘 어디로 여행 갈까」 | ①수능까지 며칠 ②오늘 얼마나 ③지금 뭘 ④과목별 어디까지 ⑤어디가 약한가 |
| 말투 | 노비가 말한다 | 해요체, 짧게, 숫자로 |
| 꾸밈 | 밤하늘·통통 단추·꽃가루 | 없음 — 종이·선·숫자 정렬 |
근거: 청소년기 학습 앱 연구·제품(콴다·스터디플래너·Notion 템플릿)이 공통으로 쓰는 「대시보드 + 목차 + 시험지」 틀. 고등학생은 유치한 보상 장치에 거부감이 크고, 시간 대비 성과(정답률·문항당 시간)를 직접 보길 원한다.
2. 색(Hi)
| 이름 | 값 | 쓰임 |
|---|---|---|
| paper / surface / sunken / line | #F5F6FA / #FFFFFF / #EEF0F5 / #E3E6EE | 바탕·카드·눌림·잠김·1dp 선 |
| ink / ink2 / ink3 | #111827 / #374151 / #6B7280 | 글자(흰 위 17:1 / 10:1 / 4.8:1) |
| navy / navySoft | #1E2A4A / #E8ECF6 | D-day 카드·문제 번호·진도·그림 판(칠판) |
| accent / accentText / accentSoft | #FF7B00 / #C2410C / #FFF1E6 | 주황은 단추 바탕(흰 글자)만. 주황 글자는 accentText(5.2:1) |
| good / bad / warnSoft | #15803D / #B91C1C / #FFF7E0 | 맞음·틀림·도움말 띠 |
| 과목 6색 | 공통수학1 #4F6BED · 공통수학2 #2A9D8F · 대수 #D9467A · 미적분Ⅰ #E07A1F · 확통 #7C5CD6 · 영어 #2F80ED | 막대·점. 글자는 subjectInk(4.5:1 이상) |
다크 모드(10/16): 보호자 설정 「화면 밝기」 시스템/밝게/어둡게 — Palette.dark 를 읽는 토큰 게터(N 리얼티와 같은 방식). 어두운 값: 바탕 #0F121A · 면 #181D29 · 글자 #ECEFF4 · 남색 #24305A/#4A5E9A · 주황 글자 #FFA45C(모두 AA 이상). 키즈 틀이 남은 화면은 밝은 채.
3. 글자
Pretendard. display 34 · title 22 · heading 18 · question 19(시험지 발문) · body 16 · caption 13 · label 12(굵게) · figure 40(D-day·점수, tnum 고정폭 숫자). 키즈보다 한 단계씩 작고 촘촘하다.
4. 부품(HighKit.kt)
| 부품 | 규격 |
|---|---|
| HiButton | 높이 52dp, 모서리 12, 주요 = 주황 바탕 흰 글자 / 보조 = 흰 바탕 1dp 선. 눌림은 바탕 8% 어둡게(두께 없음) |
| HiCard | 흰 면 + 1dp 선, 모서리 16, 안쪽 16 |
| HiChip | 과목·「수능」 꼬리표, 색 10% 바탕 + 색 글자 |
| HiProgress | 6dp 둥근 막대 |
| HiNumber | 32dp 원 번호(문제·퀘스트) |
| HiTopBar · HiIconButton | 56dp 머리, 48dp 터치 |
| 숫자판 | 흰 칸 + 1dp 선(54dp), 음수·분수·소수점은 회색 칸, 확인은 주황. 키즈의 노란 막대·3D 칸 없앰 |
5. 화면
- 처음(목표 설정) — 로고(학사모) · 한 줄 약속 · 이름(선택) · 학년 세그먼트(고1~3) · 시작. 노비 낙하 이야기 없앰.
- 홈(플래너) — 날짜·학년 / D-day 카드(학년도·예정일·「수능 수학 범위 진도」) / 오늘(푼 문제·공부 시간·목표 별·연속) / 이어서 하기(과목 칩·단원·퀘스트·시작) / 과목 카드(색 점·수능 칩·정답률·진도·단원 칩) / 약한 유형 셋 / 도구(오답 노트·자유 연습·배지).
- 단원 — 과목·수능 범위 칩, 미션 문단, 진도 / 퀘스트 줄(번호·이름·「10문항 · 교육과정 단원」·★☆☆·🔒) / 마지막 「단원 평가 12문항」. 지킴이 이야기 화면 없앰.
- 문제(시험지) — ✕ · 진도 막대 · 「3 / 10」 · 🔊 / 번호 + 교육과정 단원 + 발문 / 그림 판(남색) / 보기 ①②③④ 줄(틀린 보기 취소선·✕, 정답 ✓ 초록) 또는 숫자판 / 아래 띠(✓ 맞음 · ! 도움말 · i 정답 + 해설 + 다음). 꽃가루 없음.
- 결과(점수표) — 정답률 큰 숫자·별·막대 / 맞힘·걸린 시간·문항당 시간 / 틀린 문제 → 오답 노트 안내 / 다음 퀘스트·다시 풀기·단원으로.
6. 수능 D-day 규칙(Planner)
- 학년은 3월에 바뀐다. 학년 g 의 수능 = 그 학년도 + (3 − g) 해 11월, 이미 지났으면 다음 해.
- 날짜: 평가원 발표 날(2025-11-13, 2026-11-19)은 표, 나머지는 11월 셋째 목요일(예정).
- 2027학년도 이전 수능(지금 고3)은 2015 개정 범위라 카드에 「이 앱은 2022 개정 기준」 을 적는다.
- 시험:
PlannerTest(날짜 왕복·요일·학년→학년도·진도·정답률·이어서 하기).
7. 아직 키즈 모양인 곳(다음)
자유 연습(계산·영단어)·부모님 화면·배지 화면·스플래시(남색 그대로 — 브랜드 순간이라 둠). 다크 모드.