Viewport를 통한 반응형 웹사이트 디자인 하기

모바일이나 태블릿이 등장하기 전, 웹페이지는 컴퓨터 스크린에 최적화되어 있었죠. 그러나 오늘날엔 사람들이 자신의 모바일 기기로 웹을 탐방하는 경우가 더 많아졌기에, 이를 반응형으로 디자인 최적화 하는 과정이 필요합니다. 이때 필요한 것이 viewport기능입니다. 뷰포트(viewport)란 사용자가 웹페이지를 보는 영역인데요. 이는 모바일, 컴퓨터 등 사용자의 기기에 따라 달라집니다.

Viewport 설정하기

웹페이지 크기를 기기에 따라 최적화 시켜주는 viewport는 HTML5에서 도입되었는데요. 이는 <meta> 태그를 통해 사용할 수 있습니다.

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

요소를 하나씩 살펴보겠습니다. 먼저, viewport 요소를 통해 브라우저에게 페이지를 제어하도록 명령합니다. 다음으로 나오는 content=width=device-width 는 사용자의 기기 크기에 맞춰 가로폭을 조절하라는 의미이며, initial-scale=1.0은 페이지가 브라우저에 처음 표시될 때의 최초 줌 레벨(zoom level)을 지정하는 것입니다.

Viewport 사용 주의사항

viewport를 사용할 때 주의사항은 큰 사이즈로 고정된 크기 요소를 사용하지 않아야 한다는 것입니다. 예를 들어, 이미지의 크기가 viewport보다 큰 값으로 고정되어 있을 경우, 가로 방향의 스크린이 생성될 것입니다. 이미지의 크기는 viewport 이내로 맞춰야 하며, 특정 값에 고정되지 않게 하는 것이 좋습니다.

 

마찬가지로 CSS를 사용할 때도 주의가 필요합니다. 절댓값 수치보다는 상대값 수치(100%, 66%)를 사용하는 게 좋을 수도 있습니다. 특정 장치에서는 지나치게 크거나, 작게 보일 수 있기 때문입니다.

 

이상으로 viewport 개념과 설정 방법, 주의 사항에 대해 알아봤습니다.