핵심 아이디어

시맨틱 토큰은 primitive token을 참조하는 추상 레이어로, 효과적으로 기능하려면 ‘너무 일반적’이지도 ‘너무 구체적’이지도 않은 적절한 수준의 명확성과 확장성을 가져야 합니다.

요약

너무 일반적인 시맨틱 토큰(예: ‘element-spacing-small’)은 명확한 의도가 없어 변경 시 의도하지 않은 곳에까지 영향을 미칩니다. 반면 너무 구체적인 토큰(예: ‘button-padding-top’)은 광범위한 사용 사례에 확장되지 않아 한 가지 변경에도 여러 토큰을 수정해야 하는 문제가 있습니다. 이상적인 시맨틱 토큰은 추상화와 공통 요소 식별을 통해 충분한 의도를 가지되 다양한 컴포넌트에 확장 적용 가능해야 합니다.

견해

디자인 시스템을 만들고 유지보수할 때, 시맨틱 토큰이 지나치게 복잡해지거나 유연성을 잃지 않도록 지속적으로 균형을 평가해야 합니다. ‘Wise design system’이나 ‘Adobe Spectrum’과 같은 성공적인 사례를 참고하는 것도 도움이 될 수 있습니다.

출처

When “semantic tokens” are no longer semantic. | by Nate Baldwin | DesignSystems Collective