디자인 토큰

시안에 있는 색과 화면에 나온 색이 다른 일이 잦았습니다. 디자이너는 시안 파일에서 색을 골라 쓰고 개발자는 코드에 색 값을 직접 적었으니, 어느 쪽이 한 번만 잘못 옮겨도 두 벌의 기준이 생겼습니다. 그렇게 생긴 차이는 눈에 잘 띄지도 않아서 반년쯤 지나 회색이 열두 종류가 된 다음에야 발견됐습니다.

브랜드 색을 바꾸기로 한 날에 그 값이 드러났습니다. 파란색 하나를 조금 진하게 바꾸기로 했는데, 코드 안에 그 값이 몇 군데 적혀 있는지 아무도 몰랐습니다. 검색해서 하나씩 고치다 보면 꼭 한두 군데가 남고, 남은 곳은 다음 릴리스에서 혼자 옛날 파란색으로 남아 있었습니다.

물어볼 방법도 마땅치 않았습니다. "그 파란색 어느 파란색이에요?" 라고 물으면 돌아오는 답은 색 값 여섯 자리였고, 그 여섯 자리가 강조에 쓰는 색인지 링크에 쓰는 색인지는 거기 적혀 있지 않았습니다.

디자인 토큰은 값 대신 이름을 부르게 해서 이 문제를 끊습니다. #2F6BFF 를 적는 대신 색-강조-기본 이라고 적어 두면, 그 이름이 가리키는 값을 한 곳에서 바꿨을 때 그 이름을 쓰는 모든 자리가 함께 바뀝니다. 이름이 쓰임새를 담고 있으니 물어볼 일도 줄어듭니다.

토큰 하나는 이름과 값의 짝입니다. 그 짝을 모아 둔 묶음에는 다음 네 가지가 들어갑니다.

1. 이름 — 쓰임새를 적습니다. 색-강조-기본, 간격-4, 글자-본문-크기 처럼 어디에 쓰는 값인지가 드러나게 짓습니다. 이름 짓는 순서를 팀이 미리 정해 두면 새 토큰을 추가할 때 헤매지 않습니다.
2. 값 — 실제로 적용되는 숫자나 색 값입니다. #2F6BFF, 16px, 600 같은 것들입니다.
3. 계층 — 토큰은 보통 세 층으로 나눕니다. 값 자체에 이름을 붙인 글로벌 토큰, 그 글로벌 토큰을 쓰임새 이름으로 다시 가리키는 알리아스 토큰, 특정 부품 안에서만 쓰는 컴포넌트 토큰입니다. 파랑-500 이 글로벌이고, 그것을 가리키는 색-강조-기본 이 알리아스이고, 그것을 다시 가리키는 버튼-기본-배경 이 컴포넌트 토큰입니다. 층을 왜 셋으로 나누는지는 바로 아래에서 다룹니다.
4. 갈래 — 색, 간격, 글자, 모서리 둥글기, 그림자처럼 값의 성격으로 묶습니다. 갈래를 정해 두면 필요한 토큰이 있는지 찾기 쉽고, 없는 갈래를 발견하기도 쉽습니다.

여기에 테마가 얹히면 같은 이름에 값을 여러 벌 물릴 수 있습니다. 테마는 토큰 값 묶음을 통째로 바꿔 전체 인상을 전환하는 설정입니다. 색-배경-기본 이라는 이름 하나에 밝은 모드에서는 흰색을, 어두운 모드에서는 짙은 회색을 물려 두면 화면을 다시 그리지 않고도 두 모드를 낼 수 있습니다. 계층을 나누는 값이 여기서 나옵니다. 값에 직접 이름을 붙인 층이 따로 있어야, 쓰임새 이름이 모드에 따라 다른 값을 가리킬 수 있습니다.

