홈페이지 모바일 메뉴 구성, 햄버거 메뉴와 하단 탭 고르는 5가지 기준

홈페이지 모바일 메뉴는 메뉴가 많으면 햄버거 메뉴, 자주 쓰는 기능이 서너 개면 하단 탭이 어울립니다. 이 글에서는 두 방식의 차이와 고르는 5가지 기준, 펼침 메뉴를 만드는 요령, 휴대폰에서 직접 확인할 점검 항목을 정리했습니다.

모바일 메뉴가 데스크톱 메뉴와 다른 이유

데스크톱 화면에서는 상단에 메뉴를 가로로 나란히 펼쳐 둘 수 있습니다. 하지만 휴대폰은 폭이 좁아 메뉴 대여섯 개만 넣어도 글자가 겹치거나 두 줄로 넘어갑니다. 그래서 휴대폰에서는 메뉴를 접어 두었다가 필요할 때 펼치거나, 꼭 필요한 몇 개만 화면에 고정하는 방식을 씁니다.

또 휴대폰은 손가락으로 누르기 때문에 메뉴 항목 사이 간격과 크기가 데스크톱보다 넉넉해야 합니다. 한 손으로 화면을 쥐고 엄지로 누르는 경우가 많아, 화면 위쪽 끝보다 아래쪽이 누르기 쉽다는 점도 메뉴 위치를 정할 때 고려합니다.

햄버거 메뉴와 하단 탭 비교

휴대폰 메뉴는 크게 두 가지 방식이 있습니다. 세 줄 모양 버튼을 누르면 메뉴 전체가 펼쳐지는 햄버거 메뉴와, 화면 아래에 아이콘과 글자로 된 탭이 늘 보이는 하단 탭입니다. 아래 표는 두 방식을 비교한 것입니다.

구분	햄버거 메뉴	하단 탭
담을 수 있는 메뉴 수	많다, 하위 메뉴까지 담을 수 있다	보통 3~5개로 제한된다
눈에 띄는 정도	눌러야 보이므로 메뉴가 있는지 놓치기 쉽다	늘 보여서 바로 이동할 수 있다
누르기 쉬운 정도	버튼이 주로 화면 위쪽에 있다	엄지가 닿기 쉬운 아래쪽에 있다
어울리는 사이트	메뉴가 많은 회사·기관·연구실 홈페이지	전화·예약·위치처럼 자주 쓰는 기능이 분명한 사이트

그림은 위 표를 간단히 줄인 것입니다. 두 방식을 함께 쓰는 사이트도 많습니다. 전체 메뉴는 햄버거 메뉴에 두고, 전화 걸기·예약·오시는 길처럼 가장 자주 쓰는 기능만 하단에 고정하는 식입니다.

모바일 메뉴 방식을 고르는 5가지 기준

다음 기준을 차례로 확인하면 우리 사이트에 맞는 방식이 정해집니다.

1. 메뉴 수 세기: 1단계 메뉴가 다섯 개를 넘거나 하위 메뉴가 있다면 햄버거 메뉴가 필요합니다.
2. 가장 많이 쓰는 행동 찾기: 방문자가 휴대폰에서 주로 하는 일이 전화, 예약, 위치 확인이라면 그 기능을 하단에 고정할 만합니다.
3. 하단 고정 요소 정리하기: 이미 채팅 버튼, 팝업, 쿠키 안내가 아래쪽을 차지하고 있다면 하단 탭과 겹치지 않는지 봅니다.
4. 본문이 가려지는지 확인하기: 하단 탭이나 고정 버튼이 본문 마지막 줄을 덮지 않도록 아래 여백을 확보합니다.
5. 데스크톱 메뉴와 이름 맞추기: 휴대폰과 데스크톱에서 같은 메뉴는 같은 이름과 순서로 둡니다.

메뉴 수가 너무 많아 고르기 어렵다면 메뉴 구조 자체를 먼저 정리하는 편이 낫습니다. 메뉴를 묶고 줄이는 방법은 홈페이지 메뉴 구조 짜는 법에 정리했습니다.

햄버거 메뉴를 만들 때 지킬 것

햄버거 메뉴는 많이 쓰이는 만큼 기본만 지켜도 불편이 크게 줄어듭니다.

메뉴 버튼에는 글자나 이름을 함께

