햄버거 메뉴 UI

햄버거 메뉴(hamburger menu, drawer button)는 세 줄짜리 아이콘을 탭하면 숨겨진 네비게이션 목록이 펼쳐지는 UI 패턴이다. 모바일 인터페이스 초기에 광범위하게 채택되었지만, 이후 사용성 측면의 논란이 커지면서 대안 탐색이 이어졌다.

반대 의견의 주요 논거는 네 가지다. 첫째, "눈에서 멀어지면 마음에서도 멀어진다(Out of sight, Out of mind)"는 원리처럼 숨겨진 메뉴는 사용 빈도가 낮아진다. 둘째, 원하는 메뉴에 도달하기까지 단계가 늘어난다. 셋째, 뒤로 가기(Back) 동작과 충돌하는 일반 네비게이션 패턴 문제가 있다. 넷째, 알림·메시지처럼 빠르게 확인해야 할 기능이 햄버거 안에 묻히면 접근성이 떨어진다. 애플의 WWDC14 발표에서는 직관적인 앱의 기준으로 "지금 어디 있는가 / 어디로 갈 수 있는가 / 가면 무엇이 있는가" 세 가지를 제시했는데, 햄버거 메뉴는 이 세 가지를 동시에 만족시키기 어렵다.

대안으로 제시되는 탭 바(Tab Bar)는 주요 기능을 앱 하단에 노출해 화면 전환 시 홈으로 돌아가는 불필요한 단계를 없애고, 어느 화면에서나 알림을 확인하게 해준다. A/B 테스트에서 햄버거 메뉴 대비 주간·일별 평균 사용 빈도가 더 높다는 결과도 있다. 탭 바가 화면 하단을 차지하는 단점은 스크롤 시에만 노출하는 방식으로 완화할 수 있다.

반면 찬성 의견도 있다. 탭 바는 메뉴를 동일 레벨로 나열해 기능 간 중요도 차이를 표현하기 어렵고, 4~5개 이상의 메뉴를 담기도 어렵다. 햄버거 메뉴는 메가 메뉴나 Secondary content를 숨기기에 적합하며, 메뉴가 추가되어도 디자인을 일관되게 유지할 수 있다. Slack과 Google처럼 서비스 범위가 넓은 경우, 주요 기능을 화면에 꺼내두고 부가 기능은 햄버거 메뉴로 분리하는 방식이 효과적이다.

최근 경향으로는 YouTube가 햄버거 메뉴에서 상단 탭으로 전환한 사례가 주목받는다. 핵심 기능(추천·구독)은 탭으로 노출하고 계정·컨텐츠 관리 등 부가 기능은 별도로 분리해, 메뉴의 목적과 성격에 따라 depth를 구분하는 방식이다.

핵심 내용

햄버거 메뉴는 가시성 저하 → 사용 빈도 감소로 이어짐
탭 바: 주요 기능 항상 노출, A/B 테스트에서 사용 빈도 우위
햄버거 메뉴 적합 케이스: 주요 기능이 하나로 뚜렷하거나 Secondary content가 많을 때
탭 메뉴 5개 초과 시 More 버튼 또는 가로 스크롤 탭으로 처리
서비스 목표와 핵심 사용자 니즈에 맞는 네비게이션 패턴 선택이 최우선
Swipe Navigation은 예측 가능성 낮아 신중하게 사용

출처

햄버거 메뉴 ISSUE — UX 가벼운 이야기

햄버거 메뉴 UI

핵심 내용

관련 개념

출처