CSS에서 max-width: 768px로 태블릿 브레이크포인트를 잡았는데 실제 태블릿에서 레이아웃이 깨졌다. 기기마다 뷰포트 크기가 다르고, 같은 해상도라도 DPR(디바이스 픽셀 비율)에 따라 렌더링되는 크기가 달라지기 때문이다. 반응형 작업을 하려면 내 화면이 실제로 몇 픽셀인지부터 확인해야 한다.
해상도, 뷰포트, DPR의 차이
- 모니터 해상도
- 디스플레이의 물리적 픽셀 수. 1920x1080이면 Full HD, 3840x2160이면 4K다.
- 뷰포트(Viewport)
- 브라우저가 웹페이지를 그리는 영역의 크기. 툴바, 즐겨찾기 바, 개발자 도구 등을 열면 뷰포트는 모니터 해상도보다 작아진다.
- DPR(Device Pixel Ratio)
- CSS 1px을 표현하는 데 물리적 픽셀이 몇 개 쓰이는지의 비율. 맥북 레티나 디스플레이는 DPR이 2라서 해상도가 2880x1800이지만 CSS 기준으로는 1440x900처럼 동작한다.
기기별 해상도 비교
| 기기 | 해상도 | 뷰포트(CSS) | DPR |
|---|---|---|---|
| iPhone 15 | 2556x1179 | 393x852 | 3 |
| iPad Air | 2360x1640 | 820x1180 | 2 |
| MacBook Pro 14" | 3024x1964 | 1512x982 | 2 |
| Full HD 모니터 | 1920x1080 | 1920x1080 | 1 |
| 4K 모니터 | 3840x2160 | 1920x1080(150%) | 2 |
같은 4K 모니터라도 Windows 배율 설정(100%, 125%, 150%)에 따라 뷰포트 크기가 달라진다. 반응형 브레이크포인트를 잡을 때 해상도가 아니라 뷰포트 기준으로 설정해야 하는 이유다.
내 화면 크기 바로 확인하기
개발자 도구(F12)에서도 확인할 수 있지만, 브라우저 창 크기와 모니터 해상도, DPR을 한눈에 보려면 화면 크기 측정 도구가 편하다. 접속하는 순간 뷰포트 크기, 모니터 해상도, 색상 깊이, 터치 지원 여부까지 자동으로 표시된다. 브라우저 창을 드래그해서 줄이면 숫자가 실시간으로 바뀌기 때문에 특정 브레이크포인트에서 레이아웃이 어떻게 변하는지 확인할 때 유용하다.
TIP 반응형 웹에서 흔히 쓰는 브레이크포인트는 모바일 480px, 태블릿 768px, 데스크톱 1024px이다. 이 숫자는 CSS 뷰포트 기준이므로, 물리적 해상도와 혼동하면 안 된다.
내 화면이 몇 픽셀인지 모르고 브레이크포인트를 잡으면 결국 실기기에서 다시 고치게 된다. 작업 전에 수치부터 확인하는 게 빠르다.