모바일 메뉴 디자인의 7가지 황금 법칙

모바일 메뉴는 데스크톱 메뉴의 축소판이 아닙니다. 작은 화면, 자주 느린 연결, 한 손 사용은 별도의 설계 결정을 요구합니다. 다음 7가지 규칙은 객단가와 만족도에 직접적인 영향을 미칩니다.

1. 본문은 16px 이상

16px(1rem)가 하한선. 그 이하면 사용자가 핀치 줌해서 네비게이션이 깨집니다. 권장: 본문 16-18px, 상품명 18-22px, 카테고리 제목 22-28px.

2. 터치 타깃 최소 44 × 44px

Apple HIG와 Google Material 모두 44 × 44px 요구. 더 작으면 오탭률 15-23% 상승. 탭 간 최소 8px 여백.

3. F-패턴으로 위계 구성

모바일 읽기는 수직. 추천 상품은 최상단에, 카테고리 바는 sticky. 5초 안에 메뉴 논리를 못 잡으면 뒤로가기 버튼이 이깁니다.

4. WebP/AVIF와 lazy loading

WebP는 PNG보다 30% 작고, AVIF는 또 15-20% 작습니다. 이미지는 카테고리를 열 때만 로드 — <img loading="lazy">.

5. 3초 법칙

LCP 3초 미만. 스로틀된 3G로 테스트 — 카페 Wi-Fi는 대체로 더 느립니다. JS 번들 150KB 이하.

6. 컬러 팔레트 최대 4-5색

브랜드 + 보조 + 강조 + 검정 + 흰색. 알레르겐 아이콘은 형태와 색을 함께 — 남성 12명 중 1명은 적록색맹.

7. 한 손 테스트

중요 액션은 화면 하단에 — 엄지 영역 법칙. thMenu 같은 모바일 퍼스트 플랫폼은 기본값으로 따릅니다.

잘 조율된 모바일 메뉴는 주문을 12-18% 끌어올립니다. 잘못 조율되면 손님이 직원에게 돌아가고 디지털 이점은 사라집니다.

도움이 되셨나요? 공유해 주세요.