{ UI GUI 디자인 } #1 - 해상도

1. 해상도 개념

윈도우에 디스플레이 영역에 들어가면 해상도가 보인다.

1920 : width

1080 : height

이 숫자 뒤에 숨어 있는 단위가 px이다.

👉🏻 가로 : 1920px, 높이 : 1080px로 출력하겠다는 의미이다.

 

* px : 픽셀은 조건에 따라 작을 수도 있고 클 수도 있는 가변의 크기를 가진다.

 

물리적인 32인치의 모니터 크기는 동일하지만 그 안에 px를 1920px로 나열할 것인지 1280px로 나열할 것인지에 따라서

전체적인 px이 분포되는 크기가 다르다.

 

그래서 해상도는 모니터의 크기의 가로와 높이에 표현되는 px이 물리적으로 몇 개 들어가는지 판단한다.

 

2. 디바이스 구분하는 법

 

컴퓨터 입장에서 디바이스를 구분할 때 분기점(Breakpoints) 기준으로 한다. 

	Mobile	Tablet	Desktop
Max	414 x 896	1024 x 768	1920 x 1080
	375 x 667	834 x 1194	1440 x 1024
	...	...	...
	360 x 640	768 x 1024	1280 x 720
Min	320 x 568	600 x 960	1024 x 768

*           : Breakpoints

 

3. 최소 해상도를 선정해야 하는 이유

 

사용자의 해상도가 1024px인데 웹  사이트의 해상도가 1920px로 만들면 가로 스크롤이 생겨서 사이트 이용하기 불편하다. 웹 사이트의 해상도가 1024px 보다 작게 만들어야 사용자가 봤을 때 양쪽에 조금 여백이 생겨 보기 편하다. 

 

👉🏻 웹 사이트의 width값이 사용자의 해상도를 빼면 나머지의 여백은 사용자마다 다르게 나온다.

 

사용자의 해상도보다 작아야 된다는 전제조건이지만 해상도 1024px를 사용하는 사용자가 없을 수 도 있다.

 

👉🏻 점유율 기준으로 최소 해상도로 세팅 해야 된다.

 

4. 최소 해상도 데이터 추출

 

웹 사이트에서 기존의 고객 유무에 따라서 데이터 추출하는 방식이 상이하다.

 

1) 신규 프로젝트

 

신규 프로젝트일 때는 고객 DB가 없다. 국내인 경우는 전 세계적으로 디바이스의 보급률이 굉장히 빠른 나라에 속해있다. GDP가 낮은 나라에서는 디바이스의 보급이 빠르지 않기 때문에 구형의 디바이스를 쓸 확률이 커서 국내 사이트인지 글로벌 사이트인지에 따라 데이터 추출하는 것도 상이하다.

 

https://gs.statcounter.com/ 

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

Statcount를 접속해서 사용자가 사용하는 해상도의 점유율 보고 데이터를 추출한다.

 

👉🏻 국내 신규 프로젝트 :  최소 해상도를 1280px로 세팅한다.

👉🏻 글로벌 신규 프로젝트 : 최소 해상도를 1024px로 세팅한다.

 

2) 리뉴얼 프로젝트

 

고객 DB가 있을 경우 애널리틱스를 이용한다. 애널리틱스는 사용자가 웹 사이트를 접속해서 사용자들이 어떤 행동 패턴을 하는지 볼 수 있는 분석 도구이다.

 

👉🏻 리뉴얼 프로젝트 : 애널리틱스의 데이터를 보고 최소 해상도를 세팅한다.