시맨틱 토큰과 프리미티브 토큰
시맨틱 토큰은 담고 있는 값이 아니라 수행하는 역할에 따라 이름을 붙인 디자인 토큰입니다. --color-red-600 대신 --color-text-danger처럼 쓰며, 보통 프리미티브 토큰을 참조하기 때문에 사용하는 쪽 이름을 바꾸지 않고도 실제 값을 교체할 수 있습니다.
두 개의 층
성숙한 토큰 체계 대부분에는 최소 두 개의 계층이 있습니다.
프리미티브 토큰(로우, 글로벌, 코어 토큰이라고도 합니다)은 실제 값을 담고, 보이는 그대로 이름을 붙입니다.
--red-600: #DC2626;
--blue-500: #2563EB;
--space-4: 16px;시맨틱 토큰은 그 값을 어디에 쓰는지에 대한 결정을 담고, 역할로 이름을 붙입니다.
--color-text-danger: var(--red-600);
--color-action-primary: var(--blue-500);
--space-card-padding: var(--space-4);컴포넌트는 시맨틱 층을 참조합니다. 프리미티브를 직접 참조해도 되는 것은 거의 없습니다.
간접 참조가 제값을 하는 이유
리브랜딩이 재작성이 아니게 됩니다. --color-action-primary가 가리키는 대상을 바꾸면 모든 버튼이 따라옵니다. 컴포넌트가 --blue-500을 참조했다면 컴포넌트를 하나하나 고쳐야 하고, 동작과 무관한 이유로 파랑을 쓰던 곳은 망가집니다.
테마가 가능해집니다. 다크 모드란 같은 시맨틱 이름이 다른 프리미티브를 가리키는 것입니다. 시맨틱 층이 없으면 가리킬 대상을 바꿀 방법 자체가 없습니다.
코드가 의미를 말합니다. --color-text-danger는 그 값이 왜 거기 있는지 읽는 사람에게 알려 줍니다. --red-600은 아무것도 알려 주지 않고, 이는 누군가 그 값을 바꿔도 안전한지 판단해야 할 때 특히 문제가 됩니다.
흔한 실수
팀이 시맨틱 층을 건너뛰는 이유는 첫날에는 그것이 형식주의처럼 보이기 때문입니다. 색은 열한 개뿐이고 모두가 용도를 기억합니다.
비용은 첫 리브랜딩, 첫 다크 모드, 첫 접근성 점검에서 드러나고, 그때쯤이면 프리미티브가 수백 곳에서 참조됩니다. 나중에 시맨틱 층을 끼워 넣는 일은 기계적이지만 지루하고, 아무도 일정에 넣지 않습니다.
세 번째 계층
규모가 큰 체계는 컴포넌트 단위 토큰을 더합니다. --button-primary-background가 --color-action-primary를 가리키고, 그것이 --blue-500을 가리키는 식입니다.
컴포넌트가 정말로 달라져야 할 때는 도움이 되고, 그렇지 않을 때는 간접 참조 비용만 남습니다. 기본값은 두 계층입니다. 세 번째는 실제 사례가 생겼을 때 더하는 것이지 미리 마련해 두는 것이 아닙니다.
Flash DS와의 관계
생성된 체계에는 두 계층이 이미 갖춰져 있습니다. 프리미티브 스케일과, 이를 참조하는 텍스트·배경·테두리·상태의 시맨틱 역할이 라이트와 다크 양쪽으로 준비됩니다.