101 lines
6.2 KiB
Markdown
101 lines
6.2 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`(블루)
|
||
**상금 카드(쿨톤, 골드 폐기):** 보더 `--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 회귀)
|
||
- ❌ 한글을 이미지로 굽기(가독성↓) — 텍스트 레이어로
|
||
|
||
---
|
||
|
||
## 8. 06.09 회의로 반영해야 할 디자인 변경 (대기)
|
||
> 상세: `../../Worldcup 2026/000. Plan/Task — 랜딩·디자인·프론트엔드 업데이트 (06.09 회의).md`
|
||
- [ ] 확률 라벨 `Confidence` → **"OO 승리 확률 XX%"**(이긴 팀 기준) + 승리팀 국기
|
||
- [ ] confidence 바 축소/삭제 검토, **근거(메인 리즌) 강조**, 모델 텍스트 짧고 재미있게
|
||
- [ ] **닉네임 필드 제거 → 이메일만**
|
||
- [ ] 서브타이틀 `Korea Republic vs Czechia · Matchday Prediction` **삭제(중복)**
|
||
- [ ] **"투표 종료까지" 카운트다운** 상세 페이지에 복원
|
||
- [ ] 멀티 경기: 대시보드 + 경기 상세 + (차기)리더보드 — 동일 토큰으로 확장
|
||
- [ ] 예측하기 → (경기 후) **결과 보기** 버튼 + 최종 스코어 표시
|