Figma 디자인 토큰(컬러/타이포/폰트) 반영

[sohxxny]

배경

Figma MCP로 "⚙️ 디자인 시스템" 페이지(node 96:278)의 변수를 조회한 결과, 컬러(Gray/Cool Gray, primary/secondary/tertiary 50-950 스케일 및 bg/ink/accent/border 시맨틱 토큰)와 타이포그래피(SUIT 기반 Large Title-Caption2, 웨이트 Regular/Medium/SemiBold/Bold/ExtraBold) 토큰이 확인됐다. 현재 styles/globals.css는 @import "tailwindcss"; 한 줄뿐이고 폰트 로딩 설정도 없으며, docs/design/design-system.md의 토큰 대응표도 비어 있어 이번에 최초로 채운다.

추가로 디자이너가 제공한 Spacing 스케일(Spacing-0~10, 4-Point grid 기반)도 함께 반영한다. Figma의 "Spacing-N" 네이밍이 Tailwind의 숫자 스페이싱 유틸리티(p-N, m-N, gap-N 등) 네이밍과 그대로 대응돼서, --spacing-N 개별 오버라이드로 반영한다.

작업 내용

• SUIT 폰트의 사용 웨이트(Regular/Medium/SemiBold/Bold/ExtraBold) subset 파일을 추가하고 @font-face로 등록한다 (폰트 제공처의 공식 subset 배포본을 사용, 커스텀 코드포인트 subsetting은 하지 않는다)
• styles/globals.css에 @theme 블록으로 컬러 토큰(Gray/Cool Gray, primary/secondary/tertiary, bg/ink/accent/border 시맨틱 토큰)을 반영한다
• @theme 블록에 타이포그래피 토큰(폰트 사이즈, letter-spacing, line-height, SUIT 폰트 패밀리)을 반영한다
• @theme 블록에 Spacing 토큰(Spacing-010, --spacing-0--spacing-10)을 반영한다
• docs/design/design-system.md의 "토큰 대응표"에 Figma 토큰명 ↔ CSS 변수명 매핑을 기록한다 (Spacing 포함)

완료 조건

• npm run build(또는 typecheck)가 통과한다
• SUIT 폰트가 self-hosted subset 파일로 로드되어 브라우저에서 정상 렌더링됨을 확인한다 (네트워크 탭에서 self-hosted 파일로 요청되는지 확인)
• styles/globals.css의 @theme 토큰이 Tailwind 유틸리티 클래스(bg-*, text-*, p-*, m-*, gap-* 등)로 정상 사용 가능함을 브라우저에서 시각적으로 확인한다
• docs/design/design-system.md 토큰 대응표에 빈 행이 남아있지 않다

참고 자료

Figma 파일의 "⚙️ 디자인 시스템" 페이지 (node 96:278)