디자인·모바일·접근성 목록으로

쓰기 편한 모바일 메뉴 방식을 정하는 기준

모바일 메뉴는 특정 방식보다 작은 화면에서 쓸 공간과 페이지 사이의 일관성을 기준으로 정합니다. 바로 펼친 메뉴와 버튼으로 여는 메뉴를 실제 안내 화면에 적용해 이동 과정을 시험하는 방법을 설명합니다.

목차

작은 화면의 공간에 따른 메뉴 선택

모바일 메뉴는 특정 방식이 언제나 편하다고 정하기보다 작은 화면의 공간에 맞게 펼침 방식을 조정해 정합니다. 페이지마다 메뉴 이름·모양·위치를 일관되게 알아볼 수 있는 방식이어야 합니다. 바로 펼쳐 보여 주는 메뉴와 버튼을 눌러 여는 메뉴 중 어느 쪽을 사용할지는 병원 안내를 넣은 화면에서 판단합니다.

메뉴를 바로 펼치면 이용자가 선택할 항목을 처음부터 읽을 수 있습니다. 대신 메뉴가 차지하는 공간만큼 본문이 시작되는 위치가 달라지므로, 실제 안내와 함께 배치했을 때의 화면이 필요합니다. 버튼으로 여는 방식은 닫힌 상태에서 공간을 덜 사용할 수 있지만, 이용자가 메뉴를 여는 조작을 거쳐야 합니다. 병원 담당자는 선택 항목의 노출과 열기 조작을 함께 평가해야 합니다.

월드 와이드 웹 컨소시엄의 웹 접근성 이니셔티브는 화면의 크기에 따라 정보의 표시를 고려하고, 공간을 활용하도록 머리말과 탐색 요소의 위치나 표현을 조정할 수 있다고 안내합니다. 병원에서는 이 원칙을 바탕으로 작은 화면에 실제 메뉴와 안내를 넣은 후보를 요청할 수 있습니다. 특정 휴대전화의 이름만으로 방식을 결정하지 않고, 내용이 들어갈 공간을 선택 조건으로 삼는 적용입니다.

메뉴 방식 후보업체에 요청할 화면선택 전에 확인할 점
바로 펼쳐 보여 주는 방식전체 메뉴와 실제 안내가 함께 있는 화면선택 항목을 읽고 본문으로 이동하기 쉬운지
버튼을 눌러 여는 방식같은 페이지의 닫힌 화면과 열린 화면열기 조작을 알아내고 필요한 항목을 찾는지
너비에 따라 펼침을 조정하는 방식표현이 달라지기 전후의 화면표현이 달라도 같은 메뉴임을 알아내는지

후보마다 서로 다른 안내를 넣으면 메뉴 방식과 내용의 차이가 섞입니다. 업체에는 같은 메뉴 항목과 같은 본문으로 화면을 제작해 달라고 요청합니다. 메뉴만 잘라낸 이미지보다 메뉴와 안내가 함께 있는 화면을 판단 자료로 사용합니다.

펼침 변화와 공통 표현의 관계

공간에 맞춰 메뉴를 접더라도 페이지를 이동할 때마다 다른 메뉴처럼 느껴지게 해서는 안 됩니다. 웹 접근성 이니셔티브는 웹사이트 안에서 탐색 요소의 이름과 스타일, 배치를 일관되게 유지하도록 안내합니다. 병원은 이를 페이지 사이에서 이용자가 메뉴를 다시 배워야 하는지 판단하는 기준으로 적용합니다.

같은 화면 조건인데 첫 페이지에는 메뉴 버튼이 있고 진료 안내에는 다른 모양의 조작 요소가 있으면, 이용자가 같은 기능인지 다시 해석해야 합니다. 담당자는 메뉴 문구를 새로 정하는 작업과 별개로, 동일한 항목과 조작 요소가 페이지마다 같은 표현으로 나타나는지 대조합니다. 화면 너비 때문에 펼침이 달라지는 경우에는 변경 전후에도 메뉴를 알아낼 단서가 이어지는지 평가합니다. 모든 화면을 똑같이 만들도록 요구하기보다, 달라지는 이유와 유지할 표현을 업체가 설명하도록 합니다.

화면 요청 전 준비할 병원 자료

담당자는 메뉴가 사용할 공간을 먼저 확인하고, 그 조건에 맞는 펼침 방식별 화면을 요청합니다. 준비할 자료는 실제 메뉴 목록, 대표 안내 본문, 현재 화면 또는 제작 중인 시안입니다. 아직 확정하지 않은 문구는 임시 상태라고 표시해, 업체가 짧은 예시 문구만으로 배치를 판단하지 않도록 합니다.

