모바일 웹 개발시 고려해야할 사항
모바일 웹 개발을 해본적이 있지만, 정해진 가이드에 따라가다보니 정확하게 이해하지 못했던것 같다.
정확하게 이해 했었더라도 시간이 많이 흘러 까먹은것 같다.
이 포스팅에서는 해상도를 기준으로 고려해야할 사항과 그에 따른 대처법을 정리해 보겠다.
고려해야할 사항
- 스마트폰 해상도
- CSS pixel ratio 와 dpi
- html meta tag 의 viewport 값들
주요 해상도와 그 스마트폰 (2013.2.2 기준)
- 320 x 480 : iPhone3GS
- 480 x 800 : 갤럭시S, 옵티머스(Z,Q)
- 640 x 1136 : iPhone5
- 640 x 960 : iPhone4S
- 720 x 1280 : 갤럭시S3, 갤럭시노트2
- 768 x 1280 : 옵티머스G
- 800 x 1280 : 갤럭시노트
이 외에도 많은 해상도가 있다. wiki page에 잘 나와있다.
CSS pixel ratio 에 관하여
위에서 보듯이 iPhone 4S의 가로 해상도는 640px 이다. css에 width:160px 로 지정한다면, 기대하는 크기는 화면의 1/4 이어야 한다. 하지만, 실제로 보여지는 크기는 1/2로 나타난다.
왜 그럴까? iPhone4S의 경우에는 CSS pixel ratio 값이 ’2′이기 때문에 1/4 크기가 아닌 (1/4) X 2 인 1/2 크기로 표현된다. (160px 의 두배인 320px 인것처럼 표현된다.)
디바이스 해상도에서 CSS pixel ratio 를 나눈값이 디바이스가 css 에 대응하는 픽셀 값이다.
즉! 디바이스의 해상도가 640px 이지만, 그냥 320px 로 생각하고 코딩하면 된다는 뜻이다.
dpi 에 관하여
마찬가지로 갤럭시S 를 예로 안드로이드 폰을 알아보겠다.
갤럭시S의 가로 해상도는 480px 이고, 240dpi (hdpi) 이기 때문에 480 / 1.5 로 계산해서 디바이스 가로 화면의 크기가 320px 로 생각하고 코딩하면 된다.
1.5 라는 계수는 ‘px = dp X (dpi/160)’ 이라는 공식에서 나왔으며, 갤럭시S의 경우 ’480 = css와 대응되는 px 값 X (240/160)’ 계산을 통해 480px 해상도는 320px 의 css 와 대응된다는 것을 알 수 있다. (안드로이드 개발자 페이지 참고)
이해를 돕기 위해 하나의 예를 더 들어보자면, width:160px 을 스타일로 적용시키면, ‘px = 160 X (240/160)’ 이라는 공식을 통해 디바이스 상에는 240px 로 인식되면서 갤럭시S 화면의 1/3이 아닌, 1/2을 차지하게 되는 것이다.
즉! 디바이스의 해상도가 480px 이지만, 그냥 320px 로 생각하고 코딩하면 된다는 뜻이다.
하지만, 이러한 계산식을 통해서도 320px 이 아닌 480px 등으로 계산되는 디바이스들이 있을것이다. 하나의 예로 갤럭시 넥서스 같은 경우는 해상도 720px 에 320dpi 를 가지고 있다. 계산을 해보면 css 360px 와 대응된다.
이런 경우, 320px 위주로 css를 코딩해 놓았다면 media query 등을 통해 360px 에 대응하는 코드를 작성해야 할 것이다.
해결법에 관해서는 다음번에 다시 정리해보겠다.
밑에는 리서치중에 그냥 적어놓은것.
웹 사이트들의 viewport
Google
// Android
<meta content="width=device-width,minimum-scale=1.0" name="viewport" />
// iPhone
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
Naver
// Android, iPhone
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
Daum
// Android, iPhone
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> viewport에 지정할 수 있는 값들을 나열하자면,
- user-scalable
- width
- height
- initial-scale
- maximum-scale
- minimum-scale
- target-densitydpi
등이 있다.
해상도 관련 용어들
- dp
- dpi
- ppi
- -webkit-device-pixel-ratio
- css pixel ratio
- media query
참고문서