디자인 시스템 Playground
디자인 토큰과 공용 컴포넌트가 실제로 어떻게 보이는지 한자리에 모았다. 색·간격·반경· 그림자 토큰을 눈으로 확인하고, 마지막엔 컨트롤을 조작해 Button의 변형을 직접 조합하며 그에 맞는 코드까지 확인해 본다.
1
컬러 토큰
모든 색상은 CSS 변수 토큰으로 정의돼 있다. 역할별(브랜드·시맨틱·표면)로 묶여 있으며, 라이트/다크 모드에 따라 값이 자동으로 바뀐다 — 우측 상단 테마 토글로 확인해 보자.
Brand
--color-primary
--color-primary-hover
--color-primary-light
Semantic
--color-success
--color-warning
--color-error
--color-info
Surface
--color-bg
--color-surface
--color-border
--color-text
--color-text-muted
2
간격 · 반경 스케일
일관된 간격(spacing)과 반경(radius) 스케일은 화면의 리듬을 만든다. 임의의 px 대신 토큰을 쓰면 디자인이 자동으로 정렬된다.
Spacing
--sp-1--sp-2--sp-3--sp-4--sp-6--sp-8--sp-12--sp-16Radius
sm
md
lg
xl
full
3
그림자(Elevation)
그림자는 요소의 ‘높이’를 표현한다. 단계별 그림자 토큰으로 카드·모달·드롭다운의 깊이감을 일관되게 준다.
shadow-sm
shadow-md
shadow-lg
4
타이포그래피
Typography 컴포넌트가 제공하는 제목(H1~H4)과 본문 변형이다. 일관된 스케일을 한곳에서 관리한다.
Heading 1 — 제목
Heading 2 — 제목
Heading 3 — 제목
Heading 4 — 제목
Lead — 도입부에 쓰는 약간 큰 본문 텍스트입니다.
Body — 일반 본문 텍스트입니다.
Muted — 부가 설명용 흐린 텍스트입니다.
const code = '인라인 코드 텍스트'5
Button 컴포넌트
Button은 4가지 변형(variant)과 3가지 크기(size)를 조합한다. 상태별 스타일도 토큰을 참조하므로 다크 모드에서도 일관된다.
6
인터랙티브 빌더
아래 컨트롤을 조작하면 미리보기 버튼과 코드가 실시간으로 바뀐다. 컴포넌트의 props 조합을 직접 체험해 보자.
variant
size
isLoading
fullWidth
●●●생성된 코드
<Button>
미리보기 버튼
</Button>Storybook과의 관계
이런 변형 조합 실험은 Storybook의 Controls와 같은 발상이다. 컴포넌트를 앱과 분리해 모든 상태를 한자리에서 점검하면, 디자인 일관성과 회귀를 빠르게 잡아낼 수 있다.
디자인 시스템은 ‘같은 토큰과 같은 컴포넌트를 공유’할 때 완성된다.
색·간격·타이포·컴포넌트를 한 원천에서 관리하면, 일관성은 저절로 따라온다.