N 셈N 셈 — 디자인 가이드 (2026-10-16)
원본 docs/DESIGN-GUIDE-2026-10-16.md
노바 패밀리 디자인(nova-design)을 바탕으로, 「화려·동적·세련 + 빠른 손놀림」을 이 앱의 원칙으로 둔다.
1. 원칙
- 찾는 시간이 가장 큰 불편 — 홈 맨 위는 검색, 초성·사람 말(복비·N빵)로 찾는다. 즐겨찾기·최근이 그다음.
- 결과가 위 — 계산 화면은 결과 카드가 맨 위, 입력이 아래. 자판이 올라와도 결과가 보인다.
- 계산 단추 없음 — 칸을 바꾸는 순간 다시 셈. 숫자는 굴러가듯 바뀐다(520ms).
- 움직임은 뜻이 있을 때만 — 들어올 때(화면 미끄러짐·목록이 바뀔 때 타일 자리 이동), 바뀔 때(숫자·막대 — 처음부터 제 값으로 보이고 바뀔 때만 움직인다), 누를 때(눌림 0.96). 머리 빛만 끝없이 천천히(9초).
- 글자에 주황 금지(노바 규칙) — 강조 글자는 파랑, 주황은 면(주 단추·「=」·선택 탭·아이콘)에만.
2. 아이콘·스플래시
- 아이콘(
_nova-brand/glyphs.pysum_parts()): 주황 그라데이션 + 흰 계산기(화면 칸·자판 여덟 칸은 뚫음) + 오른쪽 아래 흰 자판 위 주황 「=」 하나. 「계산의 끝은 =」. - 스플래시(
ui/Splash.kt): 흩어져 떠도는 자판 아홉 개(마지막 하나만 주황) → 계산기 자리로 모여 끼워짐(380→700ms) → 「=」 이 위에서 눌리며 「딸깍」(햅틱·파문) → 아이콘 → 「N 셈」 + 「세상의 계산기를 한곳에」. 프레임 시각으로 재서 애니메이션 배율 0 에서도 돈다. - 앱 머리 워드마크는 스플래시 마지막 장면을 작게(
AppMark).
3. 분류 빛
| 분류 | 빛(왼쪽 위 → 오른쪽 아래) |
|---|---|
| 기본 | #FF9A3D → #E86C00 (노바 주황) |
| 생활 | #FF7A9A → #E0457B |
| 금융 | #2FD3A2 → #0E9F7E |
| 급여 | #5B9DFF → #2F6FE0 |
| 부동산 | #9B7BFF → #6A4CE0 |
| 건강 | #FF6B6B → #D93A4A |
| 단위 | #3CC8E8 → #1592B8 |
| 학습 | #FFC542 → #E09A12 |
타일 아이콘 칸·결과 카드·분류 칩(선택 시)·섹션 머리 막대에 쓴다. 결과가 「주의」면 주황, 「위험」이면 빨강 그라데이션으로 바뀐다.
4. 화면
| 화면 | 짜임 |
|---|---|
| 홈 | 먹색 머리 카드(움직이는 주황·보라 빛, 워드마크, 「무엇을 계산할까요?」, 검색) → 즐겨찾기/최근(없으면 많이 쓰는 것) 가로 띠 → 분류 칩 → 분류별 2열 타일 |
| 타일 | 흰 카드 22dp 둥글기, 분류 빛 아이콘 42dp, 제목·두 줄 요약, ☆(길게 눌러도 즐겨찾기), 처음부터 보이고 목록이 바뀔 때만 움직임 |
| 계산 | 머리(뒤로·아이콘·제목·☆·공유) → 결과 카드(굴러가는 숫자·복사) → 비율 막대(바뀔 때 미끄러짐) → 결과 줄(누르면 그 줄 복사) → 입력 카드(기준 배지·처음 값으로) → 표(12줄 + 전체 보기) → ※ 안내 → 근거 법령(법제처 링크) → 같은 분류 더 보기 |
| 계산기 탭 | 위: 공학/DEG·기록 단추, 식(쉼표·띄움), 미리 값(파랑 — 글자에 주황 금지) / 「=」 뒤엔 큰 값 · 아래: 공학 세 줄(펼침) + 4×5 자판. 「=」 은 주황 그라데이션, 연산자는 주황 옅은 면 + 먹색 기호, AC 는 빨강 옅은 면. 누르면 0.92 로 눌리고 가벼운 햅틱 |
| 아래 탭 | 홈·계산기·즐겨찾기·설정, 선택은 주황 옅은 알약 + 아이콘 spring |
5. 입력 칸
- 돈: 숫자 자판, 쉼표 자동, 오른쪽 맞춤 큰 글씨, 아래 파랑 한글 금액, 「+1만 … +1억」 알약, 「지우기」
- 수: 숫자(소수) 자판 + 단위 글자
- 고르기: 알약 줄(선택 먹색, 어두운 화면에선 밝게 뒤집힘)
- 날짜: 2026-10-16 꼴 + 요일 한 글자, 「오늘·−1일·+1일·+1달·+1년」
- 초점이 오면 테두리 2dp 주황, 잘못 읽히면 빨강
6. 색·밝기
ui/Kit.kt UiColors — 노바 밝은·어두운 값, 기기 설정을 따른다. 먹색 카드(Gray900+Gray0)는 어두운 화면에서 뒤집힌다.