햄버거메뉴 (Hamburger Menu)
쉽게 풀면
세 줄로 생긴 아이콘을 누르면 숨어있던 메뉴가 나타나는 방식이다.
왜 중요한가
햄버거 메뉴는 세 줄 아이콘 뒤에 내비게이션을 숨겨 두는 패턴으로, 모바일의 좁은 화면에서 메뉴 공간을 절약하는 표준 해법이 되었습니다. 항목이 많아 탭 바에 다 넣을 수 없거나 보조 메뉴를 정리할 때 유용하며, 아이콘 자체가 널리 학습되어 별도 설명 없이 인식된다는 점이 실무 채택의 근거입니다. 탭 바 와 함께 쓰이는 경우 핵심 3~5개 메뉴는 탭 바에 노출하고 나머지 부차적 메뉴만 햄버거 안에 넣는 하이브리드 구성이 발견 가능성과 공간 효율을 동시에 잡는 절충안으로 쓰인다. 아이콘 왼쪽 상단 배치와 오른쪽 상단 배치 중 어느 쪽이 더 많이 눌리는지는 플랫폼과 사용자층에 따라 달라, 고정된 정답 없이 자체 테스트로 확인하는 것이 권장된다.
논문에서는 이렇게 쓰입니다
숨겨진 메뉴 방식이 메뉴 발견 가능성을 낮춘다는 사용성 실험 결과를 다룬 연구이다.
이런 비판은 모바일 인터페이스 설계에서 공간 효율성과 사용성 사이의 절충이 필요함을 보여준다.
조금 더 깊게 보면
메뉴를 숨기면 발견 가능성과 사용률이 떨어진다는 것이 여러 실무 A/B 테스트와 Nielsen Norman Group 연구에서 확인되어, 핵심 기능은 노출하고 나머지만 숨기는 하이브리드가 권장됩니다. 세 줄 아이콘은 1981년 Xerox Star에서 Norm Cox가 디자인한 것으로, 스마트폰 시대에 재발견된 것입니다. 데스크톱의 넓은 화면에서도 햄버거를 쓰는 것은 공간 절약이라는 원래 근거가 없어 미학적 선택에 그치며, 아이콘에 '메뉴' 레이블을 함께 쓰면 탭률이 오른다는 결과도 있습니다. 세 줄 아이콘만 단독으로 쓰는 것보다 '메뉴'라는 텍스트 레이블을 함께 붙이는 '햄버거+텍스트' 조합이 아이콘 단독보다 메뉴의 존재를 더 쉽게 알아보게 한다는 사용성 테스트 결과가 여러 차례 보고되었다.
주의할 점
햄버거메뉴는 화면 공간을 절약하지만 주요 메뉴의 발견성을 낮출 수 있어 사용 맥락을 신중히 고려해야 한다.
아이콘 디자인에서 줄 세 개의 두께와 간격이 미세하게만 달라져도 다른 기능(필터, 정렬)의 아이콘과 혼동될 수 있어 업계 관행에 맞춘 표준 비율을 따르는 것이 안전하다.