디자인 토큰이란

디자인 토큰은 색상, 간격, 타이포그래피, 그림자와 같은 디자인 결정을 저장하는 이름 있는 변수입니다. 기술에 종속되지 않는 형식으로 작성되며, 디자인 도구와 코드를 연결하여 여러 플랫폼에서 일관성을 보장합니다.

토큰이 없으면 CSS, iOS 및 Android 코드베이스 전반에서 값이 중복됩니다. 단일 토큰 원천을 사용하면 브랜드 색상을 한 번 변경하는 것만으로 모든 플랫폼이 동시에 업데이트됩니다.

일반적인 범주는 색상(브랜드, 의미 기반, 중립), 타이포그래피(글꼴, 크기, 굵기, 줄 높이), 간격(4px 그리드), 모서리 반경, 그림자 및 애니메이션(지속 시간, 완화)입니다.

토큰은 JSON, YAML 또는 W3C 디자인 토큰 형식으로 저장됩니다. 각 토큰에는 이름, 값, 유형 및 선택적 설명이 있습니다. 변환 과정을 통해 플랫폼별 출력으로 변환할 수 있습니다.

전역 토큰은 원시 값입니다: color-blue-500: #3b82f6. 별칭 토큰은 전역 토큰을 의미적으로 참조합니다: color-action-primary: {color-blue-500}. 컴포넌트는 원시 값이 아니라 별칭 토큰을 참조합니다.

CSS 사용자 지정 속성은 웹 토큰의 자연스러운 출력 형식입니다. spacing-4라는 토큰은 --spacing-4: 1rem이 되며, 스타일시트 전체에서 margin: var(--spacing-4)와 같이 사용됩니다.

Figma Tokens 플러그인과 Tokens Studio는 Figma와 코드 저장소 간에 디자인 토큰을 동기화합니다. 디자이너와 개발자가 동일한 토큰 어휘를 공유하므로 전달 과정에서 발생하는 변환 오류를 없앨 수 있습니다.

토큰은 변화합니다. 이전 매핑을 제공하면 기존 값을 사용 중단 처리하면서도 사용하는 쪽을 중단시키지 않을 수 있습니다. 토큰 패키지의 시맨틱 버전 관리는 사용하는 팀에 호환성을 깨는 변경 사항을 알립니다.

동일한 토큰 JSON으로 웹에는 CSS 변수를, iOS에는 Swift 상수를, Android에는 XML 리소스를 출력할 수 있습니다. 하나의 정의 파일로 플랫폼마다 디자인 결정이 달라지는 문제를 없앨 수 있습니다.

색상 토큰과 간격 토큰부터 시작하십시오. 하드코딩된 값을 파일별로 교체하십시오. 코드베이스에서 원시 16진수 값과 픽셀 리터럴을 검색하여 남아 있는 하드코딩된 디자인 결정을 찾으십시오.

별칭 토큰을 사용하면 테마를 지정할 수 있습니다. 별칭이 가리키는 전역 토큰만 바꾸면 컴포넌트 코드를 수정하지 않고 전체 테마가 변경됩니다. 밝은 테마, 어두운 테마 및 브랜드 테마는 모두 동일한 별칭 계층에서 파생됩니다.

전역 토큰과 별칭 토큰의 차이점은 무엇인가요?

디자인 토큰은 플랫폼에 종속되지 않는 형식으로 디자인 결정을 표현하는 이름 있는 변수입니다. 전역 토큰은 원시 값을 담고, 별칭 토큰은 의미를 부여합니다. 두 토큰을 함께 사용하면 일관되고 유지 관리가 쉬우며 여러 플랫폼을 지원하는 디자인 시스템을 구축할 수 있습니다.