소개

스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 viewport에 대해 알아보고자 합니다.
viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성입니다.
viewport를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있습니다.

사용법

사용법은 의외로 간단합니다.
<meta name=’viewport” content=””/>를 head사이에 추가해 주면 됩니다.
content안에는 아래와 같은 내용이 들어갈 수 있습니다.

속성 초기값 특징
width <viewport-length>{1,2} 독자적 속성에 따름. device-width라는 값을 넣는 것이 가능하다.
height <viewport-length>{1,2} 독자적 속성에 따름 device-height라는 값을 넣는 것이 가능하다.
user-scalable no 또는 yes yes 사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의.
initial-scale 1부터 10 1 초기 확대값
minimum-scale 0부터 10 .25 최소 확소값
initial-scale 0부터 10 1.6 최대 확대값

p.s) <viewport-length> = auto | device-width | device-height | <length> | <percentage>
위의 table을 활용해서 만든 간단한 viewport예제입니다.

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

user-scalable속성은 되도록이면 yes를 유지하도록 하는 것이 좋습니다.
예전에 user-scalable속성을 아이폰에서 landscape모드가 되면 폰트가 커지는 문제로 no로 지정하는 경우가 많았는데,
-webkit-text-size-adjust라는 CSS 속성을 사용하면 폰트 사이즈를 고정 하는 것이 가능합니다.
확대 축소는 사용성에 크게 영향을 미칠 수 있기 때문에 되도록이면 막는 것을 지양하는 것이 좋습니다.
-webkit-text-size-adjust는 아래와 같이 사용할 수 있습니다.

body { -webkit-text-size-adjust : none } /* 폰트의 사이즈를 늘어나지 않도록 한다 */
body { -webkit-text-size-adjust : auto } /* 기존과 똑같이 작동하도록 한다 */
body { -webkit-text-size-adjust : 120% } /* 폰트를 기존 사이즈와 동일하게 한다 */

css-device-adaption

css-device-adaption라는 명세서가 있습니다.
viewport는 ‘표현’의 영역에 가깝기 때문에, W3C CSS WG에서는 viewport를 css-device-adapt명세에서 정의해주고 있습니다.
링크는 아래와 같습니다.
http://www.w3.org/TR/css-device-adapt
그럼 meta의 값에 있던 viewport를 어떻게 하면 CSS에서 표현하는 것이 가능할까요.
일단 지원하는 속성에 대한 테이블부터 살펴보겠습니다.

css-device-adaption viewport 속성 테이블
Property Values Initial Applies to Inh. Percentages Media
width <viewport-length>{1,2} See individual properties N/A N/A 독자 속성을 따름 visual, continuous
height <viewport-length>{1,2} See individual properties N/A N/A 독자 속성을 따름 visual, continuous
min-width <viewport-length> auto N/A N/A 초기 viewport의 width를 참조 visual, continuous
max-width <viewport-length> auto N/A N/A 초기 viewport의 width를 참조 visual, continuous
min-height <viewport-length> auto N/A N/A 초기 viewport의 height를 참조 visual, continuous
max-height <viewport-length> auto N/A N/A 초기 viewport의 height를 참조 visual, continuous
zoom auto | <number> | <percentage> auto N/A N/A 디바이스 별 확대량 visual, continuous
user-zoom zoom | fixed zoom N/A N/A N/A visual, continuous
min-zoom auto | <number> | <percentage> auto N/A N/A 디바이스별 확대량 visual, continuous
max-zoom auto | <number> | <percentage> auto N/A N/A 디바이스별 확대량 visual, continuous
orientation auto | portrait | landscape auto N/A N/A N/A visual, continuous
resolution auto | device | <resolution> auto N/A N/A N/A visual, continuous

위의 테이블은 현재 번역하지 않은 상태입니다.
대충 눈치 채신 분들도 있을 거라 생각합니다만, meta viewport에 있던 scale에 관련된 속성이 모두 사라졌습니다.
대신 그 속성들은 zoom이라는 속성이 대신 합니다.
그럼 위의 meta를 css로 수정해보겠습니다.

<meta name="viewport" content="initial-scale=1, width=device-width"/>
@viewport {
    width : device-width;
}

initial-scale이 1인 경우 해당 값은 기본 값으로 반환되기 때문에 굳이 적어줄 필요가 없습니다.
외의 예제는 모두 명세에 올라와있으니 명세를 참고하시기 바랍니다.

마무리

스마트기기 상에서 웹페이지를 만들 때 당연히 쓰이고 있던 viewport지만 의외로 어려운 부분이 있습니다.
css-device-adaption 명세서를 살펴보며 조금 더 상세하게 이해할 수 있을 것이라 생각됩니다.
이 글은 css-device-adaption 문서가 변경될 때 매 번 업데이트 할 예정입니다.

카테고리: Research

1개의 댓글

김훈민 · 2014년 1월 23일 10:59 오후

Viewport… ㅠ-ㅠ
쉬운 것 같다가도 알쏭달쏭 하다능. ㅎㅎ

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다