CSS 미디어 쿼리를 적용했는데 특정 해상도에서 레이아웃이 어긋난다. 개발자 도구를 열어봐도 브라우저 창 크기와 뷰포트 크기가 다르게 나오고, 내 모니터 실제 해상도가 몇인지도 헷갈린다.
화면 크기와 해상도, 뭐가 다른가
흔히 혼동하는 세 가지 값을 구분할 필요가 있다.
- 모니터 해상도 (Screen Resolution)
- 모니터 전체의 물리적 픽셀 수. 1920×1080이면 가로 1920개, 세로 1080개 픽셀이 있다는 뜻이다.
- 브라우저 창 크기 (Window Size)
- 현재 브라우저 창이 차지하는 픽셀 크기. 전체 화면이 아니면 모니터 해상도보다 작다.
- 뷰포트 (Viewport)
- 웹 콘텐츠가 실제로 렌더링되는 영역. 브라우저 창에서 주소창, 탭바, 스크롤바를 뺀 공간이다.
CSS에서 100vw는 뷰포트 너비 기준이다. 모니터 해상도와 혼동하면 레이아웃 계산이 틀어진다.
DPR이 중요한 이유
DPR(Device Pixel Ratio)은 CSS 1px이 실제 몇 개의 물리 픽셀에 대응하는지를 나타낸다. 맥북 레티나 디스플레이는 DPR이 2이므로 CSS 상으로 1440px이지만 실제로는 2880px을 사용한다.
| 기기 | 해상도 | CSS 크기 | DPR |
|---|---|---|---|
| Full HD 모니터 | 1920×1080 | 1920×1080 | 1 |
| MacBook Pro 14" | 3024×1964 | 1512×982 | 2 |
| iPhone 14 | 1170×2532 | 390×844 | 3 |
| 4K 모니터 (150% 배율) | 3840×2160 | 2560×1440 | 1.5 |
이미지가 흐릿하게 보인다면 DPR을 고려하지 않아서일 가능성이 높다. DPR 2인 환경에서 선명하게 보이려면 표시 크기의 2배 해상도 이미지가 필요하다.
지금 내 화면 크기 확인하기
화면 크기 확인 도구를 열면 모니터 해상도, 브라우저 창 크기, 뷰포트 크기, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 표시된다. 창 크기를 조절하면 숫자가 실시간으로 바뀌니, 반응형 브레이크포인트를 잡을 때 유용하다. iPhone SE부터 4K 모니터까지 주요 기기 해상도와 비교하는 테이블도 있어서 내 화면이 어떤 기기와 비슷한 크기인지 바로 파악된다.
반응형 웹 작업할 때 알아두면 좋은 것들
- 768px: 태블릿 세로 모드 기준. 많은 CSS 프레임워크가 이 지점에서 레이아웃을 전환한다
- 1024px: 태블릿 가로/소형 노트북 기준. 사이드바 표시 여부를 결정하는 경우가 많다
- 1440px: 데스크톱 표준. 대부분의 웹사이트 최대 콘텐츠 폭은 이 근처에서 설정된다
- scrollbar 차이: Windows는 스크롤바가 뷰포트 안쪽에 생겨 너비를 줄인다. macOS는 오버레이 스크롤바라 뷰포트에 영향을 주지 않는다
TIP 크롬 개발자 도구의 기기 모드(Ctrl+Shift+M)에서 해상도를 바꿀 수 있지만, 실제 기기에서의 DPR과 폰트 렌더링까지 재현하지는 못한다. 최종 확인은 실기기에서 하는 게 안전하다.
자주 묻는 질문
Windows 디스플레이 설정에서 배율이 150%인데, 내 해상도가 달라 보여요
Windows 배율 설정은 DPR에 해당한다. 4K 모니터(3840×2160)에 150% 배율을 적용하면 CSS 기준으로는 2560×1440처럼 동작한다. 모니터의 물리적 해상도는 변하지 않지만, 브라우저가 인식하는 크기가 달라진다.
모바일에서도 확인할 수 있나요?
가능하다. 모바일 브라우저에서 접속하면 해당 기기의 뷰포트 크기, 해상도, DPR이 표시된다. 기기를 가로로 돌리면 방향 정보도 실시간으로 바뀐다.
듀얼 모니터일 때는 어떻게 되나요?
브라우저 창이 위치한 모니터의 해상도가 표시된다. 창을 다른 모니터로 옮기면 해당 모니터의 해상도로 값이 바뀐다.
브레이크포인트 하나 잘못 잡아서 특정 기기에서 콘텐츠가 잘리는 일은 피해야 한다. 내 화면이 지금 몇 픽셀인지부터 정확히 알고 시작하면 반응형 작업이 한결 수월해진다.