디자인 시스템의 컴포넌트 구분 원칙

핵심 아이디어

디자인 시스템에서는 시각적으로 유사하게 보이는 컴포넌트들도 그 기능과 사용 목적에 따라 별도로 구분하여 관리해야 효율성과 사용자 경험이 향상된다.

요약

Badge와 Pill, Button과 Action Button, Select와 Dropdown과 같은 컴포넌트 쌍들은 외관이 비슷하지만 상호작용 방식과 사용 목적이 다르다. 이러한 컴포넌트들을 분리함으로써 유지 관리가 용이해지고, 스타일 변경이 독립적으로 가능해지며, UI에 명확한 계층 구조를 도입할 수 있다.

견해

디자인 시스템에서 컴포넌트를 구분하는 것은 단순히 기술적 문제가 아니라 사용자 경험과 직결되는 문제이며, 적절한 문서화와 교육을 통해 팀 전체가 이 원칙을 이해하고 따르도록 하는 것이 중요하다.

출처

Design system dilemmas: similar looks, different functions | by Dean Harrison |UX Collective