디자인토큰 (design token)
쉽게 풀면
색깔이나 크기 같은 디자인 값을 하나의 이름표가 붙은 변수로 만들어서, 여러 곳에서 똑같이 재사용할 수 있게 하는 것이에요.
왜 중요한가
디자인 토큰은 색, 간격, 글꼴 크기, 그림자 같은 디자인 결정을 이름 붙인 변수(예: color-primary-500)로 저장해 디자인 도구와 여러 플랫폼 코드에 동일하게 공급하는 방식입니다. 브랜드 색을 바꿀 때 토큰 하나를 수정하면 웹·iOS·Android에 동시에 반영되므로, 디자인 시스템의 일관성과 테마 전환(다크 모드)을 기술적으로 가능하게 하는 기반입니다. 디자인과 코드 사이의 값을 일치시켜 유지보수 효율을 크게 높이는 도구다.
핵심 정리
- 디자인 토큰은 디자인 결정(색, 글자 크기, 간격 등)을 플랫폼에 묶이지 않는 방식으로 담아 팀, 도구, 기술이 공유하게 하는 방법입니다. W3C 커뮤니티 그룹인 Design Tokens Community Group의 형식 문서는 토큰을 “사람이 읽을 수 있는 이름과 연결된 정보로, 최소한 이름과 값의 쌍”으로 정의합니다.
- 같은 문서의 예로 텍스트 색을 나타내는
color-text-primary, 제목 글자 크기를 나타내는font-size-heading-level-1같은 이름이 나옵니다. 값 자체가 아니라 “무엇을 위한 값인가”를 이름에 담는 것이 요점입니다. - 이 형식 문서는 Community Group의 보고서(2025년 10월 28일 최종 보고서)로, W3C 표준이나 표준 트랙 문서가 아닙니다. “W3C 표준”이라고 쓰면 부정확합니다.
- 이 커뮤니티 그룹의 공지는 “디자인 토큰”이라는 말을 Jina Anne이 Salesforce에 있을 때 Jon Levine과 함께 만들었다고 소개합니다.
- 디자인 시스템 안에서 토큰은 값의 층위만 다루므로, 컴포넌트 구조나 사용 지침은 별도로 필요합니다.
예시로 보기
가상의 예입니다. 어떤 서비스가 주요 버튼 색을 한 곳에서 관리한다고 합시다.
| 방식 | 버튼 색을 바꿀 때 |
|---|---|
| 화면마다 색상 값을 직접 적음 | 버튼이 쓰인 모든 화면을 찾아 하나씩 수정 |
| 토큰 이름으로 참조 | 토큰의 값 하나를 바꾸면 이를 참조하는 곳이 함께 바뀜 |
이름이 용도를 담고 있으면(예: 텍스트 기본색) 나중에 값만 교체해도 의미가 유지되고, 이름이 값을 그대로 담고 있으면(예: 파란색 500) 값이 바뀔 때 이름과 내용이 어긋날 수 있습니다.
자주 하는 오해
| 오해 | 바로잡기 |
|---|---|
| 디자인 토큰은 W3C 표준이다. | 형식 문서는 W3C 커뮤니티 그룹의 보고서이며 표준 트랙이 아닙니다. |
| 토큰은 색 값만 담는다. | 색, 글자 크기, 간격 등 여러 종류의 디자인 결정을 담는 방법입니다. |
| 토큰만 있으면 디자인 시스템이 완성된다. | 토큰은 값의 층위입니다. 컴포넌트와 사용 지침은 따로 필요합니다. |
| 토큰이 많을수록 일관성이 높아진다. | 지나치게 세분화하면 관리해야 할 변수가 늘어 유지보수가 어려워질 수 있습니다. |
논문에서는 이렇게 쓰입니다
실제 논문에서
이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.
예시 문장
아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.
중앙화된 변수 값 변경만으로 전체 시스템에 일관되게 반영된 디자인토큰 활용 사례를 설명한다.
이 문장은 디자인토큰이 여러 제품에 걸친 시각적 일관성을 코드 수준에서 유지하는 수단으로 쓰이는 사례를 보여준다.
조금 더 깊게 보면
토큰은 값 자체가 아니라 의미를 담은 이름 체계가 핵심이며, 원시 토큰(blue-500)과 의미 토큰(color-action-primary)을 층으로 나누어야 테마 교체가 가능합니다. 이름 체계 설계에 실패하면 토큰이 수천 개로 늘어 아무도 어느 것을 써야 할지 모르게 되는 문제가 실무에서 반복됩니다. Salesforce의 Lightning 팀(Jina Anne 등)이 2014년경 개념을 정식화했고, W3C 디자인 토큰 커뮤니티 그룹이 교환 포맷을 표준화하고 있습니다. 토큰은 값의 층위만 다루므로 컴포넌트 구조나 사용 지침은 별도로 필요합니다. 디자인 토큰은 색상 값이나 여백 수치를 직접 하드코딩하는 대신 이름 붙인 변수로 관리해, 하나의 토큰 값만 바꾸면 이를 참조하는 모든 화면에 일괄 반영되게 한다. 라이트 모드와 다크 모드처럼 테마가 여러 개일 때도 토큰 이름은 그대로 두고 값만 테마별로 바꿔 대응할 수 있다.
주의할 점
디자인토큰 체계가 지나치게 세분화되면 관리해야 할 변수의 수가 많아져 오히려 유지보수 복잡도가 증가할 수 있다.
헷갈리기 쉬운 용어
| 용어 | 한 줄 설명 |
|---|---|
| 디자인 토큰 | 디자인 결정을 이름이 붙은 값으로 저장한 것 |
| 디자인 시스템 | 토큰, 컴포넌트, 지침을 아우르는 더 큰 체계 |
| 디자인 언어 시스템 | 시각 표현의 원칙과 어휘를 정리한 체계 |
참고 문헌
- Design Tokens Community Group. (2025). Design tokens format module 2025.10. W3C Final Community Group Report.
- Patel, R. (2025). The role of style tokens in modern design systems: Ensuring consistency and flexibility. Journal of Information Systems Engineering and Management, 10(30s), 34–44.
표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.