Viewport (뷰포트)

 

💡 

Viewport (뷰포트)

웹사이트가 실제로 화면에 표시되는 영역.

 

---

 

https://www.w3schools.com/css/css_rwd_viewport.asp

❓ 왜 중요한가 ❓

1. 모바일에서 레이아웃 깨짐 방지
   • 초기 설정 없으면 모바일 화면에서 PC 화면 그대로 축소되어 보일 수 있음.
2. 반응형 웹 구현 필수
   • 뷰포트를 제대로 설정해야 media query, % 기반 레이아웃, flex, grid 등이 의도대로 작동.

 

 

🔹 뷰포트 설정 코드 (The Meta Tag)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

• width=device-width: 뷰포트 너비를 기기 화면 너비와 동일하게 설정.
• initial-scale=1.0: 페이지가 처음 로딩될 때 초기 확대/축소 비율을 1:1(기본값)로 설정.

 

 

📺  Viewport (뷰포트)의 종류 📺 

1️⃣ 레이아웃 뷰포트 (Layout Viewport)

• 브라우저가 웹사이트를 그릴 때 기준으로 삼는 가상의 캔버스 크기.
• CSS 단위(px, %, em 등)가 적용되는 기준.
• 모바일에서 화면을 축소해서 보여주는 경우에도 레이아웃 뷰포트는 그대로 유지.

👉  개발자가 디자인/레이아웃을 잡는 기준.

2️⃣ 비주얼 뷰포트 (Visual Viewport)

• 사용자가 실제로 보고 있는 화면 영역.
• 모바일에서 손가락 확대/축소, 스크롤에 따라 크기가 변함.
• 레이아웃 뷰포트와 달리, 실제 눈에 보이는 영역이 변하는 것.

 

 

📊 차이 비교  📊

구분	의미	변화 여부	비유
레이아웃 뷰포트	CSS/레이아웃 기준 캔버스	확대/축소에도 고정	설계도
비주얼 뷰포트	실제 눈에 보이는 영역	확대/축소, 스크롤에 따라 변화	창문으로 보는 실제 풍경

 

---

 

❗  실무에서 구조를 짤 때 주의할 점 ❗

• 반응형의 시작점: Viewport meta 태그가 없다면, 아무리 CSS에서 미디어쿼리를 잘 짜도 모바일에서 정상적으로 작동하지 않는다.
• 사용자 확대 제한 금지: user-scalable=no, maximum-scale=1는 접근성(Accessibility) 위반, WCAG 기준에도 어긋나며, 특히 시력이 낮은 사용자에게 치명적이다.
• 단위 선택: 뷰포트의 크기에 맞춰 요소를 배치하고 싶을 때는 px 대신 vw(Viewport Width), vh(Viewport Height) 단위를 사용하면 화면 크기에 따라 유연하게 변하는 디자인을 만들 수 있다.

 

---

 

🔗 Popular Devices Viewport Size 🔗

https://yesviz.com/devices.php

Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular Devices | YesViz