쓰는 쪽은 디자인 시스템을 맡은 디자이너와 개발자 짝입니다. 디자이너 혼자 정하면 코드에서 쓰기 어려운 구조가 되고, 개발자 혼자 정하면 시안 파일에서 부를 수 없는 이름이 나옵니다. 값의 출처는 대개 브랜드 가이드라인입니다. 로고와 색과 서체의 사용 규칙을 적어 둔 문서로, 브랜드 색 두 가지가 거기서 정해지면 토큰은 그 색을 이름으로 받아 제품 안의 쓰임새로 펼칩니다.

읽는 쪽은 셋입니다. 제품 디자이너는 시안 도구 안에서 토큰을 골라 씁니다. 색을 직접 집어 쓰지 않고 목록에서 이름을 고르는 식이라, 시스템에 없는 색은 애초에 고를 수 없게 됩니다. 개발자는 같은 이름을 코드에서 변수로 씁니다. 이름이 양쪽에서 같기 때문에 시안과 코드를 대조할 때 색 값을 비교할 필요가 없어집니다. 마지막으로 빌드 도구가 읽습니다. 토큰 묶음을 한 파일에 적어 두면 도구가 그 파일을 각 플랫폼이 쓰는 형식으로 바꿔 내보냅니다.

셋의 독자가 한 이름을 공유한다는 점이 이 장치의 값입니다. 컴포넌트 라이브러리의 부품들이 토큰을 재료로 만들어지기 때문에, 토큰 값 하나를 바꾸면 그 부품을 쓰는 모든 화면이 따라옵니다. 컴포넌트 라이브러리는 버튼과 입력창처럼 화면을 이루는 부품을 한 번 만들어 모아 둔 곳입니다.

"그 색 직접 쓰지 말고 색-강조-기본 토큰으로 바꿔 주세요."

시안에 색 값을 직접 넣었으니 이름을 부르는 방식으로 고치자는 요청입니다.

"간격 토큰에 6px이 없어서 그냥 8로 맞췄어요."

필요한 값이 묶음에 없어 있는 값 중 가까운 것을 썼다는 말입니다.

"토큰만 바꾸면 다크 모드는 화면 수정 없이 나옵니다."

같은 이름에 다른 값을 물려 두었으니 화면은 그대로 둬도 된다는 뜻입니다.

페이지덱에서는 브랜드 색을 바꾸는 일이 두 번 있었습니다. 첫 번째는 토큰을 쓰기 전이었고, 태오가 코드에서 색 값을 검색해 고치는 데 사흘이 걸렸습니다. 그러고도 이메일로 나가는 알림 하나가 옛날 색으로 남아 한 달 뒤에 발견됐습니다.

두 번째는 민서가 토큰을 정리한 다음이었습니다. 파랑-500 의 값을 한 줄 바꾸고 나니 그 이름을 가리키던 모든 자리가 함께 바뀌었고, 오전에 시작해 점심 전에 끝났습니다. 남은 일은 그 값이 옛날 색을 그대로 적어 둔 자리가 있는지 훑어보는 것뿐이었습니다.

토큰을 색 목록으로만 보는 경우가 가장 많습니다. 처음 만들 때 색부터 정리하니 그렇게 보이기 쉽습니다. 하지만 간격과 글자 크기가 빠지면 화면의 들쭉날쭉함은 그대로 남습니다. 색만 맞고 여백이 제각각인 화면은 색이 틀린 화면만큼이나 정돈되지 않아 보입니다. 간격을 4의 배수로 묶어 토큰으로 두는 일이 색 토큰만큼 효과가 큽니다.

이름에 색 이름을 그대로 넣는 것도 흔한 실수입니다. 색-파랑 이라고 지어 두면 당장은 읽기 쉽습니다. 그런데 어두운 모드에서 그 자리에 다른 색을 물리는 순간 색-파랑 이 파랑이 아니게 됩니다. 쓰임새가 이름에 들어가야 값이 바뀌어도 이름이 거짓말을 하지 않습니다. 스타일 가이드에 이름 짓는 규칙을 적어 두는 팀이 많은 것도 이 때문입니다. 스타일 가이드는 색과 서체와 간격을 언제 어떻게 쓰는지 적은 문서입니다.