드롭다운 vs 선택 vs 콤보박스
dropdown 메뉴는 여러 동작을 실행해요. select는 정해진 목록에서 고르는 거고, combobox는 직접 타이핑하거나 검색할 수도 있어요.
동작에는 메뉴를 사용하세요. 짧은 고정 목록에는 선택(select)을 사용하세요. 긴 목록이나 검색 가능한 목록에는 콤보박스(combobox)를 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
드롭다운 & 컨텍스트 메뉴 — 학습 번들
이 학습 번들은 메뉴가 열리는 방식으로 비교합니다. 드롭다운은 제어 장치에서 열립니다. 컨텍스트 메뉴는 하나의 객체에 속하며 흔히 포인터에서 열립니다. 이 번들은 하나의 표준 메뉴 용어가 아닙니다.
DropdownMenu / ContextMenu더보기 버튼은 일반 작업을 엽니다. 파일을 우클릭하면 해당 파일에 대한 작업만 열립니다.
- 사용할 때
- 트리거와 객체가 작업에 맞는 메뉴를 선택합니다. 그 후 키보드 동작을 빌드합니다.
- 다음 경우에는 사용하지 마세요
- 명령 메뉴 안에 폼 필드나 사이트의 주요 내비게이션을 절대 넣지 마세요.
- 코드에서 사용된 이름
DropdownMenu / ContextMenu
선택
Select는 정해진 목록을 열어서 하나의 값을 고르게 해줘.
국가 입력 칸은 정해진 목록을 보여주고, 그 밖의 값은 받아들이지 않아요.
- 사용할 때
- 목록이 고정되어 있고 그다지 길지 않으며 페이지에 공간이 적을 때 사용하세요.
- 다음 경우에는 사용하지 마세요
- 사람들이 검색해야 하는 긴 목록에 절대 사용하지 마세요. 대신 콤보박스를 사용하세요.
- 코드에서 사용된 이름
<select> / role="listbox"
편집 가능한 콤보박스
편집 가능한 콤보박스는 목록이 연결된 텍스트 입력창이에요. 타이핑할 때마다 목록이 걸러져요.
“Tai”를 입력하면 타이베이와 타이난이 표시됩니다. 그런 다음 화살표 키를 사용하여 선택하세요.
- 사용할 때
- 길게 검색 가능한 목록, 자동완성 또는 사용자 정의 답변이 가능한 선택 항목에 사용하세요.
- 다음 경우에는 사용하지 마세요
- 단순 메뉴나 네이티브 셀렉트를 절대 콤보박스라고 부르지 마세요. 왜냐하면 작동 방식이 다릅니다.
- 코드에서 사용된 이름
role="combobox" + aria-controls
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 드롭다운 & 컨텍스트 메뉴 — 학습 번들Dropdown & Context Menu — Learning Bundle | 트리거와 객체가 작업에 맞는 메뉴를 선택합니다. 그 후 키보드 동작을 빌드합니다. | 명령 메뉴 안에 폼 필드나 사이트의 주요 내비게이션을 절대 넣지 마세요. | DropdownMenu / ContextMenu |
| 선택Select | 목록이 고정되어 있고 그다지 길지 않으며 페이지에 공간이 적을 때 사용하세요. | 사람들이 검색해야 하는 긴 목록에 절대 사용하지 마세요. 대신 콤보박스를 사용하세요. | <select> / role="listbox" |
| 편집 가능한 콤보박스Editable Combobox | 길게 검색 가능한 목록, 자동완성 또는 사용자 정의 답변이 가능한 선택 항목에 사용하세요. | 단순 메뉴나 네이티브 셀렉트를 절대 콤보박스라고 부르지 마세요. 왜냐하면 작동 방식이 다릅니다. | role="combobox" + aria-controls |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 드롭다운 & 컨텍스트 메뉴 — 학습 번들 (Dropdown & Context Menu — Learning Bundle)、선택 (Select)、편집 가능한 콤보박스 (Editable Combobox)에서 선택하세요. 이 규칙 사용: dropdown 메뉴는 여러 동작을 실행해요. select는 정해진 목록에서 고르는 거고, combobox는 직접 타이핑하거나 검색할 수도 있어요. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.