컬러 토큰 구조 정의
Figma Variables로 컬러 토큰화하기
디자인 시스템을 정리할 때 가장 먼저 정리해야 하는 요소 중 하나가 컬러입니다. 컬러는 대부분의 UI 요소에 공통적으로 사용되기 때문에 기준이 명확하지 않으면 디자인과 개발 과정에서 작은 차이가 점점 누적되기 쉽습니다.
특히 디자인 파일과 실제 제품에서 컬러의 명칭이나 사용 목적이 서로 다르게 관리되는 경우, 수정 작업이 반복되거나 협업 과정에서 혼선이 발생하기도 합니다.
문제를 해결하기 위해 컬러를 디자인 토큰 기반으로 구조화하는 작업이 필요합니다.
컬러 토큰은 단순히 색상 값을 정리하는 것을 넘어 색상이 어떤 역할로 사용되는지 명확히 정의하는 과정입니다. 이를 통해 디자인과 개발에서 동일한 기준으로 컬러를 관리할 수 있습니다.
컬러 토큰은 일반적으로 다음과 같은 구조로 나누어 정의합니다.
1. Base Token (Primitive Token)
실제 색상 값 자체를 정의하는 단계입니다.
예를 들어 Neutral, Primary, Semantic 컬러와 같이 기본 팔레트를 구성하고 각 색상에 명도 단계 값을 부여합니다. 이 단계에서는 색상의 의미를 부여하지 않고 순수한 컬러 값만 정의합니다.
- Neutral / 50
- Neutral / 100
- Neutral / 200
2. Semantic Token (Alias Token)
Base Token에 사용 목적을 연결하는 단계입니다.
예를 들어 텍스트, 배경, 보더와 같이 실제 UI에서 어떤 역할을 하는지에 따라 컬러를 매핑합니다.
이렇게 정의하면 Base Token 값이 변경되더라도 Semantic Token을 통해 전체 UI에 일관되게 반영할 수 있습니다.
- Text / Body
- Button / Secondary
- Background / Default
- Border / Default
3. Component Token (Optional)
특정 컴포넌트에서 사용하는 컬러를 별도로 정의하는 단계입니다. 마찬가지로 컴포넌트 단위까지 Semantic Token 적용하면 UI 변경 시에도 수정 영향을 받는 범위를 명확하게 관리할 수 있습니다.
- Button / Background / Default
- Button / Text / Body
- Text field / Border / Default
Neutral 컬러 토큰 재정의
기존 Neutral 컬러 팔레트는 10~20단계 이상으로 세분화되어 있어 다크 모드 환경에서 명도 차이가 미미해 가시성이 충분히 확보되지 않는 문제가 있었습니다. 또한 제품별로 서로 다른 Neutral 팔레트를 사용하면서 디자인 작업과 검수 과정에서 혼선이 발생하는 경우도 있었습니다.
이를 개선하기 위해 Neutral 팔레트를 10단계로 단순화하여 재구성했습니다. 색상 단계 간 명도 차이를 명확하게 구분함으로써 제품 내 가시성을 높이고 디자인 토큰 관리와 개발 협업 과정에서도 보다 일관된 기준을 적용할 수 있도록 했습니다.
Black & White 컬러 토큰
White와 Black은 Neutral 팔레트의 기준이 되는 색상으로, 각각 가장 밝은 값과 가장 어두운 값을 정의하는 기준 색상입니다. UI에서 배경, 텍스트, 아이콘 등 다양한 요소의 대비를 구성하는 기본 컬러로 사용됩니다.
White 1000 (#FFFFFF)는 주로 밝은 배경이나 다크 모드에서의 텍스트 및 아이콘 컬러로 사용되며 Black 1000 (#000000)은 텍스트, 배경 강조 요소 또는 라이트 모드에서의 대비 요소로 활용됩니다.
Black & White은 Neutral 단계와는 별도로 고정된 기준 컬러로 관리하여 명확한 대비와 일관된 사용 기준을 유지합니다.
디자인 시스템에서 컬러는 단순한 시각 요소가 아니라 제품 전반의 경험을 연결하는 기준이 됩니다.
컬러 토큰 구조를 정의하는 과정은 색상을 정리하는 작업이 아니라, 제품과 협업 방식의 기준을 정리하는 과정이라고 생각합니다. 앞으로도 실제 제품에서 사용하면서 발견되는 문제들을 기반으로 컬러 시스템을 계속 개선해 나갈 예정입니다.
참고 링크
Google Material Design → Gray 50~900 (10단계)
Material Design color palettes
Apple HIG → Semantic 중심 (label, secondary label, tertiary label 등)
iOS, iPadOS system gray colors
Atlassian, IBM Carbon → WCAG 대비 + 토큰 기반 시스템