기술 SEO
모바일 친화성 및 탭 타겟 감사 도구
Google은 2023년에 자체 모바일 친화성 테스트를 종료했습니다. 페이지 HTML(인라인이 아니라면 CSS도)을 붙여넣으면 viewport meta, 고정 데스크톱 폭 레이아웃, 읽기 쉬운 글꼴 크기, 예상 탭 타겟 크기, 구식 플러그인 태그, WCAG 색상 대비까지 7가지 실제 검사를 실행합니다.
CSS가 필요한 검사(레이아웃 폭, 글꼴 크기, 탭 타겟, 대비)는 HTML이나 이 입력란 어디에서도 CSS를 찾지 못하면 건너뛰거나 "데이터 부족"으로 표시됩니다.
이것은 정적 규칙 기반 감사입니다 — 실제 휴대폰처럼 페이지를 렌더링하지 않으므로, 탭 타겟과 레이아웃 결과는 CSS를 기반으로 한 근사치이며 픽셀 단위의 정확한 측정값이 아닙니다.
이 도구가 검사하는 항목
실제 모바일 방문자와 Google의 모바일 우선 색인 모두에 중요한 7가지 검사: 확대를 막지 않는 올바른 viewport 태그, 하드코딩된 데스크톱 폭 레이아웃 없음, 읽기 힘들 정도로 작은 텍스트 없음, 링크와 버튼의 편안한 탭 타겟 크기, 작동하지 않는 Flash/Java/marquee 마크업 없음, WCAG 준수 텍스트 대비. 전체 페이지 HTML(View Source로 가능)과, 외부 스타일시트에 있다면 CSS도 함께 붙여넣으세요.
각 검사의 작동 방식
여기서는 아무것도 추측하지 않습니다 — 모든 결과는 붙여넣은 HTML(DOM)과 CSS(실제 규칙 파서, @media 블록을 펼침)를 분석한 뒤 Google과 WCAG가 공개한 동일한 기준을 적용해 얻어집니다.
Viewport meta 태그
태그가 존재하는지, width=device-width와 initial-scale=1을 사용하는지, 핀치 줌을 막지 않는지(user-scalable=no 또는 maximum-scale이 2 미만이면 WCAG 1.4.4 위반)를 확인합니다.
고정 데스크톱 폭 레이아웃
CSS에서 구조적 셀렉터(body, .wrapper, .container, #page 등)에 601px 이상으로 하드코딩된 width 또는 min-width가 있는지 스캔합니다 — 레이아웃이 반응형으로 만들어진 적이 없다는 전형적인 신호입니다.
읽기 쉬운 글꼴 크기
핀치 줌 없이 휴대폰 화면에서 편안하게 읽을 수 있는 일반적인 최소값인 12px 미만의 font-size 선언을 표시합니다.
탭 타겟 크기
font-size, line-height, padding(또는 명시적 width/height)로부터 링크·버튼·role="button" 요소의 렌더링 높이를 추정하고, Google Lighthouse와 WCAG 2.5.5의 약 44-48px 기준과 비교합니다.
구식 플러그인 콘텐츠
<applet>, <marquee>, <blink>, 그리고 Flash(.swf)를 가리키는 <embed>/<object>를 표시합니다 — 이들 중 어느 것도 현재 모바일 브라우저에서 작동하지 않습니다.
색상 대비 (WCAG)
텍스트 색상과 배경 색상을 함께 지정하는 CSS 규칙에 대해 실제 WCAG 상대 휘도 대비 비율을 계산하고, AA 최소 기준인 4.5:1(큰/굵은 텍스트는 3:1)과 비교합니다.
반응형 브레이크포인트
CSS의 @media 규칙 수를 레이아웃이 더 작은 화면에 적응하는지에 대한 참고 신호로 셉니다 — 유동적인 레이아웃은 미디어 쿼리가 없어도 반응형일 수 있으므로 정보 제공용입니다.
자주 묻는 질문
Google은 왜 모바일 친화성 테스트를 종료했나요?
Google은 2023년 12월에 독립형 모바일 친화성 테스트 도구를 종료하고, 모바일 친화성 확인을 더 광범위한 Search Console 보고서에 통합하면서 빠른 단일 페이지 검사기를 더 이상 제공하지 않게 되었습니다. 이 도구는 로그인 없이 붙여넣은 어떤 HTML에도 실행할 수 있는 빠른 규칙 기반 감사로 그 공백을 채웁니다.
왜 CSS를 별도로 붙여넣어야 하나요?
대부분의 실제 페이지는 외부 스타일시트(<link rel="stylesheet">)에서 CSS를 불러오는데, 이 도구는 붙여넣은 HTML만으로는 그것을 대신 가져올 수 없습니다. 해당 스타일시트 내용을 CSS 입력란에 붙여넣으면 레이아웃, 글꼴 크기, 탭 타겟, 대비 검사가 모두 그것에 대해 실행됩니다.
좋은 탭 타겟 크기란 무엇인가요?
Google Lighthouse와 WCAG 2.5.5(Target Size) 기준으로 세로·가로 약 44-48 CSS 픽셀입니다. 그보다 작으면 실제 화면에서 실제 엄지손가락이 인접한 링크를 잘못 누르는 빈도가 눈에 띄게 늘어납니다.
탭 타겟 추정치는 정확한가요?
아니요 — 선언된 font-size, line-height, padding(또는 명시적 width/height)에서 얻은 견고한 추정치이며, 실제 브라우저 렌더링이 아닙니다. 44-48px 경계에 가까운 결과는 "실제 기기에서 확인 필요"로, 그보다 훨씬 낮은 결과는 명백한 실패로 간주하세요.
이 도구가 제 HTML이나 CSS를 어딘가로 전송하나요?
붙여넣은 HTML/CSS는 파서를 실행하기 위해 HTTPS를 통해 서버로 한 번 전송되며(모두에게 동일한 규칙 엔진이 적용되도록 하기 위해 필요), 요청 이후에는 저장되지 않습니다.