반응형 웹사이트를 만들었는데 클라이언트가 "제 화면에서는 레이아웃이 깨져요"라고 한다. 원인을 찾으려면 그 사람의 브라우저 창 크기와 해상도를 알아야 한다. 내 모니터에서는 잘 보이는데 다른 환경에서 깨지는 건 화면 크기 차이 때문인 경우가 대부분이다.
모니터 해상도와 브라우저 뷰포트, 뭐가 다른가
- 모니터 해상도 (Screen Resolution)
- 모니터 전체의 픽셀 수다. 1920x1080이면 가로 1920픽셀, 세로 1080픽셀. 모니터 설정에서 정해지며 브라우저와 무관하다.
- 뷰포트 (Viewport)
- 브라우저 창에서 웹 콘텐츠가 실제로 표시되는 영역이다. 주소창, 탭, 북마크바를 제외한 크기이므로 모니터 해상도보다 항상 작다.
CSS 미디어 쿼리에서 @media (max-width: 768px)같은 조건은 모니터 해상도가 아니라 뷰포트 크기를 기준으로 동작한다. 그래서 같은 모니터라도 브라우저 창을 줄이면 모바일 레이아웃이 적용된다.
내 화면 크기 확인하기
화면 크기 확인 도구에 접속하면 현재 브라우저 창 크기와 모니터 해상도가 실시간으로 표시된다. 창 크기를 줄이거나 늘리면 숫자가 바로 변한다.
추가로 확인할 수 있는 정보도 있다.
- DPR (Device Pixel Ratio) — CSS 1픽셀이 실제 몇 물리 픽셀로 렌더링되는지. 레티나 디스플레이는 DPR이 2 이상
- 색상 깊이 — 모니터가 표현할 수 있는 색상 범위 (보통 24비트)
- 기기 방향 — 가로(landscape) 또는 세로(portrait)
- 터치 지원 여부 — 터치스크린 기기인지 확인
주요 기기별 해상도 비교
| 기기 | 해상도 | 뷰포트 (CSS) | DPR |
|---|---|---|---|
| iPhone SE | 750x1334 | 375x667 | 2 |
| iPhone 14 | 1170x2532 | 390x844 | 3 |
| iPad Air | 1640x2360 | 820x1180 | 2 |
| Full HD 모니터 | 1920x1080 | 1920x1080 | 1 |
| 4K UHD 모니터 | 3840x2160 | 1920x1080* | 2 |
*4K 모니터는 보통 배율 200%로 설정하기 때문에 CSS 뷰포트는 Full HD와 동일하게 1920x1080이 된다.
반응형 디자인에서 꼭 확인할 브레이크포인트
일반적인 기준
- 모바일: ~767px
- 태블릿: 768px ~ 1023px
- 데스크톱: 1024px ~
- 와이드 데스크톱: 1440px ~
레이아웃이 깨지는 문제를 디버깅할 때는 클라이언트에게 화면 크기 확인 페이지 링크를 보내서 뷰포트 크기를 알려달라고 하면 빠르게 원인을 좁힐 수 있다.
반응형 웹 개발에서 화면 크기 확인은 디버깅의 첫 단계다. 문제가 특정 해상도에서만 발생하는지 파악하면, 미디어 쿼리 수정으로 대부분 해결할 수 있다.