모바일 사용성 (Mobile Usability)

모바일 사용성은 작은 화면과 터치 환경에서 사용자가 콘텐츠를 읽고 기능을 조작하기 쉬운 정도입니다. 글자 크기, 화면 폭, 버튼 간격, 메뉴와 입력 양식 등이 함께 영향을 줍니다.

데스크톱에서 잘 보이는 페이지도 휴대전화에서는 글자가 작거나 버튼이 붙어 있어 쓰기 어려울 수 있습니다. 화면 폭만 줄인다고 모바일 사용성이 갖춰지지는 않습니다.

이 글은 Google 공식 문서를 기준으로 작성했습니다.

글자, 화면 폭, 터치 요소 점검

먼저 실제 휴대전화로 주요 페이지를 열어 봅니다.

• 화면을 좌우로 밀지 않아도 본문을 읽을 수 있는가?
• 글자를 확대하지 않아도 읽을 수 있는가?
• 링크와 버튼을 잘못 누르지 않을 만큼 간격이 있는가?
• 메뉴와 문의 기능을 손쉽게 사용할 수 있는가?
• 팝업이나 광고가 본문을 가리지 않는가?
• 이미지와 표가 화면 밖으로 잘리지 않는가?

모바일 사용성은 디자인 문제만이 아닙니다. 페이지 로딩과 반응이 늦으면 터치가 먹히지 않는 것처럼 느껴질 수 있으므로 페이지 속도도 함께 봐야 합니다.

모바일 사용성과 모바일 우선 색인의 차이

Google은 스마트폰 사용자 에이전트로 수집한 모바일 콘텐츠를 색인과 순위에 사용합니다. 모바일 페이지가 없다고 검색결과에 포함될 수 없는 것은 아니지만, 모바일 친화적인 사이트를 강하게 권장합니다.

모바일과 데스크톱의 콘텐츠 동일성

디자인과 배치는 달라도 주요 정보는 동등해야 합니다. 모바일 화면이 좁다는 이유로 중요한 본문을 삭제하면 Google도 그 정보를 충분히 확인하지 못할 수 있습니다.

1. 주요 본문과 링크가 모두 있는지 확인합니다.
2. 제목과 메타 디스크립션이 동등한지 봅니다.
3. 이미지의 alt와 설명이 유지되는지 확인합니다.
4. 구조화 데이터가 모바일에도 있는지 봅니다.
5. 모바일 페이지에만 noindex가 들어가지 않았는지 확인합니다.

긴 내용은 아코디언이나 탭 안에 정리할 수 있습니다. 다만 사용자가 펼쳐 볼 수 있고 Google이 렌더링한 HTML에서도 내용을 확인할 수 있어야 합니다.

구글이 권장하는 반응형 웹

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

Google은 구현과 유지 관리가 비교적 쉬운 반응형 웹 디자인을 권장합니다. 별도 URL이나 동적 게재를 사용한다면 두 버전의 콘텐츠와 메타데이터, 리디렉션 관계를 꾸준히 맞춰야 합니다.

실제 기기와 Lighthouse 검사법

Chrome 개발자 도구의 기기 모드로 여러 화면 크기를 확인한 뒤 실제 휴대전화에서도 테스트하세요.

자동 검사만으로는 키보드가 열렸을 때 입력란이 가려지는 문제나 손가락으로 누르기 어려운 메뉴를 모두 찾기 어렵습니다.

URL 검사의 실시간 테스트에서는 Google이 렌더링한 페이지를 확인할 수 있습니다. 본문과 주요 이미지가 보이지 않는다면 JavaScript 로딩과 차단된 리소스를 살펴보세요.

모바일 사용성이 좋다고 AI 답변에 인용되는 것은 아닙니다. 다만 AI 검색이나 챗봇의 출처 링크를 눌러 방문한 사람이 모바일에서 내용을 읽고 문의나 구매까지 이어가는 데 영향을 줍니다. AI 가시성과 방문 뒤 사용성, 전환 성과를 서로 다른 지표로 확인하세요.

함께 알아두면 좋은 용어

• 페이지 속도: 페이지가 로드되고 조작 가능해지는 성능
• 코어 웹 바이탈: 로딩과 반응성, 화면 안정성을 측정하는 지표
• JavaScript SEO: 동적 페이지의 검색 접근성을 다루는 작업
• URL 검사: Google의 크롤링과 렌더링 상태를 확인하는 기능

참고 문서

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