아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다.
셀렉트 박스 (Select)
셀렉트 박스는 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.
여러 옵션 중 하나만 선택할 수 있다.
일반적으로 드롭다운 형식으로 제공된다.
박스를 클릭하면 리스트가 펼쳐지고, 옵션을 선택하면 리스트가 접힌다.
선택된 옵션은 박스에 표시된다.
사용자는 자기가 무엇을 선택했는지 쉽게 파악할 수 있다.
셀렉트 박스는 왜 사용할까?
일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다.
옵션이 정해지지 않으면
사용자로부터 의도치 않은 다양한 응답을 수집할 수 있다.
따라서 일정한 입력 값이 필요한 경우,
옵션을 정해서 사용자에게 제공해야 한다.
그런데, 이러한 목적은 라디오 버튼도 같다.
셀렉트 박스는 무엇이 다를까?
셀렉트 박스는 옵션이 많을 때 사용하기 좋다.
많은 옵션을 라디오 버튼처럼 한번에 노출하면
선택 시 불편하고 화면이 복잡해진다.
원하는 옵션을 찾으려면 길게 늘어진 옵션들을 따라 화면을 이동해야 한다.
사용자가 기존 맥락을 놓칠 수 있다.
셀렉트 박스를 사용하면 이 많은 옵션들을 감출 수 있다.
공간이 절약되고 화면이 정돈되어 보인다.
펼쳐진 리스트는 위아래로 스크롤할 수 있다.
사용자가 화면을 이동하지 않고 옵션을 선택할 수 있다.
그런데, 옵션이 너무 많다면?
셀렉트 박스도 불편할 수 있다.
옵션이 수십, 수백 개에 달하면,
원하는 옵션을 찾기 위해서 오랫동안 스크롤을 해야 할 수 있다.
이럴 땐 검색 가능한 셀렉트 박스(Searchable Select) 사용을 권장한다.
원하는 옵션을 검색하여 빠르게 찾을 수 있을 수 있기 때문이다.
(이 포스팅은 셀렉트 박스에 대한 기본 문법만 다룹니다.
검색 가능한 셀렉트 박스에 대해서는 따로 검색을 추천 드립니다.)
반대로, 옵션이 너무 적다면?
2~3개 정도의 옵션은 라디오 버튼 사용을 권장한다.
모든 옵션이 한눈에 보이고 바로 선택할 수 있기 때문이다.
옵션 리스트가 감춰져 있는 셀렉트 박스에 비해 편리하다.
요약하면,
셀렉트 박스는 언제 사용할까?
✅ 일정한 입력 값을 응답받아야 하는 상황에서
✅ 여러 옵션 중 하나를 선택해야 하고
✅ 옵션이 많을 때 (5개 이상)
셀렉트 박스는 이럴 때 불편하다!
- 옵션이 너무 많을 때 → 검색 가능한 셀렉트 박스(Searchable Select) 사용
- 옵션이 너무 적을 때 (2~3개 정도) → 라디오 버튼(Radio Button) 사용
UI 디자인, 웹 UI 디자인, 셀렉트 박스, 라디오 버튼 차이
'디자이너가 알아야 할 것들 > UI·UX Design' 카테고리의 다른 글
| 웹 UI 디자인 기본 문법 - 체크박스 (Checkbox) (0) | 2025.03.19 |
|---|---|
| 웹 UI 디자인 기본 문법 - 라디오 버튼 (Radio button) (0) | 2025.03.07 |
| 2023 AI 기반 UI·UX 디자인 트렌드 (0) | 2023.02.12 |
| 페르소나란 무엇일까? (MIT 스타트업 바이블을 읽고...) (0) | 2021.11.17 |
| UI·UX 디자인 스터디 - 게슈탈트 법칙으로 본 UI 디자인 (2) | 2021.06.09 |
