컴포넌트·토큰 이름 짓기, 실전 가이드

Smashing Magazine의 Vitaly Friedman이 UI 컴포넌트, 디자인 토큰, 변수, 제품 기능의 이름을 짓는 방법을 실전 자료와 함께 정리했다. 너무 일반적인 이름은 혼란을 낳고, 너무 구체적인 이름은 확장을 막는다는 문제의식에서 출발해 팀이 함께 쓸 명명 규칙을 찾는 방법을 소개한다.

"A good name has a logical structure, is short, meaningful, known by everyone, and not related to visual properties."Smashing Magazine, A Practical Guide To Naming Things

왜 중요한가

이름은 단순한 라벨이 아니라 팀이 디자인을 생각하고 대화하는 방식 자체를 정한다. 특히 디자인 토큰은 원시값(primitive)에서 의미값(semantic)으로 이어지는 계층 구조가 이름에 드러나야 테마 변경이나 리브랜딩 때 무너지지 않는다. 기능 이름은 내부 용어가 아니라 사용자가 실제로 부르는 말을 따라야 한다는 점도 강조한다.

실무 적용

"blue-500"이나 "큰 버튼"처럼 시각 속성에 기댄 이름은 디자인이 바뀌는 순간 거짓말이 된다. 프로젝트 초기에 컴포넌트 이름은 Component Gallery 같은 업계 공통 명칭과 맞추고, 토큰은 범주-속성-상태 순의 규칙을 정해 문서로 남기면 디자이너와 개발자의 핸드오프 비용이 눈에 띄게 줄어든다.

교차 참고

• Design Token Naming Convention Tool — 디자인 토큰 명명 규칙을 단계별로 정해 볼 수 있는 도구.
• The Component Gallery: Components — 여러 디자인 시스템이 같은 컴포넌트를 어떤 이름으로 부르는지 비교할 수 있는 모음.
• Nathan Curtis: Design System Conventions in Figma — Figma 안에서 이름·구조 규칙을 운영하는 방식에 대한 글.

Wemeet의 관점

Wemeet은 이름 짓기를 디자인 시스템의 가장 싼 투자이자 가장 비싼 부채라고 본다. 처음 몇 시간을 들여 규칙을 합의하면 이후 수백 번의 "이게 그거 맞아요?"가 사라진다. 작은 홈페이지 프로젝트라도 색·간격·컴포넌트 이름 규칙 한 장은 꼭 남기기를 권한다.