viewport 태그 한 줄이 없으면 모바일이 전부 축소됩니다
미디어 쿼리·반응형 템플릿·모바일 전용 테마 — 전부 적용했는데도 축소되어 열리는 화면.
왜 그럴까요? head에 viewport 한 줄이 없으면 브라우저는 폰 화면을 폭 980px 데스크톱으로 간주합니다.
이 글은 올바른 태그 문법과 흔한 오작성 3가지, 적용 확인 절차를 안내드립니다.
⚡ 3줄 요약
- viewport 메타태그는 브라우저에게 화면 폭 계산 기준을 알려주는 한 줄입니다. 없으면 모바일 화면 전체가 축소됩니다.
- 표준 문법은 width=device-width와 initial-scale=1 두 속성입니다. 철자 오류 1글자만으로도 태그 전체가 무시됩니다.
- 확대를 막는 user-scalable=no·maximum-scale=1 속성은 접근성을 해치므로 빼는 것이 기준입니다.
viewport 메타태그는 무엇인가요?
viewport 메타태그는 브라우저에 화면 폭 계산 기준을 알려주는 head 안의 설정 한 줄입니다. 이 한 줄이 없으면 모바일 브라우저는 페이지를 폭 980px 데스크톱으로 가정하고 전체를 축소해 보여줍니다. 반응형 코드가 있어도 태그가 없으면 동작하지 않습니다.
표준 문법은 <meta name="viewport" content="width=device-width, initial-scale=1"> 한 줄입니다. width=device-width는 화면 폭을 기기 실제 폭으로 계산하라는 뜻이고, initial-scale=1은 처음 열 때 확대·축소 없이 100분의 100 크기로 보여주라는 뜻입니다. 이 두 속성이면 충분하며, 그 이상의 속성은 대부분 부작용을 만듭니다.
흔한 오작성 3가지는 무엇인가요?
3가지 중 가장 자주 보이는 실수는 철자 오류입니다. 브라우저는 틀린 철자를 추측해 주지 않고 태그를 조용히 무시하므로, 오류 메시지 없이 증상만 남습니다. 두 번째로 흔한 사례는 오래된 사이트에서 복사해 온 폭 고정값입니다. 특정 폭 숫자를 적는 순간 기기 폭 대응이 사라지므로, 항상 device-width로 적어야 합니다.
| 오작성 유형 | 증상 | 교정 방법 |
|---|---|---|
| name 철자 오류(viewpoint·view-port 등) | 태그가 통째로 무시되어 화면 축소 | name 값을 viewport로 정정 |
| content에 width=980 등 숫자 고정 | 모든 기기가 특정 폭으로 고정·축소 | width=device-width로 교체 |
| user-scalable=no·maximum-scale=1 추가 | 사용자 확대가 막혀 저시력 접근성 저하 | 확대 제한 속성 삭제 |
넣었는데도 축소되면 왜 그런가요?
원인은 보통 3가지입니다. 첫째, 태그가 head 밖(body 안)에 들어가 브라우저가 무시하는 경우입니다. 둘째, 빌더가 자동 삽입한 태그와 직접 넣은 태그가 중복되어 뒤의 값이 앞의 값을 덮는 경우입니다. 셋째, 수정이 반영됐지만 폰 브라우저가 캐시된 옛 화면을 보여주는 경우입니다.
확인 방법은 단순합니다. 폰 브라우저에서 캐시를 지우고 새로고침한 뒤에도 증상이 남으면, PC 크롬에서 페이지 소스 보기로 viewport를 검색합니다. 검색 결과가 0개면 삽입 위치가 틀린 것이고, 2개 이상이면 중복입니다. 하나만 남기고 head 상단에 두면 해결됩니다.
적용과 확인은 어떻게 하나요?
임대형 빌더는 대부분 viewport를 자동 삽입하므로 이 절차가 필요 없지만, 직접 제작했거나 5년 이상 된 외주 사이트라면 확인 가치가 있습니다. 태그 확인부터 폰 재확인까지 6단계 전체에 걸리는 시간은 10분 안팎입니다. 한 줄 점검으로 모바일 방문자 전원의 첫 화면이 달라집니다.
- 관리자 화면이나 편집기에서 head 영역을 엽니다.
- viewport로 검색해 기존 태그가 있는지, 몇 개인지 확인합니다.
- 표준 한 줄을 head 상단에 넣고 중복 태그는 삭제합니다.
- 저장 후 폰 브라우저에서 캐시를 지우고 새로고침합니다.
- 화면이 기기 폭에 맞게 열리는지, 확대가 되는지 확인합니다.
- PageSpeed Insights 모바일 검사로 최종 점검합니다.
그래서 지금 무엇부터 하면 되나요?
- PC 크롬에서 내 홈페이지 소스 보기를 열어 viewport를 검색하고 개수를 확인합니다.
- 태그 정비 후 폰 2대에서 첫 화면 크기와 확대 가능 여부를 확인합니다.
- 편집 권한이 없는 외주 사이트라면 소스 검색 결과 캡처를 제작사에 보내 표준 태그 삽입을 요청합니다.
자주 묻는 질문
viewport 태그는 head 안 어디에 넣나요?
아임웹·카페24 같은 빌더에도 직접 넣어야 하나요?
maximum-scale=1은 왜 빼라고 하나요?
NOAH가 이 문제를 없애는 방식
NOAH는 검증된 템플릿 구조를 사장님 브랜드에 맞춰 7일 안에 오픈하는 홈페이지 제작 서비스입니다. viewport를 포함한 기본 코드 설정과 모바일·태블릿 반응형 검수가 기본에 들어 있어, 오픈 시점에 축소 화면 문제가 남지 않도록 확인합니다. 기본 ₩199,000에 시안 2개·수정 5회가 포함되며 부가세는 별도입니다. 기존 사이트의 태그 상태가 궁금하시면 상담에서 화면을 함께 열어 확인해 드립니다. 상담은 무료이고, 제작 여부는 그 뒤에 천천히 정하셔도 됩니다.
무료 상담 신청 →관련 글
폰에서만 홈페이지가 깨지는 6가지 원인과 해결홈페이지 로딩 1초가 늦어질 때 잃는 문의 수상담부터 오픈까지 홈페이지가 만들어지는 전체 순서클릭을 부르는 title과 description 글자수 기준참고 자료 — 구글 검색 센터 문서 · PageSpeed Insights