본문 바로가기

Designer스토리

viewport meta 태그를 이용해 모바일 해상도에 맞게 레이아웃 자동 변경

반응형

 <meta name="viewport"> 태그를 활용한 모바일 해상도 자동 변경 방법

 

시대의 흐름에 따라 인터넷에 접속할 수 있는 디바이스가 많아지면서 웹 페이지를 만들 때 모바일페이지를 고려 하지 않을 수없게 되었습니다. 반응형이나 기타 다양한 웹페이지의 표기 방법들을 지원하기 시작하면서 디자이너나 퍼블리셔들은 머리가 더 아프게 되었네요.

 

모바일 디바이스의 해상도는 제각각 인데다, 가로 혹은 세로로 보았을 때 페이지가 적절하게 로드 되도록 하는것은 어제나 고민거리 입니다. 물론 JS를 활용 해 해상도별로 페이지를 맞추는게 가장 깔끔하겠지만 기본적으로는 Viewport 태그를 활용 하는데, viewpoert만 잘 써도 모바일기기에 딱 맞게 랜더링 시킬 수가 있습니다.

 

 

Viewport는 모바일기기에 화면이 로드 되었을 때 페이지가 적정 해상도로 로드 될 수 있도록 돕고 확대나 축소를 허용할 것인지 결정해 줍니다. 제대로만 잘 사용하면 미디어쿼리 없이도 각 기기의 해상도에 맞게 적절하게 표현해 주구요.

 

viewport 태그의 기본구조

 

< META name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no >

뷰포트 구조를 잘 알아두면 상황에 맞게 잘 활용할 수 있습니다. 위의 태그는 확대/축소를 하지 못하도록 만들어 놓은 태그로 포털의 모바일 페이지에 적용 된 예시 입니다.

 

- content=width=device-width : 컨텐츠를 디바이스 가로 사이즈에 맞춰 표현한다고 선언

- initial-scale=1.0 : 초기 표시 배율 (1.0이 기본, 꽉찬 페이지)

- maximum-scale=1.0 : 최대 확대 비율 ( 기본값 5.0 범위 0~10.0)

- minimum-scale=0.25 : 최소 확대 비율 ( 기본값 5.0 범위 0~10.0)

- user-scalable=no : 확대/축소 설정 (기본값 yes)

위의 메타태그의 각 요소의 역할을 정리 했습니다. 최대 축소비율과 최소 축소 비율이 같으면 확대/축소를 허용하지 않더라도 사용자가 화면을 확대/축소 할 수 없습니다.

 

 

자동 리사이징을 위한 이미지 삽입

 

화면 해상도나 가로 혹은 세로 방향으로 디바이스 방향이 바뀌어도 이미지가 제대로 표현되길 원한다면 이미지 사이즈를 픽셀 단위가 아닌 %나 Max-width를 사용해야 합니다. 값을 제대로 넣어 주지 않아도 랜더링에 따라 표현이 될 수도 있지만 다양한 기기에 활용 되기 위해서는, 표현하고자 하는대로 CSS를 잡아 주는게 좋습니다.

 

예전에는 모바일 이미지 시안을 잡을 때 360px(세로 모드에서의 가로 사이즈)을 기준으로 잡았지만, 요즘은 화면 해상도가 워낙 높다보니 720px로 잡는것을 권장 합니다.

 

max-width를 잡아주지 않으면 초기 표시 배율을 1로 해도 확대 되는 경우가 있으니 이것만 주의 하면 될 것 같습니다. 이미지 크기를 100%로 잡아주면 디바이스 크기에 따라 가로/세로 모드에 상관없이 딱 맞는 크기로 이미지가 표시 됩니다.

 

viewport가 지원되지 않을 때

요즘은 안드로이드, iOS 할것없이 viewport를 지원하지만 랜더링 클라이언트 중에는 지원하닌 않는 경우가 있을 수 있습니다. 이럴 때는 별도의 메타 태그를 통해 보완해 주면 됩니다.

 

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="720" >

 

대부분 Viewport를 잘 지원하지만 완벽하게 대응하기 위해 함께 적어 주는게 좋습니다. 페이지 다이어트를 위한다면 큰 문제가 발견되지 않으면 굳이 적용할 필요는 없구요.

 

사실 이것도 완벽할 순없고 상황에 따라서는 미디어쿼리와 함께 사용하거나 js를 통해 도움을 받습니다. 하지만 가장 기본이 되는 태그이니 꼭 기억해 두는게 좋겠죠?

뷰포트 자체는 모바일에 국한 된 이야기는 아닌데, 모바일의 비중이 점차 높아지고, 휴대 단말에서 웹을 사용하는 일이 많아지면서 중요도가 급상승하게 되었습니다. 뷰포트도 계속 진화하고 더해지거나 빠지는 속성이  생기고 있는데 기본적인것만 파악해 두면 크게 문제 되지 않는 사이트를 만들 수 있습니다.

 

반응형
Comments. 14