제 4 장
디자인 시스템
KAYFABE 2.0에서 제품의 정의가 한 줄 바뀌었다 — 라이브 이벤트를 둘러싸는 화면이라는 점은 그대로지만, 화면이 하는 일이 하나 늘었다. 경기를 예측하게 하고, 그 예측의 근거와 성적을 데이터로 보여 주는 것이다. 디자인 시스템은 그 변화를 받아내기 위해 다시 짰다. 이하의 규범은 www/DESIGN.md가 원본이며, 이 장은 그중 보고에 필요한 부분을 옮긴 것이다.
1) 색 체계
색은 셋이고, 각자 하나의 뜻만 갖는다.
| 색 | 뜻 | 쓰는 자리 |
|---|---|---|
골드 #fcbb00 · #d4af37 |
랭킹 · 성취 | 예측 제출 / 회원가입 CTA · 순위 · 벨트 · 활성 내비 |
레드 #e63946 |
WWE · LIVE · 경고 | 진행 중 표시 · 실패 · 파괴적 동작 |
블루 #3b82f6 |
AI · 데이터 · 분석 | AI 예측 · 차트 · 데이터 센터 · AI LAB |
셋을 섞으면 셋 다 뜻을 잃는다. 골드를 분석 화면의 강조색으로 쓰면 “가져갈 수 있는 것”이라는 뜻이 흐려지고, 블루를 장식으로 쓰면 “여기부터 데이터”라는 신호가 사라진다. AI LAB이 유일하게 블루를 주인공으로 쓰는 화면이고, 나머지 화면에서 블루는 데이터가 있는 자리에만 선다.
챔피언십 골드(#fcbb00)가 브랜드의 얼굴이며 중요한 순간에만 예약된다. 예측 제출과 회원가입 CTA만이 풀 pill 골드로 렌더되고, 상호작용 링크와 활성 상태는 더 깊고 금속적인 골드(#d4af37)로 내려가며, hover(#f99c00)와 pressed(#b75000)가 같은 색상 램프를 따라 더 내려간다. 골드 램프는 Tailwind v4 amber 팔레트와 값이 같다 — 앱의 골드 169곳이 원래 그 유틸리티로 칠해져 있었고, 토큰으로 옮기면서 색이 바뀌지 않게 기준을 그쪽에 맞췄다.
2) 표면과 깊이
표면이 계단을 이룬다. 이전 시스템에서는 --card가 --background와 같은 값이라, 그림자를 쓰지 않는 구성에서 카드가 배경 위로 아예 떠오르지 않았다. 대시보드는 카드가 정보 계층을 만드는 화면이므로 계단을 실제로 둔다.
| 단 | 값 | 자리 |
|---|---|---|
| Canvas | #08090b |
페이지 배경 |
| Section | #0d0f12 |
페이지 안쪽 구역 · 차트 표면 |
| Card | #101317 |
카드 · 필드 · 세그먼트 |
| Card Alt | #14171c |
카드 안의 카드 (에이전트 리포트 등) |
| Border | #252a31 |
구역 · 카드 경계선 |
깊이는 엘리베이션이 아니라 이 계단과 썸네일 위의 반투명 스크림(rgba(0,0,0,0.6))에서 온다. 드롭 섀도우는 쓰지 않는다.
3) 타이포그래피
두 목소리로 갈린다. Oswald(--font-sport)가 브랜드·디스플레이 표면을 맡아 PLE 히어로와 챔피언십 헤드라인의 압축된 스포츠 캐스터 톤을 낸다. 제품 안쪽의 고밀도 화면은 Pretendard가 14px / weight 400의 일꾼 크기로 돌고, 이 플랫폼을 정의하는 고빈도 메타데이터 — LIVE 배지, 픽 수, 매치 태그 — 에서 12px로 떨어진다.
지오메트리는 pill 우선이다. 버튼과 아바타는 풀 radius(9000px)이고, 기능적 크롬(검색·배지·카드)은 2–8px로 조인다.
4) 토큰 적용
토큰은 세 곳에서만 정의된다 — app/globals.css의 :root · .dark · @theme inline. 현재 255개의 CSS 변수가 그 세 블록에 있다. 컴포넌트는 hex를 쓰지 않고 그 토큰을 가리키는 Tailwind 유틸리티(bg-primary · text-data · bg-card 등)를 쓴다.
적용 현황 (2026-09-30 실측)
| 항목 | 건수 |
|---|---|
| 토큰 유틸리티 사용 | 825 |
| 남은 하드코딩 hex | 84 |
마이그레이션의 기준은 색이 바뀌지 않는 것이었다. 골드 램프 값을 Tailwind v4 amber 팔레트에 맞춘 것이 그 결과다 — 앱의 골드 169곳이 원래 그 유틸리티로 칠해져 있었으므로, 토큰으로 옮기면서 램프를 새로 고르면 화면이 통째로 달라진다. 토큰화는 값을 바꾸는 작업이 아니라 값이 정의되는 자리를 옮기는 작업으로 한정했다.
남은 84건은 어디에 있나
전부 지우는 것을 목표로 삼지 않았다. 분포를 보면 대부분이 토큰이어서는 안 되는 색이다.
| 파일 | 건수 | 성격 |
|---|---|---|
components/kayfabe-logo.tsx |
32 | 로고 SVG의 아트워크 색. 브랜드 자산이지 UI 토큰이 아니다 |
app/admin/page.tsx |
23 | 내부 관리 화면. 제품 표면이 아니다 |
lib/wwe-ple-detail.ts |
15 | PLE별 정체성 색 데이터 |
app/login/sns-login-buttons.tsx |
11 | 카카오·구글 등 타사 브랜드 색. 우리 팔레트로 바꾸면 안 된다 |
| 나머지 5개 파일 | 9 | 배경 그라디언트·레이아웃 |
타사 브랜드 색을 토큰으로 끌어들이면 그 토큰이 거짓말을 한다 — 우리 테마를 바꿔도 카카오 노랑은 따라 바뀌면 안 되기 때문이다. 로고도 같은 이유다. 그래서 남은 84건 중 실제 정리 대상은 admin 23건 정도이고, 그 화면은 제품 표면이 아니라 우선순위가 낮다.
테마 전환이 토큰으로 가능해진 것
토큰화의 실익이 드러난 자리가 2026-09-29의 라이트 테마 전환이다. 기본 테마를 다크에서 라이트로 뒤집고 표면 밝기를 한 단 내리는 작업이 :root 블록의 값 교체만으로 끝났다. 컴포넌트는 한 줄도 고치지 않았다. 다크 값은 .dark에 그대로 보존돼 토글로 남는다.
같은 전환에서 한 가지가 드러나기도 했다. 라이트 표면을 한 단 내리자 차트 계열색 --chart-3(#0ea5a0)의 표면 대비가 2.94로 3:1 아래에 걸렸다. 순백에서도 3.04였으므로 표면 변경이 만든 문제라기보다 드러낸 문제다. 계열 값 재조정은 별도 작업으로 남겼다.