Viewport의 이해

스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면서 모바일 웹 제작에 대한 이해가 아주 중요해졌습니다.

뷰포트는 미디어 쿼리 수업의 범위에서 벗어나기에 수업 영상에서 다루지 않았지만, 모바일 웹 사이트를 제작하기 위해 반드시 이해하고 있어야 하는 개념입니다.

 

스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에

모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었습니다.

그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했습니다.

(기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px 입니다.)

 

여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와

브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 생기게 됩니다.

 

기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면

가로 스크롤 없이 딱 화면에 맞춰 나옵니다. 그렇게 되면 스크롤 하지 않아도 내용이 다 보여지는 장점이 있지만

글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어집니다.

 

그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서

뷰포트의 크기와 스케일을 조정할 수 있게 했습니다.

 

뷰포트 설정

뷰포트를 설정하는 태그는 태그로 태그에 위치해야 합니다.

name 속성에 "viewport"라고 선언하며 content 속성에 뷰포트를 설정하는 내용이 들어갑니다.

ex : <meta name="viewport" content=" 뷰포트의 설정 값" >

 

content에는 몇 가지 설정을 할 수 있습니다.

• width(height) : 뷰포트의 가로(세로) 크기를 지정합니다. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용합니다.(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미입니다.)
• initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정합니다.(소수값)
• user-scalable : 사용자의 확대/축소 기능을 설정할 수 있습니다.

대부분의 모바일 웹 사이트의 뷰포트 설정은 아래와 같습니다. 기타 다른 설정은 필요에 따라 하시면 됩니다.

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

 

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Using the viewport meta tag to control layout on mobile browsers