드롭다운메뉴 (Dropdown Menu)
쉽게 풀면
누르면 아래로 목록이 쭉 펼쳐져서 그중 하나를 고를 수 있게 해주는 메뉴이다.
왜 중요한가
드롭다운 메뉴는 클릭이나 호버로 선택지 목록을 펼치는 컨트롤로, 화면 공간을 절약하면서 여러 옵션 중 하나를 고르게 하는 폼과 내비게이션의 기본 요소입니다. 표준 HTML 요소로 구현하면 키보드 조작과 스크린리더 지원을 자동으로 얻기 때문에, 접근성 측면에서 가장 안전한 선택 컨트롤 중 하나로 권장됩니다. 긴 옵션 목록을 다루는 드롭다운은 입력한 글자로 목록을 좁혀 주는 자동완성 기능을 결합해, 스크롤만으로 원하는 항목을 찾는 부담을 줄이는 방식으로 개선되는 경우가 많다. 선택된 값이 드롭다운을 닫은 뒤에도 항상 화면에 보이도록 유지하는 것이 사용자가 나중에 다시 확인할 때 혼란을 줄이는 기본 설계 원칙이다. 옵션이 계층 구조를 가질 때는 상위 항목을 선택하면 하위 옵션 목록이 새로 나타나는 연쇄형 드롭다운이 쓰이며, 이는 단일 목록형 드롭다운과 구현 방식이 다르다.
논문에서는 이렇게 쓰입니다
목록형 선택 UI의 항목 수가 실제 선택 정확도에 미친 영향을 실험한 연구이다.
메뉴 항목을 의미 있는 그룹으로 묶어 보여주는 방식이 사용자의 탐색 부담을 줄인다는 내용입니다.
조금 더 깊게 보면
선택지가 5개 미만이면 라디오 버튼이 더 빠르고, 수십 개가 넘으면 검색이 가능한 콤보박스가 낫다는 것이 사용성 연구의 일관된 권고로, 드롭다운은 그 중간 범위에 적합합니다. 국가 선택처럼 긴 목록을 드롭다운으로 두는 것은 대표적 사용성 문제이며, 모바일에서는 네이티브 피커로 대체됩니다. 호버로 열리는 내비게이션 드롭다운은 터치 기기에서 작동하지 않고, 마우스 경로가 살짝 벗어나면 닫히는 문제로 클릭 방식이 권장됩니다. 옵션을 숨긴다는 점에서 인터랙션 비용이 항상 추가된다는 점도 고려해야 합니다. 네이티브 select 요소로 만든 드롭다운은 운영체제가 렌더링을 담당해 스타일링이 제한적이지만 접근성이 자동 보장되는 반면, 커스텀 드롭다운은 자유로운 디자인이 가능한 대신 키보드 탐색과 스크린리더 지원을 개발자가 직접 구현해야 한다.
주의할 점
드롭다운메뉴는 항목이 많아지면 스크롤 부담이 커져 다른 선택 UI(예: 검색형 자동완성)가 더 나을 수 있다.