알리아스 토큰

값에 이름만 붙여 두면 그 이름이 쓰임새를 말해 주지 않습니다. 파랑-500 이라는 이름은 어떤 색인지는 알려 주지만 어디에 쓰는 색인지는 알려 주지 않습니다. 그래서 같은 이름이 주요 버튼, 본문 링크, 선택된 줄, 알림 배지에 함께 쓰입니다.

바꿀 때 문제가 드러납니다. 링크 색만 조금 진하게 하자는 요청이 들어오면 파랑-500 을 쓰는 자리 140곳 가운데 어느 것이 링크인지를 사람이 하나씩 열어 판단해야 합니다. 값과 쓰임새 사이에 층을 하나 더 두게 된 이유가 이것입니다.

두 층으로 나눠 쓰고 화면은 위층만 부릅니다.

1. 아래층은 값을 가집니다. 파랑-500 이 #2F6BFF 를 담는 식이고, 이 층을 글로벌 토큰이라고 합니다.
2. 위층은 쓰임새 이름으로 아래층을 가리킵니다. 색-강조-기본 이 파랑-500 을 가리키고, 버튼과 링크는 파랑-500 대신 이 이름을 씁니다.

이름은 쓰임새와 역할과 상태로 짓습니다. 색-배경-위험, 색-글자-보조, 색-테두리-포커스 같은 모양입니다.

값을 바꾸는 길이 두 가지로 갈립니다. 링크만 진하게 하려면 링크가 가리키는 대상을 파랑-600 으로 옮깁니다. 제품의 파란색 전체를 바꾸려면 아래층의 파랑-500 값을 고치고, 그것을 가리키는 쓰임새가 모두 따라옵니다.

다크 모드가 이 층 없이는 어렵습니다. 같은 이름에 모드별로 다른 값을 물리기 때문입니다. 색-배경-기본 이 밝은 모드에서는 회색-0 을, 어두운 모드에서는 회색-900 을 가리킵니다.

개수는 일부러 적게 유지합니다. 위층이 수백 개가 되면 고를 때마다 목록을 훑어야 해서 쓰는 사람이 값을 직접 적는 쪽으로 돌아갑니다. 한 부품 안에서만 쓰는 값은 위층에 올리지 않고 컴포넌트 토큰으로 한 층 더 내려 둡니다.

"여기 파랑-500 직접 박혀 있는데 색-강조-기본 으로 바꿔 주세요."

아래층을 직접 부르지 말고 쓰임새 이름을 쓰라는 지적입니다.

"링크만 진하게 바꾸면 되는 거라 알리아스 하나만 옮기면 됩니다."

고칠 범위가 한 줄이라는 뜻입니다.

"이 이름이 어디 쓰이는 색인지 모르겠어요. 쓰임새로 다시 짓죠."

이름이 층의 목적을 못 지키고 있다는 지적입니다.

페이지덱이 다크 모드를 넣을 때 이 층을 뒤늦게 세웠습니다. 민서가 화면에서 값을 직접 부르는 자리를 세어 보니 210곳이었고, 쓰임새 이름 서른네 개로 묶는 데 한 주가 걸렸습니다. 그 뒤 태오가 어두운 모드 값을 붙이는 작업은 이틀에 끝났습니다.