Token Terms
이 문서가 답하는 질문: “토큰”이라는 단어를 둘러싼 DTCG·계층·빌드 어휘가 정확히 무엇을 의미하는가? 한 줄 답 (Pyramid Top): 이 카테고리는 “값을 어떻게 명명·저장·전달하는가” 의 어휘 — DTCG 표준과 alias·tier·codegen 파이프라인을 다룬다.
카테고리 개요
| 키워드 | 한 줄 정의 |
|---|---|
| Token | 디자인 결정을 코드로 직렬화한 명명된 값 |
| DTCG | W3C Design Tokens Community Group의 JSON 명세 |
| Tier | primitive → semantic → component의 3-계층 |
| Alias | 다른 토큰을 가리키는 토큰 ({color.primitive.blue.500}) |
| Codegen | DTCG JSON → CSS·TS·Swift 등으로 변환 |
본문 (알파벳 순)
Alias Token
카테고리: Tokens 별칭: reference token, pointer token
다른 토큰의 값을 가리키는 토큰. DTCG에서는 중괄호 문법으로 표기 — "$value": "{color.primitive.blue.500}". semantic 토큰의 본질이다.
관련: DTCG, Semantic Token, Reference Resolution 참고: 01-tokens/01-what-is-a-design-token
Codegen (코드 생성)
카테고리: Tokens 별칭: token transformation, build
DTCG JSON을 플랫폼별 출력으로 변환하는 빌드 단계. CSS variables, TypeScript const, Swift Color, Android XML 등으로 한 번에 뽑는다. Style Dictionary가 사실상 표준.
관련: Style Dictionary, DTCG, Transformation 참고: 08-pipeline-distribution
Component Token
카테고리: Tokens 별칭: component-specific token, 3-tier token
특정 컴포넌트만을 위한 토큰. 예: button.primary.bg, card.shadow. semantic 토큰을 alias 하며, 최상위 사용자(컴포넌트 코드)가 가장 자주 본다.
관련: Primitive Token, Semantic Token, Tier 참고: 01-tokens/01-what-is-a-design-token
Design Token
카테고리: Tokens 별칭: token, design token
디자인 결정(색·간격·타이포)을 코드로 직렬화한 명명된 값. color.primary = #2563eb 같은 매핑. 이 도메인의 핵심 개념.
관련: DTCG, Token Tier, SSOT 참고: 01-tokens/01-what-is-a-design-token
DTCG (Design Tokens Community Group)
카테고리: Tokens 별칭: W3C DTCG, design-tokens spec
W3C 산하의 토큰 표준화 그룹. 토큰을 JSON으로 표현하는 명세를 만든다 — $value, $type, $description, $extensions 4가지 키가 핵심. 2024~2025년 draft 단계.
관련: $value, $type, $extensions, Alias Token
참고: 01-tokens/01-what-is-a-design-token
$description
카테고리: Tokens 별칭: DTCG description
DTCG의 토큰 메타 필드. 토큰의 의미·사용처를 자유 텍스트로 설명. 디자이너-개발자 공유에 필수.
$extensions
카테고리: Tokens 별칭: DTCG extensions
DTCG의 도구별 확장 메타 필드. Figma의 com.figma.variable.id, Style Dictionary의 transforms 같은 벤더 고유 정보가 여기에 들어간다.
관련: DTCG, Style Dictionary
Foundation Token
카테고리: Tokens 별칭: base token, raw token (구어)
primitive 토큰의 다른 이름. 어떤 의미와도 묶이지 않은 raw 값 — blue.500, space.4 같은 것.
관련: Primitive Token, Tier
Global Token
카테고리: Tokens 별칭: app-wide token, base token
앱 전역에서 쓰는 토큰. primitive와 동의어로 쓰이기도 하지만, 일부 시스템(Adobe Spectrum)은 런타임 컨텍스트(예: density)에 따라 바뀌는 layer로 구분한다.
관련: Primitive Token, Theme Token
Primitive Token
카테고리: Tokens 별칭: 1-tier token, base token, foundation token
가장 아래 계층의 토큰. 의미가 없는 raw 값 — blue.500 = #2563eb. semantic 토큰이 이 위에 의미를 입힌다.
관련: Semantic Token, Component Token, Tier 참고: 01-tokens/01-what-is-a-design-token
Reference Resolution
카테고리: Tokens 별칭: token resolution, alias resolution
alias 체인(button.bg → color.primary → blue.500)을 최종 raw 값으로 펼치는 빌드 단계. 순환 참조 검출이 핵심 책임.
관련: Alias Token, Codegen, Style Dictionary
Semantic Token
카테고리: Tokens 별칭: 2-tier token, alias token (구어), purpose token
용도·의미를 이름으로 가진 토큰. color.primary, space.gutter. primitive를 alias 하며, 테마 전환의 단위가 된다.
관련: Primitive Token, Component Token, Theme Token 참고: 01-tokens/01-what-is-a-design-token
System Token
카테고리: Tokens 별칭: theme token, contextual token
테마·brand·density에 따라 값이 바뀌는 토큰. light/dark에서 color.bg가 다른 raw를 가리키는 식. semantic 토큰 ⊂ system 토큰으로 보는 시스템이 많다.
관련: Semantic Token, Theme Token, Theming
Theme Token
카테고리: Tokens 별칭: themed token
테마 키(light/dark/brand-a)에 따라 raw 값이 달라지는 토큰. data-theme 또는 prefers-color-scheme으로 토글된다.
관련: System Token, data-theme 참고: 06-theming
Tier (계층)
카테고리: Tokens 별칭: token tier, token level
토큰을 의미 수준으로 나눈 계층 — 1: primitive → 2: semantic → 3: component. 3-tier가 사실상 표준.
관련: Primitive Token, Semantic Token, Component Token 참고: 01-tokens/01-what-is-a-design-token
Token Group
카테고리: Tokens 별칭: DTCG group, nested namespace
DTCG에서 토큰을 중첩 객체로 묶은 단위. color: { primary: { ... } }처럼 점 표기로 펼쳐진다.
관련: DTCG, Naming Convention
Token Pipeline
카테고리: Tokens 별칭: token build pipeline
Figma/Tokens Studio → DTCG JSON → Style Dictionary → CSS·TS의 전체 흐름. CI에서 자동화하는 것이 표준.
관련: Codegen, Style Dictionary, Reference Resolution 참고: 08-pipeline-distribution
Token Studio
카테고리: Tokens 별칭: Tokens Studio for Figma
Figma 플러그인. 디자이너가 Figma 안에서 토큰을 만들고 DTCG JSON으로 export 할 수 있게 해준다. Figma Variables 출시 이후 역할이 바뀌고 있다.
관련: DTCG, Designer-Developer Handoff
Transformation
카테고리: Tokens 별칭: Style Dictionary transform, format
토큰 값을 플랫폼에 맞게 변환하는 함수. 예: hex → rgba, rem → px, oklch → sRGB fallback. Style Dictionary의 핵심 추상.
관련: Codegen, Style Dictionary
$type
카테고리: Tokens 별칭: DTCG type
DTCG의 타입 메타 필드. color, dimension, fontFamily, fontWeight, duration, cubicBezier, number, shadow, gradient, typography, transition 등 11종이 spec 기본.
관련: DTCG, $value
참고: 01-tokens/01-what-is-a-design-token
$value
카테고리: Tokens 별칭: DTCG value
DTCG에서 실제 값을 담는 키. raw 값("#2563eb")이거나 alias("{color.blue.500}")다.
관련: DTCG, Alias Token, $type
Naming Convention (네이밍 규약)
카테고리: Tokens 별칭: token naming, BEM-like naming
토큰 이름 짓는 규칙. category.usage.variant.state 같은 4-segment가 흔하다 — 예: color.button.primary.hover.
관련: Token Group, Tier
Token Set
카테고리: Tokens 별칭: Tokens Studio set, layer
여러 토큰 묶음을 조합 가능한 layer로 나눈 것. Tokens Studio의 핵심 추상. base + light + brand-a처럼 위에서 아래로 쌓는다.
관련: Token Studio, Theme Token, Multi-brand Theming
Versioned Tokens
카테고리: Tokens 별칭: token versioning, deprecation marker
토큰에 deprecated 상태를 표시해 마이그레이션 기간을 두는 관행. DTCG $extensions.deprecated: true로 표기한다.
관련: Migration, Versioning, $extensions
요약 + Mermaid
이 카테고리는 값의 명명·저장·전달을 다룬다. 핵심은 3-tier 와 DTCG JSON, 그리고 그것을 플랫폼별로 풀어내는 codegen pipeline.