130 lines
10 KiB
Markdown
130 lines
10 KiB
Markdown
# TriplePick — Look & Feel / Design System (SSOT)
|
||
|
||
최종 갱신: 2026-06-09 KST
|
||
출처: 구현된 `app/globals.css` + 컴포넌트 + 사용자 디렉션(02/03 목업 + 첨부 레퍼런스 반복 확정)
|
||
원칙: **이 문서가 룩앤필의 단일 기준(SSOT).** 새 컴포넌트·페이지는 여기 토큰·패턴을 그대로 따른다.
|
||
|
||
> 디자인 진화 기록(Before/After): `/before`(v1 다크토큰) vs `/`(현재). 임의 변경 금지 — 토큰을 바꾸면 여기부터 갱신.
|
||
|
||
---
|
||
|
||
## 1. 브랜드 에센스
|
||
- 이름: **TriplePick / Triple Pick 2026** · 핸들 `@triplepick_ai` · 운영 AIO2O
|
||
- 컨셉: "AI 셋(GPT·Claude·Gemini) vs 너" — 대결·스코어보드·e스포츠 픽밴 에너지
|
||
- 톤: 다크 차콜 베이스 + **민트/틸그린 액센트**, 프리미엄 스포츠 브로드캐스트
|
||
- ⚠️ 금지: **"월드컵" 명칭(법적)** → "글로벌 축구" 프레이밍 / **골드 촌스러운 톤 금지**(쿨 민트·틸) / **단색 초록 일변도 금지**
|
||
|
||
---
|
||
|
||
## 2. 컬러 토큰 (globals.css `:root` — 정확값)
|
||
|
||
| 역할 | 변수 | HEX | 용도 |
|
||
|---|---|---|---|
|
||
| 베이스 | `--bg` | `#14171C` | 차콜 다크 배경 |
|
||
| 베이스2 | `--bg2` | `#1B1F26` | 카드/입력 배경 |
|
||
| 카드 | `--card` | `#20262F` | 다크 카드 |
|
||
| **CTA 민트** | `--mint` | `#85FCA8` | 메인 버튼(밝은 민트그린) |
|
||
| 민트 텍스트 | `--mint-ink` | `#0A2417` | 민트 버튼 위 글자 |
|
||
| 액센트/글로우 | `--green` | `#3EE08A` | VS 글로우·보더·언더라인 |
|
||
| **레이어 시트** | `--sheet` | `#F2F3EF` | 화이트 레이어드 시트(AI예측·픽) |
|
||
| 시트 카드 | `--sheet-card` | `#FFFFFF` | 시트 위 카드 |
|
||
| 잉크 | `--ink` | `#14171C` | 화이트 위 텍스트 |
|
||
| 잉크 뮤트 | `--ink-muted` | `#79808C` | 보조 텍스트 |
|
||
| 다크 라인 | `--line-d` | `#2B313C` | 다크 보더 |
|
||
| 라이트 라인 | `--line-l` | `#E3E5DF` | 시트 보더 |
|
||
|
||
**모델 컬러(고정):** GPT `--gpt #15A99B`(틸그린) · Claude `--claude #E8814A`(오렌지) · Gemini `--gemini #5B8CFF`(블루)
|
||
**공유/바이럴 시맨틱:** `--share #A65EFF`(ADO2 브랜드 포인트 퍼플) — 공유 액션 전용. 그린(예측/플레이)과 의미 분리. (현재 적용: 헤더 "투표 공유하기". 권장: Arena 공유 버튼도 동일 토큰으로 통일.)
|
||
**일정 민트:** `#94FBE0` — 대시보드 일정 카드 아웃라인·VS·날짜 헤딩 (그린 #4AFFA0 브랜드 포인트와 구분)
|
||
**상금 카드(쿨톤, 골드 폐기):** 보더 `--gold-border #5EF0B4` · 배경 `--gold-bg #0E1F1B`(딥틸) · 버튼 그라데 `#85FCA8 → #15A99B`(`.gold-btn`)
|
||
|
||
> 배경: `radial-gradient(120% 50% at 50% -5%, #20302A, var(--bg))` — 상단 미세 그린 글로우.
|
||
|
||
---
|
||
|
||
## 3. 타이포그래피
|
||
- **타이틀 = Impact** (`.font-impact`: Impact, Haettenschweiler, "Arial Narrow Bold"). 예: `TRIPLE PICK 2026` 44px, 섹션 헤딩 32–40px
|
||
- 본문 = Pretendard / 시스템 산세리프 (한글). (Pretendard 웹폰트 로드는 TODO)
|
||
- 스케일: **사용자 지시로 2× 상향**. AI 스코어 28px · 모델명 20px · 매치 타이틀 22px · 헤딩 22px · 세그먼트 16px · 스테퍼 32px · CTA 20px
|
||
- 후킹 헤드라인: **한 줄 강제**(`whitespace-nowrap`, 19px) + 양옆 `⫽` 그린
|
||
|
||
---
|
||
|
||
## 4. 레이아웃
|
||
- **모바일 우선**, `.shell` max-width **460px**, 좌우 패딩 16
|
||
- 구조 = **다크 히어로(상) + 레이어드 화이트 시트(하)** 하이브리드
|
||
- 다크: Hero · MatchupHUD(대결)
|
||
- 화이트 시트(`.sheet`, radius 22, 그림자): AI 예측 + 당신의 선택
|
||
- 다크: 상금(쿨톤) · Crowd · Footer
|
||
- 카드 radius 12–22, 터치 타깃 ≥ 44px
|
||
|
||
---
|
||
|
||
## 5. 컴포넌트 카탈로그 (현재 구현 = 기준)
|
||
|
||
- **Hero** (`Hero.tsx`): `TRIPLE PICK 2026`(Impact, 2026 그린) → `AI Prediction Arena`(그린) → 서브카피 **알약**(반투명, 가시성↑) → 후킹 한 줄(⫽ 그린)
|
||
- **MatchupHUD** (`MatchupHUD.tsx`): `Match 01 → Final` 진행 바 → **녹색 글로우 보더 카드**(box-shadow green) → **프로필 로고 아이콘**(`/icons/profile.png`) + 팀명 + 일시(그린 볼드) + 경기장 → 국기(실제 KOR png + CZE 인라인 SVG) + **라이트닝 그린 VS**(Impact, textShadow glow)
|
||
- **AI 예측 카드** (`Arena.tsx`, 화이트 시트 내): 실제 모델 아이콘(`/icons/gpt.png·claude.jpg·gemini.jpeg`) + 모델명 + 스코어(28px) + 확률% + **모델색 confidence 바** + 근거 한 줄
|
||
- **세그먼트(당신의 선택)**: 3분할, 선택 시 `--mint` 배경 + 잉크 텍스트
|
||
- **스코어 스테퍼**: −/+ 버튼 + 큰 숫자(32px)
|
||
- **CTA(`.btn-mint`)**: `#85FCA8` + 글로우 그림자
|
||
- **상금 카드(`.gold-card`/`.gold-btn`)**: 딥틸 배경 + 민트 보더 + 민트→틸 그라데 버튼 (쿨톤)
|
||
- **Crowd Pick**: 가로 세그먼트 단일 바(국기 + %)
|
||
- **Footer**: fine print + 법무 4고지 + `© 2026 TriplePick · 운영 AIO2O · @triplepick_ai`
|
||
|
||
---
|
||
|
||
## 6. 아이콘·이미지 자산 (`public/icons/`)
|
||
- `ball.png` — **클래식 흑백 축구공(투명 PNG)**. ⚠️ 흰 배경/체커보드 구워넣기 금지(마젠타 키잉으로 투명 처리한 자산)
|
||
- `profile.png` — TriplePick 브랜드 로고(매치카드 아이콘)
|
||
- `gpt.png` / `claude.jpg` / `gemini.jpeg` — 실제 브랜드 아이콘(레터박스 금지)
|
||
- `kor.png` — 한국 국기. 체코는 인라인 SVG(백·적 + 청 삼각)
|
||
- 글로우는 `drop-shadow(... rgba(62,224,138,.))` 그린으로만
|
||
|
||
---
|
||
|
||
## 7. Do / Don't
|
||
- ✅ 실제 모델 아이콘 · 클래식 축구공(투명) · 라이트닝 그린 VS · 화이트 시트 + 다크 하이브리드 · 민트 CTA
|
||
- ✅ 3색(틸그린/오렌지/블루)으로 모델 구분, 글로우는 그린
|
||
- ❌ "월드컵" 표현 / 골드 톤 / 단색 초록 일변도 / 레터박스 가짜 아이콘 / 임의 다크 단색(=v1 회귀)
|
||
- ❌ 한글을 이미지로 굽기(가독성↓) — 텍스트 레이어로
|
||
- ❌ **모든 이모지 절대 금지** (👆 손가락·🏆·⚽·🤖·🟠 등 픽토그램·컬러 이모지). 강조·지시는 **컬러·타이포·실제 SVG/PNG 아이콘**으로 표현. (typographic 글리프 `→ ★ ✓ ·` 는 허용 — 이건 이모지가 아님). 디자인·영상·랜딩 전부 동일 적용. (2026-06-10 확정)
|
||
- ❌ **글로우(glow) 이펙트 금지** (네온 textShadow·box-shadow 발광·펄스 글로우). 가독용 **어두운 드롭섀도/스크림은 허용**(발광 아님). 강조는 컬러·크기·굵기·보더로. (2026-06-11 확정)
|
||
- ❌ **em dash(—) 사용 금지** (카피·자막 전부). 대신 느낌표·쉼표·줄바꿈·중점(·)으로. (리더보드 '미기록' 표기는 하이픈 `-`). (2026-06-11 확정)
|
||
- ⚠️ **브랜드 그린 = `#4AFFA0` 정확값** 사용. 영상 mp4 인코딩 시 yuv420p 채도 저하로 탁해 보이면 인코딩에서 채도 보정(`eq=saturation`)으로 살릴 것.
|
||
|
||
---
|
||
|
||
## 10. SNS 콘텐츠 템플릿 (SSOT: `Worldcup 2026/006. SNS/TriplePick_Social Content.pptx`)
|
||
> 사용자가 만든 PPTX = BG·BI·자막위치·CI·ending·Thumbnail 공식 템플릿. 원본 미디어는 PPTX에서 추출(`003. video/assets/sns-template/`).
|
||
|
||
- **BG**: 다크 네이비/차콜 + 사선 그린→블루 그라디언트 (원본 `image1.png`, 어둡게 깔아 사용).
|
||
- **BI** (TriplePick 프로필 hex 배지 + "TRIPLE PICK 2026" 워드마크): **좌상단 고정**, 가로 락업. 로고 벡터 = `image2.svg`.
|
||
- **CI** (AIO2O): **하단 중앙 고정**. 원본 `image3.png`(고해상).
|
||
- **자막 위치**: 매치업 배너(상단·국기) → 훅 질문 중앙(예 "어떤 AI 모델이 맞췄을까?") → "AI 셋 vs 당신 / 누가 맞히나?" 하단 중앙.
|
||
- **Thumbnail**: **동물 매치업**(베이스 `image4.png`). 규칙 — **국가는 그 나라를 상징하는 힘센 동물로, 한국은 호랑이 고정**, 상대국은 상징 동물(체코=사자). 사선 분할(왼쪽위→오른쪽아래), 레드(한국)/블루(상대). 한글 텍스트는 이미지에 굽지 말고 Remotion 오버레이.
|
||
- **Ending**: TriplePick 로고 + 워드마크 + AIO2O CI, **중앙 정렬**. 글로우 없음.
|
||
- **활용 파이프라인**: PPTX 미디어를 추출해 직접 사용(BG=image1, 로고=image2.svg, CI=image3, 썸네일 베이스=image4) → Remotion에서 한글 텍스트만 오버레이. 새 경기는 썸네일 베이스 동물만 교체(한국=호랑이 고정).
|
||
|
||
---
|
||
|
||
## 8. 06.09 회의 반영 (DONE 2026-06-09)
|
||
> 상세: `../../Worldcup 2026/000. Plan/Task — 랜딩·디자인·프론트엔드 업데이트 (06.09 회의).md`
|
||
- [x] 확률 라벨 `Confidence` → **"OO 승리 확률 XX%"**(이긴 팀 기준) + 승리팀 국기 (`format.winProb` + `TeamFlag`)
|
||
- [x] confidence 바 **h-1로 축소**, **근거(메인 리즌) 15px 볼드 인용("…")으로 강조**
|
||
- [x] **닉네임 필드 제거 → 이메일만** + 동의 체크박스(다음 경기/100만원)
|
||
- [x] 서브타이틀 `… Matchday Prediction` **삭제(중복)** — Hero는 브랜드 헤더로 단일화
|
||
- [x] **"투표 종료까지" 카운트다운** 상세에 복원 (`Countdown.tsx`, 마감=lockAt=킥오프)
|
||
- [x] 멀티 경기: **대시보드(`/`) + 경기 상세(`/match/[matchId]`) + 리더보드 stub(`/leaderboard`)** — 동일 토큰
|
||
- [x] 예측하기 → (경기 후) **결과 보기** + 최종 스코어 (`match.result` 분기, MatchupHUD/Arena)
|
||
- [x] **"월드컵" 표현 제거**(D9) — Hero·schedule hookText·meta → "글로벌 축구"
|
||
- [x] **경기별 공유**(D8) — `matchUrl()` 딥링크, `navigator.share` invoke
|
||
- [x] Crowd Pick에 **"AI 승리 확률과 다릅니다"** 구분 라벨
|
||
|
||
## 9. 멀티 경기 구조 (06.09 신규)
|
||
- **라우팅**: `/`=대시보드(전체 일정) · `/match/[matchId]`=경기 상세(6경기 SSG) · `/leaderboard`=차기 stub
|
||
- **컴포넌트 파라미터화**: `MatchupHUD({match})` · `Arena({match, predictions, crowd, shareUrl})` — 싱글톤 의존 제거
|
||
- **국기 일반화**: `TeamFlag({team})` — KOR png / CZE 인라인 SVG / 그 외 이모지 박스
|
||
- **데이터**: `mockData.getPredictions(match)`/`getCrowd(match)` — 체코전 큐레이션, 그 외 `matchId` 해시 결정론 생성(Math.random 미사용)
|
||
- **대시보드 카드**(`ScheduleBoard.tsx`): 날짜 그룹 → 시간·라운드·상태칩·팀 국기·AI 픽 갈림·참여수 → 상세 딥링크. 네이버 e스포츠 승부예측 톤, 다크 토큰 유지
|