‘☰’ 작은 아이콘 하나에도 구조가 있습니다.

햄버거 아이콘은 통상적으로 세 개의 가로선으로 구성된 메뉴 아이콘이며 모바일과 PC 웹 환경에서 주로 숨겨진 네비게이션을 사용하는 용도로 사용됩니다. 주된 목적은 화면이 작은 디바이스에서 정보 과잉을 줄이기 위해 등장한 UI 요소입니다.

우선 ‘메뉴'라는 단어는 어디서 유래되었는지 아시나요? 메뉴(Menu)는 프랑스어로 ‘작고 정리된 목록'을 뜻합니다. 식당의 메뉴판처럼 사용자가 선택할 수 있는 항목을 모아 보여주는 역할을 합니다. 1981년 디자이너 Norm Cox는 Xerox 사의 GUI 시스템을 설계하면서 심플하고 직관적인 메뉴 아이콘을 제작하게 됩니다. 세 줄로 이루어진 아이콘은 마치 ‘빵-패티-빵'을 쌓아 올린 햄버거처럼 보였고 이때부터 사용자들은 자연스럽게 ‘햄버거 메뉴'라고 부르기 시작했습니다.

햄버거 아이콘은 기능이 아니라 정보 구조와 사용자 경험을 압축해 보여주는 디자인 선택입니다. 세컨드크루는 이 작은 UI 요소에서도 서비스의 본질을 설계합니다. 햄버거 아이콘을 단순한 메뉴 버튼으로 바라보지 않고 정보를 숨기는 방식에 대한 결정이라고 보며 어떤 메뉴는 보이게 하고 어떤 정보를 뒤로 둘 것인가에 대한 구고적 결과물이라고 생각합니다. 메뉴가 보이지 않는다는 것은 사용자가 한 번 더 생각해야 한다는 의미가 되며 이는 곧 서비스의 성격에 따라 장단점이 될 수 있습니다. 세컨드크루는 햄버거 아이콘이 사용자의 행동을 방해하지 않는가를 먼저 검토합니다.

물론, 햄버거 메뉴 이외에도 다양한 메뉴가 있으며 그 중 대표적으로는 벤또 메뉴와 케밥 메뉴가 있습니다. 벤또 메뉴(Bento Menu)는 ‘격자형 구조 모양'을 하고 있고 다양한 기능을 한 눈에 보여줄 경우에 많이 사용됩니다. 케밥 메뉴(Kebab Menu)는 ‘세로 점 3개 모양'의 구조를 띄고 있으며 옵션 메뉴, 세부 기능을 확인하는 목적으로 주로 사용됩니다.