모바일 웹 탐색

모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기

깊은 페이지로 바로 들어온 방문자에게 핵심 답, 상위 범주, 다음 행동을 작은 화면에 정리합니다.

애드온 편집팀

검색을 통해 사이트의 세부 페이지로 바로 들어오면 모바일 사용자는 상위 메뉴를 거치지 않아 현재 위치를 알기 어렵습니다. 화면 위를 큰 이미지와 펼쳐진 메뉴가 차지하면 제목과 답은 더 아래로 밀립니다. 네이버 검색 노출 여부와 별개로 첫 화면은 ‘이 페이지가 내 질문에 답하는가’와 ‘다음에 어디로 갈 수 있는가’를 동시에 알려 줘야 합니다. 탐색 깊이를 줄이려다 모든 링크를 상단에 넣으면 오히려 선택 부담이 커지므로 정보와 이동의 우선순위를 정해야 합니다.

제목 아래에서 페이지의 역할을 확정합니다

첫 문장에는 질문에 대한 방향을, 그다음에는 적용 대상이나 중요한 예외를 둡니다. 현재 페이지가 비교, 안내, 신청 중 어느 단계인지 짧게 알리고 상위 범주로 돌아갈 단서도 제공합니다. 경로 표시를 쓴다면 작은 글씨로 숨기지 말고 실제 계층과 일치시키며, 지나치게 긴 단계는 핵심 범주만 보여 주는 방법을 검토합니다. 제목과 도입부보다 앞선 홍보 문구, 자동 재생 요소, 거대한 대표 이미지는 독자가 답을 찾는 순서를 방해하는지 살핍니다.

메뉴와 고정 버튼이 본문을 가리지 않게 합니다

햄버거 메뉴를 열었을 때 같은 이름의 범주가 반복되거나 현재 페이지가 표시되지 않는지 확인합니다. 화면 아래의 고정 문의 버튼이 중요한 문장과 링크를 덮지 않아야 하며 닫을 수 없는 팝업도 점검합니다. 다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다. 버튼 문구에는 도착 목적을 적습니다. 작은 화면에서도 키보드 초점과 확대가 가능하고, 색만으로 현재 위치나 선택 상태를 구분하지 않는지 확인합니다.

검색 도착점부터 다음 답까지 실제로 시험합니다

다른 기기와 화면 너비에서 검색 결과의 URL을 직접 열어 첫 답이 보이는 위치, 메뉴 사용, 다음 페이지 도착을 기록합니다. 이탈만 보면 느린 로딩이나 질문 불일치와 구조 문제를 구분하기 어렵습니다. 목차 선택, 상위 범주 이동, 즉시 되돌아감, 반복 문의를 함께 분석합니다. 변경일과 화면 캡처를 남기고 여러 요소를 한꺼번에 바꾸지 않습니다. 모바일 첫 화면의 목표는 위쪽을 비우는 데 있지 않고 세부 페이지로 바로 온 사람도 현재 맥락과 다음 선택을 놓치지 않게 하는 것입니다.

‘제목 아래에서 페이지의 역할을 확정합니다’에서 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’로 넘어가는 순서 점검

독자는 운영자의 작업 순서가 아니라 자신의 질문 순서대로 ‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’를 읽습니다. 먼저 ‘제목 아래에서 페이지의 역할을 확정합니다’에서 이 글이 자신의 상황과 관련 있는지 판단하고, 이어 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’에서 선택이나 준비에 필요한 조건을 확인한 뒤, ‘검색 도착점부터 다음 답까지 실제로 시험합니다’에서 다음 행동을 정할 수 있어야 합니다. 〈다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다〉 내용을 검토표로 옮기면, 세 단계 중 하나가 다른 페이지에 있다면 링크 문구에 도착할 정보와 대상 범위를 함께 적습니다. ‘제목 아래에서 페이지의 역할을 확정합니다’만 읽어도 결론을 확정할 수 있는 것처럼 보이거나 ‘검색 도착점부터 다음 답까지 실제로 시험합니다’를 보기 전에 과도한 개인정보를 요구하는 흐름은 없는지, 처음 방문한 사람의 화면 순서로 다시 따라가며 확인합니다.

‘제목 아래에서 페이지의 역할을 확정합니다’ 검토를 인계할 때 남길 네 가지

