Viewport(뷰포트) 란?

웹페이지 반응형 작업을 하면서 이런 일이 있었다.

 

미디어쿼리(@media)를 분명히 작성했는데
모바일에서 전혀 적용되지 않았다.

 

개발자도구(Device Toolbar)에서는 정상처럼 보이는데
실제 모바일에서는 레이아웃이 줄어들지 않았다.

 

원인을 확인해보니 <meta name="viewport"> 설정이 빠져 있었다.

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

 

이 한 줄을 추가하자 그동안 먹지 않던 미디어쿼리가 바로 정상 동작했다.

 

그래서 왜 viewport를 넣어야 반응형이 제대로 작동하는 건지

그 내용을 정리해보려고 한다.

 

---

 

Viewport 무엇인가?

Viewport는 사용자가 현재 보고 있는 웹 페이지의 보이는 영역이다.
즉, 브라우저가 레이아웃을 계산할 때 기준으로 삼는 화면 영역이다.

 

문제는 모바일 브라우저의 기본 동작 방식이다.

 

viewport 설정이 없으면
모바일 브라우저는 과거 PC 웹을 그대로 보여주기 위해
넓은 화면 기준으로 페이지를 먼저 렌더링한 뒤
이를 모바일 화면 크기에 맞게 축소해 보여준다.

 

이 상태에서는 CSS가 실제 기기 너비 기준이 아니라, 브라우저가 설정한 넓은 기준값을 토대로 계산된다.

 

그래서 내가 작성한

@media (max-width: 768px)

 

같은 코드가 모바일에서 조건을 만족하지 못하게 된다.

결과적으로,

• 미디어쿼리가 적용되지 않고
• 레이아웃이 줄어들지 않으며
• 반응형이 깨진 것처럼 보이는 현상이 발생한다.

 

Viewport는 반응형 웹의 출발점

반응형 웹이 제대로 작동하려면
미디어쿼리(media query)나 CSS 작성보다 먼저
Viewport 설정이 선행되어야 한다.

 

Viewport를 지정하면 브라우저는
“이 페이지를 기기 화면 크기를 기준으로 렌더링하라”는 신호를 받는다.

 

그제서야 미디어쿼리는
실제 디바이스 너비를 기준으로 조건을 판단하게 된다.

 

즉, Viewport가 없으면 반응형 조건이 어긋나고 Viewport를 선언해야 비로소 반응형이 시작된다.

 

 

 

기본 Viewport 설정

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

 

- width=device-width: 뷰포트 너비를 기기 화면 너비와 동일하게 설정

- initial-scale=1: 페이지 처음 로딩 시 확대/축소 비율을 1:1로 설정

 

이 설정은 거의 모든 반응형 웹에서 기본값처럼 사용된다.

viewport 사용 참고: 한국식품안전관리인증원 대표누리집

 

추가 Viewport Meta 속성들

아래와 같은 추가 속성들도 활용 가능하다.

- user-scalable: 사용자가 확대/축소 허용 여부 지정(yes/no)

- minimum-scale: 최소 확대 비율

- maximum-scale: 최대 확대 비율

 

예: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

단, user-scalable=no 는 접근성 측면에서 사용자의 화면 확대를 막기 때문에 주의가 필요하다.

 

 

정리

• 미디어쿼리가 먹지 않는다면 Viewport부터 확인
• 모바일 브라우저는 기본적으로 넓은 화면 기준으로 렌더링
• Viewport 선언이 있어야 실제 기기 너비 기준으로 계산
• 반응형의 출발점은 CSS가 아니라 Viewport 설정