UI·디자인 토큰 이름 짓기, 구조와 사용자 언어 중심으로 설계
Smashing Magazine이 UI 구성요소·변수·디자인 토큰의 명명법과 참고 도구를 정리했다. 이름은 짧고 의미가 분명하며 팀이 이해할 수 있어야 한다고 설명한다. 여러 브랜드를 지원하는 토큰은 브랜드·기초값·의미·페이지의 연결을 드러내고, 기능명은 사용자가 설명하는 말에서 찾도록 권한다.
Classnames는 동작·순서·그룹·연관 관계 등으로 묶은 단어 목록을 제공해 클래스·함수 이름을 구상하는 데 도움을 준다.
Component Gallery는 실제 디자인 시스템의 UI 구성요소 50종 이상과 같은 구성요소에 쓰이는 다른 이름을 모아 제공한다.
Vodafone UK의 Variables Taxonomy Map은 브랜드·기초값부터 의미·페이지까지 네 가지 컬렉션과 토큰 간 연결을 보여준다.
기능명은 사용자 필요와 기대 결과를 나타내야 하며, 사용자에게 기능을 자기 말로 설명하게 한 뒤 그 표현을 활용하도록 제안한다.
토큰 이름에 역할과 사용 위치를 담으면 여러 테마를 관리할 때 값의 의미를 추적하기 쉽다.
원문
- A Practical Guide To Naming ThingsSmashing Magazine · 원문 2026-10-06