| |
| Material Design 3의 Menus 컴포넌트 |
[clearfix]
1. 개요
드롭다운 메뉴(Dropdown menu)는 그래픽 사용자 인터페이스의 요소 중 하나로, 버튼을 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 보통 그 버튼의 아래로 하위 메뉴들이 펼쳐지는 요소를 말한다. 풀다운 메뉴(pulldown menu)라고도 부른다.화면에 상위 메뉴만을 노출시키고, 활성화 시에만 하위 메뉴들을 표시하는 방식이기 때문에, 초기 화면에서 보이는 메뉴의 영역을 좀 더 줄일 수 있다. 이렇게 부수 요소의 공간 및 시선을 줄이고 실제 컨텐츠에 좀 더 집중 시킬 수 있기 때문에 웹 페이지의 상단 메뉴인 글로벌 내비게이션 바(GNB, Global Navigation Bar)에서 표시하고픈 하위 링크가 있을 경우에 많이 사용된다.
그런데 모바일 웹의 경우 이마저도 공간이 협소한 경우가 많아, 보통 GNB를 햄버거 메뉴로 구현한다. 그래서 보통 반응형 웹을 적용한 페이지의 창 사이즈를 서서히 줄이다 보면 GNB가 조금씩 줄어들다가 어느 순간 햄버거 아이콘으로 바뀌는 것을 쉽게 볼 수 있다.
클릭하면 펼쳐지는 경우도 있고, 호버(hover)[1]만 해도 펼쳐지는 경우가 있다. 호버만 해도 펼쳐지게 만들 경우, 클릭 수를 줄여 전체 하위 메뉴로의 접근을 좀 더 빠르게 만들 수 있는 장점이 있다. 하지만 메뉴 아래의 컨텐츠를 보려고 하는데 의도치 않게 마우스를 움직이다가 호버되어 메뉴가 펼쳐져 다시 마우스를 움직여 메뉴를 안 보이도록 해야하는 경우가 발생하기도 한다. 또, 호버 이벤트의 경우 커서가 존재하지 않는 모바일 환경에서는 조금 이상하게 작동하는 단점도 있다. 따라서 상항에 맞게 디자인하는 것이 좋다. 나무위키의 경우 상단의 '특수 기능'이나 프로필의 하위 메뉴에, 클릭 시 펼쳐지도록 만든 드롭다운 메뉴를 사용하고 있다.
2. 비슷한 요소
2.1. 드롭다운 목록
| |
| Material Design 3의 Menus 컴포넌트 |
아래로 목록이 뜬다는 점은 같지만 다른 개념이다. 영어 그대로 드롭다운 리스트라고도 한다.
앞서 서술한 드롭다운 메뉴는 보통 '상위 메뉴'의 제목이 쓰여진 버튼을 통해 활성화하면 아래로 '하위 메뉴'들이 펼쳐지는 것을 의미한다. 즉, 상위 메뉴에 포함된 하위 메뉴를 나타내기 위한 목적으로 쓰인다.
반면 드롭다운 목록은 여러 가지 값 중 하나의 특정한 값을 선택하기 위한 목적으로 쓰인다. 따라서 버튼의 텍스트가 현재 선택된 값을 의미하며 다른 값을 선택할 경우 그 값으로 변하게 된다. 예를 들어 회원가입 등의 폼(form)에서 생년월일이나 성별을 선택하거나 본인인증에서 휴대폰 통신사를 선택하는 부분에서 자주 볼 수 있다.
드롭다운 목록은 HTML에서 기본으로 제공하는 select 태그로 만들 수 있으며, option 태그로 리스트 요소를 나열하고, 리스트 들의 공통되는 부분이 있다면 optgroup 태그로 그룹을 구성할 수 있다. 하지만 자체 지원 태그로는 CSS로 스타일을 적용하기 까다롭고, 브라우저마다 구현해놓은 방식이 달라서, 보통 실제 사이트에서는 다른 기본 요소와 JavaScript를 사용하여 드롭다운 메뉴와 비슷한 모양으로 구현하여 만든다.
[clearfix]
2.2. 콤보 상자
combo box영어 그대로 읽어 콤보 박스, 혹은 콤비네이션 박스(combination box)라고도 한다.
보통 드롭다운 목록에서 텍스트 박스를 결합한 형태의 요소를 일컫는 경우가 많다. 따라서 사용자가 직접 텍스트를 입력하여 원하는 값을 찾을 수도 있다.
그런데, 이 용어는 좀 더 포괄적으로 쓰여서 텍스트 상자와 일반 리스트 상자를 결합한 모양이나, 일반 드롭다운 메뉴도 콤보 박스로 부르기도 한다.
3. 명칭
명확히 규정된 용어가 없어 다양한 다른 명칭으로 불리기도 하고 가끔 서로 혼용되기도 한다.전체적으로 디자인 적인 시점에서는 드롭다운에 초점을 맞춘 명칭을, 기술적인 시점에서는 콤보 박스에 기반한 명칭을 사용하는 경향이 있음을 알 수 있다.
구글 머티리얼 디자인에서는 드롭다운 메뉴를 기본 용어로 두고, 드롭다운 목록은 익스포즈드 드롭다운 메뉴(exposed dropdown menu), 즉 값을 나타내는 드롭다운 메뉴로 부르고 있다.
부트스트랩에서는 하위 목록이 펼쳐지는 요소를 드롭다운(dropdowns)으로 설명하고 있으며 이를 이용한 메뉴를 id 명으로 드롭다운 메뉴라고 표현하고 있는 것을 알 수 있다. 또한 드롭다운 목록은 단순히 HTML 태그의 이름을 따와 select로 설명하고 있다.
마이크로소프트에서는 콤보 박스를 기본 용어로 두고, 타입을 나누어 심플(simple) 타입은 텍스트 상자 + 일반 리스트 박스, 드롭-다운(drop-down) 타입은 텍스트 상자 + 드롭다운 목록, 드롭-다운 리스트(drop-down list) 타입은 텍스트 상자가 없는 위의 드롭다운 목록 그 자체의 모습으로 설명하고 있다.
Java의 공식 문서에서는 콤보 박스를 기본 용어로 두고, 사용자가 직접 텍스트를 입력 할 수 있는가에 대한 여부에 따라, '에디터블 콤보 박스(editable combo box)'와 '언에디터블 콤보 박스(uneditable combo box)'로 나누어 부르고 있다.
Apple에서는 풀-다운 버튼(pull-down button)이라는 명칭을 사용하며, 이를 클릭하면 나오는 리스트를 풀-다운 버튼 메뉴(pull-down button menu)로 부르고 있다.
[1] 마우스를 버튼 위에 올리기만 하는 것.