디자인 토큰이란 무엇이며 왜 중요한가

디자인 토큰은 이름이 지정된 재사용 가능한 값으로 표현한 디자인 시스템의 원자적 결정입니다. 스타일시트에 #3b82f6을 직접 작성하는 대신 color-primary-500: #3b82f6을 정의하고 어디서나 해당 이름을 참조합니다. 이름에는 의미가 담기며, 모든 참조를 수정하지 않고도 값을 변경할 수 있습니다.

토큰은 모든 시각적 속성을 포괄합니다. 색상 토큰(color-primary-500: #3b82f6), 간격 토큰(spacing-4: 16px), 타이포그래피 토큰(font-size-lg: 18px, font-weight-bold: 700), 테두리 반경 토큰(radius-md: 8px), 그림자 토큰, 애니메이션 지속 시간 토큰이 있습니다. 이를 모두 사용하면 완전한 시각 언어를 표현할 수 있습니다.

토큰은 디자인과 엔지니어링이 공유하는 단일 기준을 만듭니다. 디자이너는 Figma에서 값을 정의하고 엔지니어는 코드에서 이를 사용합니다. 브랜드 색상이 변경되면 토큰 값 하나만 업데이트해도 해당 토큰을 사용하는 모든 구성 요소에 변경 사항이 자동으로 반영됩니다. 수천 개의 파일을 일일이 검색하고 치환할 필요가 없습니다.

토큰이 없으면 색상과 간격 값이 스타일시트, 컴포넌트 파일, 유틸리티 클래스 전체에 하드코딩됩니다. 파란색 하나가 파일에 따라 #3b82f6, rgb(59, 130, 246), blue-500으로 나타날 수 있습니다. 브랜드 색상을 변경하려면 모든 항목을 찾아 바꿔야 하므로 일부를 놓칠 위험이 큽니다.

디자인 토큰은 다중 테마 시스템의 기반입니다. 어두운 모드에서는 color-background 및 color-text와 같은 의미 토큰이 활성 테마에 따라 서로 다른 기본 값을 가리킵니다. 모든 컴포넌트를 바꾸는 대신 매핑 하나만 변경하면 됩니다. 밝은 테마와 어두운 테마는 컴포넌트 코드를 공유하고 토큰 값만 다릅니다.

여러 브랜드를 지원하는 SaaS 플랫폼에서는 토큰을 사용해 코드 중복 없이 브랜드를 맞춤 설정할 수 있습니다. 브랜드 A는 파란색을 기본 색상으로 사용하고 브랜드 B는 녹색을 사용합니다. 서로 다른 것은 의미 토큰 매핑뿐입니다. 버튼 컴포넌트 코드는 동일하며, color-action-primary를 읽어 브랜드마다 다른 색상으로 해석합니다.

토큰은 계층별로 구성됩니다. 기본 토큰은 원시 값입니다. 예를 들어 color-blue-500: #3b82f6과 같습니다. 의미 토큰은 의미를 표현합니다. 예를 들어 color-action-primary: {color-blue-500}과 같습니다. 컴포넌트 토큰은 가장 구체적인 토큰입니다. 예를 들어 button-primary-background: {color-action-primary}과 같습니다. 이 계층 구조는 “무엇”과 “어디에 사용되는지”를 분리합니다.

의미 토큰은 다중 테마를 지원하는 핵심입니다. 밝은 테마에서는 color-background: {color-white}를 사용하고, 어두운 테마에서는 color-background: {color-gray-900}를 사용합니다. 컴포넌트는 특정 색상이 아니라 color-background를 참조합니다. 테마를 변경하면 의미 토큰 매핑이 교체되므로 컴포넌트를 변경할 필요가 없습니다.

Figma 변수는 2023년에 도입된 Figma 내부의 디자인 토큰입니다. 디자이너는 엔지니어가 코드에 구현하는 것과 동일한 토큰 계층을 Figma에서 정의합니다. Tokens Studio for Figma나 공식 Figma Tokens 플러그인과 같은 도구는 Figma 변수를 JSON으로 내보내고, Style Dictionary는 이를 CSS 변수 또는 JS 객체로 컴파일합니다.

W3C 디자인 토큰 커뮤니티 그룹은 디자인 토큰을 위한 표준 JSON 형식을 개발하고 있습니다. 목표는 상호 운용성입니다. 즉, 하나의 토큰 파일이 모든 디자인 도구(Figma, Sketch)와 모든 빌드 도구(Style Dictionary, Theo, Panda CSS)에서 작동하도록 하는 것입니다. 이 사양 형식을 채택하면 토큰 시스템을 미래에도 활용할 수 있습니다.

디자인 토큰에는 관리 체계에 관한 결정이 필요합니다. 새 토큰을 추가할 수 있는 사람(디자인 팀, 엔지니어링 팀 또는 양쪽 모두), 토큰의 버전 관리 방식, 사용 중단된 토큰을 폐기하는 방법, 토큰 변경 사항을 사용하는 팀에 전달하는 방법을 정해야 합니다. 관리 체계가 없으면 토큰 시스템은 일관성을 잃습니다. 토큰 시스템과 나란히 새로운 하드코딩 값이 생겨나 토큰의 목적을 무력화하기 때문입니다.

디자인 토큰 계층 구조에서 의미 토큰은 무엇을 나타냅니까?

디자인 토큰은 디자인 시스템의 어휘를 이루는 이름이 지정된 원자적 값(색상, 간격, 타이포그래피)입니다. 디자인과 코드 사이에 단일 진실 공급원을 만듭니다. 세 계층 구조인 기본 토큰(원시 값), 의미 토큰(의미), 컴포넌트 토큰(구체적인 사용처)은 다중 테마와 다중 브랜드를 지원합니다. Figma 변수와 W3C 디자인 토큰 사양은 디자인과 엔지니어링의 동기화를 이끌고 있습니다. 토큰 관리 체계는 시간이 지나도 시스템의 일관성을 유지합니다.