하이브리드 모바일 웹앱(이하 웹앱) 에서는 기기의 DIP(Density Independent Pixel)에 따라 서로 다른 해상도의 이미지와 스타일을 기기에 맞게 표현할 수 있다. 하지만 이 부분은 네이티브앱(이하 APP)개발시 참고하는 부분으로 모바일 웹(이하 M-Web)에서는 표현방식이 달라 디자이너와 개발자간의 상호 오해의 부분이 있으니 한번 정리가 필요한 부분이 있다. APP디자인 가이드 작업은 다들 어느정도 인식을 하니 논외로 하고, 일단, M-Web 작업시부분. 먼저 HTML의 META태그에서 화면의 Viewport를 지정해 주게 된다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
이는 웹브라우저가 올라간 기기의 화면 density를 참고하여 [기기의 설정된 DP단위 = 현재 브라우저의 Viewport PX단위]를 치환시켜줌.
그래서 [기기 스펙 PX] != [M-Web PX], 즉 기기의 스펙에 따른 PX값과 웹페이지에서 표현하는 PX값이 다르다.
"그렇다면 디자인 가이드 작업시, 기기스펙에 따른 px이 직관적일 수 없으니(M-Web px로 치환시 0.5px등 정수값이 되지 못한 px이 등장), M-Web에 맞는 PX값으로 디자인을 하고 가이드를 만들면 되는것인가?"
라고 생각할 수 있으나 시스템에서 스타일로 작업하지 않은 사진 및 이미지는 기기스펙에 따른 px에 영향을 받아, 화면에서 깨져보이게 된다.
아래에는 해상도 적용 방법과 그 문제점, 그리고 타협 방법을 설명해두었다.
1. 360px X 360px 의 사진을 xhdpi기기에서 M-Web으로 360px X 360px 로 표현시 기기에서 실제 표현되는 크기는 720px X 720px 이 되며, 원래 표현 밀도가 1/2가 되어 화면에서 흐려고 깨져 웹 자체의 품질이 떨어져 보게 된다.
2. M-Web에서 360px X 360px로 표현되기 위해 실제 이미지는 720px X 720px로 작업을 하되, M-Web에서는 360px X 360px로 표현을 한다.
3. 문제점 : 만약 기기가 xhdpi(360 dpi)가 아닌 xxhdpi(480 dpi)혹은 xxxhdpi(640 dpi)라면 720px의 이미지는 또 깨져보이게 된다.그렇다면 xxxhdpi의 밀도에 대응하기 위해 이미지를 1440px X 1440px로 만들면, 리소스가 너무 커져 서버에 부담이 가게 된다.
4. 타협점 찾기 : xxxhdpi의 핸드폰의 밀도(LG g3기준)는 538 ppi(pixel per inch)로 일반 사람은 평균 300ppi를 넘으면 인식이 비슷해지기 때문에 xxhdpi(480 dpi - 일반 해상도 1080px X 1920px)으로 디자인(PSD)을 하되, W-Web로 가이드를 만들면 '고급진' 모바일 웹을 만들 수 있는 디자인 가이드를 만들 수 있게 된다.
그리고 가이드 작성시 위의 작업(일반 px -> M-Web px) 작업을 하게 되면 단위를 환산하는 데 불편함이 있고, 시스템에서 출력하는 스타일부분의 값이 명확하게 정의되기 힘든 부분이 있으므로 (디자인 작업시에는 일반 px 1 로 작업하면 M-Web 작업시 0.3333... 픽셀로 작업됨. 화면 출력이 불명확해지는 브라우저도 있고, opacity를 0.33을 줘서 출력하는 브라우저도 있음.) 정확하게 픽셀로 떨어지는 고급진 웹을 만들기 위해서는 xxhdpi에서는 3px 단위로 작업을 해야 한다.
새로운 문제
아이폰과 함께 같은 페이지와 디자인을 보여준다면, 아이폰의 가로 Viewport는 320px이기 때문에, 일반적인 안드로이드 가로 사이즈 360px 보다 작아 가이드를 360px로 작업시 화면의 내용이 밀리는 일이 생긴다. 하지만 320px을 가로사이즈의 기준으로 삼으면 40px 만큼의 여백을 만든다.
320px 가로를 100%로 작업하되, 일반적인 버튼은 화면 바깥쪽 기준, 혹은 가운데 정렬로 작업하면
로 작업을 하면 레이아웃이 맞지 않는 화면이 나오니 가로 100% 세로는 스크롤로 정보량을 커버 가능하므로 최소 사이즈 640px 기준(일반)으로 가이드 작업을 하면 된다.
**디자인 가이드 작업 요약
1. 기기 해상도 기준을 잡는다.(아이폰5 : 일반 640px X 1136px | M-Web 320px X 568px )
2. 픽셀 배수 기준에 따른 디자인을 한다(추천 기기 Viewport해상도의 3배수로 디자인 | 960px X 1704px)
3. 가이드 작업 px기준은 은 기존 웹 기준으로 해도 되고 모바일 웹 기준으로 해도 상관없다.(어떤 기준인지 명시)
4. 안드로이드에서 비율이 맞지 않을 수 있으니 가로는 화면 바깥쪽 기준 및 가운데 정렬, 위치 배분이 필요한 경우 %로 명시한다.
links.
안드로이드 DP개념 이해하기 : http://www.androidpub.com/1120457
기기별 Viewport 확인 사이트 : http://viewportsizes.com/?filter=
새로운 아이폰 Viewport작업관련 : http://www.bluejini.net/?p=634