아티클

viewport 정리

2015-06-09 15:52:57

안녕하세요 UI개발실 정대영입니다. 함께 업무하고 계신 조은님이 공유주신 아티클 등록합니다.

 

소개

스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 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-scalableno 또는 yesyes사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의.
initial-scale1부터 101초기 확대값
minimum-scale0부터 10.25최소 확소값
initial-scale0부터 101.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 속성 테이블
PropertyValuesInitialApplies toInh.PercentagesMedia
width<viewport-length>{1,2}See individual propertiesN/AN/A독자 속성을 따름visual, continuous
height<viewport-length>{1,2}See individual propertiesN/AN/A독자 속성을 따름visual, continuous
min-width<viewport-length>autoN/AN/A초기 viewport의 width를 참조visual, continuous
max-width<viewport-length>autoN/AN/A초기 viewport의 width를 참조visual, continuous
min-height<viewport-length>autoN/AN/A초기 viewport의 height를 참조visual, continuous
max-height<viewport-length>autoN/AN/A초기 viewport의 height를 참조visual, continuous
zoomauto | <number> | <percentage>autoN/AN/A디바이스 별 확대량visual, continuous
user-zoomzoom | fixedzoomN/AN/AN/Avisual, continuous
min-zoomauto | <number> | <percentage>autoN/AN/A디바이스별 확대량visual, continuous
max-zoomauto | <number> | <percentage>autoN/AN/A디바이스별 확대량visual, continuous
orientationauto | portrait | landscapeautoN/AN/AN/Avisual, continuous
resolutionauto | device | <resolution>autoN/AN/AN/Avisual, 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 명세서를 살펴보며 조금 더 상세하게 이해할 수 있을 것이라 생각됩니다. 

댓글 0
댓글을 작성하려면 해주세요.