UI GUI 디자인 01 / 디바이스 최소 해상도 선정하기

1. 해상도 개념과 사용목적

현재 내가 사용하고 있는 모니터의 해상도는 1920×1080.

여기서 단위는 픽셀(px)이고 1920 width, 1080은 height이다.

픽셀은 가변 값이기 때문에 해상도에 따라서 크기가 달라진다.

같은 15인치를 쓰더라도 어떤 사용자는 나와 같은 1920×1080일 것이고, 어떤 사용자는 다른 해상도일 수도 있을 것이다.

---

2. 디바이스 최소 해상도 선정하기

우리가 디자인을 하고 퍼블리싱을 하게 되면

데스크탑, 태블릿(패드), 스마트폰(모바일)에 따라 해상도가 달라지는데

그에 맞춰서 우리는 분기점을 잡아야한다. 이름하여 브레이크포인트(Breakpoints).

기기 대응을 할 시에는 최소 값을 잡는게 중요하다.

모바일의 최저값, 태블릿기기의 최저값, 테스크탑의 최저값 다 다를것이다.

기기가 모두 다르기 때문에. 스마트폰도 삼성, 애플, 샤오미 등 다양하지 않은가.

또 그 삼성, 애플 등 안에서도 또 시리즈마다 해상도가 달라진다.

보통 모바일은 320px, 태블릿은 600px, 데스크탑은 1024px로 시안을 잡는다.

우리 회사에서는 height는 따로 잡지 않지만 최소값(Min)으로

모바일 - 320×568 / 태블릿 - 600×960 / 데스트탑 - 1024×768을 잡으면 된다.

최대값(Max)은 모바일 - 414×896 / 태블릿 - 1024×768 / 데스크탑 - 1920×1080으로 잡는다.

 

👇참고 사이트👇

스마트폰 해상도, 화면비율

스마트폰 해상도, 화면비율 - 제타위키

 

---

근데 네이버 보니까 1130px이던데..왜 1130로 잡은지 모르겠다(?)

최근들어 1440px도 많이 쓰는거 같던데..흠

아직까진 회사에서도 보통 주변 지인들이 쓰는 해상도도 1920를 제일 많이 봤다.

---

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

같은 15인치라 하더라도

1920px 사용자가 자신의 해상도로 사이트를 만들게 되면

1024px 사용자가 봤을때는 사이트에서 스크롤이 생기는 문제점이 발생한다.

만약, 1000px의 사이트를 만들게 되면 스크롤이 생겨서 가려지는 것 없이

1024px부터 ~ 1920px까지 좌우 여백이 생기고 여백의 넓이 차이만 있을 뿐이다.

그러나..!

실제 1024px 사용자는 현재 매우 적은 인원이다. 이제는 거의 없는 정도,,

(하지만 아이패드 프로는 1024px인데..?!)

1920px 사용자가 훨씬 더 많은게 현실이다.

(또 하지만 우리 회사에서는 1024px까지도 맞춘다,, 아이패드 프로가 1024px이기도 하고)

---

아마 이건 회사마다 다르지 않을까 싶다

나는 포트폴리오 만들때도 거의 모든 해상도의 맞춰서 퍼블리싱을 했었다..매우 힘들었음

---

나는 이미 현업에서 웹디자인+반응형 웹퍼블리싱을 하고 있어서 이는 이미 알고 있는 사실이다.

하지만 강의를 들음으로써 한 번 더 제대로 배운다 생각하고 들으니 좋은 거 같다.

 

 

참고 : 리메인 UXUI 디자인 패키지 강의