SOYOYU
메타필수

<meta name="viewport">

모바일 브라우저의 화면 크기와 확대·축소 동작을 정의. 모바일 친화 페이지의 전제조건.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●●●●결정적

구글의 Mobile-First Indexing에서 모바일 친화 신호의 전제. 누락 시 모바일 SEO 평가에서 큰 손해.

GEO

●●●●○높음

AI 에이전트가 모바일 디바이스에서 페이지를 처리할 때 적절한 viewport가 없으면 클릭 좌표가 어긋난다.

AEO

●●●○○중간

답변 추출 자체보다는 모바일 렌더링 품질을 통한 간접 신호.

A11y

●●●●○높음

user-scalable=no는 WCAG 1.4.4(텍스트 200% 확대 가능) 위반. 시각 약자가 글자를 확대할 수 없게 됨.

올바른 사용

  • <meta name="viewport" content="width=device-width, initial-scale=1">
  • user-scalable=no는 a11y 위반
  • maximum-scale=1.0도 가급적 피함
  • <head> 안에 한 개
표준 형태
<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
/>

거의 모든 사이트의 정답. 디바이스 폭에 맞춰 1배율 렌더.

iPhone 노치 대응 추가
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>

full-bleed 디자인일 때. CSS safe-area-inset-과 함께 사용.

자주 보는 안티패턴

  • 누락 — 모바일에서 데스크탑 레이아웃이 축소돼 보임
  • user-scalable=no — 시각 약자가 확대 못 함
  • 고정 width=320 같은 픽셀 값
  • viewport-fit=cover 누락 — iPhone 노치 영역 처리
확대 금지
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=no"
/>

WCAG 1.4.4 위반. 시각 약자가 핀치 줌으로 글자를 확대 못 함.

고정 픽셀 width
<meta name="viewport" content="width=320, initial-scale=1" />

모든 디바이스에 320px 강제. 큰 화면에서는 모바일 레이아웃이 어색하게 확대.

viewport 자체 누락
<head>
  <title>...</title>
  <!-- viewport meta 없음 -->
</head>

모바일에서 데스크탑 레이아웃이 축소돼 보임. Mobile-First Indexing 손해.

해설

모바일 시대의 거의 모든 페이지에 기본값처럼 들어가는 한 줄. 하지만 그 한 줄에 들어가는 옵션 두세 개의 선택이 SEO·a11y에 직접적인 영향을 미친다. 표준 형태는 <meta name="viewport" content="width=device-width, initial-scale=1">. 모바일 화면 폭에 맞춰 1배율로 렌더하라는 지시.

SEO 관점에서 viewport는 구글의 Mobile-First Indexing 시대에 모바일 친화의 전제조건이다. 모바일 친화는 직접적 ranking factor이며, 누락된 페이지는 데스크탑 레이아웃을 축소해서 모바일에 보여주는 안티패턴으로 분류된다. 이 경우 글자가 너무 작아 사용자가 즉시 이탈하고, 그 신호가 검색 순위에 누적된다.

GEO 관점에서 AI 에이전트(Anthropic Computer Use, OpenAI CUA 등)가 모바일 모드로 페이지를 자동화할 때 — viewport가 없으면 디바이스 폭과 다른 좌표계로 렌더된다. 결과적으로 에이전트의 클릭 좌표가 화면 위치와 어긋나 자동화가 실패한다. 사람과 AI 모두에게 현재 디바이스의 실제 폭으로 렌더하라는 지시가 viewport.

AEO 관점에서 직접 답변 추출에는 영향이 적지만, 모바일에서 답변이 잘 보이는가는 페이지의 사용자 신호로 작용한다. 작은 글자, 가로 스크롤이 필요한 콘텐츠는 모바일 사용자 만족도를 낮추고 페이지 평가에 간접 영향.

A11y 관점에서 가장 자주 문제가 되는 옵션은 user-scalable=no. 시각 약자가 핀치 줌으로 글자를 확대할 수 없게 만든다. WCAG 1.4.4(Resize text) 위반이고 KWCAG 1.4.4와 동일. iOS·Android 모두 보안 패치 후로는 사용자가 강제 확대를 허용하지만 — 그래도 마크업에서 명시적으로 막는 건 부적합. maximum-scale=1.0도 같은 효과라 피한다.

자주 보는 안티패턴: viewport 자체 누락(모바일 SEO 즉시 손해), user-scalable=no(a11y 위반), 고정 픽셀 width(반응형 깨짐), viewport-fit=cover 누락(iPhone 노치 영역에서 콘텐츠 짤림). 기본형 width=device-width, initial-scale=1만 박아도 위 네 가지를 모두 피한다. 노치 대응이 필요하면 viewport-fit=cover를 추가하고 CSS safe-area-inset-* 변수로 처리.