N 트리거

N 트리거 룩앤필 가이드 v2 — 패밀리 규격으로 다시 (2026-10-06)

원본 docs/DESIGN-GUIDE-2026-10-06.md · 부품·화면 규칙은 v1(DESIGN-GUIDE.md)

지시(10/6, PASS 세션 경유): 「앱 전체 디자인 개선. 이실장톡·이실장뷰처럼 스플래시에 기획 의도를, 탭 화면 구성이 엉성하다, Nova 패밀리 가이드와 디자인 규격으로 완벽하게 다시, 깔끔하고 동적이게 — 시스템 앱이 아닌 앱답게. 화면이 바뀌어도 기능은 하나도 빠지면 안 되고, 원본 심층 분석 후 빠진 것까지.」

9/29 가이드(../DESIGN-GUIDE.md)의 부품 규칙(§4)·화면별 결함(§5)은 그대로 유효하다. 이 문서는 그 위에서 바꾸는 것만 적는다: ① 패밀리 토큰으로 갈아탄다(파랑·Wanted Sans → 주황·Pretendard) ② 스플래시 ③ 탭 화면 재구성 ④ 움직임 규칙 ⑤ 기능 보존 절차.

근거: 이실장뷰 CMP/docs/DESIGN-GUIDE-2026-09-29.md·LOOKANDFEEL-2026-09-11.md, 패밀리 토큰 cameraSdk/.../design/Eys*, 지금 화면 ScreenGallery 49장(10/6).

---

A. 진단 — 지금 「엉성하다」의 정체

#보이는 것원인
1주인공이 없다. 쉬는 동안 「00.000」 남은 시간, 「1970-01-01 00:00:00」 동기화 시각이 그대로 보인다. 돌고 있을 때도 카운트다운이 작고 「● 작동 중」 점 하나상태(쉼·걸림·발화 직전·발화)마다 화면이 같은 뼈대
2카드 속 카드 속 카드. 동작 탭이 바깥 카드 > 스위치 카드 > 줄 카드 3겹원본 CardView 중첩을 그대로 옮김
3빈 화면. 타이머 탭 아래 40%, 도구 탭 80% 가 비어 있다탭마다 카드 하나만
4「타이머 시작」이 모든 탭에. 도구·알람 탭에도 같은 크기 파란 막대원본 FAB 를 막대로 바꾸며 위치는 그대로
5정적이다. 아이콘은 고정 머티리얼, 탭 전환·상태 전환에 움직임 0, 스플래시 없음모션 규칙이 없다
6패밀리와 다른 얼굴. 파랑 강조·Wanted Sans·검은 바탕9/29 에 앱 단독으로 정함
7빈 입력칸 X·Y·시작 시간·간격 시간이 이름표만 달고 놓여 있다단위·예시가 없다

---

B. 원칙 — 이 앱의 다섯 줄

  1. 한 순간을 위한 앱이다. 화면의 주인공은 「목표 시각까지 남은 시간」이다. 다른 것은 모두 그 순간을 준비하는 조연이다.
  2. 시작은 한 곳에서. 「타이머 시작」은 타이머 탭에만 크게 둔다. 다른 탭에서는 걸려 있을 때만 위에 작은 상태 알약(「11:00:00까지 3:12」)이 뜨고, 누르면 타이머 탭으로 간다.
  3. 주황은 드물어야 보인다. 주 행동 1개, 선택 상태, 그리고 발화 직전 10초에만. (패밀리 §D-1 그대로)
  4. 움직임은 시간을 말한다. 초가 넘어가는 박동, 동기화가 맞춰지는 수렴, 발화의 파문 — 시간과 무관한 장식 움직임은 넣지 않는다.
  5. 짧게, 해요체. 캡션 16자 이하, 안내 1문장 40자 이하. 「—」 쓰지 않는다. (패밀리 §D-6)

---

C. 스플래시 — 「흩어진 초침이 한 순간으로」

의미. 선착순 신청, 쿠폰 오픈, 수강 신청, 게임 이벤트. 그 1초를 놓칠까 조마조마한 마음은 시계가 저마다 다르기 때문이다 — 내 폰, 사이트
서버, 표준시가 서로 수십~수백 ms 씩 어긋나 있다. N 트리거는 흩어진 시계들을 하나의 시각으로 맞추고, 그 순간 정확히 누른다.
→ 연출: 어긋나 흩어진 초침들이 → 한 점으로 모여 맞춰지고 → 맞춰진 그 순간 「딸깍」 누르는 파문이 퍼진다 → 이름이 남는다.
이실장톡(흩어진 조각이 모여 하나로)과 결이 같은 「모임」이지만, 모이는 것이 시간이고 끝이 누름이다.

