디자인 토큰

디자인 토큰은 색상이나 간격 같은 값을 이름으로 관리하는 공통 계약입니다. 디자인과 여러 프레임워크가 같은 의미의 토큰을 사용하면 전체 화면을 일관되게 변경하고 브랜드, 테마, 접근성 요구에 대응하기 쉬워집니다.

토큰 분류

분류	적용 범위	확인 사항
Colors	배경, 텍스트, 테두리, 상호작용과 상태 색상	색 이름보다 text-primary, status-danger처럼 역할을 표현하고 배경과의 대비를 확인합니다.
Typography	글꼴, 크기, 굵기, 행간과 자간	제목·본문·캡션의 위계를 제한된 단계로 구성하고 확대 시 줄 겹침을 확인합니다.
Spacing	내부 여백, 요소 사이 간격과 화면 밀도	공통 배수 체계를 사용하고 같은 관계에는 같은 간격을 적용합니다.
Breakpoints	화면 너비에 따른 레이아웃 전환점	특정 기기명이 아니라 콘텐츠가 깨지는 지점을 기준으로 사용합니다.
Iconography	아이콘 크기, 선 굵기, 색상과 의미	같은 동작에 같은 아이콘을 사용하고 장식용·정보용 역할을 구분합니다.

토큰 구조

토큰은 보통 원시 값, 의미 값, 컴포넌트 값 순서로 구분합니다. 예를 들어 원시 색상 blue-600을 직접 사용하기보다 의미 토큰 action-primary에 연결하고 Button은 이를 button-primary-background로 참조합니다. 이렇게 하면 브랜드 색상이나 다크 테마가 바뀌어도 컴포넌트 코드를 개별 수정하지 않아도 됩니다.

CSS:root {
  --color-blue-600: #2563eb;
  --color-action-primary: var(--color-blue-600);
  --button-primary-background: var(--color-action-primary);
}

사용 원칙

1. 기존 의미 토큰이 해결하려는 역할과 일치하는지 먼저 확인합니다.
2. 일회성 시안에 맞추기 위해 컴포넌트 내부에 임의의 색상이나 수치를 추가하지 않습니다.
3. 새 값이 필요하면 사용 맥락, 기존 토큰과의 차이, 여러 화면에서의 재사용 가능성을 검토합니다.
4. 토큰 이름은 현재 값이 아니라 목적을 설명해야 합니다. 값이 변경되어도 이름의 의미가 유지되어야 합니다.
5. 토큰 변경은 이를 사용하는 모든 컴포넌트의 기본·상호작용·비활성·오류 상태에서 확인합니다.

검수 체크리스트

• 디자인 파일과 HTML, Vue, React 구현이 같은 의미의 값을 참조하는지 확인합니다.
• 텍스트와 아이콘이 모든 배경 상태에서 필요한 명도 대비를 유지하는지 확인합니다.
• 브라우저 확대, 긴 번역 문자열, 작은 화면에서 typography와 spacing이 레이아웃을 깨뜨리지 않는지 확인합니다.
• 토큰을 삭제하거나 이름을 바꿀 때 사용처와 마이그레이션 범위를 함께 기록합니다.