디자인 토큰이란?
디자인 토큰은 색상, 여백 단계, 글자 크기처럼 하나의 디자인 결정을 담는 이름 붙은 값입니다. 결정에 이름을 부여하면 디자인 도구와 코드 양쪽에서 재사용할 수 있어, 같은 값을 곳곳에 손으로 옮겨 적을 필요가 없어집니다.
값에 이름을 붙이는 이유
주요 버튼에 쓰는 색을 떠올려 보세요. 그대로 적으면 스타일시트에서는 #2563EB, Figma의 채우기에서는 16진수 필드, 지난주 누군가 입력한 코드에서는 문자열로 나타납니다. 같은 것이 세 벌 있고, 서로 아무 관계도 없습니다.
토큰으로 만들면 이름 아래 한 번만 존재합니다.
--color-action-primary: #2563EB;나머지는 모두 그 이름을 참조합니다. 값을 한 번 바꾸면 사용하는 모든 곳이 바뀝니다. 이 간접 참조가 개념의 전부이며, 토큰에 관한 나머지 이야기는 여기서 파생됩니다.
토큰이 다루는 범위
- 색상: 팔레트, 스케일, 그리고 배경·테두리·텍스트·상태 같은 의미적 역할
- 타이포그래피: 서체, 크기, 굵기, 행간, 자간
- 여백: 일관된 스케일. 보통 4px이나 8px을 기준으로 합니다
- 모서리 반경과 테두리 두께
- 그림자와 높이감
- 모션: 지속 시간과 이징 곡선
- 브레이크포인트와 레이아웃 치수
토큰은 변수가 아닙니다
이 구분은 중요합니다. CSS 변수는 메커니즘입니다. 디자인 토큰은 결정이고, 마침 그 메커니즘을 통해 표현될 뿐입니다.
실무적 차이는 이식성입니다. 토큰은 특정 기술과 독립적으로 존재하며, 그래서 같은 토큰 묶음을 CSS 사용자 정의 속성, Tailwind 설정, Figma 변수, Swift, Kotlin으로 내보낼 수 있습니다. CSS 한 줄로만 존재한다면 그것은 변수입니다.
형식
W3C 산하 Design Tokens Community Group은 도구 간 공통 교환을 목표로 하는 JSON 형식을 공개합니다. 모든 토큰에 $value와 $type을 부여합니다.
{
"color": {
"action": {
"primary": { "$value": "#2563EB", "$type": "color" }
}
}
}채택 정도는 고르지 않지만 넓어지고 있으며, 디자인 도구와 빌드 파이프라인 사이의 중립적 교환 형식에 가장 가까운 존재입니다.
Flash DS와의 관계
Flash DS는 프롬프트, 웹사이트 주소, Figma 파일, 스크린샷에서 완전한 토큰 묶음을 만들고, 이를 CSS 사용자 정의 속성, Tailwind 설정, Tokens Studio JSON, Figma 변수로 내보냅니다.