HTML 뷰포트(viewport) 메타 태그는 반응형 웹사이트를 제작할 때 반드시 사용되는 요소입니다. 이 태그를 활용하면 웹 페이지가 기기의 뷰포트 크기에 맞춰 너비를 자동으로 조절할 수 있어, 데스크톱뿐만 아니라 스마트폰과 태블릿 등 다양한 화면에서 최적화된 화면을 제공할 수 있습니다.
뷰포트 메타 태그란?
뷰포트는 사용자가 웹 페이지를 보는 화면 영역을 의미합니다. 모바일 기기에서는 데스크톱보다 화면이 작기 때문에, 뷰포트 메타 태그가 없으면 브라우저가 페이지를 데스크톱 화면 크기로 렌더링한 뒤 축소해서 보여주게 됩니다. 이로 인해 글자가 지나치게 작아지거나 레이아웃이 깨지는 문제가 발생할 수 있습니다.
기본 문법
뷰포트 메타 태그는 HTML 문서의 <head> 섹션 안에 아래와 같이 작성합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
위 코드에서 width=device-width는 페이지 너비를 기기 화면 너비에 맞추라는 의미이고, initial-scale=1.0은 페이지가 처음 로딩될 때 확대·축소 없이 100% 비율로 표시하라는 설정입니다.
뷰포트 메타 태그의 주요 속성
| 속성 | 설명 |
|---|---|
| width | 기기의 가상 뷰포트 너비를 지정합니다. 일반적으로 device-width 값을 사용합니다. |
| height | 기기의 가상 뷰포트 높이를 지정합니다. |
| initial-scale | 페이지에 처음 접속했을 때의 확대·축소 수준(줌 레벨)을 지정합니다. |
| minimum-scale | 사용자가 페이지를 축소할 수 있는 최소 줌 레벨을 지정합니다. |
| maximum-scale | 사용자가 페이지를 확대할 수 있는 최대 줌 레벨을 지정합니다. |
| user-scalable | 사용자가 페이지를 확대하거나 축소할 수 있는지 여부를 지정합니다. yes 또는 no로 설정합니다. |
참고: 접근성 측면에서 user-scalable=no나 maximum-scale=1로 설정하는 것은 권장되지 않습니다. 시력이 낮은 사용자가 화면을 확대하지 못하게 되어 사용성이 저하될 수 있기 때문입니다.
실전 예제
다음은 뷰포트 메타 태그를 적용한 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML 뷰포트 메타 태그 데모</h1>
<p>
더미 텍스트가 포함된 단락입니다.
더미 텍스트가 포함된 단락입니다.
더미 텍스트가 포함된 단락입니다.
더미 텍스트가 포함된 단락입니다.
</p>
<p>
또 다른 더미 텍스트가 포함된 단락입니다.
또 다른 더미 텍스트가 포함된 단락입니다.
또 다른 더미 텍스트가 포함된 단락입니다.
또 다른 더미 텍스트가 포함된 단락입니다.
또 다른 더미 텍스트가 포함된 단락입니다.
또 다른 더미 텍스트가 포함된 단락입니다.
</p>
</body>
</html>
실행 결과 확인하기
위 코드를 실행하면 그라데이션 배경 위에 제목과 단락이 표시됩니다.
이제 브라우저 창 크기를 줄여보세요. 뷰포트 메타 태그 덕분에 페이지가 작은 화면 크기에 맞춰 자연스럽게 조정되는 것을 확인할 수 있습니다.
마무리
뷰포트 메타 태그는 모바일 친화적인 웹사이트를 만들기 위한 첫걸음입니다. 단 한 줄의 코드만 추가해도 모바일 기기에서 페이지가 올바르게 표시되도록 제어할 수 있으며, 미디어 쿼리(media query)와 함께 사용하면 진정한 의미의 반응형 웹 디자인을 구현할 수 있습니다. 모든 웹 프로젝트의 <head> 섹션에 반드시 포함하는 습관을 들이시기 바랍니다.