구글의 웹 개발 문서는 기기 종류나 브랜드보다 콘텐츠가 공간에 맞게 배치를 변경하는 조건을 기준으로 삼도록 설명합니다. 병원 담당자는 이 설명을 적용해 작은 화면에서 출발한 시안을 요청하고, 너비가 달라질 때 메뉴 표현을 변경할 이유를 듣습니다. 업체가 제시한 휴대전화 목록만 받지 말고 실제 내용이 배치에 미치는 영향을 설명받습니다.

  1. 메뉴와 본문이 함께 있는 작은 화면에서 메뉴가 사용하는 공간을 기록합니다.
  2. 앞에서 정한 기준에 따라 바로 펼친 후보와 버튼으로 여는 후보의 상태별 화면을 요청합니다.
  3. 담당자가 필요한 안내를 찾아 이동하고, 선택을 주저하거나 되돌아간 지점을 기재합니다.

바로 펼친 방식에는 별도의 닫힌 상태가 없을 수 있습니다. 이때 닫힌 화면을 억지로 추가하지 말고, 해당 상태가 없다는 설명을 받으면 됩니다. 버튼으로 여는 방식은 열린 화면만 승인하지 않고 열기 전부터 항목 선택 후까지 작동하는 시안을 요청합니다.

안내로 이동하는 과정의 평가

병원 담당자는 업체의 시연을 듣기 전에 찾을 안내를 정하고 직접 이동합니다. 처음에는 업체가 누를 위치를 알려 주지 않도록 요청해, 조작 방법을 스스로 알아낼 수 있는지 기록합니다. 이 절차는 병원이 후보를 선택하기 위한 실무 방법이며, 접근성 지침 충족을 판정하는 시험으로 대신할 수는 없습니다.

메뉴 이용 단계병원이 확인할 질문업체에 전달할 수정 요청
메뉴에 접근시작 화면에서 메뉴를 이용하는 방법을 알아낼 수 있는가열기 조작을 알아내기 어려운 표현을 고칩니다.
항목을 찾아 선택원하는 항목을 찾고 선택을 완료할 수 있는가열린 상태의 배치와 항목 선택 동작을 정비합니다.
도착한 안내에서 다시 이동다른 안내로 이동할 때도 메뉴를 이용할 수 있는가도착 페이지에도 공통 메뉴 규칙을 적용합니다.

수정 요청에는 단순히 불편하다는 의견보다 조작이 멈춘 지점을 기재합니다. 예를 들어 열기 버튼을 찾지 못했는지, 열린 메뉴에서 항목을 찾지 못했는지는 서로 다른 수정 사유입니다. 담당자는 화면 이름과 당시 메뉴 상태를 함께 전달하고, 업체가 변경한 뒤에는 같은 출발 화면에서 다시 이동합니다.

후보를 선택할 때는 전체 인상에 대한 투표만으로 결론을 내리지 않습니다. 각 후보에서 완료한 이동과 수정이 필요한 이동을 기록해, 해결할 문제가 남은 상태인지 가립니다. 업체 설명을 들은 뒤에만 이용할 수 있었던 과정은 설명 없이도 이용할 수 있도록 추가 조정을 요청합니다.

결정 기록에 남길 공통 적용 규칙

메뉴 방식의 결정 기록에는 선택한 펼침 방식과 적용할 화면 조건을 함께 기재합니다. 모바일에서는 버튼으로 연다는 표현만 남기면 너비가 다른 화면이나 세부 페이지의 처리가 빠질 수 있습니다. 업체가 어떤 조건에서 표현을 변경하는지 설명한 자료를 결정 기록에 포함합니다.

유지할 항목에는 메뉴 이름과 조작 요소의 모양, 배치 원칙을 기재합니다. 달라질 수 있는 항목에는 펼침 상태와 공간에 따른 표시 방법을 기록합니다. 같은 화면 조건에서도 예외 처리가 필요한 페이지가 있다면 업체가 그 사유를 설명하도록 요청합니다. 예외 화면까지 모두 승인한 것인지, 추가 시안이 필요한 것인지도 따로 기록합니다.

결정 기록은 선택 결과와 미해결 요청을 섞지 않아야 합니다. 병원 실장은 채택한 후보를 표시하고, 담당자는 남아 있는 수정 항목의 완료 조건을 구체적인 동작으로 기재합니다. 업체는 변경한 화면과 적용 범위를 답하도록 해, 후보 선택이 수정 완료 승인으로 해석되지 않게 합니다.

완성된 이미지로 판단하는 오류

