안녕하세요 찐망고입니다.
2025년도 벌써 두달이 지나갑니다.
이번에는 반응형 웹을 위한 해상도 트렌드를 분석하면서,
디자인 & 개발할 때 반응형 작업을 어떻게 하면 좋을지 정리해볼게요.
해당링크는 Statcounter입니다.
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.
gs.statcounter.com
PC해상도부터 비교해볼까요? (2024 vs 2025)
1920 × 1080의 점유율은 여전히 1위네요.
하지만 2560 × 1440해상도의 점유율이 점점 증가하는 중입니다.
고해상도 모니터(2K, 4K)의 증가로 인해 더 넓은 해상도를 고려한 디자인이 필요하겠죠
모바일 해상도도 볼까요? (2024 vs 최근 3개월)
해상도를 보면 스마트폰 트렌드가 보입니다 ㅎㅎ
아이폰 점유율이 변화하고 있는데요
393 × 852 해상도가 늘어나면서 아이폰 14 Pro, 15, 15 Pro, 16시리즈를 많이 사용하는 것 같아요
그와중에 390 × 844 해상도를 가진 아이폰12, 12 Pro , 13, 13 Pro 들도 여전히 강세구요
412 × 892 해상도는 구글픽셀폰인데 점유율이 조금 상승했군요.
360 × 780은 삼성 갤럭시 S시리즈이고 지속 사용중이네요.
모바일 디자인 작업시 1배율로 작업해야 한다고 했죠!
스마트폰은 실제 해상도와 뷰포트 크기가 다릅니다.
예를 들어, 삼성갤럭시 S23의 실제해상도는 1080 × 2340이지만
DPR=3.0을 적용하면 360 × 780으로 인식하는 것처럼요
1x로 작업하면 CSS에서 px단위를 그대로 적용할 수 있어 작업이 단순해지죠
유지보수도 편리해지고, 기본 Figma나 Sketch등에서도 1배율을 사용하는 이유이고
모든 디바이스에서 반응형 적용이 쉬어집니다.
| OS | 뷰포트 크기 |
| iPhone (기본 크기) | 375 * 812 (DPR = 3) |
| iPhone (Pro 시리즈) | 393 * 852 (DPR = 3) |
| 안드로이드 (삼성 갤럭시 S 시리즈) | 360 * 780 (DPR = 3) |
| 안드로이드 (보급형 스마트폰) | 360 * 800 (DPR = 3) |
모바일 UI 디자인 시 375 × 812(아이폰기준) 또는 393 × 852 기준으로 작업하는 것이 유리하겠죠?
안드로이드와 iOS를 따로 작업하지 않아도 됩니다.
Constraints를 이용하면 자동으로 조정 가능 하니까요.
태블릿 해상도 트렌드입니다.
820해상도부터 1334까지 다양한 태블릿 해상도가 존재하네요.
자 이젠 반응형 디자인에 필요한 브레이크포인트를 볼까요?
위에는 pc와 mobile을 합친 해상도 구요
아래는 pc와 tablet만 적용한 해상도 점유율 입니다.
반응형 작업 시 중요한 건
어떤 특정 뷰포트만 지정하는 것을 추천하진 않는다는 겁니다.
대신 자주 사용하는 해상도에서 더 완벽하게 보이도록 디자인을 조정하는거에요.
반응형 해상도 추천 기준 PC는 1920px를 기준으로 2560px까지 고려하면 되고
예를 들어 폰트사이즈를 조금 크게 작업한다던가 (실제로 요즘은 기본폰트 16px 고대로 작업하는 경우가 많죠)
가운데 inner사이즈를 크게 잡아준다던가 그래야 2560해상도에서 좌우 여백이 적겠죠
모바일은 min-width 기준 360까지는 작업하는게 좋고 저는 좌우 여백을 꼭 만드는 편인데요
20px을 두고 작업하면 가독성이 좋더라구요
body { font-size: 16px; }
@media (max-width: 1024px) { /* 태블릿 */
body { font-size: 14px; }
}
@media (max-width: 768px) { /* 모바일 */
body { font-size: 12px; }
}
마무리로 요약을 해보면
- 2560×1440 해상도가 증가하는 추세 → PC 디자인에서 고려 필요
- 아이폰 14~16 Pro 사용 증가 → 393×852 해상도 중심으로 모바일 디자인 최적화
- 안드로이드(갤럭시 S)에서는 360×780 해상도가 중요
- Figma Constraints를 적극 활용하여 iOS & 안드로이드 대응 가능
- 반응형 디자인 시 min-width 360까지 체크하고 디자인 & 여백(20px) 활용 추천
앞으로도 다양한 해상도 트렌드를 반영한 반응형 디자인이 중요합니다!
디자인 & 개발자 모두 함께 고민하는 것이 가장 좋은 UX/UI를 만드는 길입니다 😊
'UIUX디자인 > 디자인' 카테고리의 다른 글
| UX Design - 디자이너를 위한 접근성 연구 가이드 (1) | 2024.12.24 |
|---|---|
| 구글 머터리얼 디자인 - 접근성 (0) | 2024.12.23 |
| 구글 머터리얼 디자인 - Sound and motion (1) | 2024.12.22 |
| 구글 머터리얼 디자인 - Imagery (1) | 2024.12.21 |
| 구글 머터리얼 디자인 - 접근성 텍스트 (2) | 2024.12.09 |