N 키N 키 디자인 가이드 — 2026-10-22
원본 docs/DESIGN-GUIDE-2026-10-22.md
주제는 「금고 다이얼」. 짙은 남색 바탕 위에서 눈금 고리가 천천히 돌고, 가운데 주황 원판에 열쇠 구멍. 화려함은 움직임(다이얼·글자 풀림·점수 고리)에서 내고, 색은 절제한다.
1. 색(ui/theme/KeyTheme.kt)
| 이름 | 어둡게 | 밝게 | 쓰는 곳 |
|---|---|---|---|
| bg | #070A12 | #F3F5FA | 바탕(스플래시·창 바탕과 같다) |
| surface / 2 / 3 | #0D1220 / #141A2B / #1C2338 | #FFF / #EEF1F7 / #E3E7F0 | 카드·칸·누른 판 |
| accent | #FF7B00 | #F07300 | 주 행동·열쇠 원판·선택 — 드물게 |
| safe | #2EE6B6 | #0FA982 | 강함·유출 없음 |
| warn | #FFB020 | #C98200 | 보통·오래됨 |
| danger | #FF4D6A | #E02B4C | 약함·유출·지우기 |
| reuse | #A78BFF | #6A4FE0 | 다시 쓴 비밀번호 |
| info | #4CC4FF | #0C8FD6 | 숫자 글자·유출 점검 |
점검의 네 갈래는 색만으로 갈린다: 유출(빨강)·약함(빨강~호박)·재사용(보라)·오래됨(호박).
2. 글자
Pretendard(노바 디자인). 비밀번호는 고정폭(Key.type.mono)으로, 글자 종류별 색 — 글자 흰빛, 숫자 하늘, 기호 주황. 숫자는 모두 tnum.
3. 부품
- 금고 다이얼(
VaultDial): 눈금 고리 셋(72·48·24칸)이 서로 다른 빠르기·방향으로 돈다. 열쇠 만드는 중이면 4배 빨라지고 바깥에 빛 호. 만들기 화면에선 바깥 호가 마스터 비밀번호 강도만큼 찬다. 틀리면 좌우로 흔들림. - 강도 막대: 다섯 칸이 차례로 차고 이름·깨는 시간·비트. 강함 이상이면 경고 줄을 숨긴다.
- 점수 고리: 270° 호, 빨강 → 호박 → 민트 그라데이션, 끝에 숨 쉬는 빛 점, 가운데 숫자.
- 글자 풀림(
ColoredPassword): 새 비밀번호가 무작위 글자에서 왼쪽부터 자리 잡는다(0.34초). - 항목 얼굴: 사이트(등록 도메인)로 고른 색 여덟 가지의 둥근 네모 + 이름 첫 글자, 로그인이 아니면 종류 기호.
- 기호(
Glyphs.kt): 금고·열쇠·방패·톱니·지구·카드·메모·와이파이·신분증·별·자물쇠·폴더 — 24 격자 1.8 선.
4. 배치
840dp 이상: 왼쪽 메뉴 줄(232dp, 점검 문제 수 빨간 숫자, 아래 잠그기) + 목록(380dp) + 자세히. 휴대폰: 위 제목·자물쇠, 아래 탭 넷. 더하기 단추를 누르면 종류 다섯이 펼쳐진다.
5. 움직임
움직임 줄이기(앱 설정·iOS 접근성)면 다이얼·빛 점의 끝없는 움직임을 만들지 않고 글자 풀림을 건너뛴다.
6. 아이콘·스플래시
아이콘(scripts/make_icon.py): 주황 그라데이션 + 흰 다이얼 + 주황 눈금 12(3의 배수는 길게) + 주황 열쇠 구멍. 스플래시: 바깥에 흩어져 돌던 눈금 12개가 고리 자리로 모여 멈추고(딸깍 촉감), 주황 원판이 차오른 뒤 열쇠 구멍이 열린다 — 마지막 장면이 아이콘(drawSplash(1f)).
7. 문구
해요체, 줄표 금지, 짧게. 「잊으면 되찾을 수 없어요」처럼 위험은 분명하게(굵게).