언제 드롭다운이 맞을까
드롭다운은 선택지를 접어 두어 공간을 아껴요. 리(2017)는 선택지가 몇 개 안 될 때는 오히려 모두 보여주는 편이 낫다고 정리했어요. 두세 개라면 세그먼트 컨트롤이나 라디오 버튼이 한 번에 비교하게 해 줘요. 반대로 수백 개라면 힉(1952)의 법칙(힉의 법칙)처럼 고르는 시간이 길어지니 검색 입력이 나아요. 드롭다운은 그 중간, 대략 대여섯에서 수십 개 사이일 때 잘 맞아요.
모바일에서의 드롭다운
모바일에서는 기본 셀렉트가 화면 아래 휠이나 목록으로 열려, 손가락으로 고르기 쉬워요. 직접 만든 드롭다운이 작은 목록으로 열리면 누르기 어렵고 화면 밖으로 잘리기도 해요. 선택지가 길면 바텀 시트로 띄우는 것도 좋은 방법이에요. 머티리얼(Google, n.d.)은 현재 값을 보여주는 노출형 드롭다운을 안내해요. 시어스와 슈나이더만(1994)의 분할 메뉴처럼 자주 고르는 국가를 맨 위에 모으면 긴 목록도 빨라져요.
접근성과 동작
직접 만든 드롭다운은 W3C의 메뉴 버튼 패턴(n.d.)처럼 역할과 열림 상태, 화살표 키 이동을 지원해야 해요. 가능하면 기본 select 요소를 쓰는 게 가장 안전해요. WCAG 2.2(W3C, 2023)의 3.2.2 기준처럼 선택만으로 다른 페이지로 이동하면 안 돼요. 레이블은 드롭다운 밖에 항상 보이게 두고, 기본값이 사용자를 속이지 않게 '선택하세요'를 써요. 캘러핸과 동료들(1988)처럼 메뉴 모양도 속도에 영향을 줘요.
자주 묻는 질문
- 드롭다운과 셀렉트 박스는 같은 건가요?
- 보통 같은 뜻으로 써요. 셀렉트 박스는 HTML의 select 요소를, 드롭다운은 더 넓게 펼쳐지는 메뉴 전반을 가리키기도 해요.
- 선택지가 몇 개면 드롭다운을 쓰나요?
- 정해진 기준은 없지만, 두세 개면 모두 보이게 두고 아주 많으면 검색을 쓰는 게 좋아요.
출처 검토일: 2026-10-27
참고문헌
- Li, A. (2017, June 11). Dropdowns: Design guidelines. Nielsen Norman Group. 드롭다운을 써야 할 때와 피해야 할 때를 정리한 지침이라, 선택지 수에 맞는 컨트롤을 고를 때 참고하면 도움이 돼요.
- Google. (n.d.). Menus. Material Design 3. 노출형 드롭다운 메뉴의 모양과 동작을 다뤄, 안드로이드 앱 드롭다운을 만들 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (n.d.). Menu button pattern. ARIA Authoring Practices Guide. 메뉴 버튼의 ARIA 역할과 키보드 동작이 있어, 직접 만든 드롭다운을 접근 가능하게 할 때 참고하면 도움이 돼요.
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. 선택지가 늘수록 고르는 시간이 늘어난다는 고전이라, 긴 드롭다운의 문제를 설명할 때 참고하면 도움이 돼요.
- Sears, A., & Shneiderman, B. (1994). Split menus: Effectively using selection frequency to organize menus. ACM Transactions on Computer-Human Interaction, 1(1), 27–51. 자주 고르는 항목을 위에 모으는 분할 메뉴 연구라, 국가 목록처럼 긴 드롭다운 순서를 정할 때 참고하면 도움이 돼요.
- Callahan, J., Hopkins, D., Weiser, M., & Shneiderman, B. (1988). An empirical comparison of pie vs. linear menus. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 95–100). ACM. 메뉴 모양에 따라 선택 속도가 달라진다는 실험이라, 메뉴 형태 선택의 근거로 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 선택만으로 화면이 바뀌면 안 된다는 3.2.2 기준이 있어, 드롭다운 선택 후 동작을 정할 때 참고하면 도움이 돼요.