큐샵의 모든 기능 한눈에 보기 → 예약·신청커머스포트폴리오회원·CRM호스팅·보안
홈페이지 기본 디자인·UI

햄버거 메뉴Hamburger Menu

업데이트 2026.10.31 · Qshop Growth Lab

한 줄 정의

햄버거 메뉴는 가로줄 세 개(☰) 모양의 버튼을 누르면 숨어 있던 메뉴 목록이 펼쳐지는 방식으로, 화면이 좁은 휴대폰에서 메뉴를 접어 둘 때 쓰는 메뉴예요.

쉽게 말하면

휴대폰으로 사이트에 들어가면 화면 위 구석에 가로줄 세 개 그림이 보일 때가 있는데, 이 그림을 누르면 메뉴가 펼쳐져요. 휴대폰 화면은 메뉴를 한 줄에 다 늘어놓기에 좁아서, 메뉴를 이 버튼 안에 접어 두는 거예요. 세 줄이 겹친 모양을 햄버거에 빗대어 햄버거 메뉴라고 불러요.

어디서 나온 말인가요

세 줄 아이콘은 제록스(Xerox)가 1981년에 내놓은 업무용 컴퓨터 '스타(Star)'에서 화면 설계를 맡은 노먼 콕스(Norm Cox)가 디자인했어요. 콕스는 인터뷰에서 이 아이콘을 메뉴 선택지를 담는 그릇으로 만들었고, 도로 표지판처럼 단순하면서 열리는 메뉴 목록을 닮게 그렸다고 설명했어요(기즈모도 인터뷰 · 인비전 인터뷰).

쓸 때 알아 둘 점

메뉴를 숨기면 화면은 깔끔해지지만, 방문자가 메뉴를 놓칠 수 있어요. 사용성 연구 회사 닐슨 노먼 그룹은 2016년 179명이 참여한 테스트에서, 주 메뉴를 숨기면 데스크톱과 모바일 모두 사용 경험이 나빠지고 데스크톱에서 그 영향이 더 컸다고 밝혔어요. 햄버거 아이콘을 누구나 바로 알아보는 것은 아니라고도 짚었어요(닐슨 노먼 그룹).

헷갈리는 말

헷갈리는 말뜻햄버거 메뉴와 다른 점
드롭다운 메뉴메뉴 이름을 누르거나 마우스를 올리면 아래로 하위 메뉴가 펼쳐지는 메뉴드롭다운 메뉴는 화면에 보이는 메뉴 아래로 하위 메뉴를 펼치고, 햄버거 메뉴는 메뉴 전체를 버튼 하나 안에 숨겨 둬요

같은 말

아래 이름으로도 불러요. 모두 같은 뜻이에요.

햄버거 버튼Hamburger Menu

관련 용어

홈페이지 기본 용어 더 보기

이 용어가 나온 글