Viewport란?

현재 보고 있는 컴퓨터 그래픽의 영역을 나타내는 말로, 웹 브라우저 용어에서는 일반적으로 UI, 메뉴 표시줄 등을 제외하고는 브라우저 창과 동일하다. 보고 있는 문서의 일부이며, 웹 페이지에서 사용자가 볼 수 있는 영역이라고 할 수 있다.
태블릿이나 스마트폰이 있기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계가 되었었는데, 현재 다양한 기기들을 사용자들이 사용하고 있기 때문에 기존에 컴퓨터 화면에만 맞추어서 설계되었던 UI/UX가 다양한 기기에 맞게 설계를 정적인 설계, 고정된 크기에서 → 다양한 스크린 크기에 맞게 축소/확대가 가능한 설계 방식으로 바뀌게 되었다.

Viewport 설정

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

사용자들은 보통 데스크톱과 모바일 기기에서 웹 사이트를 수평으로 스크롤하지 않는다.
따라서 사용자가 전체 웹 페이지를 보기 위해 수평으로 스크롤하거나 축소해야 할 경우 사용자 경험(UX)이 좋지 않게 된다.
따라야 할 몇 가지 추가 규칙
- 이미지와 같은 미디어 콘텐츠가 뷰포트보다 넓은 폭으로 표시되는 경우, 이 콘텐츠를 뷰포트의 폭에 맞게 조정해야 한다.
- 스크린 크기와 CSS 픽셀의 너비는 기기마다 매우 다르기 때문에 콘텐츠는 특정 뷰포트 폭에 의존해서는 안 된다.
- 페이지 요소에 대해 큰 절대 CSS 폭을 설정하면 요소가 더 작은 장치의 뷰포트에 비해 너무 넓어진다. 대신 width: 100%와 같은 상대적 너비 값을 사용해야 하며, 또한 절대적인 위치 지정 값을 너무 크게 사용하지 않도록 주의해야 한다.
- 이유는 화면이 작은 기기에서 UI 요소를 뷰포트 밖으로 밀어낼 수 있기 때문이다.