들어가기
요즘 웹사이트는 PC 뿐만아니라 모바일, 태블릿 등 다양한 기기에서 열람 될 수 있다. 그래서 우리는 다양한 기기에서 정상적으로 동작하는 웹사이트를 개발하기 위해서 반응형 웹을 개발한다. 이 반응형 웹의 기초가 되는게 바로 Viewport 설정이라고 한다. 이게 어떤 개념이고 왜 기초라고 하는지 알아보자!
Viewport란?
Viewport는 현재 Display에 보여지고 있는 영역을 말한다. PC 환경에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다보여지지 않고 스크롤 해서 봐야 되는 경우가 있는데, 이때 보여지는 부분이 Viewport 영역이다.
Viewport 영역은 앞서 말했듯 PC 환경에서는 브라우저의 크기를 바꿔서 뷰포트의 크기를 사용자가 임의로 바꿀 수 있다. 그러나 휴대폰이나 태블릿의 경우는 브라우저의 크기를 변경할 수가 없다. Double tab, Zoon in, Zoom out을 통해 비쥬얼 viewport의 배율을 변경 할 수는 있어도 레이아웃 viewport는 변경할 수 없다.
그래서 모바일 브라우저(사파리, 크롬 등)는 기본 정책으로 Default 뷰포트 너비를 980px으로 책정하고 화면에 맞게 비율을 줄여서 보여준다. 종종 PC 환경에서 제작된 웹사이트는 모바일 환경에서 확인했을 때는 내용이 작아져 버리는 모습을 볼 수 있는 것이 이 때문이다. 다시 말해 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것이다.
따라서 웹 사이트를 만들 때 뷰포트에 대한 설정을 해주어야 이러한 문제를 해결하고, 반응형 웹사이트를 제대로 동작시킬 수 있다.
일반적인 설정
HTML5 부터 Viewport 설정을 위해서 <head> 태그 안에 <meta> 태그를 활용한다. CRA로 프로젝트를 생성하면 기본적으로 아래와 같이 정의되어있다!
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 설정에서 width=device-width값을 설정해 주었기 떄문에 전체적인 웹 페이지의 width가 기기의 너비 만큼 구체적으로 설정되고 @media 에서 선언된 width의 범위에 따라 css가 적용되어 결과적으로 반응형 웹을 만들 수 있다.
설정값
<meta> 태그의 content값에 다양한 설정값들을 추가하여 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기, 줌 레벨을 조절할 수 있다.
커스터 마이징 할 수 있는 설정값들을 알아 보자.
width
viewport의 가로 크기를 조정한다. 일반적인 숫자값이 들어 갈 수도 있고, device-width, device-height와 같은 특정한 값을 사용할 수도 있다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다.
height
viewport의 세로 크기를 조정한다.
initial-scale
페이지가 처음 로딩될 때 줌 레벨을 조정한다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성한다.
minimum-scale
줄일 수 있는 최소 크기를 지정한다.(default값은 0.25)
maximum-scale
늘릴 수 있는 최대 크기를 지정한다.(default값은 1.6)
shrink-to-fit
yes 또는 no 값을 가지며, 사파리 11버전에선 viewport크기가 작으면 보여줘야할 내용을 줄여서 보여주기 때문에 이를 방지하기 위해서는 no를 설정한다.(default값은 yes)
user-scalable
yes 또는 no 값을 가지며, 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다.(default값은 yes)
마무리
CRA를 사용해서 프로젝트를 만들면 기본적으로 뷰포트설정이 있기때문에 신경쓰지 않았던 부분이었는데, 요즈음 프론트엔드 개발자가 하는 업무들이 웹뷰나 반응형 작업이 필요한 것들이 많기 때문에 잘 알아 두면 좋을 것 같다.
참고
