castad
/
o2o-triple-pick
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
o2o-triple-pick/docs/DESIGN.md

7.8 KiB
Raw Blame History

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 회귀)
  • ❌ 한글을 이미지로 굽기(가독성↓) — 텍스트 레이어로

8. 06.09 회의 반영 (DONE 2026-06-09)

상세: ../../Worldcup 2026/000. Plan/Task — 랜딩·디자인·프론트엔드 업데이트 (06.09 회의).md

  • 확률 라벨 Confidence → "OO 승리 확률 XX%"(이긴 팀 기준) + 승리팀 국기 (format.winProb + TeamFlag)
  • confidence 바 h-1로 축소, 근거(메인 리즌) 15px 볼드 인용("…")으로 강조
  • 닉네임 필드 제거 → 이메일만 + 동의 체크박스(다음 경기/100만원)
  • 서브타이틀 … Matchday Prediction 삭제(중복) — Hero는 브랜드 헤더로 단일화
  • "투표 종료까지" 카운트다운 상세에 복원 (Countdown.tsx, 마감=lockAt=킥오프)
  • 멀티 경기: 대시보드(/) + 경기 상세(/match/[matchId]) + 리더보드 stub(/leaderboard) — 동일 토큰
  • 예측하기 → (경기 후) 결과 보기 + 최종 스코어 (match.result 분기, MatchupHUD/Arena)
  • "월드컵" 표현 제거(D9) — Hero·schedule hookText·meta → "글로벌 축구"
  • 경기별 공유(D8) — matchUrl() 딥링크, navigator.share invoke
  • 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스포츠 승부예측 톤, 다크 토큰 유지