모바일 디바이스의 viewport와 resolution 그리고 density

모바일 웹 또는 웹앱 개발을 하고 있다면 꼼꼼히 알아두어야할 것중에 viewport가 있습니다.

모바일 웹, 웹앱을 처음 다루는 사람들이 흔히 이해하기 어려워하는 것중에 하나가 viewport인것 같아요.

그래서 본 포스팅에서는 viewport에 대해 설명을 해볼까합니다.

viewport에 대한 설명은 애플 개발자 문서에 아주 친절하게 기술되어있습니다.

https://developer.apple.com/library/ios/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html#//apple_ref/doc/uid/TP40006509-SW25

viewport를 한글로 쉽게 설명해보자면

웹페이지의 콘텐츠를 펼칠수 있는 영역의 크기를 의미하는데...

흠... 설명히 여전히 와닿지 않을것 같네요...

설명이 쉽지 않으니 간단히 그림으로서 다시 차근차근 설명해보겠습니다.

자 여러분은 해상도가 320px * 480px인 아이폰 3gs를 가지고 있다고 가정해봅시다.

iOS의 사파리 브라우저는 웹페이지의 내용을 보여줄때 별다른 설정이 없다면 기본적으로 이 화면의 가로 크기가 980px라고 인지하고 콘텐츠를 펼쳐 보여줍니다.(아이폰 말고도 대부분의 안드로이드의 브라우저도 기본값이 980px입니다.)

바로 위의 사진 처럼 말이죠.

흠... 17인치 모니터 쓸때도 1024*768해상도로 사용했었는데

3.5인치의 조그만 화면을 980px 처럼 사용하려니 글자가 오밀조밀 너무 깨알같아서 보기가 힘들군요.

하나 더 예를 들어보죠.

여러분이 웹페이지에 가로 320px짜리 이미지를 보여주려고 할때

이 웹페이지에 아이폰으로 접속하면

사파리 브라우저는 전체 가로 영역이 980px 라고 인지하고 내용을 보여줍니다.

그러니깐 가로 320px 짜리 이미지는 약 1/3가량의 가로 영역을 차지하겠네요.

위에서 보는 스크린샷과 같이 말이죠.

조그맣게 보이네요.

그렇다면 화면의 가로를 980px가 아닌 320px로 인지하게 하여 콘텐츠를 보여주면

저 개 이미지가 화면 가득 보이지 않을까요?

네 맞습니다.

바로 이때 viewport를 사용합니다.

meta태그의 name 속성에 viewport를 넣어 이 태그를 웹페이지 head 태그 안에 넣어보죠.

px단위는 필요 없이 숫자만 넣습니다.

<meta name="viewport" content="width=320">

결과는 어떻게 나올까요?

바로 요렇게!!

화면 전체 가로크기가 320px 이라고 설정하니 가로 320px 짜리 이미지가 화면 가득 나오게 되었어요.

마찬가지로 텍스트와 함께 있던 콘텐츠도 가로 320px 맞춰 텍스트가 자연스럽게 줄바꿈되고,

글자도 읽을 수 있는 크기로 보이게 되었네요.

320px * 480px의 해상도를 가지고 있는 아이폰 3gs에서 기기의 해상도와 일치하는 320px를 viewport로 설정하니 딱 알맞게 웹페이지가 보여지네요.

그렇다면 

<meta name="viewport" content="width=320">

이거 하나 웹페이지에 넣으면 개발이 끝일까요?

아니죠~

세상에는 너무나 많은 모바일 기기들이 있고, 저마다 화면크기가 다 다릅니다.

여러분이 7인치가 넘는 큰 화면의 모바일 기기를 가지고 있다고 가정해보세요.

그 기기의 가로 해상도가 800px도 넘는다고 가정해보면

그런 큰 화면의 모바일 기기를 가지고 있는데도 불구하고 브라우저의 가로크기가 320px 인것 마냥 웹페이지가 보여진다면

이것 또한 낭비 아니겠어요?

