Softonic

모바일 호환 테스터

단계 1 / 2
다음

URL을 입력하면 테스터가 이를 시뮬레이션된 휴대폰 화면 크기(기본값은 375×812, 아이폰 크기 기준)에서 로드하여 구글이 폐지하기 전에 모바일 친화성 테스트에서 오류로 표시했던 일반적인 모바일 읽기 문제들을 검사합니다. 이후 수정 가능한 문제 목록을 반환하는데, 주요 항목은 다음과 같습니다: 뷰포트 메타 태그 누락, 텍스트 크기가 12px 미만, 탭 대상이 48×48px보다 작음, 수평 스크롤, 플래시 또는 지원되지 않는 플러그인 사용, 그리고 뷰포트보다 넓은 콘텐츠 등입니다.

테스트의 실행 방식

  1. 1

    URL을 입력하세요

    프로토콜이 포함된 전체 URL입니다. 공개 페이지에만 적용됩니다.

  2. 2

    페이지는 휴대폰 크기의 뷰포트에서 렌더링됩니다.

    기본값은 375×812이며, 설정 가능합니다.

  3. 3

    자동 검사가 실행 중입니다

    뷰포트 메타, 텍스트 크기, 탭 대상 간격, 오버플로우, 플러그인.

  4. 4

    프리뷰 및 보고

    렌더된 휴대폰 화면의 스크린샷과 함께 구체적인 문제 목록입니다.

테스터가 확인하는 사항

뷰포트 구성

  • <meta name="viewport" content="width=device-width, initial-scale=1"> 모델이 존재하나요? 없을 경우 모바일 브라우저는 휴대폰 화면이 데스크톱 크기로 간주되어 화면이 축소되어 미세한 문자만 표시됩니다.

텍스트 크기

  • 12px 미만으로 렌더링된 모든 텍스트는 표시됩니다. 핀치 줌 기능이 없는 스마트폰에서는 읽기 어렵습니다.
  • 많은 스타일 가이드에서는 본문 최소 글자 크기를 16px로 권장합니다. 매우 작은 캡션은 문제 없지만, 11px 크기로 작성된 본문은 적합하지 않습니다.

타겟 크기 설정

  • 버튼, 링크 및 양식 제어 요소는 최소 48×48 픽셀 크기여야 합니다(Google/W3C 모바일 접근성 가이드라인). 작은 표적은 엄지손가락으로 정확하게 맞추기 어렵으며, 표시됩니다.

타겟 간격을 설정하세요

  • 인접한 타겟과의 거리가 8px 미만인 경우 잘못된 터핑이 발생합니다. 각각 별도로 표시됩니다.

수평 스크롤

뷰포트를 초과하는 콘텐츠는 수평 스와이프를 요구하므로 모바일 사용자 경험에 부정적인 영향을 미칩니다. 이는 일반적으로 max-width: 100% 태그가 없는 이미지나 재배치가 불가능한 표로 인해 발생합니다.

지원되지 않는 플러그인

  • 플래시, 실버라이트, 액티브엑스는 휴대폰에서 사용할 수 없습니다. 일부 구형 웹사이트에서는 여전히 이 기술들을 사용하고 있습니다.

글꼴 로딩

  • 렌더링이 몇 초 동안 방해되는 매우 큰 웹 폰트는 표시됩니다.

왜 여전히 중요할까

구글은 2023년 12월 독립적인 모바일 친화성 테스트를 중단했지만, 모바일 친화성은 여전히 코어 웹 비탈스(Core Web Vitals) 및 페이지 사용 경험 지표를 통해 직접적인 순위 결정 요소로 작용합니다. ‘모바일 우선’ 인덱싱 방식은 구글이 사용자의 사이트를 스마트폰에서 크롤하는 것으로 간주하므로, 모바일 환경에서 문제되는 부분은 데스크톱 환경의 순위에서도 나타납니다.

