글로벌 토큰

색 값을 필요한 자리마다 적어 두던 시절이 있었습니다. 시안에 #2F6BFF 라고 적고 코드에도 같은 값을 적습니다. 하나씩 놓고 보면 문제가 없습니다.

문제는 그 값을 바꿀 때 나타납니다. 태오가 강조색을 진하게 바꾸라는 요청을 받고 코드를 찾아보니 같은 값이 마흔 곳 넘게 흩어져 있었습니다. 그중 셋은 #2F6CFF 처럼 한 글자가 다른 값이었습니다. 옮겨 붙이다 틀렸거나 스포이드로 찍은 자리인데, 눈으로는 구분이 안 되니 아무도 몰랐습니다.

값 대신 이름을 적자는 것이 디자인 토큰의 출발입니다. 글로벌 토큰은 그 이름 중 가장 아래층, 값 자체에 붙인 이름입니다. 여기서부터 이름이 시작되니 값이 흩어질 자리가 한 곳으로 줄어듭니다.

값 하나에 이름 하나를 묶습니다. 이름은 어디에 쓰는지가 아니라 그 값이 무엇인지를 말합니다. 색-파랑-500, 간격-8, 모서리-4 처럼 씁니다. 강조에 쓰는 색인지 경고에 쓰는 색인지는 이 층에서 정하지 않습니다.

모아 놓으면 팔레트 모양이 됩니다. 파랑 하나에 밝은 쪽부터 어두운 쪽까지 100에서 900까지 단계를 두고 회색도 같은 식으로 둡니다. 간격은 4의 배수로 열 개쯤, 모서리 굴림은 네 개쯤입니다. 전체가 수백 개로 늘어나지만 한 번 정해 두면 손댈 일이 드뭅니다.

화면에서 이 이름을 바로 부르지 않는 것이 원칙입니다. 쓰임새 이름을 가진 알리아스 토큰이 글로벌 토큰을 가리키고, 화면은 그 알리아스를 부릅니다. 한 단계를 끼우는 이유는 같은 쓰임새가 상황에 따라 다른 값을 써야 하기 때문입니다. 다크 모드에서 배경은 회색-50 대신 회색-900 을 가리켜야 하는데, 화면이 값 이름을 직접 부르면 화면마다 조건을 달게 됩니다.

"그 색은 글로벌 토큰에 없어요. 팔레트에 새로 추가할지부터 정해야 합니다."

시안에 임의 값이 들어왔으니 팔레트를 늘릴지 기존 단계를 쓸지 정하자는 말입니다.

"화면에서 색-파랑-500 을 직접 부르지 마세요. 다크 모드에서 안 바뀝니다."

한 층을 건너뛰어 부르고 있으니 알리아스를 거치게 하자는 지적입니다.

"글로벌 토큰은 그대론데 알리아스만 바꿨어요. 팔레트는 안 건드렸습니다."

값 자체가 아니라 쓰임새 연결만 고쳤다는 뜻입니다.

페이지덱은 팔레트를 한 번 정리한 뒤로 이 층을 거의 열지 않습니다. 민서가 브랜드 색을 한 단계 진하게 옮길 때 고친 것은 색-파랑-500 하나였고, 그 이름을 가리키던 알리아스 열두 개가 함께 따라왔습니다. 특정 부품 안에서만 쓰는 값은 컴포넌트 토큰으로 따로 두어 팔레트가 부품 사정으로 늘어나지 않게 했습니다.