토큰이 유용할 때는?

디자인시스템 요모조모

토큰이 유용하게 쓰일 수 있는 대표적인 케이스는 디자인시스템에서 큰 변화를 줄 때이다. 그중에서도 디자인의 기본적인 요소(Design foundation)에 있어서 변화가 있을 때 유용하게 사용될 수 있다.

예를 들어, 디자인 파운데이션 팀에서 전체적인 브랜딩 변화의 일환으로 그들의 제품에 친근한 이미지를 주고자 디자인 컴포넌트들의 모서리 Corner Radius(모서리 곡률)을 더욱 완만하게 바꾸려고 한다고 해보자.

그리고 그 변화가 적용될 컴포넌트의 개수가 100여 개가 넘는다면 디자이너는 백여 군데의 페이지를 돌아다니며 모두 그 값을 늘리려고 돌아다녀야 할지도 모른다.

하지만 만약 이미 만들어둔 토큰들이 각 컴포넌트들에 잘 적용되어 있다면 이야기가 달라진다. 컴포넌트에 적용된 모서리의 파운데이션 토큰 (Foundation token)을 X-small에서 Medium 사이즈로 바꿀 수도 있고 아예 Foundation 토큰의 숫자값을 바꿀 수도 있다.

예시를 보여주기 위해 애플이 피그마에 공유한 디자인 시스템 파일에서 컴포넌트를 가져와 이용해 보았다.

첫 번째 옵션은

컴포넌트 토큰에 적용된 파운데이션 토큰의 변경

버튼 컴포넌트의 모서리 곡률 토큰에 해당하는 컴포넌트 토큰(Component token)에 적용된 파운데이션 토큰(Foundation token)을 border-radius-xs(2px)에서 border-radius-md (8px)로 바꾸는 것이다. 코드에서는 엔지니어가 컴포넌트에 해당하는 파운데이션 토큰을 위 그림의 테이블에 적힌 내용과 같이 바꾸면 되지만 현재 피그마에서는 만들어 둔 Variable의 숫자를 바꾸는 방법으로 가능하다.

아래 이미지를 통해 버튼 컴포넌트의 모서리가 완만하게 바뀐 것을 확인할 수 있다.

Variable 변경 후

두 번째 옵션은 버튼 컴포넌트 외에도 다른 컴포넌트들의 모서리의 곡률에도 거의 모두 변화를 줄 경우인데 이럴 경우 파운데이션 토큰(Foundation token) 자체에 변화를 주는 방법을 택할 수도 있다.

파운데이션 토큰에 적용된 숫자 값을 조금씩 증가한 값으로 변경함으로써 그 토큰들의 상위계층인 컴포넌트 토큰(Component token) 모서리 곡률이 자동으로 변경될 수 있다.

다만 이 방법은 모든 컴포넌트들이 어떤 값의 토큰을 사용하고 있는지 제대로 파악하고 있어야 하고 그래야만 디자인이 어떻게 변경될지 정확하게 예상할 수 있다. 또한 이 변화는 디자이너들이 미처 파악하지 못하고 있던 컴포넌트들에도 변화를 줄 수 있기에 그전에 충분한 협의가 있어야 한다.

파운데이션 토큰에 적용된 숫자 값 자체를 변경

이외에도 또 다른 방법이 있을 수 있다. 완성된 혹은 완벽한 디자인시스템이란 없기에 엔지니어와의 충분한 협의를 통해 늘 더 쉽고 계속 발전 가능한 방법을 찾을 수 있다.