si-sm/fanuzu
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

소셜 로그인 인증 경로 · 세션 전이 · Apple 로그인 콜백 · 인증 테스트

Browse Source
This commit is contained in:
Sn-Kinos
2026-08-18 02:06:29 +09:00
parent 97ea5fad35
commit 357f5d759d
20 changed files with 729 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/design-tokens.md
+79 -66
View File
@@ -24,22 +24,34 @@
- **서비스명은 `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 악센트**. 악센트는 **행동·선택·포커스에만** 쓴다.
- 브랜드색으로 배경을 도배하지 않는다. 위계는 색이 아니라 타입 스케일과 여백으로 만든다.
- 순흑(`#000`)은 **텍스트가 아니라 캔버스**다. 배경은 `color-cosmic-void`(#000), 글자는 `color-on-cosmic`.
- 네온(시안·에메랄드·마젠타·바이올렛)은 **의미가 있을 때만** 쓴다 — 진행·성공·경고·프리미엄.
네 색을 한 화면에 다 풀지 않는다. 화면당 네온 악센트는 하나를 주로 하고 나머지는 보조로만.
- 60 암전 블랙 캔버스 · 30 흰 포토카드 면 · **10 공식 로고 핑크**(행동·선택·포커스 전용).
- 프레임 위 주 버튼 = 핑크 필, **포토카드 안 주 버튼 = 잉크 스탬프 필**(#201826) — 흰 면에 흰 필 금지.
- 앰버는 색이 아니라 **신호**다: 대표 지표·재화 잔액·카운트다운 숫자에만. 장식 사용 금지.
- 홀로 포일은 면에 풀지 않는다 — 2px 라인(모달 상단 박·KPI 모서리·섹션 바·아이브로 틱)과
부스터 노브까지만. 시안·에메랄드·마젠타는 상태 의미(실시간·온에어·이클립스) 전용, **글로우는
온에어 도트 한 곳뿐**(`--glow-live`).
## 서피스 전략 — 왜 두 벌인가
| surface | 기본 서피스 | 근거 |
|---|---|---|
| app (네이티브) | **코스믹 보이드**(`color-cosmic-void` + 네뷸라 + 별밭) | 행성·갤럭시 맵·이클립스가 우주 배경을 전제로 한 연출이다. 인수 데모 프로토타입의 `body{background:#000}` 을 그대로 쓴다(결정 D-19). |
| web (마케팅·사전예약) | 코스믹 보이드 (네뷸라 약하게) | 2026-08-02 변경. 랜딩에서 앱으로 넘어갈 때 브랜드가 끊기지 않게 같은 캔버스를 쓴다. |
| admin (운영 콘솔) | 코스믹 서피스 (네뷸라 제외·별밭만) | 2026-08-02 변경. 색면이 표·수치와 경쟁하지 않도록 배경 광원을 걷어내고 별밭만 남긴다. |
| app (네이티브) | **LED 스테이지**(콜드 블랙 `#0A0A0E` + 도트 그리드 + 상단 핑크 스포트라이트), 콘텐츠는 흰 포토카드 | 화면 자체가 공연장 전광판이라는 은유. 굿즈(카드·스티커 행성)가 주인공이 되려면 바닥이 무채색이어야 한다. |
| web (마케팅·사전예약) | LED 스테이지 동일 | 랜딩에서 앱으로 넘어갈 때 브랜드가 끊기지 않게 같은 캔버스를 쓴다. |
| admin (운영 콘솔) | 그라파이트 콘솔 (도트 더 옅게·스포트라이트 제외·굿즈 연출 제외) | 색면이 표·수치와 경쟁하지 않게. 포토카드 반전도 admin 에는 적용하지 않는다 — 데이터가 주인공. |
> 세 surface 모두 다크로 통일한 이유는 `아트디렉션-예외.md` 에 적었다. 요약하면 PRD-13 「Non-Verbal
> Cinematic UI」가 계약 요건이고, 발주사 인수 데모가 검정 캔버스·네온·글래스를 이미 확정했기 때문이다.
> 세 surface 모두 다크로 통일한 이유는 `아트디렉션-예외.md` 에 적었다. PRD-13 「Non-Verbal
> Cinematic UI」가 계약 요건이다. 2026-08-17 재설계는 다크 시네마틱을 유지하되 표현을
> "분위기(성운·발광)"에서 "물성(굿즈)"으로 옮긴 것이다.
## 타이포 — 디스플레이 페어링
- 본문·UI: **Pretendard Variable** (한글 가독성) 고정.
@@ -55,76 +67,76 @@
- 깊이는 `elev-border`(헤어라인)가 1순위. 떠 있는 요소만 `elev-1~3`.
- 오버레이 순서는 `z-*` 토큰을 따른다.
# ℹ primary 가독성 보정: #ff85d9 → #ac5992 (흰/검정 라벨이 둘 다 AA 미달인 중간톤 → 흰 글자 대비 4.5+ 확보)
# ℹ primary 가독성 보정(라이트 면 한정): 로고 핑크 #ff98d7 → 딥핑크 #b93074 (흰 면 위 대비 5.6:1 · AA)
# ℹ 타입 디렉션: geometric — 디스플레이='Gmarket Sans' / 본문=Pretendard (예: 배달의민족 · 쿠팡 · 올리브영). 다른 디렉션: neutral, editorial, technical, warm
<!-- TOKENS --> <!-- seed=#ff85d9 → primary=#ac5992(가독성 보정) · 타입 디렉션=geometric (gen_tokens.py 생성) -->
<!-- TOKENS --> <!-- seed=#ff98d7(공식 로고 실측) → 라이트 primary=#b93074(가독성 보정) · 타입 디렉션=geometric · 2026-08-17 「포카 온 스테이지」 재설계 -->
```yaml
colors:
# --- app (MD3) ---
color-primary: "#ac5992"
# --- app (MD3 라이트 대체 경로) ---
color-primary: "#b93074"
color-on-primary: "#ffffff"
color-primary-container: "#f0e1eb"
color-on-primary-container: "#924c7c"
color-surface: "#f8f5fa"
color-surface-container: "#ebe7ed"
color-on-surface: "#1a1c1e"
color-on-surface-variant: "#4b4753"
color-outline: "#7a7481"
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 (Shadcn) · 고객 web + 관리자 admin 공용 · 포토카드(라이트 아일랜드)의 기본값 ---
web-background: "#ffffff"
web-foreground: "#1a1c1e"
web-primary: "#ac5992"
web-foreground: "#201826"
web-primary: "#b93074"
web-primary-foreground: "#ffffff"
web-muted: "#f1eef4"
web-muted-foreground: "#4b4753"
web-border: "#ded7df"
# --- 코스믹 다크 서피스 (전 surface 기본 · 결정 D-19 · 인수 데모 시각 언어 복원 2026-08-02) ---
# 데모(FANUZU_prototype.tsx STYLES · FANUZU_HUD Proto.html)의 순수 검정 캔버스를 그대로 쓴다.
color-cosmic-void: "#000000"
color-cosmic-surface: "#05070F"
color-cosmic-surface-container: "#0D1220"
color-cosmic-surface-raised: "#141A2B"
color-on-cosmic: "#F4F0F7"
color-on-cosmic-variant: "#B4AEC0"
# 네온 악센트 — 검정 위에서만 쓴다(전부 검정 대비 5:1 이상, 대비 보정 없이 원색 유지)
color-cosmic-accent: "#FF85D9"
color-on-cosmic-accent: "#05070F"
color-neon-cyan: "#00F2FF"
web-muted: "#f6f0f4"
web-muted-foreground: "#6e6878"
web-border: "#e9e2e8"
# --- LED 스테이지 (전 surface 기본 · 2026-08-17 「포카 온 스테이지」 재설계) ---
# 보랏빛 웜 블랙을 폐기하고 꺼진 LED 패널의 중성 콜드 블랙으로 통일. 흰 포토카드가 서는 바닥.
color-cosmic-void: "#050508"
color-cosmic-surface: "#0A0A0E"
color-cosmic-surface-container: "#101016"
color-cosmic-surface-raised: "#16161D"
color-on-cosmic: "#F4F4F6"
color-on-cosmic-variant: "#A6A4B0"
# 악센트 — 공식 로고 실측 핑크 하나. 시안·에메랄드·마젠타는 상태 의미(실시간·온에어·이클립스) 전용.
# 바이올렛은 홀로 라일락(포일 스펙트럼 추출색)으로 재정의, 골드는 전광판 앰버(신호색)로 전환.
color-cosmic-accent: "#FF98D7"
color-on-cosmic-accent: "#2B0E1F"
color-neon-cyan: "#6FE8FF"
color-on-neon-cyan: "#05070F"
color-neon-emerald: "#34D399"
color-neon-emerald: "#3DDC97"
color-on-neon-emerald: "#05070F"
color-neon-magenta: "#FF007A"
color-neon-magenta: "#FF2E7E"
color-on-neon-magenta: "#05070F"
color-neon-violet: "#A855F7"
color-neon-violet: "#C9A7FF"
color-on-neon-violet: "#05070F"
color-cosmic-mint: "#C1FFED"
color-cosmic-mint: "#A9FFE0"
color-on-cosmic-mint: "#05070F"
color-cosmic-outline: "#2A3348"
color-cosmic-outline: "#26262E"
color-gold: "#FFD34D"
color-on-gold: "#241A02"
cosmic_fx:
# 인수 데모의 시각 언어를 토큰으로 고정한 그룹.
# 킷 art-direction.md §0 은 글로우·그라데이션·글래스를 금지 신호로 두지만,
# 이 프로젝트는 PRD-13 「Non-Verbal Cinematic UI」가 계약 요건이고 발주사 인수 데모가
# 그 표현을 이미 확정했으므로 프로젝트 예외로 허용한다(근거: design/아트디렉션-예외.md).
glass-fill: "rgba(255,255,255,.05)"
glass-fill-strong: "rgba(255,255,255,.08)"
# 「포카 온 스테이지」 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-sm: "0 0 12px"
glow-md: "0 0 24px"
glow-lg: "0 0 48px"
glow-accent: "0 0 24px rgba(255,133,217,.45)"
glow-cyan: "0 0 24px rgba(0,242,255,.40)"
glow-emerald: "0 0 24px rgba(52,211,153,.40)"
glow-magenta: "0 0 28px rgba(255,0,122,.45)"
grad-action: "linear-gradient(135deg,#34D399 0%,#4F46E5 100%)"
grad-brand: "linear-gradient(135deg,#FF85D9 0%,#A855F7 100%)"
grad-eclipse: "linear-gradient(135deg,#FF007A 0%,#7C1D3F 100%)"
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(720px 460px at 10% -6%, rgba(168,85,247,.34), transparent 70%), radial-gradient(600px 400px at 94% 8%, rgba(0,242,255,.24), transparent 70%), radial-gradient(760px 520px at 74% 52%, rgba(255,0,122,.20), transparent 72%), radial-gradient(640px 460px at 16% 62%, rgba(88,60,180,.24), transparent 72%), radial-gradient(820px 560px at 82% 96%, rgba(255,133,217,.20), transparent 72%), radial-gradient(600px 440px at 8% 98%, rgba(52,211,153,.14), transparent 70%)"
starfield: "radial-gradient(1.6px 1.6px at 33.1% 16.5%,rgba(255,255,255,0.44),transparent), radial-gradient(1px 1px at 53.4% 37.1%,rgba(255,133,217,0.52),transparent), radial-gradient(1px 1px at 10.3% 42.1%,rgba(255,255,255,0.7),transparent), radial-gradient(1px 1px at 7.7% 56.3%,rgba(168,85,247,0.75),transparent), radial-gradient(1.2px 1.2px at 93.0% 57.4%,rgba(255,255,255,0.94),transparent), radial-gradient(1px 1px at 6.5% 84.4%,rgba(0,242,255,0.48),transparent), radial-gradient(1.8px 1.8px at 13.3% 31.6%,rgba(168,85,247,0.5),transparent), radial-gradient(1px 1px at 57.8% 63.3%,rgba(255,255,255,0.7),transparent), radial-gradient(1px 1px at 8.0% 7.7%,rgba(0,242,255,0.77),transparent), radial-gradient(1.4px 1.4px at 43.0% 32.2%,rgba(0,242,255,0.6),transparent), radial-gradient(1.8px 1.8px at 25.8% 19.3%,rgba(255,255,255,0.45),transparent), radial-gradient(1px 1px at 30.8% 49.5%,rgba(168,85,247,0.65),transparent), radial-gradient(1.4px 1.4px at 60.5% 9.0%,rgba(0,242,255,0.49),transparent), radial-gradient(1.2px 1.2px at 34.8% 91.6%,rgba(255,255,255,0.93),transparent), radial-gradient(1.8px 1.8px at 9.5% 55.6%,rgba(52,211,153,0.57),transparent), radial-gradient(1.4px 1.4px at 68.7% 59.1%,rgba(52,211,153,0.65),transparent), radial-gradient(1.2px 1.2px at 82.6% 92.7%,rgba(168,85,247,0.77),transparent), radial-gradient(1.6px 1.6px at 7.8% 69.3%,rgba(255,133,217,0.95),transparent), radial-gradient(1.2px 1.2px at 80.9% 29.3%,rgba(168,85,247,0.59),transparent), radial-gradient(1.4px 1.4px at 92.3% 36.1%,rgba(255,255,255,0.67),transparent), radial-gradient(1.6px 1.6px at 22.9% 29.6%,rgba(255,255,255,0.62),transparent), radial-gradient(1px 1px at 90.0% 49.7%,rgba(0,242,255,0.62),transparent), radial-gradient(1.2px 1.2px at 28.7% 15.1%,rgba(52,211,153,0.7),transparent), radial-gradient(1.6px 1.6px at 69.8% 96.7%,rgba(0,242,255,0.93),transparent), radial-gradient(1px 1px at 16.5% 18.9%,rgba(168,85,247,0.53),transparent), radial-gradient(1px 1px at 48.6% 58.6%,rgba(255,255,255,0.4),transparent), radial-gradient(1.4px 1.4px at 42.2% 37.4%,rgba(255,255,255,0.92),transparent), radial-gradient(1.4px 1.4px at 68.3% 51.5%,rgba(168,85,247,0.77),transparent), radial-gradient(1.8px 1.8px at 7.2% 88.4%,rgba(52,211,153,0.77),transparent), radial-gradient(1.2px 1.2px at 55.7% 40.2%,rgba(255,255,255,0.66),transparent), radial-gradient(1px 1px at 40.4% 20.3%,rgba(0,242,255,0.49),transparent), radial-gradient(1px 1px at 34.6% 7.0%,rgba(255,133,217,0.48),transparent), radial-gradient(1px 1px at 11.7% 36.9%,rgba(255,255,255,0.88),transparent), radial-gradient(1px 1px at 61.0% 16.3%,rgba(255,255,255,0.73),transparent), radial-gradient(1.2px 1.2px at 47.5% 13.1%,rgba(0,242,255,0.66),transparent), radial-gradient(1.6px 1.6px at 31.9% 15.8%,rgba(255,255,255,0.81),transparent), radial-gradient(1.4px 1.4px at 47.9% 68.4%,rgba(255,255,255,0.51),transparent), radial-gradient(1.6px 1.6px at 93.4% 36.7%,rgba(255,133,217,0.9),transparent), radial-gradient(1.6px 1.6px at 74.8% 30.6%,rgba(52,211,153,0.45),transparent), radial-gradient(1px 1px at 83.2% 51.8%,rgba(255,255,255,0.82),transparent), radial-gradient(1px 1px at 53.1% 76.8%,rgba(168,85,247,0.52),transparent), radial-gradient(1.8px 1.8px at 79.9% 96.6%,rgba(255,255,255,0.84),transparent), radial-gradient(1px 1px at 80.6% 73.0%,rgba(255,255,255,0.68),transparent), radial-gradient(1px 1px at 36.1% 4.8%,rgba(52,211,153,0.55),transparent), radial-gradient(1px 1px at 26.9% 68.5%,rgba(0,242,255,0.84),transparent), radial-gradient(1px 1px at 71.4% 35.6%,rgba(255,255,255,0.52),transparent)"
# 무대 조명 — 프레임 상단 홑 핑크 스포트라이트(성운 수프의 후임, 단일 레이어).
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"
@@ -137,11 +149,11 @@ brand:
brand-google-stroke: "#747775"
brand-google-label: "#1F1F1F"
font:
font-display: "'Gmarket Sans', Pretendard Variable, sans-serif"
font-body: "Pretendard Variable, system-ui, sans-serif"
font-mono: "JetBrains Mono, IBM Plex Mono, ui-monospace, monospace"
font-display: "'Gmarket Sans', 'Pretendard Variable', sans-serif"
font-body: "'Pretendard Variable', system-ui, sans-serif"
font-mono: "'Pretendard Variable', ui-monospace, monospace"
font-direction: "geometric"
font-source: "Gmarket Sans = webfontworld/jsdelivr · 본문 Pretendard = jsdelivr"
font-source: "Gmarket Sans = projectnoonnu woff 동봉 · Pretendard Variable = woff2 동봉 (시안/assets/ · file:// 오프라인 렌더용, 2026-08-14)"
type:
type-display-l: {family: font-display, size: 44, weight: 700, tracking: -0.01em, leading: 1.06}
type-display-m: {family: font-display, size: 32, weight: 700, tracking: -0.01em, leading: 1.11}
@@ -238,6 +250,7 @@ contrast_checks:
| 일자 | 내용 |
|---|---|
| 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 행이 현재값이다 |