Design Tokens: CTI 아키텍처, 네이밍, 개발자를 위한 예제

효율적인 스타일 관리: CTI 방법론을 활용한 디자인 토큰 아키텍처 및 명명 규칙

디자인 토큰은 현대 디자인 시스템의 핵심 요소로, 디자이너와 개발자 간의 원활한 협업을 보장합니다. 이는 색상, 글꼴, 간격과 같은 시각적 제품 속성을 표준화하고, 원시 값을 명명된 변수로 전환하는 역할을 합니다. 잘 설계된 토큰 시스템은 새로운 인터페이스 개발을 크게 가속화하고, 확장 및 맞춤화를 간소화하며, 서로 다른 컴포넌트에서 하드코딩된 스타일 값을 수동으로 변경할 필요를 없애 기술 부채를 최소화합니다. 이 글에서는 많은 고급 디자인 시스템의 기반이 되는 인기 있는 CTI 방법론을 사용하여 디자인 토큰의 아키텍처와 명명 규칙의 세부 사항을 깊이 있게 다룰 것입니다.

디자인 토큰의 다단계 추상화

유연하고 확장 가능한 디자인 시스템을 구축하려면 값 추상화 방식이 매우 중요합니다. 현대 시스템은 세 가지 계층 모델(원시 → 의미론적 → 컴포넌트)을 활용하며, 완전성을 위해 종종 0단계—원시 데이터—를 추가하기도 합니다. 이 모델은 구조화된 데이터 흐름을 보장하여 하위 수준의 변경 사항이 상위 수준으로 자동으로 전파되도록 함으로써 일관성을 유지하고 전역 스타일 업데이트를 간소화합니다.

