290 lines
17 KiB
Markdown
290 lines
17 KiB
Markdown
# 디자인 토큰 — FANUZU
|
||
|
||
> 위치: `design/design-tokens.md` · 계약: 디자인 kit CONTRACT §6
|
||
> 색·타이포·간격·반경·사이징은 **토큰으로만** 참조한다(브리프에 raw hex/px 하드코딩 금지).
|
||
> `web-*`(Shadcn)은 고객 web + 관리자 admin 공용, `color-*`(MD3)은 네이티브 app surface용.
|
||
|
||
## 컬러 시드 선정 근거
|
||
- 입력 시드: `#FF85D9`
|
||
- 근거: 발주사가 인수 자산으로 제공한 데모(`고객사 준비 데모/FANUZU_landing_page.tsx`)의 로고 SVG에
|
||
실제로 쓰인 브랜드 핑크다. 새 색을 발명하는 대신 이미 존재하는 브랜드 자산에서 시드를 가져와
|
||
로고·앱아이콘·UI가 하나의 브랜드로 읽히게 했다.
|
||
- 가독성 보정(라이트 한정): `#ff85d9` → **`#ac5992`**. 흰 배경에 얹을 때만 필요한 보정이다.
|
||
**2026-08-02 전 surface를 코스믹 다크로 통일하면서 화면에서는 원 시드 `#FF85D9` 를 그대로 쓴다** —
|
||
검정 배경 위 대비가 **9.61:1** 로 보정 없이 AA를 넘긴다. `#ac5992` 는 라이트 대체 경로용으로만 남긴다.
|
||
색을 깎을 필요가 없어진 덕에 인수 데모의 네온 채도가 살아났다.
|
||
- 세컨더리 민트 `#C1FFED` 도 같은 데모 로고(아이싱)에서 왔다. 성장·회복 지표(행성 성장률·방어 회복량)
|
||
한 곳에만 쓰고 그 외에는 쓰지 않는다.
|
||
|
||
## 로고 결정
|
||
- 발주사 공식 자산 `고객사 준비 데모/LOGO/fanuzu logo only.png`를 수령했고, PNG의 알파 채널도 확인했다.
|
||
- 시안은 이 공식 심볼을 `시안/assets/logo.png`에 반영했다. 공식 앱 아이콘 원천도 같은 심볼이며
|
||
`app/assets/brand/app-icon.png`와 `app/assets/brand/app-icon-foreground.png`에 반영돼 있다.
|
||
- 따라서 현재 로고는 AI 생성 제안본이나 임시 Fancake 브랜드가 아니다. 별도 제안 로고 승인 대기도 없다.
|
||
- **서비스명은 `FANUZU`, 국문 병행 표기는 `팬우주`로 확정됐다.** 발주사 공식 검토 회신서의
|
||
표지 지시에 따라 종전 CD-01(`Fancake` 확정)은 철회·대체했다(W-01).
|
||
|
||
## 디자인 언어 — 「포카 온 스테이지」 (2026-08-17 전면 재설계)
|
||
- 은유: **암전한 공연장(꺼진 LED 전광판) 위에 놓인 실물 팬 굿즈.** 종전 코스믹(성운·별밭·유리·발광)
|
||
언어를 전면 폐기했다 — "검정 + 네온 + 글래스"는 AI 다크 템플릿의 전형이었고, mobbin 리서치 결과
|
||
K-POP 팬덤이 실제로 열광하는 건 분위기가 아니라 **물성**(포토카드·홀로 포일·전광판·다이컷 스티커)이다.
|
||
- 리서치 근거(mobbin MCP, 2026-08-17): Weverse 팬레터의 Y2K 팬시 물성 / Alan 의 홀로그램 수집품 리빌 /
|
||
Tolan 의 LED 도트 전광판 무대 / Lapse 의 순흑+앰버 tabular 카운트다운 / TikTok LIVE 랭킹 문법.
|
||
- 4대 재료: ① 캔버스 = 중성 콜드 블랙 + 26px LED 도트 그리드 ② 콘텐츠 = **불투명 순백 포토카드**
|
||
(다크 프레임 안의 라이트 아일랜드) ③ 프리미엄 = **홀로 포일**(`--foil`, 2px 라인·노브 전용)
|
||
④ 숫자 신호 = **전광판 앰버**(`color-gold`, 카운트다운·재화 스코어 전용).
|
||
|
||
## 컬러 운용 규율 (60-30-10)
|
||
- 60 암전 블랙 캔버스 · 30 흰 포토카드 면 · **10 공식 로고 핑크**(행동·선택·포커스 전용).
|
||
- 프레임 위 주 버튼 = 핑크 필, **포토카드 안 주 버튼 = 잉크 스탬프 필**(#201826) — 흰 면에 흰 필 금지.
|
||
- 앰버는 색이 아니라 **신호**다: 대표 지표·재화 잔액·카운트다운 숫자에만. 장식 사용 금지.
|
||
- 홀로 포일은 면에 풀지 않는다 — 2px 라인(모달 상단 박·KPI 모서리·섹션 바·아이브로 틱)과
|
||
부스터 노브까지만. 시안·에메랄드·마젠타는 상태 의미(실시간·온에어·이클립스) 전용, **글로우는
|
||
온에어 도트 한 곳뿐**(`--glow-live`).
|
||
|
||
## 서피스 전략 — 왜 두 벌인가
|
||
| surface | 기본 서피스 | 근거 |
|
||
|---|---|---|
|
||
| app (네이티브) | **LED 스테이지**(콜드 블랙 `#0A0A0E` + 도트 그리드 + 상단 핑크 스포트라이트), 콘텐츠는 흰 포토카드 | 화면 자체가 공연장 전광판이라는 은유. 굿즈(카드·스티커 행성)가 주인공이 되려면 바닥이 무채색이어야 한다. |
|
||
| web (마케팅·사전예약) | LED 스테이지 동일 | 랜딩에서 앱으로 넘어갈 때 브랜드가 끊기지 않게 같은 캔버스를 쓴다. |
|
||
| admin (운영 콘솔) | 그라파이트 콘솔 (도트 더 옅게·스포트라이트 제외·굿즈 연출 제외) | 색면이 표·수치와 경쟁하지 않게. 포토카드 반전도 admin 에는 적용하지 않는다 — 데이터가 주인공. |
|
||
|
||
> 세 surface 모두 다크로 통일한 이유는 `아트디렉션-예외.md` 에 적었다. PRD-13 「Non-Verbal
|
||
> Cinematic UI」가 계약 요건이다. 2026-08-17 재설계는 다크 시네마틱을 유지하되 표현을
|
||
> "분위기(성운·발광)"에서 "물성(굿즈)"으로 옮긴 것이다.
|
||
|
||
## 타이포 — 디스플레이 페어링
|
||
- 본문·UI: **Pretendard Variable** (한글 가독성) 고정.
|
||
- 디스플레이(제목): **Gmarket Sans** — 타입 디렉션 `geometric`.
|
||
- 근거: 팬덤 서비스의 제목은 또렷하고 젊은 기하학적 인상이 맞고, 국내 사용자에게 익숙한 리테일·커머스
|
||
톤(배달의민족·올리브영 계열)과 붙는다. 제목과 본문이 모두 Pretendard이면 모든 화면이 똑같아진다.
|
||
- 숫자(POP·FPI·달성률·표)는 `type-mono-num` 으로 tabular 고정 — 실시간으로 값이 바뀌는 화면에서
|
||
자릿수가 흔들리지 않아야 한다.
|
||
|
||
## 사용 규칙
|
||
- 앱 터치 타깃 `touch-min-app` 48 이상, 웹 클릭 타깃 `touch-min-web` 36 이상.
|
||
- 여백은 `space-*` 스케일에서만 고른다(임의값 금지). 섹션은 크게, 요소는 작게.
|
||
- 깊이는 `elev-border`(헤어라인)가 1순위. 떠 있는 요소만 `elev-1~3`.
|
||
- 오버레이 순서는 `z-*` 토큰을 따른다.
|
||
|
||
# ℹ primary 가독성 보정(라이트 면 한정): 로고 핑크 #ff98d7 → 딥핑크 #b93074 (흰 면 위 대비 5.6:1 · AA)
|
||
# ℹ 타입 디렉션: geometric — 디스플레이='Gmarket Sans' / 본문=Pretendard (예: 배달의민족 · 쿠팡 · 올리브영). 다른 디렉션: neutral, editorial, technical, warm
|
||
<!-- TOKENS --> <!-- seed=#ff98d7(공식 로고 실측) → 라이트 primary=#b93074(가독성 보정) · 타입 디렉션=geometric · 2026-08-17 「포카 온 스테이지」 재설계 -->
|
||
```yaml
|
||
colors:
|
||
# --- app (MD3 라이트 대체 경로) ---
|
||
color-primary: "#b93074"
|
||
color-on-primary: "#ffffff"
|
||
color-primary-container: "#ffe3f3"
|
||
color-on-primary-container: "#8a2e62"
|
||
color-surface: "#faf7f9"
|
||
color-surface-container: "#f0eaee"
|
||
color-on-surface: "#201826"
|
||
color-on-surface-variant: "#55495a"
|
||
color-outline: "#7d7383"
|
||
color-error: "#c53030"
|
||
color-on-error: "#ffffff"
|
||
# --- web (Shadcn) · 고객 web + 관리자 admin 공용 · 포토카드(라이트 아일랜드)의 기본값 ---
|
||
web-background: "#ffffff"
|
||
web-foreground: "#201826"
|
||
web-primary: "#b93074"
|
||
web-primary-foreground: "#ffffff"
|
||
web-muted: "#f6f0f4"
|
||
web-muted-foreground: "#6e6878"
|
||
web-border: "#e9e2e8"
|
||
# --- 코스믹 서피스 · 발주사 Figma 실측 (2026-09-02, figma-cli 로 03_Wireframe 1차 6화면 집계) ---
|
||
# 공통 기준 2항: Figma 가 화면·UI·디자인의 기준이다. 종전 「포카 온 스테이지」 자체 재설계값은
|
||
# 기준 제외 산출물에서 온 것이라 폐기하고 시안이 실제로 쓰는 값으로 바꾼다.
|
||
# 시안은 남색 기운이 없는 중립 회색 계열이다 — 화면 #141414 · 시트 #101010 · 카드 #1a1a1c.
|
||
color-cosmic-void: "#141414"
|
||
color-cosmic-surface: "#101010"
|
||
color-cosmic-surface-container: "#1A1A1C"
|
||
color-cosmic-surface-raised: "#232324"
|
||
color-on-cosmic: "#FFFFFF"
|
||
color-on-cosmic-variant: "#A3A2A0"
|
||
color-on-cosmic-muted: "#767676"
|
||
# 오버레이 — Figma 실측(2026-09-26). 액션 시트 #2C2C2E(홈_초기사용자 343:212939) · 확인 팝업 #2D2D2D(차단하기 373:442417).
|
||
color-cosmic-sheet: "#2C2C2E"
|
||
color-cosmic-dialog: "#2D2D2D"
|
||
# 악센트 — 시안 실측. 핑크가 선택·CTA, 초록이 POP·성공, 시안이 FPI·탭 활성, 블루가 정보 칩.
|
||
color-cosmic-accent: "#FF7DDD"
|
||
color-on-cosmic-accent: "#141414"
|
||
color-neon-cyan: "#64EFF9"
|
||
color-on-neon-cyan: "#141414"
|
||
color-neon-emerald: "#00C60C"
|
||
color-on-neon-emerald: "#141414"
|
||
color-neon-magenta: "#FF4141"
|
||
color-on-neon-magenta: "#FFFFFF"
|
||
color-neon-violet: "#6866F3"
|
||
color-on-neon-violet: "#FFFFFF"
|
||
color-cosmic-mint: "#56CD9E"
|
||
color-on-cosmic-mint: "#141414"
|
||
color-cosmic-blue: "#52C1F9"
|
||
color-on-cosmic-blue: "#141414"
|
||
color-cosmic-orange: "#E4975D"
|
||
color-on-cosmic-orange: "#141414"
|
||
# FPI 탭·레이더 차트의 청록. 시안 행성 상세(373:441117) 실측.
|
||
color-cosmic-teal: "#4BC2AE"
|
||
color-on-cosmic-teal: "#141414"
|
||
color-cosmic-outline: "#2C2C2E"
|
||
color-gold: "#FFD34D"
|
||
color-on-gold: "#241A02"
|
||
cosmic_fx:
|
||
# 「포카 온 스테이지」 FX 그룹 (2026-08-17). 유리 블러는 상단바 한 곳, 발광은 온에어 도트 한 곳.
|
||
# PRD-13 다크 시네마틱 계약 요건은 캔버스(암전 무대)로 충족한다(근거: design/아트디렉션-예외.md).
|
||
glass-fill: "rgba(255,255,255,.06)"
|
||
glass-fill-strong: "rgba(255,255,255,.09)"
|
||
glass-stroke: "rgba(255,255,255,.10)"
|
||
glass-blur: "16px"
|
||
glow-live: "0 0 12px rgba(61,220,151,.45)"
|
||
grad-action: "linear-gradient(135deg,#FF98D7 0%,#E24FA5 100%)"
|
||
grad-brand: "linear-gradient(135deg,#FF98D7 0%,#C9A7FF 100%)"
|
||
grad-gold: "linear-gradient(135deg,#FFE08A 0%,#FFC93C 100%)"
|
||
grad-eclipse: "linear-gradient(135deg,#FF2E7E 0%,#701A38 100%)"
|
||
grad-veil: "linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 100%)"
|
||
# 무대 조명 — 프레임 상단 홑 핑크 스포트라이트(성운 수프의 후임, 단일 레이어).
|
||
nebula: "radial-gradient(1200px 540px at 50% -20%, rgba(255,152,215,.09), transparent 62%)"
|
||
# LED 도트 그리드 — 별밭의 후임. 이 레이어만은 타일이 맞다: size 26px 26px + repeat.
|
||
starfield: "radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px)"
|
||
orbit-stroke: "rgba(255,255,255,.10)"
|
||
# 홀로 포일 — 포토카드 홀로그램. 프리미엄·위계 라인 전용(2px 라인·부스터 노브, 넓은 면 금지).
|
||
foil: "linear-gradient(90deg,#FF98D7 0%,#C9A7FF 28%,#8FE8FF 52%,#A9FFE0 74%,#FFD9EC 100%)"
|
||
brand:
|
||
brand-kakao: "#FEE500"
|
||
brand-kakao-label: "#000000"
|
||
brand-naver: "#03C75A"
|
||
brand-naver-label: "#FFFFFF"
|
||
brand-apple: "#000000"
|
||
brand-apple-label: "#FFFFFF"
|
||
brand-apple-onlight: "#FFFFFF"
|
||
brand-google-fill: "#FFFFFF"
|
||
brand-google-stroke: "#747775"
|
||
brand-google-label: "#1F1F1F"
|
||
# LINE 은 답변서 Q7 확정 5종에 들어왔다(네이버 대체). 이메일은 자체 제공자라 코스믹 악센트를 쓴다.
|
||
brand-line: "#06C755"
|
||
brand-line-label: "#FFFFFF"
|
||
brand-email: "#FF7DDD"
|
||
brand-email-label: "#141414"
|
||
font:
|
||
# 발주사 Figma 실측 (2026-09-02). 42dot Sans Medium/SemiBold 가 본문·라벨 전량, ABeeZee 가 숫자·영문 표시.
|
||
font-display: "'ABeeZee', '42dot Sans', sans-serif"
|
||
font-body: "'42dot Sans', 'Pretendard Variable', system-ui, sans-serif"
|
||
font-mono: "'ABeeZee', ui-monospace, monospace"
|
||
font-direction: "geometric"
|
||
font-source: "42dot Sans = Google Fonts OFL 가변 ttf · ABeeZee = Google Fonts OFL (app/assets/fonts/, 2026-09-02)"
|
||
type:
|
||
# --- 발주사 Figma 계약 시점 사본 실측 (2026-09-26, _작업/design-match/foundation.json · 앱 93화면 텍스트 1,868건 집계) ---
|
||
# 42dot Sans 가 81%, ABeeZee 가 14%(Regular 한 벌뿐이라 굵기는 400). 본문 자간은 -2.5% 가 표준이다.
|
||
# 종전 값(Gmarket/포카 온 스테이지 재설계 — 44·32 Bold, 본문 400·행간 1.6)은 Figma 와 맞지 않아 교체한다.
|
||
type-display-l: {family: font-display, size: 46, weight: 400, leading: 1.0}
|
||
type-display-m: {family: font-display, size: 32, weight: 400, tracking: -0.025em, leading: 1.4}
|
||
type-title-l: {family: font-body, size: 20, weight: 600, tracking: -0.025em, leading: 1.4}
|
||
type-title-m: {family: font-body, size: 16, weight: 600, tracking: -0.025em, leading: 1.4}
|
||
type-body-l: {family: font-body, size: 16, weight: 500, tracking: -0.025em, leading: 1.4}
|
||
type-body-m: {family: font-body, size: 14, weight: 500, tracking: -0.025em, leading: 1.3}
|
||
type-body-s: {family: font-body, size: 12, weight: 500, tracking: -0.025em, leading: 1.3}
|
||
type-label-l: {family: font-body, size: 14, weight: 600, tracking: -0.025em, leading: 1.3}
|
||
type-label-mobile: {family: font-body, size: 16, weight: 700, leading: 1.4}
|
||
type-meta-mobile: {family: font-body, size: 13, weight: 600, leading: 1.4}
|
||
type-eyebrow: {family: font-body, size: 12, weight: 600, tracking: -0.025em, leading: 1.0}
|
||
type-caption: {family: font-body, size: 12, weight: 500, tracking: -0.025em, leading: 1.3}
|
||
type-meta: {family: font-body, size: 10, weight: 500, tracking: -0.025em, leading: 1.3}
|
||
# 공통 크롬 — Top Navigation 제목(229:12006 등 39화면) · 탭 루트 제목(MY/GALAXY/INSIDE) · Bottom Navigation 라벨(350:215853)
|
||
type-nav-title: {family: font-body, size: 16, weight: 600, leading: 1.5}
|
||
type-tab-title: {family: font-display, size: 20, weight: 400, leading: 1.4}
|
||
type-nav-label: {family: font-display, size: 10, weight: 400, leading: 1.6}
|
||
type-mono-num: {family: font-mono, feature: 'tnum', note: '가격·지표·표는 tabular'}
|
||
sizing:
|
||
touch-min-app: 48
|
||
touch-min-web: 36
|
||
body-min-app: 16
|
||
body-min-web: 16
|
||
ui-min-desktop: 14
|
||
ui-min-mobile: 16
|
||
meta-min-desktop: 12
|
||
meta-min-mobile: 13
|
||
space:
|
||
space-0: 0
|
||
space-1: 4
|
||
space-2: 8
|
||
space-3: 12
|
||
space-4: 16
|
||
space-5: 24
|
||
space-6: 32
|
||
space-7: 48
|
||
space-8: 64
|
||
space-9: 96
|
||
space-card: 24
|
||
space-section-desktop: 96
|
||
space-section-mobile: 56
|
||
container-max: 1200
|
||
gutter-desktop: 32
|
||
gutter-mobile: 16
|
||
measure-ch: 70
|
||
radius:
|
||
# 발주사 Figma 실측 (2026-09-02). 카드 12 · 칩·배지 8 · 큰 카드 16 · 알약 9999.
|
||
corner-xs: 4
|
||
corner-sm: 8
|
||
corner-md: 12
|
||
corner-lg: 16
|
||
corner-full: 9999
|
||
elevation:
|
||
elev-border: "0 0 0 1px rgba(16,18,29,.08)"
|
||
elev-1: "0 1px 2px rgba(16,18,29,.06), 0 1px 1px rgba(16,18,29,.04)"
|
||
elev-2: "0 4px 12px rgba(16,18,29,.08), 0 2px 4px rgba(16,18,29,.06)"
|
||
elev-3: "0 12px 32px rgba(16,18,29,.14)"
|
||
motion:
|
||
motion-fast: "120ms"
|
||
motion-base: "180ms"
|
||
motion-slow: "260ms"
|
||
motion-ease: "cubic-bezier(.2,.8,.2,1)"
|
||
motion-ease-in-out: "cubic-bezier(.4,0,.2,1)"
|
||
z:
|
||
z-base: 0
|
||
z-sticky: 1100
|
||
z-dropdown: 1200
|
||
z-popover: 1300
|
||
z-overlay: 1400
|
||
z-modal: 1500
|
||
z-toast: 1700
|
||
contrast_checks:
|
||
- [color-on-primary, color-primary]
|
||
- [color-on-primary-container, color-primary-container]
|
||
- [color-on-surface, color-surface]
|
||
- [color-on-error, color-error]
|
||
- [web-foreground, web-background]
|
||
- [color-on-cosmic, color-cosmic-surface]
|
||
- [color-on-cosmic-variant, color-cosmic-surface]
|
||
- [color-on-cosmic, color-cosmic-surface-container]
|
||
- [color-on-cosmic-accent, color-cosmic-accent]
|
||
- [color-on-cosmic-mint, color-cosmic-mint]
|
||
- [color-on-cosmic, color-cosmic-void]
|
||
- [color-on-cosmic-variant, color-cosmic-void]
|
||
- [color-cosmic-accent, color-cosmic-void]
|
||
- [color-neon-cyan, color-cosmic-void]
|
||
- [color-neon-emerald, color-cosmic-void]
|
||
- [color-neon-magenta, color-cosmic-void]
|
||
- [color-neon-violet, color-cosmic-void]
|
||
- [color-on-neon-cyan, color-neon-cyan]
|
||
- [color-on-neon-emerald, color-neon-emerald]
|
||
- [color-on-neon-magenta, color-neon-magenta]
|
||
- [color-on-neon-violet, color-neon-violet]
|
||
- [color-on-cosmic, color-cosmic-surface-raised]
|
||
# 앱 테마 조립이 새로 만드는 조합 (app/lib/core/theme/app_theme.dart navigationBarTheme).
|
||
# 토큰 자체의 쌍이 아니라 '위젯 테마가 실제로 겹치는' 쌍이라 여기 없으면 회귀 게이트가 없다.
|
||
- [color-cosmic-accent, color-cosmic-surface] # 선택된 탭 라벨
|
||
- [color-cosmic-accent, color-cosmic-surface-raised] # 인디케이터 위 선택 라벨
|
||
- [color-on-cosmic-variant, color-cosmic-surface-raised] # 인디케이터 위 비선택 라벨
|
||
```
|
||
|
||
---
|
||
|
||
## 정정 이력
|
||
|
||
| 일자 | 내용 |
|
||
|---|---|
|
||
| 2026-08-17 | **「포카 온 스테이지」 전면 재설계.** 사용자 지시로 2주차 코스믹 언어(성운·별밭·유리·발광·보랏빛 웜 블랙·골드 프리미엄)를 폐기하고, mobbin 리서치 기반의 굿즈 물성 언어(LED 도트 캔버스·흰 포토카드 반전·홀로 포일·전광판 앰버)로 교체했다. 공식 로고 핑크·5탭·다크 시네마틱(PRD-13)·동봉 폰트는 유지 |
|
||
| 2026-08-13 | **공식 자산 반영.** `고객사 준비 데모/LOGO/fanuzu logo only.png`를 공식 FANUZU 심볼 원천으로 확정하고 시안 로고·앱 아이콘에 반영했다. 제안 로고/Q6 대기는 종료했다 |
|
||
| 2026-08-11 | **W-01 브랜드 정정.** 발주사 공식 검토 회신서 표지에 따라 서비스명을 `FANUZU`(국문 `팬우주`)로 교체하고, 종전 CD-01(`Fancake` 확정)을 철회했다 |
|
||
| 2026-08-08 | **당시 CD-01 기준 정리.** 인수 데모를 근거로 `Fancake`를 확정값으로 보아 서비스명 확인 질문을 삭제했다. 이후 발주사 공식 회신으로 이 판단이 철회됐으며 위 2026-08-11 행이 현재값이다 |
|