일반적인 수정 사항

  • <head> 및 <meta name="viewport" content="width=device-width, initial-scale=1">에 viewport 메타데이터를 추가하세요.
  • 미디어 쿼리 기반의 응답형 CSS: @media (max-width: 768px) { ... }
  • 고정 폭 레이아웃 대신 Flexbox 및 Grid를 사용하십시오.
  • 이미지 max-width: 100%; height: auto를 설정하면 이미지가 뷰포트에 따라 축소됩니다.
  • 작은 화면에서 테이블을 스크롤 가능하게 만들려면 <div style="overflow-x: auto">를 사용하여 텍스트를 래핑하세요.
  • 사용자 선호에 따른 스케일링이 정상적으로 작동하려면 텍스트 크기 설정에 rem 또는 em를 사용하세요.

테스터가 발견하지 못한 부분

  • 실제 하드웨어 환경에서의 성능: 3G 네트워크를 사용하는 저가형 안드로이드 폰은 본 테스터에서는 시뮬레이션하지 않는 지연 현상을 경험할 수 있습니다. 성능 측정에는 ‘라이트하우스(Lighthouse)’ 도구를 사용하시기 바랍니다.
  • 터치 기반 상호작용: 호버에서만 작동하고 터치 시 제대로 동작하지 않는 드롭다운 메뉴는 실제 기기에서 수동으로 테스트해야 합니다. – 모바일 화면 크기 설정을 넘어서는 접근성: 대비 기능, 스크린 리더 지원, 키보드 이용 등에 있어 전용 접근성 도구를 반드시 활용해야 합니다.
  • 모바일 전용 브라우저에서 발생하는 자바스크립트 오류입니다. iOS 버전의 Safari는 다른 WebKit 버전과 달리 때때로 다른 동작을 보입니다.

자주 묻는 질문

유사한 검사 항목이지만 구현 방식은 다릅니다. 구글은 2023년 말에 공개 도구를 폐지했습니다. 이 테스터는 헤드리스 브라우저가 가져오는 페이지 버전에 대해 구글이 사용했던 동일한 기존 검사 항목들을 적용합니다.

네, 구글은 2020년부터 모바일 우선 원칙을 적용해 왔으며, 이는 모바일 화면에서의 렌더링 결과가 검색 순위 결정에 있어 주요 기준이 된다는 의미입니다. 모바일 관련 문제는 데스크톱 검색에서도 순위에 부정적인 영향을 미칩니다.

아니요. 테스터는 공개적으로 접근 가능한 URL만을 가져옵니다. 보호된 스테이징 환경에서는 Chrome DevTools의 기기 에뮬레이션 모드를 사용하여 로컬에서 테스트하세요.

기본 화면 크기는 375×812(아이폰 12/13/14)입니다. 아이폰 14 프로의 경우 390×844, 일반 안드로이드 기기의 경우 360×640, 픽셀 7의 경우 412×915로 설정할 수 있습니다.

일반적으로 페이지의 크기에 따라 5~15초가 소요됩니다. 스크립트가 많고 복잡한 페이지의 경우 처리 시간이 더 길어지며, 테스터는 로딩 이벤트와 짧은 비활성화 기간을 기다린 후 측정을 수행합니다.

관련 도구

메타 설명 길이 확인기

메타 설명의 문자 수와 예상 픽셀 너비를 측정하고 편집 기준 및 데스크톱·모바일 레이아웃 예시와 비교하세요.

외부 링크 추출기

원시 HTML을 붙여넣고 필요에 따라 기본 URL을 지정하면, 코드에 포함된 모든 외부 http/https 링크를 중복 없이 정리된 목록으로 제공합니다. 링크 감사와 SEO 검토에 유용합니다.

HTTP 보안 헤더 검사기

HTTP 응답 헤더를 붙여넣고 HSTS, CSP, 클릭재킹, MIME, 리퍼러, 교차 출처 정책을 브라우저에서 점검하세요.

Google SERP 시뮬레이터

모바일과 데스크톱의 글자 수 제한으로 Google 스타일 검색 스니펫을 대략 확인하세요. 초안은 이 브라우저 세션에만 남습니다.

Canonical 태그 생성기

모든 URL에 유효한 rel=canonical 링크 태그를 생성하세요. URL 검증과 피해야 할 흔한 실수도 함께 안내합니다.

FAQ 스키마 생성기

질문과 답변 쌍으로 FAQPage JSON-LD 마크업을 생성해 Google의 리치 결과와 답변 상자 노출 자격을 얻으세요.

이 도구는 다른 언어로도 제공됩니다