컴포넌트 토큰

토큰을 두 층으로만 운영하면 어느 순간 막힙니다. 아래층에 blue-600 같은 값 이름을 두고 위층에 color-action 같은 쓰임새 이름을 두는 구조인데, 버튼 배경색만 진하게 바꾸고 싶다는 요청이 오면 손댈 곳이 color-action 밖에 없습니다.

그러면 배지와 탭, 링크까지 같이 바뀝니다. 디자이너가 버튼 색만 한 단계 진하게 바꿨다고 말하면, 검수하는 사람은 탭 밑줄과 알림 배지가 왜 같이 바뀌었느냐고 묻습니다. 되돌리려면 버튼에만 값을 직접 박아 넣게 되고, 그 순간 토큰을 쓰는 이유가 사라집니다.

컴포넌트 토큰은 그 사이에 층을 하나 더 넣어 이 문제를 풉니다. 부품마다 자기 이름이 붙은 토큰을 두고, 부품은 공용 토큰 대신 자기 토큰만 봅니다.

이름이 부품에서 시작하고, 값 대신 위층 토큰을 가리킵니다. button-primary-background 처럼 어느 부품의 어느 자리인지가 이름 안에 들어 있어야 합니다.

세 층이 이렇게 이어집니다.

1. 글로벌 토큰이 값을 들고 있습니다. blue-600 이 #1D4ED8 인 식입니다.
2. 알리아스 토큰이 쓰임새 이름으로 그것을 가리킵니다. color-action 이 blue-600 을 봅니다.
3. 컴포넌트 토큰이 부품 이름으로 알리아스를 가리킵니다. button-primary-background 가 color-action 을 봅니다.

버튼만 진하게 바꿔야 할 때는 3번 한 줄을 blue-700 로 돌립니다. 배지와 탭은 여전히 color-action 을 보고 있어서 그대로 남습니다.

지켜야 할 선은 둘입니다. 컴포넌트 토큰에 값을 직접 쓰지 않고 항상 위층을 가리키게 둡니다. 그리고 다른 부품에서 남의 컴포넌트 토큰을 쓰지 않습니다. 탭이 그 토큰을 끌어다 쓰면 버튼을 고칠 때 탭이 따라 바뀌어 방금 없앤 문제가 돌아옵니다.

"이건 컴포넌트 토큰으로 내려서 버튼만 바꿉시다."

공용 토큰을 건드리지 말고 부품 전용 층에서 해결하자는 제안입니다.

"토큰 이름이 card-title-color 인데 지금 모달에서도 쓰고 있어요."

부품 전용 토큰이 다른 부품으로 새어 나갔다는 지적입니다.

"컴포넌트 토큰을 200개 만들 필요는 없어요. 실제로 달라지는 것만 두죠."

층을 더한 값이 관리 비용이라는 문제 제기입니다.

페이지덱에서는 민서가 버튼 배경을 진하게 바꾸려다 이 층을 처음 만들었습니다. 공용 토큰을 바꿨더니 탭 밑줄과 배지 색까지 움직이는 것을 보고, 버튼과 입력창 두 부품에만 전용 토큰을 열었습니다. 태오는 그 둘만 코드에 반영했습니다.