모바일 친화성 테스트 도구

모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다.

모바일 친화성 테스트 도구 열기

 

도구 사용

모바일 친화성 테스트 도구는 사용이 간편합니다. 테스트하려는 웹페이지의 전체 URL만 입력하면 됩니다. 페이지에서 리디렉션을 실행한 다음 테스트가 이어집니다. 테스트를 실행하는 데 1분도 걸리지 않습니다.

테스트 결과에는 Google에서 페이지가 휴대기기에서 어떻게 표시되는지 알 수 있는 스크린샷과 테스트를 통해 발견한 모바일 사용 편의성 문제 목록이 포함되어 있습니다. 모바일 사용 편의성 문제는 휴대기기(작은 화면)에서 페이지를 방문하는 사용자에게 영향을 미칠 수 있는 문제로, 작은 글꼴 크기(작은 화면에서 읽기 어려움)나 플래시 사용(대부분 휴대기기에서 지원되지 않음)과 같은 문제가 포함됩니다.

페이지에 도달할 수 없는 경우

어떤 이유로든 도구가 페이지에 액세스할 수 없는 경우에는 문제를 설명하는 오류 메시지가 표시됩니다. 액세스 문제에는 네트워크 연결 문제 또는 사이트 다운 등이 포함됩니다.

이 도구는 Googlebot으로서 페이지에 액세스합니다. 즉, 사용자 인증 정보를 사용하지 않고 Google로서 액세스하므로 도구가 robots.txt 파일에 의해 차단될 수 있습니다.
페이지에 로드할 수 없는 리소스가 있는 경우

테스트가 페이지에서 사용하는 모든 리소스를 로드할 수 없는 경우 경고 메시지가 표시됩니다. 리소스는 이미지, CSS 또는 스크립트 파일과 같이 페이지에 포함된 외부 요소입니다. 이 문제는 몇 가지 이유로 발생할 수 있습니다.

  • 리소스를 적당한 시간 내에 로드하지 못했습니다. 이 경우 테스트를 다시 실행해 보세요. 문제가 계속 발생하면 다른 위치에서 리소스를 호스팅하거나, 호스트에서 응답이 없는 이유를 찾아 수정하세요.
  • 리소스가 명시된 위치에 존재하지 않습니다(404 오류). 리소스 URL을 수정하세요.
  • 로그인하지 않은 사용자가 리소스에 액세스할 수 없습니다. 테스트는 익명의 사용자로서 페이지에 액세스하므로 익명의 사용자가 모든 리소스에 액세스할 수 있어야 합니다.
  • robots.txt로 인해 Googlebot이 리소스에 액세스하지 못하도록 차단되었습니다. 중요한 리소스(아래 참고)인 경우, 리소스가 내 사이트에 있다면 Googlebot이 리소스에 액세스할 수 있도록 차단을 해제하는 것이 좋습니다. 반면에 리소스가 다른 사이트에 있다면 사이트의 웹마스터에게 문의하여 차단을 해제하도록 요청하는 것이 좋습니다.

중요한 리소스 차단 해제

중요한 리소스가 차단된 경우 Google에서 페이지를 이해하는 데 큰 영향을 줄 수 있습니다. 예를 들어 큰 이미지가 차단되면 페이지가 모바일 친화적이지 않은데도 그렇게 보일 수 있고, CSS 파일이 차단되면 잘못된 글꼴 스타일이 적용될 수 있습니다(예: 기기에 비해 너무 작은 글꼴). 이는 모바일 사용 편의성 점수와 Google의 페이지 크롤링 기능 모두에 영향을 미칠 수 있습니다. robots.txt로 인해 Googlebot이 중요한 리소스에 액세스하지 못하는 일이 없도록 하고, 모두가 리소스에 액세스할 수 있도록 설정하시기 바랍니다.

불안정한 테스트 결과/페이지 로드 문제

