스터디/Etc

[StatCounter] 전세계 화면 해상도 통계 및 개발시 사이즈 참고.

Dalmangyi 2023. 12. 2.

안녕하세요

이번에는 StatCounter라는 사이트의 화면해상도에 대해서 알아볼까 합니다.

 

 

 

개발하기 전 

디자인을 할때, 어떤 화면을 대상으로 개발할까 참 고민이 많게 됩니다.

 

20년전 전해 내려오던 디자인데로 하게되면 스마트폰에 대한 대응이 안되겠죠?

그래서 해상도에 따른 디자인은 현재 사용자에 대한 트렌드 조사가 먼저 이뤄져야 합니다.

 

 

그런 조사를 미리 해서 정리해둔 사이트가 바로 statcounter입니다.

https://gs.statcounter.com/screen-resolution-stats

 

해상도 관련 통계 말고도 많은 통계가 있습니다.

저는 여기서 Screen Resolution Stats를 봐보겠습니다.

 

 

 

 

2011년부터 2023년까지 모바일+타블렛+컴퓨터 통계

화면 사이즈가 정말 제각가으로 쓰고있네요.....

이래서 클라이언트 개발자는 웁니다.....

 

(보라색) 1366x768 사이즈가 대세가 됬다가 점점 가라앉고

(남청색) 1920x1080 사이즈가 대세가 됬네요.

 

1366x768사이즈는 각종 TV나 저사양 노트북에서 주로 쓰던 해상도 입니다.

최근 노트북 화면들이 상향 평준화 되면서 저해상도는 비율이 줄고

가장 일반적인 1920x1080이 대세가 된 걸 볼 수 있습니다.

 

 

 

 

 

2011년부터 2023년까지 컴퓨터 통계

 

확실히 1920x1080이 대세 입니다.

2위는 1366x768.

 

 

 

2011년부터 2023년까지 모바일 통계

 

360x640이 압도적인 대세였다가

2020년에 혼동기를 거쳐오고 있습니다.

 

안드로이드가 360x640이 기본 최소 사이즈이고 

여기서 1배, 2배, 3배, 4배 식으로 (mdpi, ldpi, xldpi, xxldpi) 디바이스 해상도를 구성했었습니다.

최근에는 정말 다양한 휴대폰 사이즈가 나오면서 평균이 없어지고 있습니다.

 

모바일

- android 360x640px (1배,2배,3배,4배)

- ios 375x667px (1배,2배,3배,4배)

 

* 테블릿 해상도는 패스하겠습니다.

 

 

 

 

 

 

그럼 화면은 어떻게 나눠야 될까?

출처: 네이버, 요즘잇

 

화면 디자인은 주로 웹과 앱으로 나뉘며,

웹은 PC와 모바일로 다시 나눠서 개발합니다.

 

나뉘는 방법은 UX 방법론에 따라 나뉩니다. (사용자 중심)

사용자가 얼마나 편하게 사용할 수 있는지가 핵심이죠.

 

 

 

 

 

웹 사이즈는 천차만별..

웹 사이즈를 정하기는 정말 어떤 관점에 따라 맞추느냐에 따라 어렵습니다만

주로 최신 휴대폰의 트렌드나, 사용자가 많은 휴대폰 사이즈, 컴퓨터 화면 사이즈에 맞추곤 합니다.

 

그래서 위에 나온 해상도 통계가 중요합니다.

 

수많은 해상도를 커버하기 위해

가급적이면 사용율이 높은 해상도를 선택하면 됩니다.

 

 

PC

- 1920x1080px

- 1366x768px

 

 

이렇게 알고 작업하면 좋겠지만

컴퓨터로 볼때는 또 다른 신경쓸 점이 존재합니다.

 

스크린샷을 자세히 보시면

가장 윗부분에 크롬의 주소창이 보이고,

가장 오른쪽 부분에는 스크롤바가 보이게 됩니다.

그리고 윈도우나 맥 사용자에 따라서 아래에 윈도우 작업표시줄이 나옵니다.

 

그래서 이 부분을 감안하고 사이즈를 측정하면 아래와 같이 됩니다.

 

PC

- 1920x1080px => 1903x975px

- 1366x768px => 1350x663px

 

물론 이건 컴퓨터 상황에 따라 다르기 때문에 최대한 감안해서 작업해야합니다.

 

 

 

웹용 모바일 화면의 경우는

반응형(사이즈에 따라 달라보이는 화면) 화면으로 구현할때

375이상, 768미만, 1024미만, 1024 이상으로 구분하곤 합니다.

 

 

 

 

 

 

모바일이 대세인 세상.

많은 사람들이 PC를 먼저 접하고 모바일을 접해서

PC만 신경써야될거같지만

Z세대나 알파세대는 휴대폰만 써오고 

집에는 컴퓨터도 없는 세대가 많습니다......

그래서 젊은 사용자로 대상으로 하는 서비스는 무조건

모바일 먼저 신경써야 합니다.

 

 

웹은 정말 많은 사이즈 다 맞추는건 노가다에 가까워집니다.

 

 

오늘도 수고....!

댓글