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

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

 

요즘은 디자인 시안을 모바일 버전부터 먼저 뽑는다는 이야기가 있죠? 

제가 전에 포스팅했던 단위 dp에 대해서 이해하고 나면, 

디자인 시안은 1 배율에 맞는 화면으로 작업하는 게 좋다는 것을 알 수 있을 거예요.

단위 DP란 뭘까요?

 

보통 1배율은 안드로이드 해상도 기준 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: 340으로 설정하고 작업하고 있는데요.

 

실제로 이전 최소 해상도는 일반적으로 약 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의 너비가 많습니다.

 

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

아참, 이제는 PC사이즈도 최대 2560px까지는 고려해야 하지 않을까 싶네요.

 

 

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

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

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

미디어쿼리를 그만큼 덜 쓰게 되니까요

 

 

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