모바일 친화성 검사기

Free, no signup. Run this tool's seven weighted mobile-layout checks and get a 0–100 diagnostic score, plus a phone-viewport preview as separate supporting evidence.

Built by Patrick Stox

Free, no sign-up. The analysis reads your HTML the way a mobile browser would; the screenshot renders in headless Chrome on a 390×844 iPhone-sized viewport.

검사는 당사 서버에서 실행됩니다. 입력한 URL을 가져오지만 결과는 보관하지 않습니다. Results are kept in a short-lived cache, not stored long-term. Anonymous aggregate stats feed our research posts; domains are counted once via an anonymized hash and never stored in the clear. 익명 실행별 결과 계수는 종합 연구에 사용될 수 있습니다. URL, 도메인, IP 및 식별자는 절대 포함되지 않으며 100회 미만의 실행에 대한 통계는 공개하지 않습니다.

피드백

What the score is made of

Mobile-friendly scoring thresholds
Check	Threshold / points	What this free pass can confirm
Viewport	30 points	width=device-width and zoom accessibility
Responsive CSS	20 points	@media rules in inspected CSS
Fixed widths	15 points · >400px warning	Markup-level width attributes and inline styles
Font sizes	10 points · <12px warning	CSS declarations and legacy font tags
Tap targets / horizontal overflow	Needs a rendered layout pass	Not claimed by this free HTML score

Source: Tool scoring contract · Updated: July 2026

Viewport is 30 points

Without width=device-width, phones render your page at ~980px and shrink it to fit — every other mobile problem starts here. Disabling zoom costs points too: it’s an accessibility failure.

Layout checks

Responsive CSS (@media rules, including in external stylesheets), hard-coded widths over 400px, and sub-12px font sizes — the three classic ways a desktop layout breaks on a phone.

Delivery checks

Responsive images (srcset/<picture>), HTML page weight on mobile networks, and leftover <object>/<embed> plugin content that mobile browsers won’t run.

이 도구 정보

공개 페이지의 viewport, responsive CSS, 고정 너비, font size, image, page weight와 plugin 신호를 7단계로 검사하고 설명 가능한 0–100 제품 점수를 계산합니다. 별도의 390×844 휴대전화 미리보기가 렌더링 근거를 보완합니다.

이 점수는 잠재적 layout 문제를 찾는 휴리스틱이며 Google 적격성 검사나 실제 기기 테스트를 대신하지 않습니다.

기능

Pass, Warning, Info 및 Error 상태를 가진 7개 가중 layout 검사
viewport meta, @media rule, 400 px 초과 고정 너비와 작은 글꼴 탐지
390×844 iPhone viewport의 제한된 headless Chrome 미리보기
차단 resource, stylesheet, Turnstile과 대표 후속 수동 테스트 안내

작동 방식

전체 공개 URL을 입력하면 server endpoint가 HTML과 최대 4개 stylesheet를 분석해 7개 layout 신호의 0–100 점수를 계산합니다. 이후 제한된 Chrome이 선택형 휴대전화 미리보기를 만들며, 정적 진단과 점수는 미리보기 성공 여부와 독립적으로 유지됩니다.

제한사항

정적 분석은 HTML과 최대 4개 stylesheet를 읽지만 JavaScript를 실행하지 않아 runtime CSS나 특수 responsive 기법을 놓칠 수 있습니다.
휴대전화 미리보기는 단일 viewport와 렌더링 환경이며 비용 제한, 부하 또는 bot protection 때문에 건너뛸 수 있습니다.
공개 URL 검사는 로그인 페이지, 모든 기기·browser, interaction 또는 실제 사용자 환경을 포괄하지 않습니다.

자주 묻는 질문

Google이 모바일 친화성 검사를 종료했는데 이 도구가 대체하나요?

