메뉴와 드롭다운, 차이를 정확히 아시나요?
메뉴 컴포넌트의 사용방법과 좋은 사례
드롭다운 · 노출 드롭다운메뉴와 드롭다운의 차이
드롭다운은 메뉴의 하위 타입으로, 메뉴의 한 종류입니다. 구글의 Material Design 2에서는 메뉴의 하위 타입으로 드롭다운(A)과 노출 드롭다운(B) 두 가지를 정의하였으나, Material Design 3에서는 이를 통칭하여 메뉴(Menu)로 소개하고 있습니다.
본 글에서는 드롭다운으로 불리는 메뉴의 정의와 사용방법에 대해 알아봅니다.
Menu · Material Design 3메뉴의 정의
메뉴를 굳이 정의하자면 일시적인 표면에 선택 사항 목록을 표시하는 컴포넌트입니다. 애플의 HIG에서는 팝업 버튼이나 풀다운 버튼과 같은 특정 사례 역시 메뉴로 포함하지만, 이는 다음 글에서 따로 다루고 위의 일반적인 형태에 대해 자세히 설명하고자 합니다.
1. 리스트 아이템(List Item)
메뉴에서 각 항목 하나를 의미합니다. 선택할 수 있는 단위 항목을 제공하며, 메뉴 내에서 정보나 액션을 전달하는 역할을 합니다.
2. 선행 아이콘(List Item Leading Icon)
메뉴 항목 앞에 배치되는 아이콘입니다. 사용자가 항목을 더 쉽게 식별하고 빠르게 이해할 수 있도록 시각적 힌트를 제공합니다.
3. 후행 아이콘(List Item Trailing Icon)
메뉴 항목 뒤에 배치되는 아이콘입니다. 추가적인 액션이나 정보를 나타내며, 선택된 항목에 대한 더 자세한 정보나 기능을 암시합니다.
4. 후행 텍스트(List Item Trailing Text)
메뉴 항목의 오른쪽에 위치한 추가적인 텍스트입니다. 항목에 대한 추가 정보를 제공하거나, 상태나 값 등의 정보를 표시합니다.
5. 컨테이너(Container)
메뉴 항목들을 그룹화하여 포함하는 백그라운드 구조를 의미합니다. 메뉴의 레이아웃을 조직적으로 관리하며, 항목들이 시각적으로 그룹화되어 일관된 사용자 경험을 제공합니다.
6. 구분선(Divider)
메뉴 항목들 사이에 시각적인 구분을 제공하는 요소입니다. 사용자가 항목 간의 경계를 명확히 인식할 수 있도록 돕고, 메뉴의 구조를 더 깔끔하게 만듭니다.
선행·후행이라는 워딩은 지극히 어색하지만, 좌측·우측 따위로 부르면 글자를 오른쪽에서 왼쪽으로 읽는 RTL(Right to Left) 문화권에서는 의미가 달라질 여지가 있어 보입니다.
Menu · Material Design 3메뉴의 상태
모바일뿐 아니라 PC, TV와 같은 디바이스를 고려한다면 State별 표현 방법이 중요합니다.
1. 활성화(Enabled)
메뉴 항목이 정상적으로 선택 가능하고, 사용자가 해당 항목을 클릭하거나 상호작용할 수 있음을 나타냅니다.
2. 비활성화(Disabled)
메뉴 항목이 현재 선택 불가능한 상태임을 나타냅니다. 이 상태의 항목은 사용자가 상호작용할 수 없으며, 일반적으로 흐리거나 회색으로 표시되어 비활성 상태임을 명확히 전달합니다.
3. 호버(Hovered)
사용자가 메뉴 항목 위에 마우스를 올렸을 때 발생합니다. 사용자가 해당 항목을 선택할 수 있음을 암시하며, 일반적으로 색상이 변경되거나 애니메이션 효과가 나타납니다.
4. 포커스(Focused)
메뉴 항목이 키보드나 다른 입력 장치에 의해 선택된 상태를 나타냅니다. 이 상태는 주로 접근성 기능을 지원하며, 사용자에게 현재 항목이 선택되었음을 명확히 시각적으로 표현합니다.
5. 프레스(Pressed)
사용자가 메뉴 항목을 클릭하거나 선택할 때 발생합니다. Ripple 이펙트와 같이 버튼이나 항목의 시각적 변화를 통해 눌림을 강조하며, 선택된 상태임을 표시합니다.
Menu · Material Design 3선택 메뉴의 상태
메뉴의 항목이 선택된 상태일 때의 State 역시 고려해야 정확한 의미를 전달할 수 있습니다. 순서는 위의 일반 메뉴의 State와 동일합니다. 비활성화 상태에서 역시 선행 아이콘이 동일하게 표시되며, 호버, 포커스, 프레스 상태에서는 리스트 아이템이 더욱 강조되는 점을 유의해야 합니다.
다양한 예시
메뉴는 다음과 같은 방식으로 다양하게 활용할 수 있습니다.
작은 화면일 때
모바일 기기와 같이 소형 폼팩터일 때 바텀 시트는 메뉴의 좋은 대안이 될 수 있습니다. 아이콘이나 더 긴 레이블을 표시할 공간이 더 많기 때문입니다.
중간 및 큰 화면일 때
더 큰 화면에서는 바텀 시트를 메뉴로 바꿔 주요 콘텐츠의 의도와 맥락을 효과적으로 보여줄 수 있습니다.
가장자리 기준으로 배치
메뉴는 일반적으로 화면의 가장자리나 메뉴를 생성하는 요소 아래, 옆에 나타납니다. 메뉴가 잘리는 위치에 있는 경우, 그 위치를 다르게 하여 나타날 수 있습니다.
메뉴를 생성한 위치가 A와 같이 상단이라면 아래로, B와 같이 잘리는 부분이 없다면 중앙으로, C와 같이 하단이라면 위로 배치될 수 있습니다.
메뉴의 좋은 사례
메뉴 컴포넌트의 좋은 사례를 다양한 특징별로 선별해보았으니, 참고하여 활용하면 좋겠습니다.
Microsoft Copilot디바이더를 통해 상위 항목은 추가적인 액션, 하위 항목은 편집에 대한 액션을 효과적으로 분리하였습니다.
Messagesios의 메뉴는 선행 아이콘을 우측에 배치한 것과 얇은 디바이더를 기본적으로 적용한 것이 특징입니다. 메뉴를 발생시킨 기존 항목에 좌측 정렬로 배치하였습니다.
Perplexityios의 팝업 버튼 메뉴가 적용된 모습으로, 하단 메뉴가 위로 우측정렬되어 배치되었습니다. 별도의 선행 아이콘 없이 선택된 항목을 체크로 표시하고 있습니다.
Procreate Pocket롱 프레스 시, 리스트 하단에 중앙 정렬되어 배치되었습니다. 다크 모드에서 컨테이너와 백그라운드의 분리가 더 필요해 보입니다.
Craft선행 아이콘이 이모지로 대체되었으며, 선택된 항목을 focused 방식으로 표현하였습니다.
마치며
모바일과 같이 작은 화면의 폼팩터에서는 메뉴의 위치와 상황에 따라 적합한 형태 및 배치를 고려해야 할 것입니다. 특히 사용자의 직관적 이해와 편의성이 중요한 컴포넌트이니 만큼, 각 State별 고려사항을 잘 파악하여 서비스 맥락에 따른 효과적인 형태의 메뉴를 선택해야겠습니다.
메뉴의 형태나 쓰임에 따라 다양한 이름으로 불리고 있으나, 그 본질적인 역할은 메뉴와 다름이 없으므로 굳이 모든 경우를 외우거나 분류할 필요는 없어 보입니다. 추후 HIG에서 다루고 있는 팝업 버튼과 풀다운 버튼은 따로 다뤄보도록 하겠습니다.
메뉴(드롭다운)에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다!
