What is a Design Token

이 문서가 답하는 질문: 디자인 토큰은 정확히 무엇이고, 변수와 무엇이 다르며, 왜 2014년 이후에야 별도의 이름이 붙었는가. 한 줄 답 (Pyramid Top): 디자인 토큰은 **“디자인 결정을 이름으로 박제한 플랫폼-중립 값”**이다. 변수와 다른 점은 값이 아니라 결정을 저장한다는 것, 그리고 한 번 정의해서 여러 플랫폼이 동시에 소비한다는 것.

Why — 왜 “변수”로는 부족했나

CSS preprocessor가 등장한 2007년(Sass) 이후, “값을 한 곳에 모으자”는 발상은 이미 보편적이었다.

// styles/_variables.scss (2010년대 초)
$color-primary: #3b82f6;
$spacing-md: 16px;
$font-size-lg: 18px;

그런데 이 Sass 변수 방식은 다음 4가지를 못 한다.

핵심은 **“변수는 값에 이름을 붙이지만, 토큰은 결정에 이름을 붙인다”**는 차이다. #3b82f6이라는 색은 값이지만, “Primary brand color”라는 결정은 그 값을 둘러싼 컨텍스트·의미·예외까지 포함한다.

How — 디자인 토큰의 동작 원리

1) “결정 → 값” 분리

디자인 토큰은 항상 두 층을 거친다:

color.primary는 결정에 붙은 이름이고, {color.blue.500}은 어떤 값을 채택할지에 대한 alias이며, #3b82f6은 실제 값이다.

2) 플랫폼-중립 JSON으로 직렬화

W3C DTCG는 이 결정을 다음 JSON으로 박제한다:

{
  "color": {
    "blue": {
      "500": { "$value": "#3b82f6", "$type": "color" }
    },
    "primary": {
      "$value": "{color.blue.500}",
      "$type": "color",
      "$description": "Brand primary — buttons, links, focus rings"
    }
  }
}

이 한 벌의 JSON은 빌드타임에 5개 출력을 만든다:

• :root { --color-primary: #3b82f6; } (CSS)
• export const colorPrimary = "#3b82f6" (TS)
• UIColor(red: 0.23, green: 0.51, blue: 0.96, alpha: 1.0) (iOS)
• <color name="color_primary">#3b82f6</color> (Android XML)
• tokens: { colors: { primary: { value: "#3b82f6" } } } (Panda config)

What — 토큰의 구성요소

토큰 하나의 anatomy

”토큰이 될 수 있는 것”의 카탈로그

W3C DTCG가 정의한 토큰 타입:

shadow, typography 같은 composite token은 여러 원자 토큰을 묶어 하나의 “결정 단위”로 다룬다.

{
  "shadow": {
    "card": {
      "$type": "shadow",
      "$value": {
        "color": "{color.shadow.subtle}",
        "offsetX": "0px",
        "offsetY": "2px",
        "blur": "8px",
        "spread": "0px"
      }
    }
  }
}

What-if — 토큰을 변수처럼 다룰 때 깨지는 것

• 함정 1: hex를 컴포넌트에 직접 사용

  • 증상: 디자이너가 “primary 색을 살짝 더 푸르게”라고 하자 코드 200곳 수정
  • 원인: <Button style={{ background: '#3b82f6' }} /> — 결정이 아니라 값을 박았음
  • 대응: color.primary 토큰을 거치게 강제. ESLint 규칙으로 raw hex 금지

• 함정 2: 토큰을 .scss에만 정의

  • 증상: iOS 팀이 “그 파랑이 뭐였죠?” → 사람이 받아쓰기
  • 원인: Sass는 플랫폼-bound. SSOT가 아님
  • 대응: DTCG JSON으로 옮기고 Style Dictionary로 .scss·.swift·.xml 동시 생성

• 함정 3: 토큰을 한 층에만 둠

  • 증상: 다크모드 추가에 100개 토큰을 다 바꿔야 함
  • 원인: primitive와 semantic을 섞어둠 (color.button = #3b82f6)
  • 대응: 다음 문서(3-tier 계층) 참고

Insight — 왜 2014년이었나, 왜 “design token”이었나

“design token”이라는 용어는 2014년 Salesforce Lightning Design System에서 Jina Anne와 동료들이 처음 공식화했다. 그 직전인 2013년경 트위터의 Bootstrap이 Less 변수 방식의 디자인 시스템을 대중화했지만, Salesforce는 모바일·이메일·웹·외부 파트너 앱에 같은 값을 줘야 했다. CSS 변수만으로는 부족했다.

흥미로운 사실들:

• “token”이라는 단어 자체는 컴파일러 이론에서 차용됐다. 소스 코드의 식별자가 lexer를 거쳐 token이 되듯, 디자인 결정이 export를 거쳐 디자인 토큰이 된다.
• Style Dictionary는 2016년 Amazon이 OSS로 공개. “이름이 너무 평범해서 검색이 안 된다”는 농담이 있었지만, 결국 de facto 표준이 됐다.
• W3C DTCG(Design Tokens Community Group)는 2021년 발족, 2024년 Editor’s Draft. 아직 W3C Recommendation이 아니지만, 모든 주요 도구(Figma Tokens Studio, Style Dictionary v4, Penpot)가 이 포맷을 채택했다.
• Brad Frost의 Atomic Design(2013)이 컴포넌트의 원자성에 집중했다면, design token은 값의 원자성에 집중한다. 두 흐름이 만난 것이 2020년대의 디자인 시스템이다.

토큰이 단순한 변수가 아닌 이유는 그것이 가진 문화적 무게다. 토큰은 디자이너와 개발자가 같은 단어로 같은 결정을 가리킬 수 있게 하는 유비쿼터스 언어다. #3b82f6은 코드이지만, color.primary는 대화다.

요약

• 디자인 토큰은 **“디자인 결정을 이름으로 박제한 플랫폼-중립 값”**이다.
• Sass 변수와 다른 점: 다중 플랫폼 / 런타임 전환 / 디자인 도구 동기화 / 의미·값 분리.
• W3C DTCG는 그 토큰을 $value, $type, $description, $extensions로 직렬화한 JSON 포맷이다.
• 2014년 Salesforce Lightning에서 시작 → 2016년 Style Dictionary → 2021년 W3C DTCG로 표준화의 길.