햄버거 메뉴는 세 개의 수평선으로 구성된 아이콘으로, 웹사이트나 앱의 탐색 메뉴를 표현합니다. 햄버거 메뉴 아이콘을 클릭하거나 터치하면 주요 탐색 옵션들이 드롭다운 메뉴 또는 사이드 메뉴 형태로 표시됩니다. 주로 반응형 웹에서 테블릿 혹은 모바일처럼 뷰포트의 화면이 좁아지는 부분에서 네비게이션 메뉴를 햄버거 메뉴로 표현하는 편입니다.
Android에서는 Drawer 메뉴, iOS에서는 사이드바라고 불립니다. iOS에서 iPadOS가 아닌경우는 사이드바를 사용하는 것을 지양합니다.
사용 예시
햄버거 메뉴는 화면 공간을 절약하고 UI를 간결하게 유지하는데 도움이 됩니다. 모바일 환경에서는 특히 유용하며, 사용자에게 필요한 기능을 숨겨 놓고 필요할 때만 접근할 수 있게 합니다. 웹사이트나 앱에서 보조 메뉴, 설정, 로그인 등의 기능을 배치하는데 주로 사용됩니다.
주의점
- 햄버거 메뉴는 사용자가 핵심 기능을 찾는 데 방해가 될 수 있으므로, 중요한 기능은 직접 액세스할 수 있도록 메인 화면에 표시하는 것이 좋습니다.
- 햄버거 메뉴를 사용할 때는 사용자가 메뉴 아이콘을 쉽게 찾고 이해할 수 있도록 위치와 디자인에 주의해야 합니다. 아이콘의 모양과 위치는 일관성을 유지해야 합니다.
- 햄버거 메뉴 안의 메뉴 항목은 간결하고 명확하게 표현해야 합니다. 사용자가 메뉴를 이해하고 원하는 기능을 찾는 데 시간을 낭비하지 않도록 해야 합니다.