한눈에 보는 정의
가로줄 세 개 모양 아이콘을 누르면 숨겨진 메뉴가 열리는 내비게이션 방식.
이런 말로 들어요
- 모바일에서는 햄버거 메뉴로 접고, PC에서는 메뉴를 펼쳐 둘게요.
- 햄버거 메뉴 안에 상담 버튼이 숨어 있어서 밖으로 꺼냈습니다.
그림으로 보기
좁은 화면에서는 메뉴를 세 줄 아이콘에 접어 둡니다. 예약·상담처럼 중요한 버튼은 숨기지 않습니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
휴대폰처럼 화면이 좁을 때 메뉴를 모두 펼쳐 두기 어려워 세 줄 아이콘 하나로 접어 둡니다. 화면이 깔끔해지는 대신, 메뉴가 숨어 있어 사용자가 다른 페이지를 덜 둘러볼 수 있습니다. 그래서 PC처럼 공간이 넉넉한 화면에서는 메뉴를 펼쳐 두는 경우가 많습니다.
실무 예시
예를 들어 병원 홈페이지 모바일 화면에서 "예약하기"는 햄버거 메뉴 밖 상단에 따로 두고, 나머지 메뉴만 접어 둡니다.
함께 살펴볼 점
NN/g 연구에 따르면 메뉴를 숨기면 사용자가 메뉴를 덜 쓰고 콘텐츠를 찾기 어려워집니다. 가장 중요한 행동 버튼은 숨기지 않습니다. 아이콘에는 "메뉴 열기" 같은 이름을 붙여 화면 낭독기에서도 알 수 있게 합니다.
AI에게 이렇게 요청해 보세요
모바일 화면에서만 햄버거 메뉴로 바뀌게 해 줘. 버튼에 aria-label과 aria-expanded를 넣고, 상담 버튼은 메뉴 밖에 항상 보이게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Hamburger Menus and Hidden Navigation Hurt UX Metrics | NN/g 새 창
메뉴를 숨기면 메뉴 사용과 콘텐츠 발견성이 떨어진다는 연구 결과를 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정