구조·마크업 · 공식 문서
viewport 메타 태그 설정값과 모바일 점검 순서
여러 기기에 맞춘 페이지라면 head 안에 <meta name="viewport" content="width=device-width, initial-scale=1"> 한 줄을 넣습니다. 이 태그가 없으면 모바일 브라우저가 데스크톱 폭으로 그린 뒤 줄여 보여 줘서 글자가 작아집니다.
반응형으로 만든 페이지가 휴대폰에서 PC 화면을 줄여 놓은 것처럼 보인다면, 대개 head 안의 viewport 한 줄이 빠진 경우입니다.
구글은 모바일 버전으로 색인을 만들고 순위를 정합니다. 그래서 모바일에서 글이 읽히는 화면을 만드는 첫 줄이 viewport 태그입니다.
발견 01
여러 기기에 맞춘 페이지는 head 안에 viewport 메타 태그를 넣어야 합니다
Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. This tag tells the browser how to control the page's dimensions and scaling.
여러 기기에 맞춘 페이지는 문서 head 에 viewport 메타 태그를 넣어야 하며, 이 태그는 브라우저에 페이지 크기와 배율을 어떻게 다룰지 알려 준다는 설명입니다.
| 문서 | 원문 |
|---|---|
| Lighthouse | Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.viewport 메타 태그가 없으면 모바일 기기가 보통의 데스크톱 화면 폭으로 페이지를 그린 뒤 줄여 보여 줘서 읽기 어렵다는 설명입니다. |
| web.dev | A page without the viewport meta tag loads very zoomed out, making the text hard to read. With the viewport meta tag set, you can read the page without zooming in.viewport 메타 태그가 없으면 페이지가 크게 축소된 채 열려 글을 읽기 어렵고, 넣으면 확대하지 않고도 읽을 수 있다는 설명입니다. |
| 구글 검색 센터 | Google uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. This is called mobile-first indexing.구글은 스마트폰 크롤러로 수집한 사이트의 모바일 버전으로 색인과 순위를 정하며, 이를 모바일 우선 색인이라고 부릅니다. |
| 구글 검색 센터 | Google recommends Responsive Web Design because it's the easiest design pattern to implement and maintain.구글은 구현과 유지가 가장 쉬운 방식이라 반응형 웹 디자인을 권합니다. |
| 네이버 서치어드바이저 | HTML 문서의 <head> 태그내에 있는 <meta> 태그를 활용합니다 |
| 네이버 서치어드바이저 | 반응형 웹은 웹 브라우저가 웹문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절하는 기법입니다. 반응형 웹은 다양한 크기를 지원하는 모바일 환경에서 사용자가 페이지의 확대/축소 없이 여러분의 웹 콘텐츠를 보다 쉽게 소비할 수 있도록 도와줍니다. |
구글 검색 센터 문서는 반응형 웹 디자인을 권하고, 모바일 버전으로 색인한다고 적었습니다. viewport 는 그 반응형 화면이 휴대폰에서 제 폭으로 그려지게 하는 한 줄입니다.
m. 사이트를 따로 둔다면 viewport 와 별개로 짝 URL 설정이 필요합니다. 그 판단은 「반응형 홈페이지와 m. 사이트 차이」 편에 자세히 적었습니다.
발견 02
content 값 5가지 중 권하는 값은 2가지이고, 확대를 막는 값은 피합니다
| content 값 | 판단 | 이유 | 공식 문서 원문 |
|---|---|---|---|
| width=device-width | 권장 | 화면 폭을 기기 폭에 맞춥니다. Lighthouse 는 width= 가 없으면 실패로 봅니다. | A page fails the audit unless all of these conditions are met: - The document's <head> contains a <meta name="viewport"> tag. - The viewport meta tag contains a content attribute. - The content attribute's value includes the text width=.head 안에 viewport 메타 태그가 있고, content 속성이 있고, 그 값에 width= 가 들어 있어야 감사를 통과한다는 조건입니다. |
| initial-scale=1 | 권장 | 처음 열 때 배율을 1로 둡니다. | Here's what each key-value pair does: - width=device-width sets the width of the viewport to the width of the device. - initial-scale=1 sets the initial zoom level when the user visits the page.width=device-width 는 화면 폭을 기기 폭에 맞추고, initial-scale=1 은 처음 열 때의 배율을 정한다는 설명입니다. |
| initial-scale 이 1보다 작음 | 피함 | Lighthouse 감사에서 실패로 봅니다. | The audit therefore also fails when the initial-scale is set to less than 1.initial-scale 을 1보다 작게 두어도 감사에서 실패로 본다는 설명입니다. |
| maximum-scale · user-scalable=no | 피함 | 이용자가 화면을 확대하지 못하게 막을 수 있습니다. | We don't recommend using these attributes because they can prevent the user from zooming the viewport, potentially causing accessibility issues.이 속성들은 이용자가 화면을 확대하지 못하게 막아 접근성 문제를 일으킬 수 있어 권하지 않는다는 설명입니다. |
| 태그 없음 | 피함 | 모바일이 데스크톱 폭으로 그린 뒤 줄여 보여 줍니다. | Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.viewport 메타 태그가 없으면 모바일 기기가 보통의 데스크톱 화면 폭으로 페이지를 그린 뒤 줄여 보여 줘서 읽기 어렵다는 설명입니다. |
We don't recommend using these attributes because they can prevent the user from zooming the viewport, potentially causing accessibility issues.
이 속성들은 이용자가 화면을 확대하지 못하게 막아 접근성 문제를 일으킬 수 있어 권하지 않는다는 설명입니다.
viewport 를 넣은 뒤 흔히 남는 문제는 가로 스크롤입니다. 고정 폭 이미지나 표가 화면보다 넓으면 페이지가 옆으로 밀립니다.
web.dev 는 이미지에 max-width: 100% 를 주라고 권합니다. 표는 칸을 줄이거나 표 안에서만 가로로 넘기게 둡니다.
On both desktop and mobile devices, users are used to scrolling websites vertically but not horizontally. Forcing the user to scroll horizontally or to zoom out to see the whole page causes a poor user experience.
이용자는 세로 스크롤에 익숙하고 가로 스크롤에는 익숙하지 않아, 가로로 넘기거나 축소해야 전체가 보이는 페이지는 나쁜 경험이 된다는 설명입니다.
발견 03
B2B·B2C·B2G 는 viewport 가 어긋나는 자리가 다릅니다
예시 ① 오래된 문의형 기업 사이트(B2B)
PC 화면만 생각하고 만든 회사 소개 페이지에 viewport 태그가 없습니다. 휴대폰에서는 페이지 전체가 작게 줄어 문의 버튼을 누르기 어렵습니다.
공통 머리글에 viewport 한 줄을 넣고, 고정 폭으로 짠 본문 상자를 화면 폭에 맞게 고칩니다.
예시 ② 상품 상세 이미지가 큰 쇼핑몰(B2C)
viewport 는 맞게 들어 있지만, 상품 설명 이미지가 고정 폭이라 휴대폰에서 가로 스크롤이 생깁니다.
상세 이미지에 max-width: 100% 를 주고, 사이즈 표는 표 안에서만 옆으로 넘기게 둡니다.
예시 ③ 공공기관 누리집(B2G)
레이아웃이 흐트러지지 않게 하려고 viewport 에 user-scalable=no 를 넣어 두었습니다. 글자를 키워 보려는 이용자의 확대 동작이 막힙니다.
user-scalable 과 maximum-scale 을 빼고 width=device-width, initial-scale=1 만 남깁니다.
그럼 viewport 는 어떤 순서로 점검하나요?
- 주요 페이지의 페이지 소스를 열어 head 안에 <meta name="viewport"> 가 있는지 봅니다. 공통 머리글 템플릿에서 한 번에 확인합니다.
- content 값에 width=device-width 가 있는지, initial-scale 이 1보다 작지 않은지 봅니다.
- maximum-scale 이나 user-scalable=no 가 있으면 뺍니다.
- 휴대폰 폭으로 페이지를 끝까지 내려 보며 가로 스크롤이 생기는 이미지·표를 찾아 고칩니다.
- 크롬 개발자 도구의 Lighthouse 로 viewport 항목을 확인합니다(Lighthouse 13부터는 Optimize viewport for mobile 인사이트). 다른 모바일 점검 도구는 「모바일 친화성 테스트 대신 쓰는 도구」 편에 자세히 적었습니다.
This audit has moved into the Optimize viewport for mobile insight as of Lighthouse 13.
Lighthouse 13부터 이 감사는 Optimize viewport for mobile 인사이트로 옮겨졌습니다.
조사 방법
- web.dev (Google) 「Responsive web design basics」 (문서 수정일 2019-02-12) · 최종 확인일 2026-10-25 · https://web.dev/articles/responsive-web-design-basics
- Chrome for Developers (Lighthouse) 「Does not have a <meta name="viewport"> tag with width or initial-scale」 (문서 수정일 2024-05-27) · 최종 확인일 2026-10-25 · https://developer.chrome.com/docs/lighthouse/best-practices/viewport
- Google Search Central 「Mobile site and mobile-first indexing best practices」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
- 네이버 서치어드바이저 「모바일 사용성」 · 최종 확인일 2026-10-25 · https://searchadvisor.naver.com/guide/markup-mobile
- content 값 5가지의 판단은 위 문서들이 권하거나 실패로 보는 값을 한 표로 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 구글 계열 문서 원문은 영어판(hl=en)이고, 문서·도구 이름은 한국어판(hl=ko)이 있는 경우 그 표기를 따랐습니다. 네이버 문장은 한국어 원문 그대로입니다.