N 틴N 틴 디자인 가이드 — 2026-10-12
노바 틴 디자인 가이드 · 2026-10-12
N 키즈·N 주니어 디자인 가이드를 바탕으로 한다. 달라진 점: 바탕 #0D0F1A → #171B33 → #262D52(짙은 남흑), 강조 청록 #14B8A6, 숫자판에 음수·분수·소수 칸, 좌표평면 그림, 대사는 한 줄.
코드 정본: ui/theme/KidsTheme.kt(색·글자), ui/theme/Motion.kt(움직임), ui/components/*(부품).
1. 원칙
- 밤하늘과 별 — 바탕은 이야기의 밤하늘(
Kid.sky), 아이가 모은 별이 하늘에 켜진다. 행성 화면은 행성 색 그라데이션. - 손가락 크기 — 주요 단추 높이 64dp, 숫자판 칸 54~58dp, 보기 칸 82~128dp, 둥근 아이콘 52dp. 7세 손끝(약 10mm)의 1.5배.
- 자판을 띄우지 않는다 — 숫자판·글자 조각. 시스템 자판은 부모 화면(이름·수동 숫자)에서만.
- 들려준다 — 문제는 읽어 주고(설정에서 끔), 영어는 늘 소리. 🔊 는 오른쪽 위 같은 자리.
- 색만으로 말하지 않는다 — 맞음 ✓·초록 테, 틀림 흔들기·도움 그림, 소리·진동이 함께.
- 움직임 = 개념 — 장식 움직임보다 「모인다·날아간다·묶인다·나눠 담긴다」.
- 꾸중 없음 — 문구는 해요체·칭찬·격려. 「—」 쓰지 않는다.
2. 색(Kid)
| 이름 | 값 | 쓰임 |
|---|---|---|
| skyTop / skyMid / skyBottom | #140F3D / #2B2178 / #4B3BB0 | 바탕 하늘(위→아래) |
| starGold / starDeep | #FFD54A / #FFA000 | 별·빈칸 상자·글자 조각 |
| primary / primaryDeep | #FF7B00 / #D95F00 | 패밀리 주황 — 시작·확인·다음 |
| good / goodSoft | #22B573 / #DDF7EA | 정답 |
| retry / retrySoft | #FF6B6B / #FFE3E3 | 틀림·오답 노트(빨강이 아니라 산호색) |
| violet | #7C5CFF | 고른 것·입력 칸 테두리 |
| sky2 | #3FA9F5 | 소리·다시 하기 |
| ink / inkSoft | #231B4D / #5B5480 | 글자(흰 카드 위 대비 15:1) |
| card / cardSoft / line | #FFFFFF / #F4F1FF / #E2DDF5 | 카드·부모 화면 종이·선 |
행성 색은 World.colors(위·아래 두 색).
3. 글자
Pretendard(노바 디자인 모듈). display 40 · title 26 · heading 21 · question 22(문제 문구, 1학년 기준) · body 17 · caption 14(이보다 작게 쓰지 않는다) · number 34(식·숫자판).
4. 움직임(Motion.kt)
- 프레임 시각으로 그린다:
rememberFrameClock()·frameTween·rememberEntrance·animateByFrames. 사내 시험 기기와 대표님 폰의 애니메이터 배율이 0 이라 Compose 기본 애니메이션은 멈춘다(이실장뷰 교훈). 값은 그리기 단계(graphicsLayer {})에서만 읽어 매 프레임 다시 짜지 않는다. - 곡선: 들어오기
backOut(살짝 튀어나옴), 떨어지기bounceOut, 이동inOut/out. - 길이: 단추 눌림 70ms, 들어오기 360~520ms, 그림 차례 등장 90~150ms 간격, 정답 뒤 다음 문제 1.2s, 꽃가루 1.6s.
- 움직임 줄이기(부모 설정): 끝없는 움직임을 멈추고 들어오기는 곧장 끝 장면.
5. 부품
| 부품 | 파일 | 메모 |
|---|---|---|
| 노비(마스코트) | Mascot.kt | 캔버스로 그린 둥근 별. 표정 Idle·Happy·Cheer·Think·Oops·Sleep. 3.7초마다 깜빡. 슬픈 얼굴 없음 |
| 통통 단추 | Kit.kt KidButton/KidSurfaceButton | 아래 두께 5dp, 누르면 내려앉음 + 톡 진동 |
| 밤하늘 | SkyBackground | 잔별 70 + 모은 별(금색, 최대 120) |
| 꽃가루 | Confetti | 별·네모 46개, 정답·끝 |
| 살아 있는 이모지 | LiveEmoji | 톡 등장 + 둥실/흔들/숨쉬기, 위상 어긋남 |
| 말풍선 | SpeechBubble | 한 글자씩 써짐(자리는 미리 잡음) |
| 숫자판·답 칸 | Pads.kt | 1~9·지우기·0·확인(다음/채점) |
| 글자 조각 | LetterBoard | 낱말 글자 + 헷갈리는 글자 2~3 |
| 문제 그림 | QuestionVisuals.kt | 1-3 PRD 3-2 의 움직임 |
| 시계 | ClockFace | 1~12 숫자(3·6·9·12 주황), 바늘이 12시에서 돌아옴 |
6. 화면
스플래시(숫자·글자가 별로 모여 웃음 = 앱 아이콘) → 처음 만남(노비 떨어짐·세 마디·이름/학년) → 홈(별빛 지도) → 행성(지킴이 이야기 → 돌다리 길) → 문제 → 결과(별) / 자유 연습(계산 연습·영단어 연습) / 오답 노트 / 스티커 / 부모님(밤하늘 띠 + 밝은 종이).
폭이 넓은 가로 화면(태블릿)에서는 문제·계산 표와 답 칸을 좌우로 나눈다(maxWidth > maxHeight && > 640dp).
7. 아이콘
패밀리 규칙(_nova-brand/ICON-SYSTEM.md): 주황 그라데이션 + 흰 둥근 별(노비) + 주황 얼굴(눈·미소). tools/make_icon.py 가 안드로이드 전경·단색·밀도별 PNG·iOS 1024·_nova-brand/out/kids.svg 를 만든다. 단색 아이콘은 얼굴을 뚫는다.
8. 그림 — Fluent 3D (10/12 오후)
대표님 「이미지들이 프로페셔널하지 않다」 → 기기 이모지(안드로이드·삼성·iOS 마다 다른 그림)를 Microsoft Fluent Emoji 3D(MIT) 한 벌로 바꿨다.
- 코드는 여전히 이모지 글자로 부르고,
ui/components/Art.kt Emoji()가FLUENT_ART표(생성 파일EmojiArt.kt)에서 그림을 찾아 그린다. 없으면 글자. - 만들기:
python3 tools/fluent_art.py <작업 폴더>— 코드의 이모지를 모아 192px WebP(225개, 1.8MB)로 받는다. 새 이모지를 쓰면 다시 돌린다. - 출처 문구는 부모님 화면 바닥과 홈페이지 바닥에 둔다.