iOS 색상 토큰(Role-based Color Tokens) 역할 설명 가이드

 

iOS 색상 토큰(Role-based Color Tokens) 역할 설명 가이드

 iOS 디자인 시스템에서 사용되는 색상 토큰(Color Tokens) 의 역할을 의미 기반(Semantic)으로 정리

1. 색상 토큰이란?

Color Token은 특정 색상(HEX, RGB)을 직접 사용하는 대신 의미(Semantic)로 이름을 부여한 색상 규칙입니다.

디자인 시스템에서 이를 사용하는 이유는 다음과 같습니다.

• 다크/라이트 모드 자동 대응
• 브랜드 리브랜딩 시 유지보수 용이
• 플랫폼(iOS/Android/Web) 간 색상 일관성 유지
• 접근성(Contrast) 기준 준수
• UI 위계(Hierarchy) 명확화

 

2. 토큰 카테고리별 역할 정리

 

Primary Tokens

제품을 대표하는 가장 중요한 색상 그룹입니다.

역할

• 브랜드 정체성 표현
• 가장 중요한 액션(Button, CTA)의 기본 색
• 핵심 UI 포커스 요소

사용 예시

• Primary Button 배경
• Navigation Bar Tint
• 주요 아이콘 강조

토큰 목록

• primary
• primary.hover
• primary.pressed

 

Secondary Tokens

Primary보다 한 단계 낮은 중요도의 보조 색입니다.

역할

• 서브 액션 및 보조 인터랙션
• 두 번째 레벨 텍스트/버튼 강조
• UI 위계 구분

사용 예시

• Secondary Button
• 카드 강조선
• 태그/칩(Chip) 강조

토큰 목록

• secondary
• secondary.hover
• secondary.pressed

 

Accent Tokens

특정 요소를 눈에 띄게 하기 위한 포인트 색입니다.

역할

• 중요하지는 않지만 주목이 필요한 요소 강조
• 슬라이더, 토글 등 인터랙션 포인트 강조

사용 예시

• 토글 ON 색상
• 배지(Badge)
• 그래프 포인트

토큰 목록

• accent
• accent.highlight
• accent.subtle

 

Background Tokens

UI의 전체 배경 및 계층(Layer)을 구성하는 색상 그룹입니다.

역할

• 화면 전체 배경
• 카드/모달/시트의 레이어 표현
• 다크/라이트 모드에서 대비 조절

사용 예시

• View 기본 배경
• Table/List Cell 배경
• Elevated View 그림자 역할

토큰 목록

• background.base
• background.secondary
• background.elevated

 

Surface Tokens

콘텐츠가 배치되는 UI 표면(Surface) 색상입니다.

역할

• 콘텐츠 컨테이너(Card, Sheet 등)의 바탕색
• 다양한 깊이(Elevation)에 따른 레이어 구분
• 배경과 대비되는 시각적 구획

사용 예시

• Card View
• Modal Sheet
• Widgets

토큰 목록

• surface.base
• surface.elevated
• surface.tertiary

 

Foreground / Text Tokens

텍스트, 아이콘 등 배경 위에 표시되는 시각적 요소의 전경색입니다.

역할

• 텍스트 가독성 보장
• 정보 위계(Primary → Secondary → Tertiary) 표현
• 접근성 기준 준수(WCAG contrast)

사용 예시

• Title, Body 텍스트
• 아이콘 색상
• 테이블/리스트 정보 표시

토큰 목록

• text.primary
• text.secondary
• text.tertiary
• text.disabled

 

Icon Tokens

아이콘에 최적화된 색상 토큰입니다.

역할

• 라이트/다크 모드에 따라 아이콘 대비 유지
• Primary/Secondary 상태 표현
• Disabled 상태 구분

사용 예시

• Tab bar 아이콘
• Action 아이콘
• Navigation 아이콘

토큰 목록

• icon.primary
• icon.secondary
• icon.disabled

 

Border / Divider Tokens

구분선, 테두리, 카드 섹션을 표현하는 색상입니다.

역할

• 레이아웃 구분
• 카드/셀의 시각적 구조 정의
• 입력 필드 포커스 상태 강조

사용 예시

• Divider
• Input field border
• Container outline

토큰 목록

• border.subtle
• border.strong
• border.focus

 

Status Tokens

UI 요소의 상태(의미)를 표현하는 기능적 색상 그룹입니다.

전 세계 디자인 시스템(Material, Apple HIG, Fluent UI 등)에서 동일한 색상 의미 체계를 사용합니다.

역할

• 성공 / 실패 / 경고 / 정보
• 시스템 메시지의 명확한 전달
• 직관적 피드백 제공

사용 예시

• Toast/Alert 색상
• Form validation
• 배지(Badge)

토큰 목록

• status.success
• status.warning
• status.error
• status.info

 

3. 토큰 역할 요약표

카테고리	핵심 역할
Primary	브랜드·핵심 액션
Secondary	보조 액션·부가 강조
Accent	포인트 강조
Background	화면·레이어 배경
Surface	콘텐츠 배경·구획
Text	글자·아이콘 가독성
Icon	UI 아이콘 대비
Border	구획·구분선·포커스 표시
Status	성공/경고/오류/정보 상태

 

4. 왜 Semantic Tokens가 중요한가?

• 다크 모드 전환 시 재작업 최소화
• 브랜드 리브랜딩 시 전체 색상 자동 반영
• 코드 유지보수 비용 절감
• SwiftUI, UIKit 모두에서 확장성↑
• 디자인 툴(Figma)과 iOS 코드 간 1:1 매핑 가능