리스트박스와 드롭다운, 언제 무엇을 쓸까

Nielsen Norman Group의 Anna Kaley는 겉보기에 비슷한 두 선택 컨트롤, 리스트박스와 드롭다운 리스트의 차이를 정리했다. 리스트박스는 선택지를 처음부터 펼쳐 보여 주고 다중 선택을 지원하는 반면, 드롭다운은 클릭해야 선택지가 드러나며 단일 선택만 가능하다. 선택지가 5개 이하라면 둘 다 아닌 라디오 버튼이나 체크박스가 낫고, 5~15개 구간에서 두 컨트롤을 비교해 고르라는 것이 핵심 기준이다.

"리스트박스는 선택하기 전에 옵션을 드러내기 위해 무언가를 클릭할 필요가 없다."Nielsen Norman Group, Listboxes vs. Dropdown Lists

왜 중요한가

폼에서 드롭다운은 습관처럼 쓰이지만, 선택지를 숨기는 만큼 사용자는 한 번 더 클릭하고 목록을 훑어야 한다. 반대로 공간이 넉넉하고 선택지를 비교해야 하는 상황이라면 리스트박스가 상호작용 비용을 낮춘다. 컨트롤 선택은 사소한 구현 디테일이 아니라 완료율과 오류율에 직결되는 설계 결정이다.

실무 적용

폼을 설계할 때 각 선택 필드마다 선택지 수, 다중 선택 필요 여부, 사용 가능한 화면 공간 세 가지를 먼저 적어 보자. 5개 이하면 라디오·체크박스, 15개를 넘고 공간이 있으면 스크롤 가능한 리스트박스, 공간이 좁고 기본값을 바꿀 일이 드물면 드롭다운이 적합하다. 이 기준을 디자인 시스템의 컴포넌트 사용 가이드에 한 표로 정리해 두면 팀 간 판단이 일관된다.

교차 참고

• Nielsen Norman Group: Dropdowns — Design Guidelines — 드롭다운을 쓰기로 했다면 지켜야 할 세부 지침을 함께 확인할 수 있다.

Wemeet의 관점

Wemeet은 컴포넌트를 고를 때 "화면이 깔끔해 보이는가"보다 "사용자가 몇 번 움직여야 끝나는가"를 먼저 묻는다. 드롭다운은 공간을 아껴 주지만 그 대가를 사용자가 치른다는 점을 기억해야 한다. 특히 모바일 폼에서는 네이티브 선택 UI와의 조합까지 고려해 실제 기기에서 확인하는 습관이 중요하다.