새 모니터를 샀는데 배경화면이 흐릿하게 보인다. 이미지 해상도가 모니터 해상도보다 낮아서 생기는 현상이다. 그런데 내 모니터 해상도가 정확히 얼마인지 모르겠다면, 확인부터 해야 한다.
해상도와 관련된 용어 정리
- 화면 해상도 (Screen Resolution)
- 모니터가 표시할 수 있는 총 픽셀 수다. 1920×1080이면 가로 1920개, 세로 1080개의 점으로 화면을 구성한다.
- 브라우저 뷰포트 (Viewport)
- 웹 페이지가 실제로 표시되는 영역의 크기다. 브라우저의 주소창, 탭, 스크롤바를 제외한 순수 콘텐츠 영역이다. 화면 해상도보다 항상 작다.
- DPR (Device Pixel Ratio)
- CSS 1px이 실제 몇 개의 물리 픽셀에 대응하는지를 나타낸다. 일반 모니터는 1, 레티나 디스플레이(맥북)는 2, 최신 스마트폰은 3 이상이다.
주요 기기별 해상도 비교
| 기기 | 해상도 | DPR | CSS 뷰포트 |
|---|---|---|---|
| FHD 모니터 | 1920×1080 | 1 | 1920×1080 |
| QHD 모니터 | 2560×1440 | 1 | 2560×1440 |
| 4K 모니터 | 3840×2160 | 1.5~2 | 2560×1440 또는 1920×1080 |
| 맥북 프로 14" | 3024×1964 | 2 | 1512×982 |
| 아이폰 15 Pro | 2556×1179 | 3 | 393×852 |
4K 모니터가 3840×2160인데 실제로 웹사이트가 FHD처럼 보이는 건, 운영체제가 배율(DPR)을 높여서 글씨와 아이콘이 너무 작아지는 걸 막기 때문이다.
내 해상도를 확인하는 방법
Windows에서
- 바탕화면 우클릭 → 디스플레이 설정
- "디스플레이 해상도" 항목에서 현재 설정값 확인
- "배율 및 레이아웃"에서 현재 DPR(100% = 1, 150% = 1.5) 확인
Mac에서
- 시스템 설정 → 디스플레이
- 해상도 옵션에서 현재 설정 확인 ("기본값" 또는 "확장")
브라우저에서 바로 확인
화면 크기 확인 도구에 접속하면 별도 설정 없이 모니터 해상도, 브라우저 뷰포트 크기, DPR, 색상 깊이, 터치 지원 여부가 실시간으로 표시된다. 브라우저 창 크기를 조절하면 뷰포트 수치가 바로 바뀌어서, 반응형 웹 개발할 때 브레이크포인트 테스트에 쓸 수 있다.
반응형 웹에서 해상도가 중요한 이유
웹사이트가 모바일, 태블릿, 데스크톱에서 다르게 보여야 한다면, 뷰포트 크기에 따라 CSS를 분기해야 한다.
| 브레이크포인트 | 대상 기기 | 일반적 CSS 기준 |
|---|---|---|
| ~480px | 스마트폰 (세로) | @media (max-width: 480px) |
| 481~768px | 태블릿 (세로) | @media (max-width: 768px) |
| 769~1024px | 태블릿 (가로) / 소형 노트북 | @media (max-width: 1024px) |
| 1025px~ | 데스크톱 | 기본 스타일 |
TIP 반응형 테스트를 할 때 브라우저 개발자 도구(F12)의 디바이스 모드를 쓸 수도 있지만, 실제 뷰포트 수치를 숫자로 확인하면서 작업하면 브레이크포인트를 더 정확하게 잡을 수 있다.
배경화면 하나 고르는 것부터 반응형 웹 개발까지, 시작점은 내 화면이 몇 픽셀인지 아는 것이다.