[모바일] 해상도를 고려한 레이아웃 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.
모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에 이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.
게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.
국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는 최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)
그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.


디자인할때  W.320 x H.480 ( iPhone3 )  ~  W.1440 ( G6 ) x H.2960 ( 갤럭시 S8, S8+ )


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

1. 스마트폰 계열
iPhone3, iPhone 3GS : 320 x 480 
iPhone 4 : 640 x 960
iPhone 5 : 640 x 1136
iPhone 6, iPhone 6+, iPhone 7, iPhone 8 : 750 x 1334
iPhone 6+, iPhone 6S+, iPhone 7+, iPhone 8+ : 1080 x 1920
iPhone X : 1125 x 2436

갤럭시 S, S2 : 480 x 800
갤럭시 S3 : 720 x 1280
갤럭시 S4 : 1080 x 1920
갤럭시 S5 : 1080 x 1920
갤럭시 S6, S7 : 1440 x 2560
갤럭시 S8, S8+ : 1440 x 2960
갤럭시 넥서스 : 720 x 1280
갤럭시 U, K, A : 480 x 800
갤럭시 노트II : 720 × 1280
갤럭시 노트 : 800 x 1280
갤럭시 노트 4, 5, 7 : 1440 x 2560
갤럭시 노트 8 : 1440 x 2960

모토믹스 (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
G3, G4, G5, V10, V20 : 1440 x 2560
G6 : 1440 x 2880
Q6 : 1080 x 2004

시리우스, 미라크, 이자르, 베가 : 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
iPad mini, Air2 : 1536 x 2048
iPad pro : 2048 x 2732

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

G패드 10.1 : 800 x 1280
G패드 8.3 : 1200 x 1920

write update 2013-10-14
해피정닷컴의 선택 :  갤럭시 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/모바일웹-디바이스별-브라우저-실제-랜더링-사이즈
https://zetawiki.com/wiki/스마트폰_해상도,_화면비율