햄버거 메뉴
hamburger menu
[clearfix]
그래픽 사용자 인터페이스의 요소 중 하나. 일반적으로 화면에 모든 항목을 드러내고 있는 메뉴와 달리, 햄버거 버튼을 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 비로소 숨겨져 있던 메뉴들이 펼쳐지는 요소를 말한다. 명칭은 아이콘의 모양이 햄버거 같이 생겼다고 해서 붙여진 이름이다.
햄버거 모양 아이콘은 1981년 미국의 디자이너 놈 콕스(Norm Cox)가 제록스 스타(Xerox Star)라는 컴퓨터에서 처음 만들었다. 해당 아이콘은 결과로 보이는 메뉴 항목들의 외형을 심플하게 표현한 것이다.
이 메뉴 방식은 각종 모바일기기가 발달하면서 현대의 좁은 모바일 디스플레이 환경에서 메뉴를 나타내기에 적합하여 빛을 보게 되었다.
메뉴 영역을 처음부터 드러내지 않고 버튼을 눌러야 메뉴가 나타나도록 설계되었기 때문에, 컨텐츠 화면의 공간을 확보하기 좋다. 그래서 컨텐츠 중심의 애플리케이션에 활용하면 좋다. 예를 들어 번역이 주요 기능인 구글 번역 애플리케이션에서 볼 수 있다.
메뉴의 양이 많을 때, 모든 기능을 한 화면에 드러내기에는 기능적으로나 미적으로도 좋지 않기 때문에 햄버거 메뉴에 담으면 이를 해결할 수 있다. 그리고 메뉴가 컨텐츠 화면에 독립적이기 때문에 기능이 추가 될 경우 메뉴를 추가하는 확장성이 좋다. 그래서 네이버의 모바일 웹 메인 화면에서도 사용되고 있다.
그러나 모바일 환경에 익숙하지 않은 사용자들은 이 버튼이 어떻게 동작하는지 인지하기 힘들 수 있다는 문제가 있다. 그럴 경우, 해당 사용자는 자신이 원하는 기능을 찾지 못하고 해당 애플리케이션을 이탈할 수 있다.
모바일에 익숙한 사람이라고 하더라도, 첫 화면에 노출되어 보여지는 것과 버튼에 한 번 숨겨져 있는 것은 기능 활용 유도에 확연한 차이가 있다. 그리고 사용자가 원하는 내용을 보기 위해서 반드시 메뉴를 열어야하기 때문에, 내비게이션 과정에 불필요한 한 단계가 더 생기는 것을 피하기 어렵다. 그래서 페이스북, 유튜브 등의 애플리케이션에서는 햄버거 메뉴를 대신하여 아이콘이 3 ~ 5개 정도 있는 하단 탭 바(tab bar)를 사용하고 있다.
[clearfix]
1. 개요
그래픽 사용자 인터페이스의 요소 중 하나. 일반적으로 화면에 모든 항목을 드러내고 있는 메뉴와 달리, 햄버거 버튼을 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 비로소 숨겨져 있던 메뉴들이 펼쳐지는 요소를 말한다. 명칭은 아이콘의 모양이 햄버거 같이 생겼다고 해서 붙여진 이름이다.
2. 등장
햄버거 모양 아이콘은 1981년 미국의 디자이너 놈 콕스(Norm Cox)가 제록스 스타(Xerox Star)라는 컴퓨터에서 처음 만들었다. 해당 아이콘은 결과로 보이는 메뉴 항목들의 외형을 심플하게 표현한 것이다.
이 메뉴 방식은 각종 모바일기기가 발달하면서 현대의 좁은 모바일 디스플레이 환경에서 메뉴를 나타내기에 적합하여 빛을 보게 되었다.
3. 특징
3.1. 장점
메뉴 영역을 처음부터 드러내지 않고 버튼을 눌러야 메뉴가 나타나도록 설계되었기 때문에, 컨텐츠 화면의 공간을 확보하기 좋다. 그래서 컨텐츠 중심의 애플리케이션에 활용하면 좋다. 예를 들어 번역이 주요 기능인 구글 번역 애플리케이션에서 볼 수 있다.
메뉴의 양이 많을 때, 모든 기능을 한 화면에 드러내기에는 기능적으로나 미적으로도 좋지 않기 때문에 햄버거 메뉴에 담으면 이를 해결할 수 있다. 그리고 메뉴가 컨텐츠 화면에 독립적이기 때문에 기능이 추가 될 경우 메뉴를 추가하는 확장성이 좋다. 그래서 네이버의 모바일 웹 메인 화면에서도 사용되고 있다.
3.2. 단점
그러나 모바일 환경에 익숙하지 않은 사용자들은 이 버튼이 어떻게 동작하는지 인지하기 힘들 수 있다는 문제가 있다. 그럴 경우, 해당 사용자는 자신이 원하는 기능을 찾지 못하고 해당 애플리케이션을 이탈할 수 있다.
모바일에 익숙한 사람이라고 하더라도, 첫 화면에 노출되어 보여지는 것과 버튼에 한 번 숨겨져 있는 것은 기능 활용 유도에 확연한 차이가 있다. 그리고 사용자가 원하는 내용을 보기 위해서 반드시 메뉴를 열어야하기 때문에, 내비게이션 과정에 불필요한 한 단계가 더 생기는 것을 피하기 어렵다. 그래서 페이스북, 유튜브 등의 애플리케이션에서는 햄버거 메뉴를 대신하여 아이콘이 3 ~ 5개 정도 있는 하단 탭 바(tab bar)를 사용하고 있다.