0. 원시 값 (Raw Values): 이는 16진수 색상 코드( #0055FF ), 픽셀 크기 값( 16px ), 특정 글꼴 이름( 'Inter', sans-serif )과 같이 기본적이고 추상화되지 않은 데이터입니다. 원시 값은 시작점 역할을 하지만, 기술 부채를 피하기 위해 코드나 디자인에서 직접 사용해서는 안 됩니다.

1. 원시 토큰 (Primitive Tokens): 이는 첫 번째 추상화 수준입니다. 원시 토큰은 원시 데이터를 디지털화하여 의미는 있지만 여전히 추상적인 이름을 부여합니다. 예를 들어, #0055FF 는 blue-500 이 될 수 있습니다. 만약 브랜드가 기업 색상의 파란색 음영을 변경하기로 결정한다면, 한 곳에서 blue-500 값을 업데이트하는 것만으로 충분하며, 이 변경 사항은 모든 종속 토큰에 자동으로 적용됩니다. 원시 토큰은 주로 색상 팔레트, 간격 스케일 또는 글꼴 크기를 설명합니다.

2. 의미론적 토큰 (Semantic Tokens): 이 토큰들은 인터페이스 내에서 리소스의 역할이나 목적을 설명하며, '왜?'라는 질문에 답합니다. 이들은 원시 토큰을 특정 사용 맥락에 연결합니다. 예를 들어, blue-500 은 color-bg-primary (기본 배경색)를 만드는 데 사용될 수 있습니다. 의미론적 토큰은 테마(밝은/어두운)를 구현하고 다양한 모드에 적응하는 데 중요한 역할을 합니다. 동일한 의미론적 토큰이 활성 테마에 따라 다른 원시 토큰을 참조할 수 있기 때문입니다.

3. 컴포넌트 토큰 (Component Tokens): 이 수준은 개별 요소 또는 컴포넌트 내에서 스타일의 특정 적용을 설명하며, '어디에?'라는 질문에 답합니다. 컴포넌트 토큰은 동일한 의미론적 토큰을 사용할 수 있는 다른 요소에 영향을 주지 않고 특정 컴포넌트에 대한 세부적인 스타일 조정을 가능하게 합니다. 이는 일반적인 의미론의 상속을 보장하면서 예외 및 특정 컴포넌트 요구 사항을 관리하는 역할을 합니다. 예를 들어, color-button-bg-primary-hover 는 기본 의미론적 토큰이 다른 곳에서 사용되더라도 버튼에만 고유할 수 있습니다.

CTI 방법론: 명명 아키텍처

CTI(Category → Type → Item)는 디자인 토큰을 위한 가장 인기 있는 명명 모델 중 하나이며, 이 접근 방식을 대중화시킨 Style Dictionary 도구와 함께 특히 널리 사용됩니다. CTI의 핵심 아이디어는 토큰의 이름이 속한 컴포넌트보다는 물리적 속성 또는 카테고리를 우선시한다는 것입니다. 이는 컴파일러와 스크립트가 시스템을 쉽게 해석할 수 있도록 합니다.

CTI의 명명 공식은 일반적으로 다음과 같습니다: Category-Type-Item-Subitem-State.

각 요소를 자세히 살펴보겠습니다.

• 카테고리 (Category): 토큰의 기본적인 물리적 속성을 정의합니다. 이는 토큰 이름의 항상 첫 번째 단어이며 데이터 유형을 나타냅니다. 예시: color, size, font, spacing, radius.
• 유형 (Type): 이 카테고리가 어떤 UI 속성에 적용되는지 설명합니다. 예시: background, text, border, icon.
• 항목 (Item): 토큰이 관련된 특정 인터페이스 요소 또는 컴포넌트를 지정합니다. 예시: button, dropdown, container.
• 하위 항목 (Sub-item, 수정자): 항목에 대한 설명을 추가하여 변형 또는 역할을 나타냅니다. 예시: primary, secondary, success, warning, danger.
• 상태 (State): 요소의 상호작용 상태를 설명합니다. 예시: hover, active, disabled, focus.

예를 들어, 활성 상태의 기본 버튼 배경색에 대한 토큰은 color-background-button-primary-active와 같이 보일 것입니다.

CTI 접근 방식의 장점과 단점

다른 모든 방법론과 마찬가지로 CTI도 장점과 단점을 가지고 있으며, 디자인 시스템을 설계할 때 이를 고려하는 것이 중요합니다.

CTI의 장점:

• 컴파일러 최적화: 토큰의 첫 단어가 항상 카테고리(color, size, font)를 나타내므로, 컴파일러 스크립트(예: Style Dictionary)가 어떤 데이터를 다루고 있는지 이해하기 매우 쉽습니다. 이는 JSON 토큰 정의에서 CSS 변수, SCSS 믹스인, Swift 파일 및 기타 형식의 자동 생성을 간소화하여 사용자 정의 구성의 필요성을 최소화합니다.
• 효율적인 감사 및 전역 변경: 애플리케이션의 모든 간격(spacing)을 확인하거나 수정하려는 프런트엔드 개발자는 단순히 $spacing- 또는 --spacing- 접두사를 검색하는 것만으로 충분합니다. 이는 모든 간격 변수의 전체 목록을 신속하게 제공하여 전역 감사 또는 대량 변경에 편리합니다.
• 표준화: CTI는 Style Dictionary와 같은 도구의 기본 아키텍처이므로, 디자인 시스템을 다뤄본 많은 개발자에게 잘 문서화되어 있고 이해하기 쉽습니다.

CTI의 단점:

• 컴포넌트 스타일 분산: 현대의 컴포넌트 지향 프레임워크(React, Vue)에서 버튼과 같은 컴포넌트는 독립적인 개체입니다. CTI 접근 방식을 사용하면 이 버튼의 스타일이 디자인 시스템 전체에 분산됩니다. 색상은 colors.json에, 간격은 spacings.json에, 모서리 반경은 radii.json에 있을 수 있습니다. 컴포넌트를 조립하거나 제거하려면 개발자가 여러 파일을 "왔다 갔다"해야 하므로 맥락이 끊기고 작업 흐름이 복잡해집니다.
• 검색 및 자동 완성의 어려움: 버튼 스타일을 지정하는 개발자에게는 color 또는 background 접두사보다는 button 및 primary와 관련된 모든 것을 빠르게 찾는 것이 더 중요할 때가 많습니다. 긴 CTI 토큰에서는 이러한 키워드가 중간에 나타납니다. IDE의 자동 완성 기능은 처음에는 많은 색상을 제안하므로, 개발자가 원하는 컴포넌트에 도달하려면 토큰의 상당 부분을 입력해야 합니다.
• 컴포넌트 리팩토링 노력: 비즈니스에서 컴포넌트 이름 변경(예: modal을 dialog로)을 결정하는 경우, CTI 접근 방식으로는 프런트엔드 개발자가 수많은 카테고리(색상, 그림자, z-인덱스, 간격)에 걸쳐 토큰을 검색하고 이름을 변경해야 합니다. 만약 컴포넌트가 우선시되었다면(dialog-bg-color), 단일 폴더 또는 토큰 그룹의 이름만 변경하면 충분했을 것입니다.

의미론적 토큰 vs. 컴포넌트 토큰: 역할 구분

의미론적 토큰과 컴포넌트 토큰의 차이점을 이해하는 것은 유연한 디자인 시스템을 구축하는 데 핵심입니다. 명명 공식은 비슷하지만, 그 목적은 근본적으로 다릅니다.

의미론적 토큰은 '왜?'라는 질문에 답합니다. 이들은 스타일의 역할이나 의도를 정의합니다. 예를 들어, color-bg-primary는 사용되는 위치와 관계없이 "기본 배경색"을 의미합니다. 이 토큰들은 재사용성이 높으며 전반적인 일관성과 테마 지원을 보장하는 역할을 합니다. 명명 공식은 다음과 같습니다: [카테고리]-[속성]-[역할]-[중요도]-[상태].

컴포넌트 토큰은 '어디에?'라는 질문에 답합니다. 이들은 특정 컴포넌트에 고유한 스타일을 설명합니다. 일반적인 의미론에서 벗어나거나 시스템의 다른 부분에 영향을 주지 않고 특정 요소에 고유한 스타일을 적용해야 할 때 사용됩니다. 본질적으로 이들은 관리되는 예외입니다. 명명 공식은 다음과 같습니다: [카테고리]-[컴포넌트]-[속성]-[역할]-[중요도]-[상태]. 보시다시피, [컴포넌트]가 단순히 체인에 추가됩니다.

황금률: 토큰이 여러 곳에서 재사용되고 일반적인 목적을 정의한다면, 이는 의미론적 토큰입니다. 특정 요소나 컴포넌트에 대해서만 스타일을 변경해야 한다면, 이는 컴포넌트 토큰입니다.

CTI 명명 요소 상세 설명

CTI 명명에 대한 더 깊은 이해를 위해 각 요소를 예시와 함께 자세히 살펴보겠습니다.

• 카테고리 (Category): 주요 폴더 또는 데이터 유형입니다. 이는 토큰을 구성하는 기본을 형성합니다.

* color – 모든 색상 값.

* spacing – 내부 및 외부 간격.

* radius – 모서리 반경.

* shadow – 그림자 매개변수.

* typography – 텍스트 스타일(크기, 두께, 줄 높이).

* size – 요소 너비/높이.

* z-index – 요소 레이어링 순서 관리.

* opacity – 불투명도 값.

* duration – 애니메이션 지속 시간.

• 속성 (Property): 토큰이 해당 카테고리 내에서 UI의 어떤 부분과 관련되는지 명확히 합니다.

* bg / surface – 배경색.

* text – 텍스트 색상.

* border – 테두리 색상.

* icon – 아이콘 색상.

* outline / ring – 포커스 윤곽선.

* overlay – 모달 배경색.

• 역할 (Role, 의미/목적): 토큰의 기능적 또는 감성적 중요성을 정의합니다.

* primary / secondary / tertiary – 계층 표시.

* brand / accent – 브랜드 색상.

* success – 성공 메시지(녹색).

* warning – 경고(노란색).

* danger / error – 오류(빨간색).

* neutral – 중립 요소(회색).

* inverse – 어두운 배경에서 색상이 반전되는 요소.

* static – 테마에 따라 변하지 않는 색상(흰색/검은색).

• 중요도 (Prominence, 계층/강도): 요소의 강도 또는 가시성을 설명합니다.

* default / main / base – 기준점, 기본 상태 (이름에서 종종 생략됨).

* muted – 덜 두드러지는.

* subtle – 매우 미묘한.

* intense – 더 강렬한.

* on-brand – 브랜드 배경 위에 대비되는 콘텐츠.

• 상태/수정자/크기 (State / Modifier / Size): 추가적인 세분화.

* 상태: hover, active, focus, disabled – 상호작용 상태.

* 크기: sm, md, lg, xl – 다양한 컴포넌트 또는 요소 크기.

default 상태에 대한 중요 규칙: 토큰이 기본, 정지 상태에 있을 경우 -default 접미사는 일반적으로 생략됩니다. 예를 들어, color-text-primary는 암묵적으로 기본 상태를 나타냅니다. 다른 상태는 역할 뒤에 추가됩니다(예: color-text-primary-hover).

CTI 토큰 구조의 실제 예시

이해를 돕기 위해 버튼에 대한 토큰을 구축하는 몇 가지 실제 예시를 살펴보며, 원시 값에서 특정 컴포넌트 토큰으로의 전환 과정을 보여드리겠습니다.

예시 1: default 상태의 accent 버튼

액센트 색상을 가진 기본 버튼이 있다고 가정해 봅시다.

• 0. 원시 값: #0055FF (원시 파란색)
• 1. 원시 토큰: blue-500 (원시 값의 추상화)
• 2. 의미론적 토큰: color-bg-accent (기본 액센트 배경색, blue-500 참조)
• 3. 컴포넌트 토큰: color-button-accent-bg (액센트 버튼 배경색, color-bg-accent 참조)

여기서 우리는 일반적인 값( blue-500 )에서 더 구체적인 값( color-button-accent-bg )으로 어떻게 전환되는지 볼 수 있습니다. 컴포넌트 토큰에서 -default를 명시적으로 작성하지 않는 것이 중요한데, 이는 암묵적으로 포함되기 때문입니다.

예시 2: hover 상태의 accent 버튼

이제 동일한 버튼이 호버(hover) 상태일 때 명명이 어떻게 변하는지 살펴보겠습니다.

• 0. 원시 값: #0044DD (더 어두운 파란색)
• 1. 원시 토큰: blue-600 (더 어두운 파란색의 추상화)
• 2. 의미론적 토큰: color-bg-accent-hover (호버 시 액센트 배경색, blue-600 참조)
• 3. 컴포넌트 토큰: color-button-accent-bg-hover (호버 시 액센트 버튼 배경색, color-bg-accent-hover 참조)

여기서 -hover 접미사가 명시적으로 추가되어 상호작용 상태를 나타냅니다. 각 추상화 수준은 디자인 시스템을 더욱 유연하게 만들어, 수천 개의 토큰 이름을 변경할 필요 없이 원시 수준에서 음영 변경을 가능하게 합니다.

예시 3: default 상태의 secondary 버튼

보조 버튼의 경우, 예를 들어 투명도를 포함하는 다른 팔레트가 사용될 수 있습니다.

• 0. 원시 값: 10% 투명도를 가진 #0055FF 또는 rgba(0, 85, 255, 0.1)
• 1. 원시 토큰: blue-transparent-100
• 2. 의미론적 토큰: color-bg-secondary ( blue-transparent-100 참조)
• 3. 컴포넌트 토큰: color-button-secondary-bg ( color-bg-secondary 참조)

이 접근 방식은 공통 토큰 구조를 활용하여 다양한 버튼 유형에 대한 팔레트 전환을 쉽게 할 수 있게 합니다.

예시 4: default 상태의 secondary 버튼 텍스트

보조 버튼 내 텍스트에 대한 토큰을 살펴보겠습니다.

• 0. 원시 값: #0055FF
• 1. 원시 토큰: blue-500
• 2. 의미론적 토큰: color-text-on-brand (브랜드 배경 위의 텍스트 색상, blue-500 참조). 여기서 on-brand 수정자가 나타나 사용 맥락을 나타냅니다.
• 3. 컴포넌트 토큰: color-button-secondary-text-on-brand (보조 버튼 텍스트 색상, color-text-on-brand 참조)

보시다시피, 카테고리(color, spacing, typography)가 항상 먼저 오고, 그 다음 속성 또는 컴포넌트, 그리고 수정자와 상태가 뒤따릅니다. 이러한 "일반에서 구체로" 원칙은 디자인 시스템 내에서 예측 가능성과 쉬운 탐색을 보장합니다.

핵심 요약

• 디자인 토큰은 확장 가능하고 일관성 있으며 유지보수가 용이한 디자인 시스템을 구축하는 핵심 요소이며, 하드코딩된 스타일과 관련된 기술 부채를 방지합니다.
• 다단계 추상화 모델 (원시 값 → 원시 → 의미론적 → 컴포넌트 토큰)은 유연성과 관리 용이성을 제공하며, 단일 지점에서 전역 변경을 가능하게 합니다.
• CTI 방법론 (카테고리 → 유형 → 항목)은 컴파일러의 자동 처리에 편리하지만, 맥락적 검색 및 컴포넌트 스타일 리팩토링을 복잡하게 만들 수 있는 인기 있는 명명 접근 방식입니다.
• 의미론적 토큰은 스타일의 역할과 목적을 정의하여 재사용성과 테마 지원을 보장하며, 컴포넌트 토큰은 특정 컴포넌트 내에서 세부 조정 및 예외 관리를 위해 사용됩니다.
• 카테고리, 속성, 역할, 계층 및 상태를 활용한 명확한 명명 규칙은 디자인 시스템 내에서 질서와 예측 가능성을 유지하는 데 매우 중요합니다.

— Editorial Team