로드할 수 없는 리소스가 있거나 다른 페이지 로드 문제가 있다면 테스트를 실행할 때마다 결과가 조금씩 달라질 수 있습니다. 로드되는 리소스 집합이 테스트를 실행할 때마다 달라질 수 있기 때문입니다. 아무것도 변경하지 않았는데도 테스트를 실행할 때마다 페이지 렌더링이 바뀐다면 '페이지 로드 문제' 경고가 있는지 확인하세요. 경고가 있다면 경고를 클릭하여 어떤 문제로 인해 페이지가 일관되고 정확하게 렌더링되지 않는지 자세히 알아볼 수 있습니다.

모바일 사용 편의성 오류

모바일 친화성 테스트 도구로 다음과 같은 사용 편의성 오류를 식별할 수 있습니다.

오류 목록

호환되지 않는 플러그인 사용

페이지에 Flash와 같이 대부분의 모바일 브라우저에서 지원되지 않는 플러그인이 포함되어 있습니다. HTML5와 같이 널리 지원되는 최신 웹 기술을 사용하여 페이지를 다시 설계하시는 것이 좋습니다. 웹 애니메이션 가이드라인에 관해 자세히 알아보기

표시 영역이 설정되지 않음

화면 크기에 맞게 페이지의 크기 및 배율을 조정하는 방법을 브라우저에 알리는 viewport 속성이 페이지에 정의되어 있지 않습니다. 사이트 방문자는 대형 데스크톱 모니터부터 태블릿 및 작은 스마트폰에 이르기까지 화면 크기가 다양한 여러 기기를 사용하므로 페이지에 meta viewport 태그를 사용하여 표시 영역을 지정해야 합니다. 반응형 웹 디자인 기본사항에서 자세히 알아보기

표시 영역이 '기기 폭'으로 설정되어 있지 않음

페이지에 고정폭 viewport 속성이 정의되어 있어 다른 화면 크기에 맞게 페이지를 조정할 수 없습니다. 이 오류를 수정하려면 사이트의 페이지에 반응형 디자인을 도입하고 표시 영역이 기기의 너비와 배율에 적절하게 일치하도록 설정합니다. 올바르게 표시 영역을 설정하는 방법을 알아보세요.

콘텐츠 폭이 화면 폭보다 넓음

이 보고서에는 수평으로 스크롤해야 페이지의 글자와 이미지를 볼 수 있는 페이지가 표시됩니다. 이는 페이지가 CSS 선언에서 절대값을 사용하거나 특정 브라우저 너비(예: 980픽셀)에서 최적의 상태로 표시되도록 설계된 이미지를 사용할 때 발생합니다. 이 오류를 수정하려면 페이지에서 CSS 요소에 관련된 너비 및 위치 값을 사용할 뿐만 아니라 이미지도 배율을 조정할 수 있어야 합니다. 표시 영역에 맞게 콘텐츠 크기 조정에 관해 자세히 알아보세요.

텍스트가 너무 작아 읽을 수 없음

이 보고서에서는 페이지의 글꼴 크기가 너무 작아 알아보기 어렵기 때문에 모바일 방문자가 '손가락으로 확대'해야만 읽을 수 있는 페이지를 파악합니다. 웹페이지의 표시 영역을 지정한 후 글꼴 크기를 설정하여 표시 영역 내에서 적절하게 조정합니다. 눈에 잘 들어오는 글꼴 크기 사용에서 글꼴 크기 권장사항에 관해 자세히 알아보세요.

클릭할 수 있는 요소가 서로 너무 가까움

이 보고서에는 버튼과 탐색 링크 등의 터치 요소가 서로 너무 가까이에 있어 모바일 사용자가 원하는 요소를 손가락으로 탭하려고 할 때 바로 옆에 있는 요소도 함께 탭하게 되는 사이트의 URL이 표시됩니다. 이러한 오류를 수정하려면 버튼과 탐색 링크의 크기와 공간을 모바일 방문자에게 맞게 올바르게 지정해야 합니다. 자세히 알아보려면 적절한 탭 타겟 크기 지정을 참조하세요.

다음 단계

도움이 되었나요?
어떻게 하면 개선할 수 있을까요?
true
Search Console이 처음이신가요?

Search Console을 처음 사용해 보시나요? 초보자도, SEO 전문가도, 웹사이트 개발자도 여기서 시작하실 수 있습니다.

검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
도움말 센터 검색
true
83844
false