듀얼 모니터를 새로 샀는데 바탕화면 배경이 흐릿하게 나온다. 원인은 해상도에 맞지 않는 이미지를 쓰고 있기 때문이다. 내 모니터가 FHD(1920×1080)인지 QHD(2560×1440)인지 정확히 확인하려면 설정을 뒤져볼 수도 있지만, 웹 브라우저에서 바로 보는 방법이 더 빠르다.
화면 해상도 vs 브라우저 뷰포트 vs DPR
세 가지가 헷갈리는 사람이 많다. 각각 의미하는 바가 다르다.
- 화면 해상도 (Screen Resolution)
- 모니터의 물리적 픽셀 수다. 1920×1080이면 가로 1920개, 세로 1080개 픽셀이 있다는 뜻이다.
- 브라우저 뷰포트 (Viewport)
- 웹 콘텐츠가 실제로 표시되는 영역이다. 브라우저의 주소창, 탭, 북마크바를 제외한 안쪽 영역의 크기다. 같은 모니터라도 브라우저 창 크기에 따라 달라진다.
- DPR (Device Pixel Ratio)
- CSS 픽셀 1개가 물리 픽셀 몇 개에 대응하는지를 나타내는 비율이다. 맥북 레티나 디스플레이는 DPR이 2라서, CSS 상 1px이 실제로는 물리 픽셀 2×2=4개를 쓴다.
자주 쓰는 해상도 정리
| 이름 | 해상도 | 비율 | 대표 기기 |
|---|---|---|---|
| HD | 1366×768 | 16:9 | 저가 노트북 |
| FHD | 1920×1080 | 16:9 | 일반 모니터, 노트북 |
| QHD | 2560×1440 | 16:9 | 27인치 모니터 |
| 4K UHD | 3840×2160 | 16:9 | 고급 모니터, TV |
| iPhone 15 | 1179×2556 | 19.5:9 | 스마트폰 |
내 화면 크기 확인하는 법
화면 크기 확인 도구에 접속하면 페이지가 열리는 순간 현재 브라우저 창 크기, 모니터 해상도, 뷰포트 크기, DPR이 모두 표시된다. 브라우저 창 크기를 바꾸면 실시간으로 숫자가 변하니까, 반응형 웹 개발 시 브레이크포인트를 잡을 때 유용하다.
개발자가 해상도를 알아야 하는 이유
- 반응형 디자인: 뷰포트 크기에 따라 레이아웃이 바뀌는 CSS 미디어 쿼리를 작성하려면 실제 뷰포트 값을 알아야 한다
- 이미지 최적화: DPR 2인 기기에서 선명한 이미지를 보여주려면 2배 크기 이미지를 준비해야 한다
- QA 테스트: 다양한 해상도에서 깨지는 UI가 없는지 확인할 때 현재 화면 정보가 기준점이 된다
TIP 크롬 개발자 도구(F12)에서 디바이스 모드를 켜면 특정 기기의 해상도를 시뮬레이션할 수 있다. 하지만 실제 DPR과 터치 동작까지 완벽하게 재현하지는 못하므로 최종 확인은 실기기에서 하는 게 좋다.
모니터 구매, 바탕화면 설정, 웹 개발까지, 화면 해상도를 정확히 아는 것이 출발점이다. 한 번 확인해두면 두고두고 쓸 일이 있다.