쉬운 설명
디자이너가 '브랜드 파랑'이라고 부르는 색이 코드에서는 #1E40AF, 다크 모드에서는 #93C5FD, 마케팅 자료에서는 또 다른 값이라면, 시간이 지나면서 색이 미세하게 어긋나기 시작합니다. 디자인 토큰은 그 값에 이름을 붙여 한곳에서 관리하는 방법입니다.
토큰을 쓰는 이유는 단순합니다. ① 같은 결정을 여러 플랫폼이 공유 — 웹·iOS·안드로이드·디자인 도구가 같은 이름을 봅니다. ② 변경이 한 곳에서 — 색 하나 바꾸려고 수십 군데 코드를 안 뒤져도 됩니다. ③ 의미가 분명 — '파랑 500' 대신 '액션 강조'라고 부르면 다크 모드·고대비 모드로 갈아 끼우기 쉽습니다.
토큰은 보통 두 층으로 짜입니다. 기본 토큰(primitive)은 색·크기 같은 원시값(color-blue-500: #1E40AF). 의미 토큰(semantic)은 그 위에 의미를 입힌 것(color-action-primary: color-blue-500). 화면 코드는 의미 토큰을 참조하고, 의미 토큰이 가리키는 기본 토큰만 바꾸면 전체 시스템이 한꺼번에 갱신됩니다.
토큰의 가치는 '의미에 이름을 붙인다'에 있습니다. 'color-blue-500'보다 'color-action-primary'가 더 좋은 토큰입니다. 의미로 이름을 두면 다크 모드(같은 의미, 다른 색), 고대비 모드, 신규 브랜드 색으로 한 번에 갈아 끼우기 쉽습니다. 색뿐 아니라 간격(space-4), 모서리(radius-md), 그림자(elevation-2), 글꼴 크기(text-lg)에도 같은 접근이 적용됩니다.
실무에서는 보통 Figma(디자인 도구)와 코드(웹·iOS·안드로이드)가 같은 토큰 이름을 공유하도록 자동 변환 파이프라인을 둡니다. Style Dictionary·Theo 같은 도구가 JSON 형태의 토큰을 각 플랫폼 코드로 변환해 줍니다. 디자이너가 색 하나를 바꿔도 모든 플랫폼에 자동으로 반영되는 흐름이 가능합니다.
비유로 보면
디자인 토큰은 옷장에 색 카드를 붙여 두는 일과 비슷합니다. '아침용 파랑', '저녁용 회색'처럼 의미로 이름을 두면, 같은 회색이라도 어디에 쓸지가 분명해지고, 브랜드 색을 살짝 조정해도 옷장 전체가 자연스럽게 따라옵니다.
어디에서 만나나
디자인 시스템의 가장 아래층, 멀티 플랫폼(웹+모바일+키오스크)을 운영하는 회사, 다크 모드·고대비 모드·테마 옵션을 지원해야 하는 제품, 브랜드 리뉴얼을 자주 하는 그룹사. Figma의 Variables 기능, Tailwind의 theme 설정, CSS Variables가 모두 디자인 토큰의 구현 형태입니다.
작은 예시
토스가 '메인 액션 버튼은 토스블루'라고 결정했다고 합시다. 'color-action-primary' 토큰이 토스블루를 가리키고, 웹·iOS·안드로이드·디자인 파일이 모두 이 토큰을 참조합니다. 어느 날 '브랜드 컬러를 약간 더 진한 파랑으로 바꾸자'고 결정되면, 토큰 값 하나만 바꾸면 전 플랫폼이 동시에 새 색이 됩니다.
자주 하는 오해
한 줄 정리
디자인 토큰의 비결은 '값이 아니라 의미에 이름을 붙이는' 것입니다. 한 번 잘 이름 붙인 토큰은 그 후의 모든 변경을 한 곳에서 끝낼 수 있게 해 줍니다.