Viewport

이미지 출처
https://www.w3schools.com/css/css_rwd_viewport.asp

---

 

 

**뷰포트(Viewport)**는 한마디로 **"웹사이트가 실제로 보여지는 영역"**을 의미합니다.

기기에 따라 웹사이트가 보여지는 창의 크기가 다르기 때문에, 개발자에게 뷰포트를 설정하는 것은 매우 중요한 첫걸음입니다.

---

1. 뷰포트가 왜 필요한가요?

과거의 웹사이트는 오직 PC 화면을 기준으로 만들어졌습니다. 이런 사이트를 스마트폰에서 접속하면 어떤 일이 벌어질까요?

• 기본 동작: 브라우저는 PC 화면(약 980px)을 통째로 렌더링한 뒤, 이를 모바일 화면 크기에 맞춰 아주 작게 축소시켜 보여줍니다.
• 문제점: 글자는 개미만 해지고, 버튼을 누르기도 힘든 상태가 됩니다.

이를 해결하기 위해 브라우저에게 **"이 기기의 가로 너비에 맞춰서 화면을 다시 그려줘!"**라고 명령하는 도구가 바로 뷰포트 설정입니다.

---

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

우리가 HTML 프로젝트를 만들 때 자동으로 생기는 다음 코드가 바로 뷰포트 설정의 핵심입니다.

HTML

 

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

• width=device-width: 웹사이트의 가로 너비를 접속한 기기(스마트폰, 태블릿 등)의 실제 화면 너비와 똑같이 맞추라는 뜻입니다.
• initial-scale=1.0: 페이지가 처음 로딩될 때 확대/축소 비율을 1:1(기본값)로 설정하라는 뜻입니다.

---

3. 뷰포트의 종류 리스트

개발자가 알아두어야 할 뷰포트의 개념은 크게 두 가지로 나뉩니다.

• 레이아웃 뷰포트 (Layout Viewport): 브라우저가 웹사이트를 그릴 때 기준으로 삼는 가상의 캔버스 크기입니다.
• 비주얼 뷰포트 (Visual Viewport): 현재 사용자가 자신의 화면을 통해 실제로 보고 있는 영역입니다. (손가락으로 화면을 확대하면 비주얼 뷰포트는 작아지지만, 레이아웃 뷰포트는 그대로 유지됩니다.)

---

💡 실무자의 시선

실무에서 뷰포트를 다룰 때 주의해야 할 '디테일'이 있습니다.

• 반응형의 시작점: 뷰포트 메타 태그가 없다면, 아무리 CSS에서 미디어쿼리를 잘 짜도 모바일에서 정상적으로 작동하지 않습니다.
• 사용자 확대 제한 금지: 과거에는 디자인을 유지하려고 user-scalable=no를 넣어 확대를 막기도 했지만, 이는 시력이 좋지 않은 사용자의 접근성을 해치는 행위이므로 현재는 사용하지 않는 것이 권칙입니다.
• 단위 선택: 뷰포트의 크기에 맞춰 요소를 배치하고 싶을 때는 px 대신 vw(Viewport Width)나 vh(Viewport Height)라는 단위를 사용하면 화면 크기에 따라 유연하게 변하는 디자인을 만들 수 있습니다.

---

이제 뷰포트가 왜 반응형 웹의 '눈'과 같은 존재인지 이해하셨나요?