Google은 2023년 말 독립형 모바일 친화성 검사와 Search Console의 모바일 사용성 보고서를 없앴습니다. 이 도구는 자체 7단계 진단 모델을 적용합니다. 실제 기기 검사를 대체하거나 Google 대상 요건을 판정하는 것이 아니라 모바일 배치 문제를 찾기 위한 제품 휴리스틱입니다.

JavaScript를 렌더링하나요?

0~100점은 HTML과 최대 4개 스타일시트의 정적 분석에서 나오므로 JavaScript를 실행하지 않습니다. 휴대전화 화면 캡처는 헤드리스 브라우저 미리보기로 유용한 보조 근거지만 하나의 화면 크기와 렌더링 환경일 뿐입니다. 결과가 다르면 페이지를 살펴보고 대표적인 실제 기기에서 검사하세요.

화면 영역 태그 때문에 30점을 잃은 이유는 무엇인가요?

다른 모든 모바일 동작이 의존하는 핵심 설정이라 100점 중 30점입니다. <meta name="화면 영역">가 없으면 휴대전화는 약 980px 너비로 페이지를 렌더링한 뒤 축소하므로 글자가 작고 탭이 빗나갑니다. <head>에 <meta name="화면 영역" content="width=device-width, initial-scale=1">를 추가하세요. 확대를 막으면 접근성 실패이므로 대부분의 점수는 유지하되 경고가 됩니다.

고정 너비 요소의 기준은 무엇인가요?

콘텐츠를 화면에 맞춤 검사는 인라인 인라인 고정 너비 또는 고정 너비 속성 속성에 400px를 넘는 고정 너비가 있는 요소를 표시합니다. 휴대전화 화면을 넘쳐 가로 스크롤을 만들 가능성이 높기 때문입니다. 1~2개는 경고, 3개 이상은 실패입니다. 작은 화면에서 줄어들도록 백분율 또는 상대 단위와 최대 너비를 사용하세요.

화면 캡처를 사용할 수 없는데 점수는 나온다면 오류인가요?

아니요. 점수와 7개 검사는 먼저 실행되는 무료 HTML 분석에서 나옵니다. 화면 캡처는 별도의 사용량 제한 렌더링이며 비용 한도, 일시적 사용량 증가, 헤드리스 브라우저 차단 때문에 생략될 수 있습니다. 어떤 경우에도 점수에는 영향이 없고 분석은 화면 캡처에 의존하지 않습니다.

자주 발생하는 문제와 해결 방법

오류 뷰포트 메타 태그가 없거나 유효하지 않습니다 해결 방법: 초기 HTML 헤드에 유효한 width=device-width 뷰포트 메타 태그를 추가하세요.
경고 반응형 CSS 신호가 없습니다 해결 방법: 좁은 뷰포트에 맞춰 레이아웃과 타이포그래피를 조정하는 반응형 CSS 중단점을 추가하세요.
오류 고정 너비 콘텐츠가 뷰포트를 초과합니다 해결 방법: 뷰포트를 깨뜨리는 고정 너비를 유동적인 max-width, 백분율, 그리드 또는 플렉스 크기로 교체하세요. grid flex
경고 모바일에서 읽기에 텍스트가 너무 작습니다 해결 방법: 모바일 본문 텍스트를 읽기 쉬운 기본 크기로 높이고 필수 텍스트에 12 CSS 픽셀 미만을 사용하지 마세요.
경고 이미지 크기가 반응형으로 지정되지 않았습니다 해결 방법: max-width:100%와 height:auto로 이미지 크기를 제한하고 유용한 경우 반응형 원본을 제공하세요.
경고 HTML 페이지 용량이 큽니다 해결 방법: 불필요한 인라인 페이로드를 제거하고 자산을 압축하며 중요하지 않은 리소스를 지연해 모바일 전송 비용을 줄이세요.
오류 호환되지 않는 플러그인 콘텐츠가 있습니다 해결 방법: Flash, Java 애플릿 또는 지원되지 않는 다른 플러그인 콘텐츠를 기본 HTML, CSS, JavaScript로 교체하세요.