DESIGN SYSTEM
& ELEMENTS
DevTI 화면을 이루는 토큰과 공통 컴포넌트를 한 장에 정리한 스타일 가이드. 색·타이포·모션 토큰부터 버튼·필드·배지까지, 모든 화면이 여기서 같은 부품을 가져다 조립한다.
TYPOGRAPHY
제목은 Chakra Petch + Do Hyeon(.font-techno), 본문은 시스템 산세리프, 라벨·코드는 mono.
COLORS
의미별 비비드 팔레트 + 베이스 토큰. 색은 PALETTE 토큰을 의미에 맞춰 쓴다.
BUTTONS
components/common/Button - variant × state. 스타일은 buttonStyles 토큰을 공유.
TEXT FIELDS
components/common/Input - theme: light(밝은 폼) / hud(어두운 글래스 폼).
BADGES
ColorBadge - 배경 밝기에 따라 글자색 자동(YIQ). GhostBadge - 어두운 위 반투명 보조 라벨.
COMPONENTS
조립용 공통 부품 - Select · Spinner · CountStats.
ICONS
react-icons/fi 라인 아이콘 세트로 통일 - 색은 의미에 맞춰 PALETTE 토큰을 입힌다.
MOTION
components/motion/variants - 진입 모션 프리셋. 새 화면은 직접 만들지 말고 재사용한다.
- fadeUp아래에서 떠오르며 페이드인 · y 24→0 · 0.5s
- staggerContainer자식 0.13s 간격 순차 등장
- listStagger촘촘한 목록용 0.05s 간격
- slideInLeft / Right좌·우 슬라이드 진입
- pageTransition라우트 전환 페이드(느린 퇴장)
- EASE_OUT[0.22, 1, 0.36, 1] 공통 가속 곡선
TOKENS ↔ FIGMA
디자이너의 Figma 변수와 코드 토큰이 tokens.json 한 파일로 이어지는 협업 파이프라인.
디자이너는 Figma에서, 개발자는 코드에서 색을 다뤄요. 문제는 같은 색을 두 곳에서 따로 관리하면 어긋난다는 것. “이 분홍 톤 살짝 바꿔주세요” 한마디에 디자이너는 Figma를, 개발자는 코드 곳곳의 hex를 각자 손봐야 했죠.
그래서 색·간격 값을 tokens.json 한 파일에 모으고, Figma가 이 파일과 직접 동기화되게 했어요. 이제 디자이너가 Figma에서 색을 바꾸면 같은 이름으로 코드까지 흘러갑니다.
Figma Variables ⇅ tokens.json (Tokens Studio git-sync) → CSS 변수 · PALETTE
디자이너가 색·간격 정의
Tokens Studio git-sync · 단일 출처
npm run tokens · 의존성 0
모든 화면이 공유
| Figma 변수 | 코드 (CSS · 상수) | 값 |
|---|---|---|
| brand/color/design | --ds-color-design · PALETTE.design | #f472b6 |
| brand/color/dev | --ds-color-dev · PALETTE.dev | #818cf8 |
| base/color/background | --ds-color-background · → --background | #09090b |
변수 이름이 1:1로 대응 - 이름이 같으니 “이 색 뭐예요?”라고 물을 일이 없다.
색 정의가 tokens.json 한 곳뿐 - 코드 곳곳에 hex 를 흩뿌리지 않는다.
Figma 변수명 = 코드 토큰명(1:1). 디자이너와 개발자가 같은 언어로 말한다.
값만 바꿔 재생성 - 화면 전체 색 조정이 콘텐츠 수정처럼 가볍다.
생성기가 표준 라이브러리만 써서 파이프라인이 가볍고 이식 가능하다.
단일 출처 · 이 페이지의 컴포넌트는 모두 src/components/common 실물을 그대로 렌더하고, 색 토큰은 design-tokens/tokens.json 한 곳에서 온다 (Figma Tokens Studio 동기 → npm run tokens 로 코드 생성). 토큰/컴포넌트를 고치면 가이드도 같이 바뀐다.
시스템 작업가이드(아키텍처)로