웹페이지를 한눈에 볼수 있는데도 불구하고 엄청나게 큰 글씨를 보며 스크롤도 엄청해가면서 웹서핑을 할 필요 없잖아요.

여러분이 눈이 침침해서 글씨를 왕따시 만하게 봐야되는것이 아니라면 말이죠.

그렇다면 각각의 모바일 기기에 맞춰 그 기기의 가로 사이즈에 자동적으로 맞춰 보여주고 싶을땐 어떻게 해야할까요?

<meta name="viewport" content="width=device-width">

width에 특정 숫자가 아닌 device-width 라는 값을 사용하면

브라우저는 해당 기기의 width 값을 읽어 자동으로 웹페이지를 그 사이즈에 맞춰 콘텐츠를 보여줍니다.

환상적이네요!

javascript나 php,java 등으로 if문을 남발하여 값을 변경하거나 그럴필요가 없어요.

아~ 그러니깐 viewport를 이용하면 기기의 해상도(resolution)에 맞춰 보여주는구나

라고 이해가 되실거예요.

그런데 여기서 잠깐.

최신 모바일 기기들의 해상도를 살펴볼까요

아이폰5s의 해상도는 640*1136

갤럭시s4, s5의 해상도는 1080*1920

갤럭시s3는 720*1280

어라? 뭔가 이상한데... 해상도가 너무 커!

갤럭시s4는 화면에 가로 1080px을 다 보여준다는건가!!

글씨가 엄청 작게 보일텐데!

<meta name="viewport" content="width=device-width">

모바일기기의 가로 해상도가 1080이라고 viewport가 width를 1080으로 인지하지 않습니다.

갤럭시S4로 테스트 해보시면 브라우저가 웹페이지를 보여줄때 width 를 1080px가 아닌 360px로 인지하는것을 볼 수 있습니다.

간단히 가로 360px짜리 이미지를 웹페이지에 띄우면 360px짜리 이미지가 가득 차게 보여질거예요.

가로 해상도가 1080인데 viewport는 왜 360으로 인지하는거죠? 라는 궁금증이 당연히 따라 붙게되는데요.

바로 이것은 density(밀도)와 관련이 있습니다.

예로 갤럭시s4와 갤럭시s5는 density가 3.0입니다.

즉 밀도가 3배라는거죠.

device-width는 360px 이지만 밀도가 3배라서 1080px의 해상도라고 표현하는것입니다.

iOS는 레티나 디스플레이라고 말하는데요.

레티나 디스플레이는 일반 디스플레이의 2배, density 2.0 밀도를 말합니다.

그렇기때문에 아이폰5s의 경우 해상도는 640*1136이지만, 밀도가 2배이기 때문에

viewport가 인지하는 사이즈는 320*568 입니다.

responsive design(반응형 디자인)을 위해서 기기의 크기와 viewport는 더욱 중요해졌습니다.

특히 웹페이지 디자인이 픽셀에 민감한 형태로 되어있다면,

어떠한 크기에서 가장 이상적인 레이아웃을 만들것인가를 고민할때 device size, viewport를 고려하셔야 합니다.

만약 여러분의 회사의 모든 구성원이 갤럭시S3를 사용하고 있다면

그래서 갤럭시S3에 완전 최적화된 레이아웃을 원한다면

1px의 불필요한 여백도 용납하지 않는 깐깐한 디자이너를 만족시키는 갤럭시S3의 device-width인 360px에 최적화된 픽셀에 민감한 디자인을 적용할수 있습니다.

그렇다면 그 많은 모바일 기기의 device-width를 어떻게 쉽게 알수 있는 방법없을까요?

http://viewportsizes.com/

저도 최근에 발견한 곳인데요.

어떤 개발자가 자신의 필요에 의해 여러 디바이스의 정보를 모아 보기 쉽게 만들어 놓았더라고요.

viewport와 resolution, density의 상관관계에 대해서 이해에 조금 도움이 되셨는지 모르겠습니다.

앞으로도 힘차게 개발합시다!