2024년 최신 모바일 웹 디자인 가이드: 필수 해상도와 브레이크포인트

안녕하세요 찐망고 입니다.

 

요즘 디자인 시안은 모바일 시안부터 뽑는다죠?

제가 전에 포스팅했던 단위 dp에 대해서 이해하다 보면

디자인 시안은 1 배율에 맞는 화면으로 작업하는 게 좋아요.

 

2023.08.28 - [UIUX디자인/디자인] - 모바일 디자인을 위한 해상도와 DPI 이해하기: 안드로이드와 iOS의 차이점

단위 DP란 뭘까요?

 

안드로이드는 360 * 640

iOS는 375 * 812

 

하지만 마크업은 어디까지 해야 할까요? 

 

statcounter에서 우리나라 운영체제 시장점유율을 검색해 보면

2022년까지만 해도 윈도 점유율이 안드로이드와 비등비등 했는데

이후 완전히 모바일 쪽으로 넘어옵니다. 

 

Source: StatCounter Global Stats - OS Market Share

 

일반적으로 고려되는 모바일 해상도 범위를 체크해 볼까요?

우리나라기준으로만 체크해 봤을 때

각각의 퍼센티지가 크게 차이 나지는 않지만..

최저 해상도가 360부터 412까지 있네요

 

Source: StatCounter Global Stats - Screen Resolution Market Share

 

저는 현재 학생들 포폴은 min-width: 360까지 놓고 작업하는데요.

 

실제로 최소 해상도는 일반적으로 약 320px너비를 기준으로 합니다.

이 해상도는 구형스마트폰이나 작은 화면을 가진 기기들에서 자주 볼 수 있는 해상도인데

iPhone SE(1세대), iPhone 5/5s등이 있고요..

 

요즘 이슈는 삼성갤럭시 폴드 및 플립시리즈인데..

갤럭시 Z 폴드 3과 갤럭시 Z 폴드 4의 커버 스크린 해상도를 감안할 때

각각 해상도는 2268 * 832, 2316 * 904이고 종횡비를 고려하여, DPR을 3으로 계산해 보면 

 CSS너비는 각각 278px, 301px 정도 되는 것 같네요.

 

그래서 최소해상도를 280까지는 잡아야 하는 거 아니냐 라는 말이 나오는 거죠.

참고로 Z플립 외부 디스플레이는 260 * 512의 해상도를 가지고 있어서요 

매우 특이한 경우죠..

 

 

일반적인 스마트폰 해상도는 위에 보시다시피 360px ~ 414px의 너비를 가지고 있습니다. 

일부 삼성갤럭시 노트나 아이패드 미니는 600px ~ 800px의 너비를 가지고 있고

일반적인 태블릿 사이즈는 768px ~ 1024px의 너비가 많죠 

 

웹 개발에서 자주 고려되는 중요한 브레이크 포인트입니다.

 

솔직히 반응형 마크업을 하다 보면,

디자인이 반응형스럽게 나와야 하는 게 첫 번째예요.

어떠한 디자인도 마크업이 가능하지만 반응형스럽게 나온 디자인은 확실히 

CSS가 짧아져요 미디어쿼리를 그만큼 덜 쓰니까요.

 

 

마크업시 최소한 저 브레이크포인트 내에서는 문제없이 작업하는 게 좋을 것 같습니다.