[모바일] 해상도를 고려한 레이아웃

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.

모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에

이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.

게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.

 

국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는 

최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)

그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.

 

 

※ 국내 출시된 주요 모바일 기기 해상도

 

1. 스마트폰 계열
iPhone 3GS : 320 x 480
iPhone 4 : 640 x 960
iPhone 5 : 640 x 1136

갤럭시 S, U, K, A, S2 : 480 x 800
갤럭시 넥서스, S3 : 720 x 1280
갤럭시 노트 : 800 x 1280
갤럭시 S4 : 1080 x 1920
갤럭시 노트II : 720 × 1280

모토믹스 (MB501 NEO BLACK) : 320 x 480
모토로이, 모토쿼티, 모토그램, 디파이 : 480 x 854
Droid RAZR M , RAZR XT910S(K), ATRIX™ MB860(861) : 960 x 540
Droid RAZR HD , Droid RAZR MAXX HD : 720 x 1280

HTC 디자이어(넥서스원) : 480 x 800
디자이어, 디자이어HD, 넥서스원, 센세이션XL : 480 x 800
EVO 4G+ , Rider : 540 x 960
J Butterfly : 1080 x 1920

옵티머스원, 안드로-1, 스마트볼 : 320 x 480
옵티머스, 옵티머스Z, 옵티머스Q, 옵티머스 마하, 옵티머스Q : 480 x 800
옵티머스 뷰 : 768 x 1024
옵티머스G (LG-F180S) : 768 x 1280
넥서스4 : 768 x 1280

시리우스, 미라크, 이자르, 베가 : 480 x 800
베가레이서2 : 720 x 1280

소니에릭슨 – x10 미니, x10 미니 프로 : 240 x 320
소니에릭슨 아크 : 480 x 854


2. 테블릿 PC 계열

iPad : 1024 x 768
iPad2 : 1024 x 768

갤럭시 Tab2 : 1280 x 800
갤럭시 Tab7 : 1024 x 600
갤럭시 Tab10.1 : 1280 x 800

갤럭시 S2 최적 사이즈 : 320 x 510
포토샵에서 해상도 96.012Pixels/Inch(기본값) 으로 문서 생성한 상태에서 320 x 510 사이즈로 작업후
스마트폰에서 해당 문서를 오픈하면  480 x 800 으로 열림 , 컴퓨터와 스마트폰의 해상도 표현 방식의 차이때문인듯

참고자료
http://trend21c.tistory.com/946  
http://plannerjs.egloos.com/648393 
http://www.couplestyle.com/entry/모바일웹-디바이스별-브라우저-실제-랜더링-사이즈