세 줄 아이콘은 널리 알려져 있지만 모든 방문자가 익숙한 것은 아닙니다. 아이콘 옆이나 아래에 "메뉴"라는 글자를 붙이면 처음 보는 사람도 알아봅니다. 글자를 붙이지 않더라도 화면 낭독기가 읽을 수 있는 이름은 반드시 넣고, 메뉴가 열렸는지 닫혔는지 상태도 알 수 있게 만듭니다.

누르기 쉬운 크기와 간격

메뉴 버튼과 펼친 메뉴의 각 항목은 손가락으로 누르기 쉬워야 합니다. WCAG 2.2는 누르는 대상을 최소 24×24 CSS 픽셀로 하거나 주변 대상과 충분한 간격을 두도록 권고합니다(W3C, 성공 기준 2.5.8 대상 크기). 이는 최소 기준이므로 메뉴 항목은 이보다 넉넉하게 만들고, 항목 사이에 잘못 누르지 않을 만큼 간격을 둡니다.

닫는 방법은 여러 가지로

메뉴를 펼친 뒤 닫기 버튼이 잘 보이는 곳에 있어야 합니다. 메뉴 바깥을 누르거나 메뉴 항목을 눌러 다른 페이지로 이동하면 자동으로 닫히게 하면 편리합니다. 하위 메뉴가 있다면 펼침 표시(화살표 등)로 더 열 수 있다는 것을 보여 줍니다.

모바일 메뉴 점검 체크리스트

공개 전에 실제 휴대폰으로 메뉴를 열고 닫으며 다음을 확인하세요. 아래 그림은 같은 항목을 체크리스트로 묶은 것입니다.

• 메뉴 버튼이 첫 화면에서 바로 보이는가
• 메뉴 항목을 손가락으로 누르기 쉬운 크기와 간격인가
• 펼친 메뉴가 길 때 메뉴 안에서 스크롤되는가
• 닫기 버튼과 바깥 누르기로 메뉴가 닫히는가
• 하단 탭이나 고정 버튼이 본문과 다른 버튼을 가리지 않는가
• 휴대폰과 데스크톱의 메뉴 이름과 순서가 같은가

특히 메뉴 안 스크롤은 메뉴가 많은 사이트에서 자주 빠집니다. 메뉴가 화면보다 길어졌는데 스크롤이 되지 않으면 아래쪽 메뉴에는 아예 갈 수 없습니다. 화면 크기에 따라 배치가 바뀌는 원리는 반응형 웹이란 글에서 이어서 볼 수 있습니다.

디코랩이 돕는 방식

디코랩은 회사·기관 홈페이지를 만들 때 데스크톱 메뉴와 함께 휴대폰 메뉴 방식을 정하고, 실제 휴대폰에서 열고 닫는 동작을 확인한 뒤 공개합니다. 제작 범위는 회사 홈페이지 제작 안내에서 확인할 수 있습니다.

자주 묻는 질문

햄버거 메뉴는 왼쪽과 오른쪽 중 어디에 두나요?

정해진 위치는 없지만, 한 사이트 안에서는 모든 페이지에서 같은 위치에 두어야 합니다. 로고와 겹치지 않고 첫 화면에서 바로 눈에 띄는 쪽을 고릅니다.

하단 탭에는 몇 개까지 넣을 수 있나요?

휴대폰 폭에서 글자와 아이콘이 함께 읽히려면 서너 개에서 다섯 개 정도가 한계입니다. 그보다 많다면 자주 쓰는 것만 남기고 나머지는 햄버거 메뉴로 옮깁니다.

원페이지 사이트도 모바일 메뉴가 필요한가요?

섹션이 여러 개라면 섹션으로 바로 이동하는 간단한 메뉴가 있으면 편리합니다. 섹션이 서너 개뿐이라면 메뉴 없이 스크롤과 버튼만으로도 충분할 수 있습니다.

메뉴를 열면 화면 전체를 덮어야 하나요?

메뉴가 많다면 화면 전체를 덮는 방식이 읽기 편하고, 적다면 화면 일부만 덮는 방식도 괜찮습니다. 어느 쪽이든 닫는 방법이 분명해야 합니다.

휴대폰에서 메뉴가 불편하다는 이야기를 들었다면 사이트 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.