토큰 및 변수 전략

반복되는 값을 임의로 작성하지 않고,
토큰과 변수를 통해 일관되게 관리하는 것을 원칙으로 합니다.
이 전략은 스타일 변경을 구조 변경으로 번지지 않게 하기 위한 기준입니다.

---

토큰과 변수의 역할

토큰과 변수는 다음 역할을 담당합니다.

• 디자인 값의 단일 출처 역할을 합니다.
• 프로젝트 전반의 일관성을 유지합니다.
• 수정 범위를 최소화합니다.
• 스타일 변경의 영향을 예측 가능하게 합니다.

토큰은 구조를 대체하지 않으며,
구조 위에서만 작동합니다.

---

토큰 사용 원칙

토큰은 다음 원칙을 따릅니다.

• 반복되는 값은 반드시 토큰으로 관리합니다.
• 임의의 숫자나 색상 값 사용을 지양합니다.
• 의미 없는 값 나열을 허용하지 않습니다.
• 토큰은 역할과 목적이 드러나야 합니다.

토큰은 값 자체가 아니라
의미를 담은 단위입니다.

의미 기반 토큰은 :root에 선언하며, 이름에 역할과 목적이 드러나야 합니다.

:root { --color_primary: #2563eb; --color_text: #1a1a1a; --color_border: #e5e7eb; }
:root { --space_sm: 8px; --space_md: 16px; --space_lg: 24px; }
:root { --radius_md: 8px; --radius_lg: 16px; }

---

변수 사용 기준

CSS 변수는 다음 기준에 따라 사용합니다.

• 색상, 여백, 크기, 레이아웃 값에 사용합니다.
• 구조를 표현하는 용도로 사용하지 않습니다.
• 상태 표현을 직접 담당하지 않습니다.

변수는 스타일 구현 수단이며,
구조 설계 도구가 아닙니다.

컴포넌트에서는 값을 직접 쓰지 않고 var()로 토큰을 참조합니다.

/* ❌ 나쁜 예 — 하드코딩된 값이 흩어져 유지보수가 어려움 */
.card { padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
.card .i_title { color: #1a1a1a; }

/* ✅ 좋은 예 — 의미 기반 토큰을 var()로 참조 */
.card { padding: var(--space_md); border: 1px solid var(--color_border); border-radius: var(--radius_md); }
.card .i_title { color: var(--color_text); }

---

토큰과 구조의 관계

구조와 토큰의 역할은 명확히 분리합니다.

• 구조는 클래스와 네이밍으로 정의합니다.
• 값은 토큰과 변수로 관리합니다.
• 구조 변경 없이 값만 교체할 수 있어야 합니다.

토큰이 구조를 침범하기 시작하면
설계가 잘못되었다고 판단합니다.

---

토큰 전략의 목적

토큰 및 변수 전략은
UI 스타일을 통제하기 위한 규칙이 아니라,
UI 구조를 안정적으로 유지하기 위한 보호 장치입니다.

토큰이 정리될수록
UI 구조는 더 단순하고 유지보수하기 쉬워집니다.