디자인 시안에는 대개 색 견본과 간격 값이 붙어 있습니다. 그런데 그 시안이 코드가 되는 순간 값은 화면 곳곳으로 흩어집니다. 버튼에 한 번, 링크에 한 번, 배지 배경에 한 번. 여섯 달 뒤 브랜드색을 조금 진하게 조정하기로 하면 그 값이 몇 군데에 있는지 아무도 모릅니다.
디자인 토큰은 이 문제를 값이 아니라 이름으로 풉니다. 색 목록과 토큰의 차이는 색이 아니라 이름의 유무입니다.
토큰은 값이 아니라 이름입니다
토큰 하나는 “값 + 이름 + 그 이름을 쓰기로 한 약속” 입니다. 세 번째가 핵심입니다. 이름만 있고 약속이 없으면, 즉 어떤 화면에서는 이름을 쓰고 어떤 화면에서는 값을 그대로 적으면, 토큰은 장식이 됩니다 — 값이 흩어지는 문제는 그대로인데 파일만 하나 늘어난 상태입니다.
그래서 토큰 도입의 실제 작업량은 이름을 정하는 데 있지 않고 리터럴을 걷어내는 데 있습니다. 이 규칙 하나로 표현할 수 있습니다: 색과 간격의 리터럴 값은 토큰 파일 안에만 존재한다. 그 밖에서 # 로 시작하는 색이 보이면 그것은 아직 시스템에 들어오지 않은 값입니다.
두 층으로 이름을 붙입니다
이름을 한 층으로만 두면 곧 막힙니다. 팔레트 이름(teal-500)만 있으면 “링크 색을 바꾼다” 와 “팔레트를 바꾼다” 가 구분되지 않고, 역할 이름(--color-link)만 있으면 같은 색을 쓰는 열 가지 역할에 값이 열 번 복사됩니다.
이름은 보이는 모습이 아니라 하는 일로 짓습니다. --color-green 은 언젠가 그 색이 파랑이 되는 날 거짓말이 되고, 아무도 이름을 고치지 않기 때문에 그 거짓말은 남습니다. --color-success 는 색이 바뀌어도 계속 참입니다.
워드프레스에서 토큰이 값을 하는 순간
정적인 사이트라면 토큰 없이도 버틸 수 있습니다. CMS 는 다릅니다. 화면을 그리는 주체가 셋 이상이기 때문입니다 — 테마 템플릿, 블록 에디터에서 편집자가 만드는 콘텐츠, 그리고 플러그인이 내보내는 출력물. 디자이너는 이 셋 전부에 붙어 있을 수 없습니다.
토큰은 디자이너가 자리를 비운 뒤에도 남아 있는 계약입니다. 편집자가 새 섹션을 만들 때 고를 수 있는 색이 토큰 목록이면, 그 화면은 아무도 검수하지 않아도 시스템 안에 머뭅니다. 이 연재의 4~6회차가 정확히 그 배선을 다룹니다.
테마 구조와 디자인의 관계를 더 넓게 보려면 테마 · 플러그인 아카이브가 있고, 이미 운영 중인 사이트의 테마를 정리하면서 이 구조를 올리는 작업은 최적화 지원 사업에 포함됩니다.
다음 회차
이름을 붙일 준비가 됐다면 이제 이름 붙일 값을 만들 차례입니다. 다음 회차는 색 단계 — 브랜드색 하나에서 화면을 그리는 데 실제로 필요한 변형을 전부 뽑아냅니다.