Web Guide네비게이션메뉴 유형햄버거 메뉴
네비게이션 유형별 장단점: 상단, 사이드, 햄버거
메뉴를 어디에 두느냐가 페이지 사용률을 바꿉니다.
숨겨진 메뉴는 덜 눌립니다. 보이는 곳에 두는 것이 원칙입니다.
01상단 가로 메뉴
가장 일반적이고 안전한 방식입니다. 모든 메뉴가 항상 보이므로 방문자가 전체 구조를 파악하기 쉽습니다.
다만 메뉴가 많으면 좁아져서 글자가 작아지거나 줄이 넘어갑니다. 5~7개가 적당한 이유입니다.
장점
전체 구조가 한눈에 · 클릭 없이 접근 · 익숙한 방식 · 하위 메뉴 펼침 가능
단점
메뉴가 많으면 좁아짐 · 긴 메뉴명 처리 어려움 · 모바일에서는 그대로 쓸 수 없음
02사이드 메뉴
왼쪽에 세로로 배치하는 방식입니다. 메뉴가 많거나 뎁스가 깊은 사이트에 적합합니다. 관리자 화면이나 문서 사이트에서 흔히 쓰입니다.
일반 기업 홈페이지에서는 본문 영역이 좁아지고 첫인상이 딱딱해져 잘 쓰지 않습니다.
적합한 경우
메뉴가 많음, 뎁스가 깊음, 문서·자료 중심, 관리자 화면
부적합한 경우
일반 기업 소개 사이트, 이미지 중심, 브랜드 인상이 중요한 경우
장점
메뉴가 많아도 수용 가능, 현재 위치 파악 용이, 하위 메뉴 펼치기 자연스러움
단점
본문 영역이 좁아짐, 첫인상이 기능적, 모바일에서 별도 처리 필요
03햄버거 메뉴
줄 세 개 아이콘을 눌러야 메뉴가 나오는 방식입니다. 모바일에서는 사실상 표준이지만, PC에서 쓰면 문제가 됩니다.
숨겨진 메뉴는 확실히 덜 눌립니다. PC 화면에 공간이 있는데도 메뉴를 숨길 이유는 없습니다.
01
모바일에서는 적절
화면이 좁아 다른 방법이 마땅치 않습니다.
02
PC에서는 신중히
공간이 있는데 숨기면 사용률이 떨어집니다.
03
아이콘만 두지 않기
'메뉴'라는 글자를 함께 두면 인식률이 올라갑니다.
04
주요 행동은 밖으로
문의 버튼은 햄버거 안에 넣지 않고 밖에 둡니다.
05
열었을 때 전체 구조
하위 메뉴까지 보이게 하면 탐색이 쉬워집니다.
04모바일 추가 장치
모바일에서는 햄버거만으로 부족합니다. 자주 쓰는 기능을 화면 하단에 고정해 두면 접근성이 크게 올라갑니다.
특히 전화 문의와 상담 신청은 항상 손이 닿는 곳에 있어야 합니다.
점검 항목
하단 고정 바
전화, 문의, 카카오 채널 등 2~4개. 엄지가 닿는 위치입니다.
상단 고정 헤더
스크롤해도 로고와 메뉴 버튼이 보이게 합니다.
맨 위로 버튼
긴 페이지에서 유용합니다.
터치 영역
버튼이 충분히 커야 합니다. 작으면 잘못 눌립니다.
CHECK POINT
□ PC에서 메뉴가 보이는 곳에 있는가
□ 상단 메뉴가 5~7개 범위인가
□ PC에서 불필요하게 햄버거를 쓰고 있지 않은가
□ 햄버거 아이콘에 '메뉴' 글자가 함께 있는가
□ 문의 버튼이 햄버거 밖에 있는가
□ 모바일에 하단 고정 바가 있는가
□ 버튼 터치 영역이 충분히 큰가
#네비게이션#메뉴 유형#햄버거 메뉴#모바일 메뉴#하단 고정 바#사용성#터치 영역#홈페이지 디자인#웹비스타#홈페이지 제작