Selector, Combo box, Search
디자인 시스템 개선기
비슷하면서도 다른, 다르면서도 비슷한
Selector와 Combo Box는 선택을 위한 컴포넌트, Combo Box와 Search Input은 검색 기능을 지닌 점에서 각 컴포넌트의 교집합이 존재하는 상태였습니다.
각 컴포넌트의 교집합 - 검색, 선택 기능이에 따라 프로덕트 내에서 Dropdown 내 Search Input을 지닌 Selector와 Combo Box가 혼용되어, Dropdown 아이템 검색이라는 하나의 목적에 대해 다른 경험을 제공하고 있었습니다.
동일한 목적에 대한 다른 경험이를 해결하고자 각 컴포넌트의 속성을 기반으로 목적과 기능의 차이를 구분했습니다.
1. 목적의 차이
Selector, Combo Box
: 정해진 데이터 목록에서 아이템을 선택하기 위한 컴포넌트
Search Input
: 일치한 쿼리값을 가진 데이터를 찾기 위한 컴포넌트
2. 기능의 차이
Selector
: 선택을 요구한다.
: 컴포넌트만으로 선택 값을 수정할 수 없다.
Combo Box
: 선택 및 입력을 요구한다.
: 입력을 통해 정해진 데이터 목록 범위 내에서, 검색(필터링)을 통한 선택이 가능하다.
: 입력을 통해 정해진 데이터 목록 범위 외에, 새로운 항목을 추가할 수 있다. (즉, 데이터에 영향을 줄 수 있다)
: 컴포넌트만으로 선택된 값을 변경할 수 있다.
Search Input
: 입력을 요구한다.
: 검색 결과 노출 및 페이지 이동 등, 다음 액션을 유도한다.
선택의 목적을 가진 Selector, Combo Box와 검색의 목적을 가진 Search Input으로 나눌 수 있었으며, 입력 및 선택 값 수정 가능 여부에 따라 Selector와 Combo Box의 기능 차이가 있었습니다.
3. 사용 케이스 정의
Selector
: 특정 페이지, 콘텐츠와 같이 한정된 데이터 필드 (Input contents, Filtering..)
Combo Box
: 특정 페이지, 콘텐츠와 같이 한정된 데이터 필드 (Input contents, Filtering..)
: 많은 양의 데이터 목록으로, 즉각적인 선택이 어려운 경우
Search Input
: 광범위한 데이터 필드 (Page, Data table..)
활용되는 데이터의 양과 범위에 따라 사용 케이스를 분리하였습니다. 또한 선택할 데이터 목록의 양이 많은 경우, 검색의 편의성을 제공할 수 있는 Combo Box 사용을 지향합니다.
마무리하며
컴포넌트는 시각적 통일성뿐만 아니라, 프로덕트의 일관된 사용성에도 영향을 미칠 수 있다는 점을 상기시킬 수 있는 경험이었습니다. 큰 도움이 되었던 Nielsen Norman Group과 Carbon의 문서를 첨부하며 마무리합니다. 디자인 시스템에 대해 많은 고민을 가진 분들께 조금이나마 도움이 되었으면 좋겠습니다.
참고 문헌
Nielsen Norman Group
Carbon Design System
