CSS 미디어쿼리를 작성하는데 내 브라우저의 뷰포트 크기가 정확히 몇 픽셀인지 모른다. 모니터는 1920x1080인데 개발자 도구에서 보면 숫자가 다르다. 해상도와 뷰포트는 다른 개념이기 때문이다.
해상도, 뷰포트, DPR 차이
- 모니터 해상도 (Screen Resolution)
- 모니터가 물리적으로 표시할 수 있는 픽셀 수. 1920x1080이면 가로 1,920개, 세로 1,080개의 점으로 구성된다.
- 뷰포트 (Viewport)
- 브라우저에서 웹 콘텐츠가 실제로 표시되는 영역. 주소창, 탭, 스크롤바를 제외한 크기라서 모니터 해상도보다 작다.
- DPR (Device Pixel Ratio)
- CSS 1px을 표현하는 데 실제 몇 개의 물리 픽셀을 쓰는지 나타내는 비율. 맥북 레티나 디스플레이는 DPR 2, 일반 모니터는 DPR 1이다.
예시 맥북 프로 14인치: 물리 해상도 3024x1964, DPR 2, CSS 기준 해상도 1512x982. CSS에서 width: 100px이면 실제로는 200개의 물리 픽셀을 사용한다.
왜 정확한 크기가 중요한가
| 상황 | 필요한 정보 |
|---|---|
| 반응형 CSS 작성 | 뷰포트 크기 (미디어쿼리 breakpoint 설정) |
| 이미지 최적화 | DPR (2x, 3x 이미지 제공 여부 결정) |
| 스크린샷 크기 맞춤 | 뷰포트 크기 (정확한 캡처 영역) |
| 모니터 구매 검토 | 물리 해상도 (FHD, QHD, 4K 확인) |
| 디자인 시안 확인 | 뷰포트 + DPR (실제 렌더링 기준) |
내 화면 정보 바로 확인하기
개발자 도구(F12)를 열어 window.innerWidth와 screen.width를 콘솔에 입력하면 값이 나오지만 번거롭다. 화면 크기 확인 도구에 접속하면 브라우저 창 크기, 모니터 해상도, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 나온다. 브라우저 창 크기를 줄이거나 늘리면 실시간으로 수치가 변하니까 미디어쿼리 breakpoint를 테스트할 때 유용하다.
자주 쓰이는 기기별 해상도
| 기기 | 해상도 | DPR |
|---|---|---|
| iPhone 15 | 1179x2556 | 3 |
| Galaxy S24 | 1080x2340 | 2.625 |
| iPad Air | 2360x1640 | 2 |
| FHD 모니터 | 1920x1080 | 1 |
| 4K 모니터 | 3840x2160 | 1.5~2 |
반응형 웹을 만들 때 모든 기기에서 테스트하기 어려우니, 최소한 모바일(375px), 태블릿(768px), 데스크톱(1280px) 세 구간의 뷰포트에서 레이아웃이 깨지지 않는지 확인하는 것이 기본이다.