이 글의 목차
먼저 알아둘 답
모바일 메뉴가 안 닫히거나 키보드로 선택되지 않으면 어떻게 확인하나요?
메뉴를 열 수 있는지만 보지 말고 닫기, 링크 이동과 키보드 조작도 확인하세요. 휴대폰을 돌리거나 화면 크기를 바꿨을 때 메뉴가 잘못 남지 않아야 합니다. 버튼에는 무엇을 여는지와 현재 열린 상태를 알 수 있는 안내가 필요합니다.
펜션: 메뉴를 열었는데 닫기 버튼이 안 보일 때
휴대폰 메뉴가 화면 전체를 가리고 객실 사진으로 돌아갈 방법이 분명하지 않습니다.
이렇게 바꿔보세요
메뉴 열기·닫기를 명확히 표시하고 키보드나 화면 읽기 기능에서도 조작할 수 있게 합니다. 긴 메뉴는 화면 안에서 스크롤되도록 하고 항목을 누르면 이동합니다.
작은 화면에서는 메뉴 자체가 큰 화면을 차지합니다. 열기뿐 아니라 닫기와 이동까지 한 흐름으로 확인해야 합니다.
내 사업에서 확인할 일
320px처럼 좁은 화면과 글자 확대 상태에서도 메뉴 항목을 끝까지 사용할 수 있는지 시험하세요.
이 글에 나오는 용어3개 · 뜻과 예시 보기
낯선 용어는 아래 뜻과 예시를 참고하세요.
- UI화면의 버튼·메뉴·입력 요소
-
사용자가 기능을 선택하고 정보를 읽거나 입력하는 접점입니다. 예쁘게 보이는 것과 읽고 조작하기 쉬운 것은 함께 확인해야 합니다.
예를 들면 휴대폰에서 상담 버튼의 글자가 읽히고 손가락으로 누르기 쉬운지 확인합니다.
- 접근성다양한 사용자가 내용을 읽고 기능을 쓸 수 있게 하는 조건
-
키보드 사용, 읽기 쉬운 글자, 이미지 설명과 오류 안내 등을 포함합니다. 일부 항목 확인만으로 인증이나 법적 준수를 판정하지 않습니다.
예를 들면 마우스를 쓰기 어려운 사람도 메뉴를 선택하고 상담 링크로 이동할 수 있어야 합니다.
- JavaScript버튼·메뉴 등 화면의 동작을 만드는 언어
-
웹페이지에서 클릭·입력에 반응하는 기능 등을 구현합니다. 화면에서 동작했다고 실제 서버 접수가 끝난 것은 아닙니다.
예를 들면 모바일 메뉴를 열고 닫는 기능과 예약 정보를 저장하는 기능은 구분해 확인합니다.
먼저 알아둘 점: 모바일 메뉴 제작
햄버거 아이콘만 보이고 이름, 상태 안내가 없으면 사용자가 무엇이 열리는지 이해하기 어렵습니다. 버튼의 이름과 펼침 상태를 제공하고 하위 메뉴를 키보드로 이동할 수 있게 설계합니다. 메뉴 자체가 스크롤을 막거나 상담 링크를 가리는지도 시험하세요.
결정 전에 비교할 기준
| 확인할 조건 | 판단과 작업 범위 |
|---|---|
| 메뉴 이름 | 서비스, 분야를 실제 고객 표현으로 표시 |
| 열림, 닫힘 | 버튼 상태, Escape, 포커스, 겹침 처리 |
| 기기 변화 | PC 표시와 모바일, 확대 상태 확인 |
직접 확인할 체크리스트
- 휴대폰에서 메뉴, 상담을 누르기 쉬운지
- 숨긴 항목에 포커스가 남지 않는지
- PC로 전환하면 열린 모바일 상태가 정리되는지
- 모든 하위 링크가 실제 내용으로 연결되는지
이 자료가 있으면 상담이 구체적입니다
- 서비스, 글·사진 목록
- 현재 메뉴의 문제 화면
- 키보드, 모바일의 문제가 다시 나타나는 상황
YOUR NEXT STEP WITH 짓고 JiTGO
보기 좋은 화면을, 사용하기 쉬운 홈페이지로.
모바일 메뉴와 정보 순서, 상담 연결을 실제 사용 흐름에 맞게 정리합니다.
- 기본형 30만 원 · VAT 별도
- 진단·상담 모두 무료
- 계약금·선결제 없이 먼저 제작
- 5일 검토 · 미채택 비용 0원
- 채택·결제 후 원천 소스 · 첫 1년 기본 서버 운영비 포함
최대 20페이지의 소개형 기본 상품에 적용합니다. 도메인·유료 서비스·추가 기능·별도 유지보수는 제외합니다. 완료 안내 다음 날부터 5일 검토하고 무응답은 미채택·비용 0원으로 자동 종료합니다.
무료 선제작 이용조건 ↗ · 고객 자료는 허락 없이 재사용하지 않습니다.