Freeive

uiux

Hamburger menu, 이 3줄 메뉴는 1981년에 그려졌다

가로 3줄은 메뉴 아이콘입니다. 발명자는 1981년 Xerox Star의 아이콘 디자이너 놈 콕스. 30년 묻혀 있다가 2009년 모바일 화면에서 부활한 햄버거 메뉴와 케밥, 미트볼, 벤토까지. 메뉴 아이콘 가족은 다 음식 비유입니다.

한 줄로

가로 3줄은 메뉴 아이콘입니다. 발명자는 1981년 Xerox Star의 아이콘 디자이너 놈 콕스(Norm Cox)입니다.

어디서 왔나

1981년 제록스가 출시한 워크스테이션 Xerox Star는 최초로 데스크톱 메타포(파일, 폴더, 휴지통)를 실제 화면으로 구현한 컴퓨터입니다. 이 시스템의 아이콘 시스템 전체를 디자인한 사람이 놈 콕스. 당시 그가 풀어야 할 문제는 단순했습니다. "선택된 항목의 옵션 목록"을 16×16 픽셀 안에 표현하기.

콕스가 선택한 형태는 가로 줄 3개. "메뉴 항목이 늘어선 모습 그 자체"를 추상화한 것입니다. 그는 후일 한 인터뷰에서 "리스트의 모습을 그대로 가져왔을 뿐"이라고 회상합니다.

이 아이콘은 거의 30년간 잊혔습니다. PC 시대에는 워낙 화면이 넓어서 메뉴를 굳이 숨길 이유가 없었습니다. 다시 부활한 건 2009년 무렵, 스마트폰 화면이 좁아지면서입니다. 페이스북 iOS 앱과 트위터가 거의 같은 시기에 이 아이콘을 부활시키면서 "햄버거"라는 별명이 붙었습니다. 가운데 패티, 위아래 빵이라는 비유입니다.

지금 우리가 쓰는 방식

햄버거 메뉴는 모바일의 사실상 표준이 됐습니다. 하지만 비판도 많습니다. "보이지 않는 것은 클릭되지 않는다"는 원칙에 정면으로 부딪힙니다. 2014년 한 A/B 테스트에서 햄버거 메뉴를 노출형 탭바로 바꿨더니 메뉴 이용률이 5배 늘었다는 결과가 유명합니다.

대안으로 등장한 친척들이 있습니다. kebab menu(세로 3점, 꼬치), meatballs menu(가로 3점), bento menu(9점 그리드, 일본 도시락). 메뉴 아이콘 패밀리는 다 음식 비유입니다.

바이브 메이커가 챙길 한 가지

햄버거 메뉴는 "공간 절약"이 아니라 "핵심 동선을 숨기는 결정"입니다. 거기 들어갈 것과 안 들어갈 것을 정확히 구분하지 않으면, 가장 중요한 기능이 영원히 발견되지 않습니다.

관련

Kebab menu · Meatballs menu · Bento menu · Bottom navigation

#UI/UX#용어사전#햄버거메뉴#Xerox#아이콘디자인#어원#1981

Recent

다른 일기도 같이.