Web Guide모바일 메뉴내비게이션메뉴 설계
반응형 메뉴 구현 패턴
메뉴가 많은 사이트일수록 모바일 설계가 중요합니다.
찾지 못하면 없는 것과 같습니다.
01대표적인 방식
사이트 성격에 따라 고릅니다.
접는 메뉴
아이콘을 누르면 펼쳐집니다.
하단 탭
주요 메뉴를 아래 고정.
가로 스크롤 메뉴
옆으로 밀어서 봅니다.
우선순위 방식
공간이 되는 만큼 보이고 나머지는 접습니다.
전체 화면 메뉴
화면을 덮어 크게 보여줍니다.
혼합
주요는 노출, 나머지는 접기.
02깊은 구조 처리
2단계 이상이면 방법이 필요합니다.
펼침 방식누르면 하위가 아래로 열립니다.
밀림 방식하위 메뉴가 옆에서 들어옵니다.
뒤로 가기상위로 돌아갈 수 있게.
현재 위치 표시어디에 있는지 알려줍니다.
깊이 제한3단계 이상은 피합니다.
검색 병행찾기 어려우면 검색으로.
03설계 기준
무엇을 노출할지가 핵심입니다.
점검 항목
이용 빈도
많이 쓰는 것을 밖으로.
사업 목표
전환으로 가는 길을 앞에.
데이터 확인
실제 클릭 순서를 봅니다.
이름 명확히
무슨 페이지인지 알 수 있게.
개수 제한
너무 많으면 못 고릅니다.
연락 수단
전화, 문의는 항상 접근 가능하게.
04구현 확인
동작이 제대로 되는지 봐야 합니다.
기능 확인
열고 닫힘 · 배경 스크롤 잠김 · 뒤로 가기 동작 · 바깥 눌러 닫기
접근성 확인
키보드 조작 가능 · 읽기 도구 인식 · 터치 영역 충분 · 초점 이동
CHECK POINT
□ 주요 메뉴가 바로 보이는가
□ 메뉴 이름이 명확한가
□ 하위 메뉴 구조가 이해되는가
□ 현재 위치를 알 수 있는가
□ 메뉴를 열면 배경이 스크롤되지 않는가
□ 바깥을 눌러 닫을 수 있는가
□ 키보드로 조작할 수 있는가
□ 연락 수단에 항상 접근할 수 있는가
#모바일 메뉴#내비게이션#메뉴 설계#햄버거#하단 탭#정보 구조#UX#반응형#웹비스타#홈페이지 제작