C-1. 무엇으로 보일까

안모습판단
① 숫자 카운트다운 3·2·1큰 숫자가 줄어든다뜻은 직접이지만 흔하고, 1초를 넘게 써야 읽힌다
② 시계 바늘 하나가 12시로아날로그 시계「한 시계」일 뿐 「여러 시계를 맞춘다」가 없다
③ 흩어진 초침 다섯 → 12시에서 하나로 → 파문원 둘레의 짧은 막대 다섯이 서로 다른 각도에서 떨다가, 같은 박자로 돌아 12시에 겹치고, 겹친 순간 가운데서 주황 파문추천. 「어긋남 → 맞춤 → 누름」이 한 동작에 담긴다. 끝 상태가 마크 하나라 앱 아이콘과 이어진다

C-2. 재료·배치 (새 라이브러리 없음, Canvas 로 그림)

C-3. 타임라인 (총 1100ms, 최소 노출 1300ms)

t(ms)초침원·점파문·글자이징
0다섯이 각자 각도(12시 기준 −140°·−70°·+35°·+110°·+170°), α0→1(0→150)원 α0—Linear
0→420 어긋남각자 다른 속도로 시계 방향 회전(초당 0.8~1.4바퀴), 끝이 ±1.5° 떨림(서버 지터)원 α0→1—Linear
420→700 맞춤모두 12시로 수렴. 늦은 것은 빨라지고 앞선 것은 느려져 700ms 에 정확히 겹친다——CubicBezier(0.16,1,0.3,1)
700 딸깍겹친 초침이 1프레임 주황으로(넷이 하나로)중심점 s 0→1.2→1.0(120ms)파문 시작 · 가벼운 햅틱 1회(Android CONFIRM, iOS .light)FastOutSlowIn
700→980초침 하나(주황)만 남고 나머지 α→0원 α1→0.4파문 반지름 0→72dp, α0.6→0LinearOutSlowIn
760→1100이름 α0→1·y +8→0, 소개 α0→1(860부터)FastOutSlowIn
1100→1300정지—

C-4. 소개 문구

후보글자 수판단
「그 순간, 정확하게」9추천. 연출(맞춤→누름)을 한 줄로 닫는다. 짧아서 240ms 안에 읽힌다
「1초도 놓치지 않게」9걱정을 바로 덜어 주지만 「놓친다」는 낱말이 첫 화면에 남는다
「흩어진 시간을 하나로」10연출 설명이다. 앱이 하는 일(누름)이 빠진다

완료 판정(녹화, Android·iOS): ① 300ms 프레임에 초침 다섯이 서로 다른 각도 ② 700ms 프레임에 하나로 겹치고 주황 ③ 850ms 프레임에 파문 원 ④ 1100ms 이후 마크 + 「N 트리거」 + 소개 ⑤ 모션 줄이기 켜면 ①~③ 없음.

---

D. 토큰 — 패밀리로 갈아탄다 (nova-design)

이름은 그대로(NovaTheme.colors.accent 등), 값만 패밀리로. 부르는 쪽 수백 곳을 건드리지 않는다.

D-1. 색

역할밝은 판어두운 판비고
background#F4F5F6 Gray50#1A1B1D Gray900페이지
surface (카드)#FFFFFF#2E3033 Gray800카드는 테두리·그림자 없음
surfaceSunken (입력칸·인용)#F4F5F6#45484C Gray700회색 상자는 입력칸에만
accent (주 행동 면·선택)#FF7B00#FF7B00기본 단추 흰 글자 on 주황(패밀리 결정 9/29)
accentText (주황 글자·아이콘)#C45A00#FFAC4D Primary300흰 바탕 주황 글자는 #FF7B00 금지(2.60:1)
accentSoft (선택 칩·아이콘 상자)#FFF4E5#45300F(Primary 15% on Gray900)
textPrimary / Secondary / Tertiary#1A1B1D / #45484C / #5F6368#FFFFFF / #D1D3D5 / #96999D#7A7E82 는 글자에 안 쓴다
danger / success / info#B30A28 / #0B7A3B / #125AC0 (바탕 #FFEBEF/#E8F7EE/#E8F1FF)#FF6B81 / #4FD889 / #6AA8FF
divider#E8E9EA#45484C

