위키원
햄버거 메뉴
햄버거 메뉴(hamburger menu)는 주로 모바일 애플리케이션과 웹사이트에서 사용되는 사용자 인터페이스 요소다. 햄버거 메뉴는 세 개의 가로선을 쌓은 모양을 하고 있어 '햄버거'라는 이름이 붙었으며, 이 아이콘을 클릭하면 숨겨져 있던 메뉴나 탐색 옵션이 나타난다. 햄버거 메뉴는 공간 절약과 인터페이스의 단순성을 유지하는 데 효과적이지만, 탐색의 어려움이나 인식 문제 등 몇 가지 단점도 존재한다. 햄버거 버튼(hamburger button)이라고도 한다.
 .jpg) |
디자인 기원
햄버거 메뉴는 원래 제록스(Xerox)의 디자이너인 놈 콕스(Norm Cox)가 제록스스타(Xerox Star)의 1981년 개발한 아이콘이다.[1] 햄버거와 우연히 닮은 데에서 비롯된 이름으로, 그래픽 사용자 인터페이스의 최상위 모퉁이에 보통 위치한다.[2] 이 아이콘은 초기 컴퓨터 시스템인 제록스스타에서 처음 사용되었다.
햄버거 메뉴는 모바일앱에서 이용 가능한 화면 영역이 제한됨에 따라 2009년부터 빛을 보기 시작했다.[3][4][5] 모바일기기와 태블릿의 보급과 함께 햄버거 메뉴는 다시 인기를 끌게 되었다. 화면 크기가 제한된 모바일 환경에서는 복잡한 탐색 메뉴를 항상 표시하는 것이 불가능했기에, 햄버거 메뉴가 유용한 해결책으로 사용됐다.
한편 햄버거 메뉴를 개발한 콕스는 이 아이콘의 제작을 설명하면서 "이것의 그래픽 디자인은 상당히 도로 표지판처럼 단순하고 기능적으로 기억할만 하며 결과로 보이는 메뉴 목록의 외형을 모방하는 것이 의도였다. 작업할 화소가 거의 없으면서도 분명하지만 단순해야 했다. 이미지 랜더링을 위해서는 16 x 16 화소만이(아니면 13 x 13만이, 정확히 기억나지는 않는다) 필요했다."고 말했다.[6][7]
디자인 고려사항
햄버거 메뉴를 클릭하면 숨겨져 있던 탐색 메뉴가 나타나거나 다시 클릭하면 메뉴가 사라진다. 이를 통해 화면의 공간을 효율적으로 사용할 수 있다. 사용자가 메뉴를 필요로 하지 않을 때는 메뉴가 화면에 보이지 않으므로, 인터페이스를 깔끔하게 유지할 수 있다. 여러 페이지나 섹션에서 동일한 위치에 햄버거 메뉴를 배치하면 사용자 경험을 일관되게 유지할 수 있다.
햄버거 메뉴를 설계할 때 고려해야 할 것들이 있다. 첫 번째는 가시성이다. 햄버거 메뉴 아이콘은 쉽게 알아볼 수 있어야 하며, 일반적으로 화면의 왼쪽 상단이나 오른쪽 상단에 위치한다. 또한 햄버거 아이콘의 크기와 색상은 사용자가 쉽게 인식할 수 있도록 적절하게 설정해야 한다. 두 번째는 애니메이션 전환 효과다. 메뉴가 열리고 닫히는 애니메이션을 추가하여 사용자 경험을 향상시킬 수 있다. 슬라이드, 페이드, 드롭다운 등 다양한 전환 효과를 사용할 수 있지만, 너무 길거나 복잡하면 사용자에게 불편을 줄 수 있으므로 적절하게 설정해야 한다.
세 번째는 접근성이다. 햄버거 메뉴는 스크린 리더와 같은 보조 기술과 호환되도록 설계되어야 한다. 아이콘에 대체 텍스트를 제공하고, 메뉴 항목이 키보드로 탑색 가능하도록 해야 한다. 웹 접근성 지침(WCAG)을 준수하여 다양한 사용자들이 쉽게 이용할 수 있도록 하는 것이 중요하다. 마지막으로 상황 인식이다. 햄버거 메뉴가 열려있을 때는 배경이 어두워지거나 흐려지는 등의 시각적 피드백을 제공하여 사용자가 현재 메뉴를 탐색중임을 인지할 수 있도록 해야 한다.
특징
햄버거 메뉴의 장점은 메뉴 영역을 처음부터 드러내지 않고 버튼을 눌러야 메뉴가 나타나도록 설계되었기 때문에 콘텐츠 화면의 공간을 확보하기가 좋다는 것이다. 그래서 콘텐츠 중심의 애플리케이션에 활용하면 좋다. 예를 들어 번역이 주요 기능인 구글 번역 앱에서 볼 수 있다. 메뉴의 양이 많을 때, 모든 기능을 한 화면에 드러내기에는 기능적으로나 미적으로도 좋지 않기 때문에 햄버거 메뉴에 담으면 이를 해결할 수 있다. 그리고 메뉴가 콘텐츠 화면에 독립적이기 때문에 기능이 추가될 경우 메뉴를 추가하는 확장성이 좋다. 이러한 이유로 네이버의 모바일웹 메인 화면에서도 사용되고 있다.
그러나 모바일 환경에 익숙하지 않은 이용자들은 이 버튼이 어떻게 동작하는지 인지하기 힘들 수 있다. 그럴 경우 해당 사용자는 자신이 원하는 기능을 찾지 못하고 해당 애플리케이션을 이탈할 수 있다. 모바일에 익숙한 사람이라고 하더라도, 첫 화면에 노출되어 보여지는 것과 버튼에 한 번 숨겨져 있는 것은 기능 활용 유도에 확연한 차이가 있다. 그리고 사용자가 원하는 내용을 보기 위해서 반드시 메뉴를 열어야 하기 때문에, 내비게이션 과정에 불편한 한 단계가 더 생기는 것을 피하기 어렵다. 그래서 페이스북, 유튜브 등의 애플리케이션에서는 햄버거 메뉴를 대신하여 아이콘이 3~5개정도 있는 하단 탭 바(tap bar)를 사용하고 있다.[8]
장점
- 공간 절약: 제한된 화면 공간을 효율적으로 사용할 수 있다.
- 단순성: 인터페이스를 깔끔하고 단순하게 유지할 수 있다.
- 일관성: 여러 페이지에서 동일한 위치에 메뉴를 배치하여 일관된 사용자 경험을 제공한다.
- 중복 회피: 메인 화면에 모든 탐색 옵션을 표시하지 않고, 필요할 때만 메뉴를 열어 사용할 수 있으므로 화면이 복잡해지지 않는다.
단점
- 탐색의 어려움: 일부 사용자에게는 숨겨진 메뉴를 찾는 것이 어렵거나 불편할 수 있다. 특히 햄버거 메뉴의 존재를 모르는 사용자에게는 접근성이 떨어질 수 있다.
- 탐색 시간 증가: 모든 메뉴 옵션이 한 번에 표시되지 않기 때문에 사용자가 필요한 항목을 찾는 데 시간이 더 걸릴 수 있다. 사용자들이 메뉴를 열고 닫는 추가 동작을 필요로 한다.
- 인식 문제: 햄버거 메뉴 아이콘이 무엇을 의미하는지 모르는 사용자도 있을 수 있다. 특히 디지털 환경에 익숙하지 않은 사용자들에게는 직관적이지 않을 수 있다.
각주
- ↑ 〈The origin of the hamburger icon〉, 《Wayback Machine》, 2014-04-03
- ↑ 한수경 기자, 〈(해외 크리에이티브) 버거킹, 이번엔 햄버거 버튼이다〉, 《매드타임즈》, 2020-07-24
- ↑ Kelsey Campbell-Dollaghan, 〈Who Designed the Hamburger Icon?〉, 《Wayback Machine》, 2014-03-31
- ↑ ANTONIO, 〈A Brief History of the Hamburger Icon〉, 《Wayback Machine》, 2014-10-29
- ↑ Andy Clarke, 〈We need a standard show navigation icon for responsive web design〉, 《Wayback Machine》, 2012-03-17
- ↑ Ana Gonzalez, 〈A Brief History of the Hamburger Icon〉, 《Placeit》
- ↑ 〈햄버거 버튼〉, 《위키백과》
- ↑ 〈햄버거 메뉴〉, 《나무위키》
참고자료
- 〈햄버거 버튼〉, 《위키백과》
- 〈햄버거 메뉴〉, 《나무위키》
- Ana Gonzalez, 〈A Brief History of the Hamburger Icon〉, 《Placeit》
- Andy Clarke, 〈We need a standard show navigation icon for responsive web design〉, 《Wayback Machine》, 2012-03-17
- Kelsey Campbell-Dollaghan, 〈Who Designed the Hamburger Icon?〉, 《Wayback Machine》, 2014-03-31
- slowalk, 〈햄버거 메뉴, 최선인가요?〉, 《개인블로그》, 2014-03-31
- 〈The origin of the hamburger icon〉, 《Wayback Machine》, 2014-04-03
- ANTONIO, 〈A Brief History of the Hamburger Icon〉, 《Wayback Machine》, 2014-10-29
- 낮잠, 〈2018 모바일디자인 트렌드①: 햄버거 메뉴는 그만〉, 《브런치스토리》, 2018-06-08
- 한수경 기자, 〈(해외 크리에이티브) 버거킹, 이번엔 햄버거 버튼이다〉, 《매드타임즈》, 2020-07-24
- 단군소프트, 〈햄버거 메뉴가 UX 디자인을 망가뜨리는가? _제1장〉, 《티스토리》, 2022-06-20
- 32chaeyeon, 〈(UI 명칭) (Menu UI) 이제 땡땡땡 아이콘 말고 진짜 이름으로 불러주세요.〉, 《티스토리》, 2022-07-26
같이 보기
