Dropdown와 Select Box 차이

Select box란?

Select box는 HTML에서 기본으로 제공하는 select 태그 기반의 네이티브 폼 컨트롤이다.
브라우저와 운영체제가 직접 렌더링하며, 기본적인 UX와 접근성(accessibility)이 이미 설계되어 있다.

특징
-OS 스타일을 그대로 따름

-키보드 네비게이션, 포커스 처리, 스크린 리더 지원 기본 내장

-form submit, validation 기능 기본 제공

스타일 커스터마이징에 한계가 큼

정리하면
안정적이고 예측 가능하다.
꾸밈은 어렵지만, 기본에 가장 충실한 선택지다.

Dropdown이란?

Dropdown은 특정 HTML 태그가 아니라, UI 패턴이다.
보통 button + div + ul + li 조합으로 직접 구현한다.

특징
-디자인과 인터랙션을 자유롭게 커스터마이징 가능

-애니메이션, 검색, 다중 선택, 비동기 데이터 로딩 등 구현 가능

-접근성과 키보드 제어를 직접 처리해야 함

-구현 난이도와 유지보수 비용이 높음

정리하면
표현력은 강하지만, 책임도 함께 커진다.
자유로운 대신, 섬세한 설계가 필수다.

핵심 차이 한 줄 요약

Select box는 시스템 레벨의 기본 컨트롤,
Dropdown은 서비스 레벨의 커스텀 UI 패턴이다.

실무에서의 선택 기준

단순한 입력 폼, 설정 화면 → Select box

검색, 필터, 다중 선택, 서버 연동 → Dropdown