UI & UX

[UI/UX] 드롭다운(Dropdown)에 대해 알아보자

뉴질랜드 외국인 2020. 10. 9. 08:01

드롭다운(Dropdown)이란?


드롭다운은 사용자가 여러 값(Value)이 있는 리스트에서 하나의 값(Value)을 선택할 수 있도록 하는 요소(Element)입니다. 드롭다운은 광범위하게 사용되는데요. 크게 드롭다운 메뉴(Dropdown Menu)와 드롭다운 리스트(Dropdown List) 두개의 타입으로 구분 짓습니다.

 

드롭다운 메뉴는 주로 웹사이트나 앱에서 어디로 가야할 지 네비게이션 역할을 합니다. 그래서 웹사이트의 상단에 주로 배치 됩니다. 사용자가 처음 접했을 때 자연스럽게 왼쪽 상단부터 시선이 가기 때문에 쉽게 찾을 수 있는 위치입니다.

디자인은 다르지만 서브메뉴가 있는 대부분의 웹사이트들은 이 드롭다운 메뉴를 사용합니다.

 

다음(Daum) 웹사이트의 더보기 드롭다운 메뉴 예 1

 

반면 드롭다운 리스트는 드롭다운 메뉴와 다르게 값을 선택해야 하는 목적으로 많이 쓰입니다. 값(Value)의 형태는 매우 다양합니다. 날짜를 선택하는 캘린더도, 필터링(Filtering)도, 서체를 선택할 시, 생년월일을 선택할 때도 이 드롭다운 리스트가 쓰입니다.

 

드롭다운 리스트는 주로 많은 값들을 골라야 하는 예약 시스템에 많이 쓰입니다. 예를 들어, 항공사나 호텔의 예약 시스템입니다. 

 

드롭다운 리스트 예 1
드롭다운 리스트 예 2

 

드롭다운 상태 종류


드롭다운의 상태는 여러가지가 있습니다. 

 

- Inactive (또는 Rest, Default): 아무것도 하지 않을 때 

- Hover: 마우스를 드롭다운에 갔다 대었을 때 (데스크탑에서 적용, 모바일에서는 마우스가 없으므로 적용되지 않음)

- Open (또는 Activated): 드롭다운을 선택하였을 때 값들이 리스트로 펼쳐지는 상태

- Focused: 사용자가 마우스가 아닌 키보드나 목소리 등의 다른 인풋(Input) 방법으로 선택했을 때 

- Selected (또는 Populated Active): 사용자가 값을 선택했을 때

- Disabled: 활성화 되지 않은 상태

 

 

그 외에 좀 더 자세한 상태값의 정의는 아래의 웹사이트를 참조하시길 바랍니다. 

material.io/design/interaction/states.html#usage

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

 

드롭다운 내 다른 요소 추가


드롭다운 내에 체크박스나 아이콘을 추가하여 더 직관적인 드롭다운을 만들 수 있습니다. 미적인 추구도 마찬가지이지만 사용자가 더 이해하기 쉽도록 제작할 수록 드롭다운을 더 이용합니다. 

 

 

워낙 드롭다운을 많이 사용하기 때문에 자칫하면 소홀하게 지나갈 수 있는 것 같습니다. 사용자에게 값을 선택하도록 요구하기 때문에 유저들의 사용빈도를 더 높이기 위해서는 이 드롭다운의 많은 테스트가 필요할 것 같습니다. 

 

1 2