디자인 토큰 개요
디자인 토큰 개요 (Design tokens overview)
디자인 토큰(design tokens)은 시각적 디자인 속성의 근원(source of truth)이에요. 색상, 타이포그래피, 간격 같은 개념의 값을 의미 있는 이름을 가진 변수로 저장해요. 연관된 스타일을 전달하는 예측 가능한 이름과 값을 제공하여 모든 플랫폼에서 그 목적을 명확하고 인식 가능하게 만들어 줘요.
출처: 문서
본문
왜 디자인 토큰을 사용할까요? (Why use design tokens?)
토큰 시스템은 UI를 구축하기 위한 공통 언어를 가능하게 하고, PatternFly 디자인 시스템 전반에 걸쳐 더 나은 일관성과 유지보수를 지원해요.
일관성 (Consistency)
토큰은 동일한 사용 사례에 항상 동일한 색상과 스타일을 사용하도록 보장함으로써 제품 디자인 프로세스 전반의 일관성을 유지하는 데 도움을 줘요. 올바른 색상, 제목 수준, 간격 등을 선택하는 데 들어가는 의사 결정을 없앰으로써 디자인을 더 일관되고 효율적으로 만들 수 있어요.
더 쉬운 유지보수 (Easier maintenance)
토큰은 디자인 시스템 유지보수를 더 쉽게 만들어 줘요. 리디자인이나 업데이트의 일환으로 색상이 변경될 때마다 관련된 모든 토큰이 자동으로 업데이트되어 이 변경을 반영합니다. 즉, 개발자는 제품이 최신 PatternFly 권장 사항을 반영하도록 코드를 변경할 필요가 없어요. 마찬가지로 디자이너는 Figma 디자인이 토큰의 변경 사항을 자동으로 반영하도록 업데이트되는 것을 볼 수 있어요.
디자인 토큰을 어떻게 사용하나요? (How do I use design tokens?)
PatternFly의 토큰 시스템을 사용하려면 현재 버전의 라이브러리를 확보하세요:
- 개발 (Development): 토큰은 PatternFly 6 릴리스의 일부로 CSS 변수로 제공됩니다. 구현하려면 PatternFly 6으로 업그레이드하세요.
- 디자인 (Design): 토큰은 Figma 내에서 변수와 스타일로 설정됩니다. 디자인에 사용하려면 Figma 라이브러리를 설치하세요.
PatternFly 6 컴포넌트, 차트, 확장은 모두 토큰으로 구축되며, 모든 디자인 토큰은 여기에서도 볼 수 있어요.
토큰 구조와 명명 (Token structure and naming)
토큰 계층 (Token layers)
PatternFly 토큰 시스템은 서로를 기반으로 구축되는 3개의 뚜렷한 계층을 가져요:
- Palette tokens: PatternFly 색상 팔레트를 사용해 다른 토큰 계층이 참조할 색상 기반을 만듭니다.
- Base tokens: 팔레트 계층을 확장해 PatternFly 색상을 개념에 적용합니다. 또한 간격과 테두리 같은 추가 개념도 도입합니다. Base 토큰은 개념적으로 그룹화되고 숫자로 명명되며, 개념 그룹에 중복된 값이 없습니다.
- Semantic tokens: 개념적으로 그룹화되고 의미적으로 명명된 최상위 토큰입니다. base 토큰으로 구축되며 대부분의 사용 사례에서 보고 사용해야 하는 토큰입니다. 의미적 명명은 토큰의 적절하고 관련성 있는 사용을 지원하도록 의도적으로 선택되며, 이는 모두에게 디자인 일관성을 더 쉽게 만듭니다.
토큰 이름 (Token names)
PatternFly 토큰 이름은 명확한 구조를 따르며, --pf-t 접두사와 이중 하이픈으로 구분된 일련의 토큰 세그먼트로 구성됩니다. 이 구조는 일반적인 것에서 구체적인 것으로 이어지는 패턴을 따라 문맥을 명확히 합니다:
--pf-t--[scope]--[component]--[property]--[concept]--[variant]--[state]
각 토큰 세그먼트는 서로 다른 유형의 스타일 정보를 나타냅니다:
| Segment | Description |
|---|---|
| Scope | 토큰의 범위, 예: global 또는 chart. |
| Component | 토큰이 관련된 컴포넌트, 예: icon, background, 또는 text. |
| Property | 컴포넌트의 스타일 속성, 예: color, size, width, 또는 radius. |
| Concept | 토큰의 상위 레벨 개념, 예: status, primary, 또는 action. 각각 다른 variant 옵션을 가집니다. |
| Variant | 컴포넌트나 개념의 변형, 예: link, plain, warning, 또는 success. |
| State | 컴포넌트가 있는 상태, 예: default, hover, 또는 active. |
특정 토큰에 세그먼트가 관련이 없다면 토큰 이름에서 생략됩니다:
| Segments | Example |
|---|---|
[scope]--[component]--[property]--[concept]--[variant]--[state] |
--pf-t--global--background--color--action--plain--clicked |
[scope]--[component]--[property]--[variant]--[state] |
--pf-t--global--background--color--backdrop--default |
[scope]--[component]--[property]--[variant] |
--pf-t--global--border--width--regular |
테마 (Theming)
테마는 특정 시각적 값을 참조하는 디자인 토큰 모음이에요. 이 값들은 사용자가 테마를 전환할 때(예: 다크 모드 켜기) 변경됩니다. 테마를 사용하면 하나의 디자인 시스템을 제공하면서도 다양한 대상이나 브랜드 요구 사항을 충족하는 여러 시각적 언어를 지원할 수 있어요.
더 자세한 지침은 테마 가이드라인을 참조하세요.