규모가 커지면 blue-500 같은 이름만으로는 부족합니다. 의미 기반의 색상 토큰 체계를 만들면 협업과 유지보수가 쉬워집니다.
기본 팔레트 정의
먼저 순수 색상값을 정의합니다. --color-blue-500: #3B82F6; 같은 방식입니다. 이건 변하지 않는 기본값입니다.
의미 기반 토큰
--color-primary: var(--color-blue-500); --color-error: var(--color-red-500); 처럼 의미를 부여합니다. 나중에 primary 색상을 바꾸려면 이 한 줄만 수정하면 됩니다. 색상 변환기로 정확한 값을 정하세요.
컴포넌트 토큰
--button-bg: var(--color-primary); --button-text: var(--color-white); 처럼 컴포넌트 수준의 토큰도 만듭니다. 버튼 색상을 일괄 변경하기 쉬워집니다.
문서화
Storybook이나 자체 문서에 색상 팔레트를 시각적으로 보여주세요. 디자이너와 개발자가 같은 언어로 소통할 수 있습니다.
디자인 시스템 도구 연동
Figma의 Variables 기능을 사용하면 디자인 토큰을 직접 관리할 수 있습니다. 이를 Style Dictionary 같은 도구로 내보내서 CSS 변수로 변환합니다. 색상 변환기에서 확인한 값을 Figma에 입력하세요.
토큰 네이밍 컨벤션
--color-{palette}-{shade} 형식(예: --color-blue-500)이 흔합니다. 의미 토큰은 --color-{role}-{variant} 형식(예: --color-text-primary)을 사용합니다. 팀과 컨벤션을 합의하고 문서화하세요.
자동화 파이프라인
GitHub Actions나 다른 CI/CD에서 Style Dictionary를 실행해서 디자인 토큰 변경 시 자동으로 CSS 변수 파일을 생성하도록 설정할 수 있습니다. 수동 작업 없이 디자인-개발 동기화가 유지됩니다.
최종 점검
프로젝트에서 사용하는 모든 색상을 문서화하세요. HEX, RGB, HSL 형식을 함께 기록하면 어떤 상황에서도 바로 사용할 수 있습니다. 색상 변환기로 일괄 변환하면 편리합니다.