27인치 모니터 두 개를 나란히 놓았는데, 한쪽이 훨씬 선명하다. 크기는 같은데 해상도가 다르기 때문이다. 한쪽은 1920×1080(FHD), 다른 한쪽은 2560×1440(QHD). 같은 면적에 픽셀이 더 많이 들어갈수록 글씨와 이미지가 또렷하게 보인다.
해상도, 뷰포트, DPR 차이
화면 관련 숫자가 여러 개라 헷갈리기 쉽다. 핵심만 정리하면 이렇다.
- 모니터 해상도 (Screen Resolution)
- 모니터가 물리적으로 표현할 수 있는 총 픽셀 수. 1920×1080이면 가로 1,920개, 세로 1,080개의 점으로 화면을 구성한다.
- 뷰포트 (Viewport)
- 브라우저에서 웹 콘텐츠가 실제로 표시되는 영역 크기. 주소창, 북마크바, 작업표시줄을 제외한 나머지 공간이다.
- DPR (Device Pixel Ratio)
- CSS 1px을 표현하는 데 쓰이는 물리적 픽셀 수. DPR 2x라면 CSS 1px = 물리 2×2 = 4개 픽셀. 레티나 디스플레이가 선명한 이유다.
일반 기기별 해상도 비교
| 기기 | 해상도 | DPR |
|---|---|---|
| FHD 모니터 | 1920×1080 | 1x |
| QHD 모니터 | 2560×1440 | 1x |
| 4K 모니터 | 3840×2160 | 1.5~2x |
| iPhone 15 Pro | 1179×2556 | 3x |
| iPad Pro 12.9 | 2048×2732 | 2x |
TIP 4K 모니터에서 DPR이 2x로 설정되어 있으면, 운영체제가 표시하는 해상도는 1920×1080처럼 보인다. 실제 물리 해상도는 3840×2160이지만, 글씨를 읽을 수 있는 크기로 스케일링한 결과다.
내 화면 정보 확인하는 법
윈도우 설정이나 시스템 정보에서 찾을 수도 있지만, 브라우저 뷰포트나 DPR까지 한 번에 확인하려면 화면 크기 확인 도구가 빠르다. 접속하는 순간 모니터 해상도, 브라우저 창 크기, DPR, 색상 깊이, 터치 지원 여부가 자동으로 표시된다. 창 크기를 조절하면 숫자가 실시간으로 바뀌니, 반응형 웹 개발 시 브레이크포인트를 테스트할 때 유용하다.
해상도 숫자가 높다고 무조건 좋은 건 아니다. 화면 크기, DPR, 사용 거리를 함께 고려해야 체감 선명도가 결정된다. 내 화면이 어떤 스펙인지 한 번 확인해두면, 모니터를 고르거나 디자인 작업을 할 때 기준이 생긴다.