‘제목 아래에서 페이지의 역할을 확정합니다’를 다른 담당자에게 넘길 때는 결과 파일만 전달하지 않고 수정 이유, 사용한 기준, 확인하지 못한 부분, 다음 점검 시점을 함께 남깁니다. 특히 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 문구가 승인됐는지와 ‘검색 도착점부터 다음 답까지 실제로 시험합니다’의 링크가 실제 공개 주소에서 작동하는지를 분리해서 기록해야 합니다. ‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’의 표현을 다시 바꾸려는 사람은 먼저 이 기록에서 기존 결정의 근거를 확인하고, 상황이 달라진 항목만 새 자료로 교체합니다. 이 네 가지가 있으면 담당자가 바뀌어도 ‘제목 아래에서 페이지의 역할을 확정합니다’의 결론을 임의로 넓히거나 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 검토를 완료로 오인하는 위험을 줄일 수 있습니다.

‘제목 아래에서 페이지의 역할을 확정합니다’의 요약과 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 상세 설명 연결하기

‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’의 핵심 답은 앞부분에서 짧게 확인할 수 있어야 하지만, 요약만으로 ‘제목 아래에서 페이지의 역할을 확정합니다’의 조건을 모두 대신할 수는 없습니다. 요약에는 누구에게 어떤 판단이 필요한지 적고, ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’에서는 근거와 절차를, ‘검색 도착점부터 다음 답까지 실제로 시험합니다’에서는 예외와 다음 행동을 순서대로 풀어냅니다. 〈다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다〉 내용을 검토표로 옮기면, 앞의 한 문장이 뒤의 상세 설명보다 강한 약속으로 읽히지 않는지 비교하고, 상세 문단을 읽지 않아도 된다는 인상을 주는 단정 표현은 조정합니다. 마지막에는 새 홍보 문구를 반복하기보다 ‘제목 아래에서 페이지의 역할을 확정합니다’에서 시작한 질문에 어떤 범위까지 답했는지를 정리해 글의 처음과 끝을 맞춥니다.

‘제목 아래에서 페이지의 역할을 확정합니다’와 관련 문서의 경계 정하기

‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’와 연결된 문서가 많더라도 모든 페이지에 ‘제목 아래에서 페이지의 역할을 확정합니다’의 전체 설명을 반복할 필요는 없습니다. 대표 문서에는 공통 기준과 최신 조건을 두고, 개별 글에서는 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’처럼 그 글에서만 해결할 질문을 설명한 뒤 대표 문서로 연결합니다. ‘검색 도착점부터 다음 답까지 실제로 시험합니다’의 세부 내용이 다른 문서의 핵심 답이라면 짧은 요약과 이동 이유만 남겨 독자가 같은 문단을 여러 번 읽지 않게 합니다. 반대로 현재 페이지에서 반드시 알아야 할 제한까지 링크 뒤로 숨기지 말고 ‘제목 아래에서 페이지의 역할을 확정합니다’의 적용 범위를 이해할 정도는 본문 안에서 설명합니다.

공개 직전 ‘제목 아래에서 페이지의 역할을 확정합니다’·‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’·‘검색 도착점부터 다음 답까지 실제로 시험합니다’ 최종 확인

최종 검토에서는 맞춤법만 읽지 말고 ‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’가 약속한 답이 실제 본문에 있는지부터 확인합니다. ‘제목 아래에서 페이지의 역할을 확정합니다’에는 대상과 범위가, ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’에는 판단에 필요한 근거가, ‘검색 도착점부터 다음 답까지 실제로 시험합니다’에는 다음 단계와 예외가 들어 있는지 순서대로 표시합니다. 〈다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다〉 내용을 검토표로 옮기면, 그다음 제목과 설명문, 본문, 연결된 페이지에서 같은 조건을 서로 다르게 쓰지 않았는지 대조합니다. 〈버튼 문구에는 도착 목적을 적습니다〉 설명을 실행 순서로 바꾸면, 확인되지 않은 수치나 경험담, 보장 표현이 새로 들어오지 않았는지 별도로 검색하고, 남은 미확인 항목은 삭제하거나 담당 확인이 필요한 상태로 되돌립니다.

‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 결과를 해석하는 기준

‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’를 게시했다는 사실, ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’가 화면에 노출됐다는 사실, 실제 문의나 행동이 생겼다는 사실은 서로 다른 단계입니다. 관찰 기록에는 확인한 주소와 시점, 사용한 기기나 경로, ‘제목 아래에서 페이지의 역할을 확정합니다’에서 ‘검색 도착점부터 다음 답까지 실제로 시험합니다’까지 실제로 이동했는지를 적습니다. 한 번의 화면 확인만으로 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 성과를 확정하지 않고 비교 기간과 변경 내용을 같이 봅니다. 문의가 늘거나 줄었을 때도 곧바로 한 문장 때문이라고 결론짓지 말고 ‘제목 아래에서 페이지의 역할을 확정합니다’의 내용 변경, ‘검색 도착점부터 다음 답까지 실제로 시험합니다’의 연결 상태, 운영 일정처럼 함께 달라진 조건을 구분합니다.

‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’를 처음 보는 사람의 질문으로 읽기

담당자에게 익숙한 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’도 처음 방문한 사람에게는 용어의 뜻과 적용 범위가 분명하지 않을 수 있습니다. 검토할 때는 ‘제목 아래에서 페이지의 역할을 확정합니다’는 누구에게 필요한가, ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’를 확인하려면 무엇을 준비해야 하는가, ‘검색 도착점부터 다음 답까지 실제로 시험합니다’ 이후에는 어디로 이동하는가를 각각 한 문장으로 답해 봅니다. 〈다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다〉 내용을 검토표로 옮기면, 답이 본문에 있지만 찾기 어렵다면 같은 설명을 더 붙이기보다 소제목과 첫 문장을 조정합니다. 반대로 ‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’의 범위를 넘어 개별 상황에 따라 달라지는 답이라면 일반 설명과 별도 문의가 필요한 부분을 나누어 독자가 확정 정보로 오해하지 않게 합니다.

‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 이전 버전을 다시 찾을 수 있게 보관하기

‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’가 수정될 때 이전 파일을 덮어쓰기만 하면 ‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’의 설명이 왜 달라졌는지 확인하기 어렵습니다. 파일명이나 관리표에 수정 날짜와 버전, 변경한 사람을 남기고 ‘제목 아래에서 페이지의 역할을 확정합니다’의 이전 문장과 새 문장을 비교할 수 있게 보관합니다. 〈다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다〉 내용을 검토표로 옮기면, 공개할 필요가 없는 내부 검토본은 검색 결과에 노출되는 위치와 분리하고, 실제 기준으로 쓰는 문서에는 현재 상태를 분명히 표시합니다. ‘검색 도착점부터 다음 답까지 실제로 시험합니다’에서 과거 안내를 인용해야 한다면 당시 기준임을 밝히고 지금 적용되는 정보로 이동할 경로를 함께 제공해야 버전 차이가 오해로 이어지지 않습니다.

‘제목 아래에서 페이지의 역할을 확정합니다’만 고쳤을 때 생기는 빈틈

예를 들어 ‘제목 아래에서 페이지의 역할을 확정합니다’의 문장을 최신 기준에 맞게 수정했더라도 ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’의 안내 이미지나 ‘검색 도착점부터 다음 답까지 실제로 시험합니다’의 연결 주소가 예전 상태라면 독자는 서로 다른 답을 받게 됩니다. 이 경우 문장 하나의 완성도보다 ‘모바일 첫 화면에서 현재 위치와 다음 경로를 함께 보여 주기’와 관련된 노출 위치를 먼저 목록으로 만드는 편이 효율적입니다. 〈다음 행동은 하나를 주된 선택으로 두고 상위 목록과 보조 자료는 강도를 낮춥니다〉 내용을 검토표로 옮기면, 본문, 목록 카드, 문의 화면, 지도나 외부 채널 가운데 실제로 같은 정보를 쓰는 위치만 골라 수정 범위를 정합니다. ‘메뉴와 고정 버튼이 본문을 가리지 않게 합니다’가 공통 기준을 참조하도록 연결하고 ‘검색 도착점부터 다음 답까지 실제로 시험합니다’에 변경 날짜를 남기면 일부 화면만 고쳐 생기는 차이를 다음 점검에서 빠르게 찾을 수 있습니다.

참고: Web Content Accessibility Guidelines (WCAG) 2.2

전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

LOCATION

애드온 오시는 길

서울특별시 강서구 공항대로 194, 1동 6층 610·611호 (마곡동, 문영 퀸즈파크12차)