D-2. 활자 — Pretendard

Nova 역할패밀리크기/줄높이쓰임
displayDisplayEb244/61.6 ExtraBold, tabular큰 시계·카운트다운
titleLargeTitleB324/33.6 Bold탭 제목(큰 제목)
titleHeadingSb218/25.2 SemiBold바 제목·카드 제목
subtitleHeadingSb316/22.4 SemiBold줄 제목
bodyBodyR214/22.4본문
captionBodyR313/20.8보조
labelCaptionSb312/16.8 SemiBold칩·배지
numericBodySb2 tabular14서버 시각·ms

D-3. 모양·간격

---

E. 움직임 규칙 (「동적이게」의 사양)

자리움직임값
초 박동큰 시계의 초 자리가 바뀔 때 새 숫자가 아래에서 8dp 올라오며 α0→1160ms FastOutSlowIn. 밀리초 자리는 움직이지 않는다(눈이 피곤)
동기화 수렴기준 시계를 다시 잴 때 오프셋 숫자가 옛 값→새 값으로 굴러간다(숫자 롤링) + 서버 줄 왼쪽 점이 회색→초록400ms
걸림「타이머 시작」을 누르면 단추가 줄어들며 카운트다운 히어로로 모양 전환(shared bounds)350ms
발화 10초 전카운트다운 글자 accent 로, 히어로 테두리 2dp 주황이 초마다 α 0.4↔1 박동1초 주기
발화히어로 가운데서 주황 파문 1회(스플래시와 같은 모양) + 햅틱 1회600ms
탭 전환내용 α0→1·x 12dp→0, 탭 아이콘은 Lottie 한 바퀴(F-1)220ms
목록 줄 추가·삭제animateItem()기본
시트·편집기아래에서 올라옴(시스템 기본) — 따로 만들지 않는다
Lottie움직임(1.2초)
타이머(탭)시계 초침이 한 바퀴 돌고 12시에서 멈춤
동작(탭)손가락이 눌리며 파문 하나
알람(탭)종이 좌우로 세 번 흔들림
서비스(탭)톱니 반 바퀴
도구(탭)렌치가 한 번 돌아감
빈 상태(매크로·알람)점선 원 위로 + 가 내려앉음

---

F. 탭별 처방

공통 뼈대: 큰 제목(24sp) + Lottie 아이콘 한 줄 → 섹션 머리(label 12sp textTertiary, 위 24 / 아래 8) → 흰 카드(R16, 겹치지 않음) → 하단 고정 행동(타이머 탭만).
걸려 있으면 모든 탭 제목 오른쪽에 상태 알약(accentSoft 바탕, accentText 「3:12 남음」, 누르면 타이머 탭).

F-1. 타이머 탭 — 상태 넷, 화면 넷

상태히어로(위 40%)아래
쉼(목표 없음)지금 시각 큰 시계(display) + 기준 알약 「KRISS 기준 ▾」 + 오프셋 「+3ms」「목표 시각」 카드: 빈 상태 「언제 누를까요?」 + 「시각 정하기」 보조 단추. 「00.000」·「1970-01-01」 같은 기본값 글자는 절대 보이지 않는다(동기화 전이면 「맞추는 중…」 스켈레톤)
준비(목표 있음, 안 걸림)위와 같음목표 카드: 「11:00:00」 titleLarge + 날짜 + 「지금부터 3분 12초 뒤」 + 기본 칩(CGV·메가박스·롯데시네마·직접)
걸림카운트다운이 히어로가 된다: 남은 시간 display + 둥근 진행 고리(목표까지 비율) + 「11:00:00 KRISS 기준」목표 카드는 접힌 한 줄, 하단 단추 「멈추기」(보조, danger 글자)
발화(0~3초)파문 + 「눌렀어요」/「못 눌렀어요(접근성 꺼짐)」 결과 한 줄결과 카드: 시작 클릭 N개·매크로 실행 여부

F-2. 동작 탭 — 카드 1겹

F-3. 알람 탭

F-4. 서비스 탭(안드로이드·PC)

F-5. 도구 탭 — 빈 화면 없애기

F-6. 탭 바

