모바일 사용성 (Mobile Usability)

모바일 사용성은 휴대전화 같은 작은 화면에서 콘텐츠를 읽고 기능을 조작하기 쉬운 정도입니다. 글자 크기와 본문 폭, 버튼 간격, 메뉴와 입력 양식이 모두 영향을 줍니다.

데스크톱에서 잘 보이는 페이지도 휴대전화에서는 글자가 작거나 버튼이 붙어 있을 수 있습니다. 본문을 읽고 메뉴를 열고 문의를 보내는 과정이 작은 화면에서도 불편 없이 이어지는지 살펴봐야 합니다.

글자와 본문 폭, 터치 요소 점검

실제 휴대전화에서 주요 페이지를 열고 아래 항목을 점검합니다.

• 본문: 글자가 너무 작지 않은지, 문장을 읽을 때마다 좌우로 화면을 움직여야 하는지 봅니다.
• 버튼과 링크: 의도한 항목을 손가락으로 눌렀을 때 옆 항목이 함께 눌리지 않는지 시험합니다.
• 메뉴와 입력 양식: 메뉴를 열고 닫을 수 있는지, 문의나 결제를 끝까지 진행할 수 있는지 확인합니다.
• 팝업과 고정 요소: 본문이나 제출 버튼을 가리는 요소가 없는지 봅니다.
• 이미지와 표: 중요한 내용이 화면 밖으로 잘리지 않는지 확인합니다. 넓은 표는 표 영역 안에서 가로로 스크롤할 수 있는지도 점검합니다.

화면 배치뿐 아니라 페이지 속도도 점검합니다. 로딩이나 반응이 늦으면 사용자는 버튼을 눌렀는데 작동하지 않는다고 느낄 수 있습니다.

모바일 사용성과 모바일 우선 색인

모바일 우선 색인은 Google이 어느 버전의 콘텐츠를 평가하는지에 관한 기준입니다. 글자 크기나 버튼 간격이 편한지까지 증명하는 사용성 검사 결과는 아닙니다.

모바일과 데스크톱의 주요 콘텐츠

모바일에서 주요 본문을 빼면 Google이 색인에 참고할 정보도 줄어듭니다. 특히 기기에 따라 다른 HTML이나 별도 URL을 제공하는 사이트는 두 버전을 직접 대조해야 합니다.

1. 주요 본문과 내부 링크가 모바일에도 있는지 확인합니다.
2. 페이지 제목과 메타 디스크립션이 같은 내용을 설명하는지 봅니다.
3. 이미지의 alt와 캡션이 빠지지 않았는지 확인합니다.
4. 구조화 데이터도 모바일에 제공하는지 점검합니다.
5. 모바일 버전에만 noindex를 넣거나 필요한 리소스를 차단하지 않았는지 확인합니다.

긴 내용을 탭이나 아코디언으로 접어 둘 수는 있습니다. 다만 클릭한 뒤에야 본문을 새로 불러오는 구현은 주의해야 합니다. Google은 클릭이나 입력 같은 사용자 조작을 수행해 콘텐츠를 불러오지 않으므로, 조작 전 렌더링한 페이지에도 주요 내용이 있어야 합니다.

반응형 웹과 다른 구현 방식

• 반응형 웹: 같은 URL과 HTML을 사용하며 화면 크기에 맞춰 배치를 바꿉니다.
• 동적 게재: 같은 URL에서 기기에 따라 다른 HTML을 반환합니다.
• 별도 모바일 URL: 데스크톱과 모바일을 서로 다른 주소로 제공합니다.

Google은 구현과 유지 관리가 비교적 간단한 반응형 웹을 권장합니다. 별도 모바일 URL을 쓴다면 데스크톱의 각 상세 페이지가 대응하는 모바일 상세 페이지로 이동하는지도 확인해야 합니다. 모든 주소를 모바일 홈페이지로 보내면 사용자가 찾던 내용에 도착하지 못합니다.

실제 기기와 렌더링 검사

Chrome 개발자 도구의 기기 모드로 여러 화면 폭의 배치를 비교한 뒤 실제 휴대전화에서 터치와 입력을 시험합니다. 특히 키보드를 열었을 때 입력란과 제출 버튼이 보이는지, 고정 메뉴와 겹치지 않는지 확인합니다.

URL 검사의 실시간 테스트로 Google이 렌더링한 화면도 확인합니다. 본문이나 주요 이미지가 보이지 않는다면 JavaScript 로딩과 리소스 차단을 조사합니다.

함께 알아두면 좋은 용어

• 페이지 속도: 페이지가 로드되고 조작 가능해지는 성능
• 코어 웹 바이탈: 로딩과 반응성, 화면 안정성을 측정하는 지표
• JavaScript SEO: JavaScript로 만든 콘텐츠를 검색엔진이 수집하고 렌더링할 수 있도록 점검하는 작업
• URL 검사: Google의 크롤링과 렌더링 상태를 확인하는 기능

참고 문서

• Google 검색 센터, 모바일 우선 색인 권장사항