반응형 웹을 만들다가 특정 해상도에서 레이아웃이 깨진다. 개발자 도구로 확인하려는데 내 모니터 해상도가 정확히 얼마인지, 지금 브라우저 창이 몇 픽셀인지 한눈에 보이지 않는다. 화면 크기와 관련된 숫자가 여러 개라 헷갈린다.
모니터 해상도와 브라우저 뷰포트, 뭐가 다른가
- 모니터 해상도 (Screen Resolution)
- 모니터 전체의 물리적 픽셀 수다. 1920x1080이면 가로 1920, 세로 1080 픽셀이다. OS 설정에서 확인할 수 있다.
- 브라우저 뷰포트 (Viewport)
- 웹 페이지가 실제로 표시되는 브라우저 내부 영역이다. 주소창, 탭, 북마크바를 빼면 모니터 해상도보다 작다. CSS 미디어 쿼리는 이 뷰포트 크기를 기준으로 동작한다.
- DPR (Device Pixel Ratio)
- 논리적 픽셀 1개에 대응하는 물리적 픽셀 수다. 맥북 레티나 디스플레이는 DPR이 2이므로, 해상도가 2880x1800이어도 CSS에서는 1440x900으로 인식된다.
내 화면 크기 확인하기
화면 크기 확인 도구에 접속하면 페이지가 열리는 순간 모니터 해상도, 브라우저 뷰포트, DPR, 색상 깊이가 한 화면에 표시된다. 브라우저 창 크기를 조절하면 뷰포트 수치가 실시간으로 바뀌어서 미디어 쿼리 브레이크포인트를 잡을 때 유용하다.
반응형 디자인에서 알아야 할 해상도
| 기기 | 일반적 해상도 | 뷰포트(CSS 기준) |
|---|---|---|
| 아이폰 15 | 2556x1179 | 393x852 (DPR 3) |
| 갤럭시 S24 | 2340x1080 | 360x780 (DPR 3) |
| 아이패드 Air | 2360x1640 | 820x1180 (DPR 2) |
| 풀HD 모니터 | 1920x1080 | 1920x1080 (DPR 1) |
| 맥북 Pro 14" | 3024x1964 | 1512x982 (DPR 2) |
TIP CSS 미디어 쿼리 브레이크포인트를 잡을 때 자주 쓰는 기준: 모바일 ~767px, 태블릿 768~1023px, 데스크톱 1024px 이상. 프레임워크마다 기준이 다르니 프로젝트에 맞게 조정하자.
DPR이 중요한 이유
DPR 2인 기기에 100x100 이미지를 넣으면 200x200 물리적 픽셀에 확대되어 보이기 때문에 흐릿하게 나올 수 있다. 레티나 대응을 하려면 실제 표시 크기의 2배 이미지를 준비하거나, srcset 속성으로 기기에 맞는 이미지를 제공해야 한다.
- DPR 1 : 일반 모니터. 이미지 1배 사이즈로 충분하다
- DPR 2 : 레티나 디스플레이. 이미지를 2배로 준비해야 선명하다
- DPR 3 : 최신 스마트폰. 3배 이미지가 이상적이지만 2배로도 대부분 충분하다
반응형 작업을 할 때 "내 모니터에서는 잘 보이는데"라는 말만큼 위험한 게 없다. 기기별 뷰포트와 DPR을 알고 있어야 다양한 환경에서 깨지지 않는 레이아웃을 만들 수 있다.