---

G. 하위 화면(편집기·설정·대화상자) — 10/6 화면별로 다시 봄

9/29 §4·§5 의 부품·화면 규칙은 그대로(전체 화면 편집기·시트·대화상자). 토큰(D)이 바뀌면서 대부분 패밀리 얼굴이 됐다.
10/6 갤러리(30-step-list-alone 등)로 화면마다 다시 보고 아래만 손본다.

화면지금처방상태
매크로 목록(10)이름·단계 수·스위치·⋮, 아래 「매크로 추가」+「실행」그대로. 빈 상태는 탭 Lottie 와 같은 그림유지
단계 목록·스튜디오(12·30)유형 아이콘이 옛 파랑·아쿠아·코랄유형 색 = 패밀리 네 무리: 누르기 파랑(#125AC0/#1F82F8) · 판정 초록·민트(#0B7A3B/#1C7F8A) · 기다림 주황 글자(#C45A00) · 멈춤 위험(#B30A28). 밝은 판 700 톤(아이콘 3:1), 어두운 판 밝은 톤. 줄의 ↑ ↓ 는 원본에 있는 단추(timer_panel_macro_steps.xml)라 자리 유지적용
단계 편집기(13)섹션 머리·도움말 ⓘ·세그먼트그대로(색·글꼴만)유지
알람 편집(14)소리·진동·스누즈·알림 옵션그대로. 화면 켜기 조건은 알람 탭 줄에 보인다(F-3)유지
서버 편집·추가(15·16)이름·주소·모바일 주소그대로유지
앱 설정(31)카드 넷(계정·화면·성능·백업)그대로. 제목 속 「—」는 문구 정리(아래)에서유지
고급 설정(32)NTP·HTTP·표본 설정그대로. 기준 NTP 고르기는 「NTP 오프셋」 → 「기준 서버」(원본과 같은 자리)유지
첫 안내·권한 판(20·21)대화상자그대로. 도구 탭 「권한 점검」에서도 열린다적용
확인 창(18·27·28)파괴 동작은 위험 면 단추그대로. 대화상자 단추 48·R8유지

H. 기능 보존 — 「화면이 바뀌어도 기능은 하나도 빠지지 않는다」

  1. 위젯 전수표를 먼저 만든다: 원본 timer_activity_main.xml 등 레이아웃의 id → 리스너 → 이식본 자리(메모리 layout-widget-census-finds-dead-ui). 9/21 의 93개 표를 10/6 기준으로 다시 맞춘다.
  2. 화면을 옮길 때마다 그 표의 행을 새 자리로 다시 적는다. 자리가 없어진 행 = 결함.
  3. 원본 심층 대조(빠진 것): 매크로 편집기·스튜디오·알람·서비스·백업까지 원본 문자열·설정 키 전수 대조(cmp-port-gap-audit-method, layout-hardcoded-text-escapes-audit).
  4. 각 단계 끝에 시험 4,446 초록 + 에뮬 실클릭 + iOS 시뮬 훑개(sweep.py) + 갤러리 전·후 그림.

---

I. 구현 순서와 완료 판정

순위일감보여야 할 것
1토큰 갈아타기(D) + Pretendard갤러리 49장 전·후. 파랑 0, Wanted Sans 0. 시험 초록
2스플래시(C)C 판정 ①~⑤, 안드·iOS 녹화
3타이머 탭 상태 넷(F-1) + 움직임(E 상위 넷)쉼·준비·걸림·발화 4장, 「00.000」「1970」 0
4탭 공통 뼈대 + 동작·알람·서비스·도구(F-2~5) + 시작 단추 한 곳카드 겹침 0, 빈 화면 40% 이상 0
5Lottie(E 표) + 탭 바(F-6)탭 누를 때 한 바퀴, 정지 프레임 = 아이콘
6편집기·대화상자 색·글꼴(G)갤러리 30장
7기능 전수표·원본 대조(H)표의 모든 행에 새 자리, 빠진 기능 목록 0

정한 것(추천안으로 진행, 9/29 지시 「최적의 안으로」): 패밀리 토큰 채택 · 기본 단추 흰 글자 on #FF7B00 · Pretendard · 해요체 · 스플래시 ③안 + 「그 순간, 정확하게」 · 시작 단추는 타이머 탭에만 · 테마 설정(시스템·밝게·어둡게) 유지.