웹제작자 관점의 해상도

2016 ver

 

해상도라는 개념은 각종 디스플레이 및 사진 등 많은 곳에서 사용하고 있습니다.  여러 디스플레이 및 사진 등에서 해상도는 선명도 및 화질을 의미하지만 웹제작을 주 업무로 하는 웹디자이너 및 웹기획자에게 해상도는 최적화 기준을 의미합니다.

 

왜냐하면 사이트를 제작할 때 다양한 디스플레이 규격을 맞춘다는 것을 거의 불가능하기 때문에 가장 범용적인 특정 디스플레이 규격을 맞춰서 제작하게 됩니다. 그래서 웹제작자 입장에서는 웹 페이지가 어느 해상도에서 가장 최적으로 보이게 할지 기준을 정하게 됩니다.

 

과거 웹페이지 제작 시 표준 해상도 사이즈는 1024x768 사이즈였습니다.

하지만 최근에는 1920x1200 사이즈 기준로 많이 제작하고 있습니다. 하지만 이 기준은 어디까지나 PC화면 기준이며 모바일 및 테블릿 기준으로 보면 더욱 다양한 해상도 기준이 있습니다.

 

​

1. 해상도의 의미 

디스플레이 안에 표현되는 하나의 점(Dot)을 화소(Pixel)이라 부르며, 특정 디바이스에 이 화소(Pixel)이 가로 세로 몇개를 표현 하느냐를 해상도라고 부릅니다. 즉, 1920 x1200 이라는 수치는 가로에 1920개의 화소(pixel)이 표현되고 세로에 1200개의 화소(Pixel)이 표현된다는 의미입니다. 화소(Pixel)의 크기는 정확하게 정해져 있는 것은 아니며, 17인치 모니터와 24인치 모니터가 동일한 해상도 1920x1200이라고 하면 17인치 모니터가 상대적으로 화소(Pixel)의 크기가 더 작다는 것을 알 수 있습니다.

 

2. PC화면 기준의 해상도

2000년도 중후반까지 웹사이트 표준은 1024x768 해상도를 표준으로 하고 웹페이지 디자인 할 때도 가로길이 1000 px 사이즈(스크롤바 및 좌우선을 제외한 크기)로 제작을 많이 하였습니다. 하지만 최근에는 1900 px 사이즈로 제작을 주로 합니다. 하지만 어디까지나 1900 px 사이즈는 전체 시안의 배경 및 패턴 등이 표현 되는 최대 크기 사이즈 기준이며 세부 내용은 1000px 사이즈로 보통 제작을 합니다.

 

 

3. 스마트폰 기준의 해상도

스마트폰의 해상도는 너무 다양하기 때문에 모든 기준을 맞추지는 못하며, 일반적 표현되는 해상도 기준에 맞춰 "media" 테그를 활용하여 반응형 웹으로 주로 제작을 합니다.

일반적으로 가로 길이 기준으로 768px ~ 1023px 구간을 타블릿 PC 기준으로 표현하며, 767px 이하를 모바일 기준으로 표현합니다.

 

 

​

4. 스마트폰별 해상도

해상도화면비율삼성LG애플구글

320 x 480	2:3	옵티머스1	아이폰3
480 x 800	3:5	갤럭시S1 갤럭시S2	넥서스S 넥서스One
640 x 960	2:3	아이폰4
640 x 1136	9:16	아이폰5
720 x 1280	9:16	갤럭시S2 HD 갤럭시S3 갤럭시노트2	옵티머스G	갤럭시넥서스
750 x 1334	9:16	아이폰6 아이폰6S
768 x 1024	3:4	옵티머스뷰	아이패드1 아이패드2 아이패드미니
768 x 1280	3:5	넥서스4
800 x 1280	10:16	갤럭시탭10.1 갤럭시노트1	G패드10.1	넥서스7
1080 x 1920	9:16	갤럭시S4 갤럭시S5 갤럭시노트3	옵티머스G프로 G2	아이폰6 플러스 아이폰6S+	넥서스5
1200 x 1920	10:16	G패드8.3	넥서스7(2013)
1242 x 2208	9:16
1440 x 2560	9:16	갤럭시S6 갤럭시노트4 갤럭시노트5	G3 G4
1536 x 2048	3:4	아이패드미니레티나 아이패드에어2
1600 x 2560	10:16	갤럭시탭S	넥서스10

화면비율추세대표사례

3:4	★	1536 x 2048(아이패드3, 아이패드4)
2:3	640 x 960(아이폰4), 320 x 480(아이폰3, 옵1)
10:16	★★	1600 x 2560(갤탭S, 넥10), 1200 x 1920(G패드8.3, 넥7)
3:5	768 x 1280(넥4), 480 x 800(갤1, 갤2, 넥S, 넥원)
9:16	★★★	1440 x 2560(갤6, 갤노4, 갤노5, G3, G4), 1080 x 1920(갤4, 갤5, 갤노3, 옵G프로, G2, 넥5, 아이폰6)