메뉴의 열린 이미지만으로 사용 편의를 결정하면 열기 전의 어려움이나 선택 후의 상태를 놓칠 수 있습니다. 이미지에서는 충분히 읽히는 메뉴도 실제 조작에서는 의도한 항목으로 이동하지 못할 수 있습니다. 담당자는 정지 화면의 평가와 작동하는 시안의 평가를 별도로 기록합니다.

업체가 메뉴를 열어 놓은 채 시연하면 담당자는 열기 조작을 시험하지 못합니다. 후보마다 출발 상태가 다르면 같은 과정을 비교하기도 어렵습니다. 시험을 시작할 때 화면과 메뉴 상태를 동일하게 정하고, 업체가 대신 조작한 과정은 담당자의 완료 기록에 포함하지 않습니다.

또한 첫 페이지에서 이동에 성공했다고 해서 세부 페이지에도 같은 처리가 적용됐다고 단정하지 않습니다. 업체가 제시한 공통 적용 범위를 기준으로 서로 다른 안내 화면에서 이어지는 이동을 시험합니다. 특정 페이지의 수정이 다른 페이지에도 반영되는지는 변경 답변에 명시하도록 요청합니다.

손가락 조작만으로 결정하는 오류

손가락으로 메뉴를 열 수 있다는 결과만으로 모든 이용 방식에 대응한다고 결론 내리지 않습니다. 웹 접근성 이니셔티브는 키보드로 탐색할 때의 초점 표시를 다루며, 구글의 웹 개발 문서는 터치 이용자에게 마우스 사용을 강요하지 않도록 주의하라고 설명합니다. 메뉴 후보를 선택한 뒤에도 조작 방식에 따른 별도 시험이 필요합니다.

병원은 업체에 키보드로 메뉴에 접근하고 항목을 선택하는 과정을 시연해 달라고 요청할 수 있습니다. 이때 현재 조작 대상의 표시와 메뉴 이동 순서를 기록합니다. 손가락 조작 결과와 다른 문제가 발견되면 펼침 방식 자체를 즉시 폐기하기보다 해당 동작을 수정할 수 있는지 업체의 답을 받습니다.

자주 묻는 질문

메뉴 버튼에 그림만 사용해도 괜찮습니까?

그림만 사용해도 누구나 의미를 이해한다고 전제하지 않는 편이 좋습니다. 웹 접근성 이니셔티브는 아이콘과 그림 버튼에 함께 쓰는 텍스트를 설계에 고려하도록 안내합니다. 업체에는 버튼의 의미를 전달할 문구와 표시 방법을 제시하도록 요청하고, 병원은 실제 화면에서 이해 가능한지 평가합니다.

메뉴의 펼침에 움직임 효과를 넣어도 됩니까?

움직임 효과는 메뉴 방식을 선택한 뒤 별도로 판단할 수 있습니다. 병원은 효과가 끝나기 전에도 원하는 조작을 할 수 있는지, 효과 때문에 이용자가 기다리거나 다시 누르는지 시험합니다. 업체에는 효과를 제외한 시안도 요청해 문제의 원인이 배치인지 움직임인지 가립니다.

가로로 돌린 화면도 별도로 요청해야 합니까?

세로 화면만으로 결정했다면 가로 화면의 작동 자료도 요청하는 편이 좋습니다. 방향을 변경하면 사용할 너비와 높이가 달라지므로 메뉴 표현이 달라질 수 있습니다. 업체에는 방향 변경 전후의 상태를 보여 달라고 요청하고, 그 변화가 의도한 설계인지 설명받습니다.

검색 기능이 있으면 메뉴를 생략해도 됩니까?

검색 기능의 존재만으로 메뉴를 생략할 근거가 되지는 않습니다. 웹 접근성 이니셔티브는 사이트 검색이나 사이트맵처럼 웹사이트를 탐색할 여러 방법을 제공하도록 안내합니다. 병원은 검색어를 떠올리기 어려운 이용자도 안내에 도달할 경로가 있는지 별도의 요구사항으로 전달합니다.

메뉴 제작 전에 병원 직원에게 의견을 받아도 됩니까?

제작 전에 의견을 받을 수 있지만 직원의 선호를 이용자 전체의 사용 결과로 해석하지 않습니다. 병원 업무에 익숙한 직원은 외부 이용자가 모르는 항목이나 위치를 이미 알고 있을 수 있습니다. 의견을 받을 때는 선호 이유와 예상하는 어려움을 함께 기재하고, 실제 시안 시험에 쓸 질문으로 정리합니다.

맨 위로 이동

병원 홈페이지 디자인 서비스 자세히 보기