HTML viewport 메타 태그가 있을 때와 없을 때의 차이
HTML 코드를 보다 보면 상단에 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>와 같은 태그가 거의 무조건 있습니다. 보통 viewport 메타 태그라고 부릅니다.
저는 모바일에서도 잘 보이게 해주는 태그라고만 이해하고, 별다른 생각을 하지 않고 있었지만, viewport 메타 태그가 있을 때와 없을 때의 차이를 눈으로 직접 눈으로 확인해 보면 좋을 것 같아서 이 글을 작성하게 되었습니다.
viewport란?
사용자의 눈에 실제로 보이는 영역을 의미합니다.
현재 눈에 보이지는 않지만 스크롤을 내리면 볼 수 있는 부분은 viewport 영역이 아닙니다. 스크롤을 내리면 viewport 영역이 변한다고 이해하면 될 것 같습니다.
viewport 메타 태그란?
<meta name="viewport" content="width=device-width, initial-scale=1.0">위 코드가 viewport 메타 태그입니다. 웹페이지가 다양한 기기에서 적절히 표시되도록 화면의 viewport를 설정해 주는 태그입니다.
- width=device-width : viewport의 너비가 기기의 실제 화면 너비에 맞춤
- initial-scale=1.0 : 페이지가 처음 로드될 때의 확대/축소비율은 1:1로 설정
viewport 메타 태그가 없으면 어떻게 될까?
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>뷰포트 메타 태그 없음</title>
<style>
body { font-size: 16px; }
.box { width: 100%; background-color: lightblue; }
</style>
</head>
<body>
<h1>뷰포트 메타 태그 없는 페이지</h1>
<div class="box">이 박스는 화면 너비에 맞게 조정됩니다. 모바일에서 확인해 보세요!</div>
</body>
</html>뷰포트 메타 태그가 없는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰포트 메타 태그 있음</title>
<style>
body { font-size: 16px; }
.box { width: 100%; background-color: lightblue; }
</style>
</head>
<body>
<h1>뷰포트 메타 태그 있는 페이지</h1>
<div class="box">이 박스는 화면 너비에 맞게 조정됩니다. 모바일에서 확인해 보세요!</div>
</body>
</html>뷰포트 메타 태그가 있는 예제
viewport 메타 태그가 없으면 데스크톱에 맞게 나오기 때문에 데스크톱에서 열었을 때는 위 2개 예제의 결과가 똑같습니다.
모바일에서 열었을 때는 viewport 메타 태그가 없는 예제는 글씨가 굉장히 작게 나와서 보기 힘들고, viewport 메타 태그가 있는 예제는 보기 좋게 확대가 돼서 나옵니다.
귀찮게 직접 스마트폰에 옮겨서 실행해 보지 않아도 되고, 크롬에서 F12를 눌러서 개발자 도구를 열고, 개발자 도구에서 Ctrl + Shift + M을 누르면 모바일 환경으로 열어볼 수 있습니다.
크롬 주소창 아래 보면 기기 모델을 선택할 수 있는데 IPhone SE나 IPad Pro 같은 것들이 기본적으로 세팅되어 있습니다. IPad Pro는 사이즈가 너무 커서 그런지 데스크톱과 마찬가지로 보이니 IPhone SE 같이 사이즈가 작은 걸로 테스트해야 명확하게 구분이 됩니다.
viewport 메타 태그가 있을 때와 없을 때의 차이를 직접 눈으로 확인해 보세요.
(있을 때는 기기 사이즈에 맞게 사이즈가 조정되고, 없을 때는 보기 힘들 정도로 작게 나온다.)
viewport 메타 태그가 있을 때와 없을 때의 차이는 위 이미지만 봐도 명확하게 이해가 되실 겁니다.
FAQ
content나 initial-scale 값을 변경하는 케이스가 있나요?
거의 없습니다. 고정된 화면 비율을 유지해야 할 경우 아래와 같이 변경하기도 하지만 매우 드문 경우입니다.
<meta name="viewport" content="width=1200">시력이 좋지 않은 사용자를 대상으로 할 경우 처음부터 확대된 상태로 보여주기 위해 initial-scale 값을 높일 수도 있겠지만 이 역시 드문 경우입니다. 사용자가 필요에 따라 직접 확대/축소하는 것이 일반적입니다.
viewport 메타 태그에 content, initial-scale 말고, 다른 속성도 있나요?
- maximum-scale: 사용자가 최대로 확대할 수 있는 비율을 제한합니다.
- minimum-scale: 사용자가 최대로 축소할 수 있는 비율을 제한합니다.
- user-scalable: 사용자의 확대/축소 기능을 허용할지 (yes 또는 no) 결정합니다.
위와 같은 속성들도 있지만 대부분의 경우에는 사용할 일이 없습니다.
결론
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 태그는 한 줄만 넣으면 스마트폰이나 태블릿 등에서도 기기 사이즈에 맞게 확대/축소해서 보여주는 엄청난 녀석이었습니다.
viewport 메타 태그가 있을 때와 없을 때의 차이를 직접 눈으로 확인해 보길 잘한 것 같습니다.
저게 있다고 해서 성능이 저하되는 것도 아니므로 데스크톱에서만 보는 웹페이지라고 해도 미래를 위해 무조건 넣는 게 좋을 것 같습니다.
참고 자료
MDN Web Docs – <meta name=”viewport”>
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
