반응형 웹사이트를 만들고 있는데 특정 해상도에서 레이아웃이 깨진다는 피드백이 왔다. 내 모니터에서는 잘 보이는데, 상대방 화면이 몇 픽셀인지부터 확인해야 원인을 찾을 수 있다.
해상도, 뷰포트, DPR 차이
- 모니터 해상도 (Screen Resolution)
- 모니터가 물리적으로 표현할 수 있는 총 픽셀 수. 예: 1920 × 1080. 운영체제 디스플레이 설정에서 확인할 수 있다.
- 브라우저 뷰포트 (Viewport)
- 브라우저 안에서 콘텐츠가 표시되는 영역. 주소창, 탭, 북마크바를 제외한 순수 콘텐츠 영역의 크기다. CSS 미디어 쿼리가 참조하는 값이 이것이다.
- DPR (Device Pixel Ratio)
- CSS 1px이 실제 몇 개의 물리 픽셀에 대응하는지를 나타낸다. 레티나 디스플레이는 DPR 2, 일반 모니터는 DPR 1이다.
주요 기기별 해상도
| 기기 | 해상도 | 뷰포트 너비 |
|---|---|---|
| iPhone 15 | 2556 × 1179 | 393px (DPR 3) |
| Galaxy S24 | 2340 × 1080 | 360px (DPR 3) |
| iPad Air | 2360 × 1640 | 820px (DPR 2) |
| MacBook Air 13" | 2560 × 1664 | 1280px (DPR 2) |
| FHD 모니터 | 1920 × 1080 | 1920px (DPR 1) |
물리 해상도가 2556px인 아이폰이 뷰포트 너비는 393px인 이유가 DPR 때문이다. CSS에서 width: 393px이면 화면 전체 너비와 같다.
반응형 브레이크포인트 기준
- 480px 이하: 모바일 세로 모드
- 768px 이하: 태블릿 세로 / 모바일 가로
- 1024px 이하: 태블릿 가로 / 소형 노트북
- 1280px 이상: 데스크톱
TIP 반응형 디자인을 테스트할 때 브라우저 개발자 도구(F12)의 기기 모드보다 실제 창 크기를 줄여보는 게 더 정확한 경우가 있다. 현재 뷰포트가 정확히 몇 px인지 화면 크기 확인 도구에서 실시간으로 확인하면서 창을 줄이면 어느 지점에서 레이아웃이 깨지는지 바로 포착할 수 있다.
"이 화면에서 깨져요"라는 피드백을 받으면, 먼저 상대방의 해상도와 뷰포트를 확인하고, 그 크기에서 디버깅하는 게 가장 빠른 해결 순서다.