토큰 및 변수 전략
SLUR UI System에서는
반복되는 값을 임의로 작성하지 않고,
토큰과 변수를 통해 일관되게 관리하는 것을 원칙으로 합니다.
이 전략은 스타일 변경을 구조 변경으로 번지지 않게 하기 위한 기준입니다.
토큰과 변수의 역할
Section titled “토큰과 변수의 역할”토큰과 변수는 다음 역할을 담당합니다.
- 디자인 값의 단일 출처 역할을 합니다.
- 프로젝트 전반의 일관성을 유지합니다.
- 수정 범위를 최소화합니다.
- 스타일 변경의 영향을 예측 가능하게 합니다.
토큰은 구조를 대체하지 않으며,
구조 위에서만 작동합니다.
토큰 사용 원칙
Section titled “토큰 사용 원칙”SLUR UI System에서 토큰은 다음 원칙을 따릅니다.
- 반복되는 값은 반드시 토큰으로 관리합니다.
- 임의의 숫자나 색상 값 사용을 지양합니다.
- 의미 없는 값 나열을 허용하지 않습니다.
- 토큰은 역할과 목적이 드러나야 합니다.
토큰은 값 자체가 아니라
의미를 담은 단위입니다.
변수 사용 기준
Section titled “변수 사용 기준”CSS 변수는 다음 기준에 따라 사용합니다.
- 색상, 여백, 크기, 레이아웃 값에 사용합니다.
- 구조를 표현하는 용도로 사용하지 않습니다.
- 상태 표현을 직접 담당하지 않습니다.
변수는 스타일 구현 수단이며,
구조 설계 도구가 아닙니다.
토큰과 구조의 관계
Section titled “토큰과 구조의 관계”SLUR UI System에서는 구조와 토큰의 역할을 명확히 분리합니다.
- 구조는 클래스와 네이밍으로 정의합니다.
- 값은 토큰과 변수로 관리합니다.
- 구조 변경 없이 값만 교체할 수 있어야 합니다.
토큰이 구조를 침범하기 시작하면
설계가 잘못되었다고 판단합니다.
토큰 전략의 목적
Section titled “토큰 전략의 목적”토큰 및 변수 전략은
UI 스타일을 통제하기 위한 규칙이 아니라,
UI 구조를 안정적으로 유지하기 위한 보호 장치입니다.
토큰이 정리될수록
UI 구조는 더 단순하고 유지보수하기 쉬워집니다.