온라인으로 벽지를 주문하는데 "모니터 해상도에 따라 색상이 다르게 보일 수 있습니다"라고 적혀 있다. 내 모니터 해상도가 몇인지 모르면 이 경고가 나한테 해당되는 건지 판단이 안 된다. 개발자라면 브라우저 뷰포트 크기까지 신경 써야 하고, 디자이너는 DPR을 확인해야 레티나 대응 이미지를 제대로 만들 수 있다.
해상도, 뷰포트, 창 크기의 차이
- 모니터 해상도 (Screen Resolution)
- 모니터 자체의 물리적 픽셀 수. 1920×1080이면 가로 1920개, 세로 1080개의 점으로 화면을 표시한다는 뜻이다. OS 설정의 "디스플레이 해상도"에서 확인할 수 있다.
- 브라우저 창 크기 (Window Size)
- 브라우저 창의 실제 크기. 전체 화면이 아니면 모니터 해상도보다 작다. 주소창, 북마크바, 탭 영역도 포함된다.
- 뷰포트 (Viewport)
- 웹 콘텐츠가 실제로 표시되는 영역. 브라우저 창에서 주소창, 스크롤바 등 UI 요소를 뺀 순수 콘텐츠 영역이다. 반응형 웹에서 미디어 쿼리가 참조하는 값이 바로 이것이다.
DPR이 뭔가
DPR(Device Pixel Ratio)은 CSS 픽셀 1개가 실제 물리 픽셀 몇 개에 해당하는지를 나타내는 비율이다.
| 기기 | 물리 해상도 | DPR | CSS 해상도 |
|---|---|---|---|
| 일반 모니터 | 1920×1080 | 1 | 1920×1080 |
| 맥북 프로 14" | 3024×1964 | 2 | 1512×982 |
| 아이폰 15 Pro | 2556×1179 | 3 | 852×393 |
DPR이 2인 레티나 디스플레이에서 CSS 100px짜리 이미지를 선명하게 보여주려면 원본이 200px이어야 한다. DPR을 모르고 이미지를 만들면 고해상도 기기에서 흐릿하게 보인다.
반응형 웹 개발에서 왜 중요한가
CSS 미디어 쿼리는 뷰포트 너비를 기준으로 동작한다. 같은 모니터라도 브라우저 창을 줄이면 뷰포트가 바뀌면서 모바일 레이아웃으로 전환될 수 있다.
- 320~480px: 모바일
- 481~768px: 태블릿
- 769~1024px: 작은 노트북
- 1025px 이상: 데스크톱
개발 중에 "내 화면에서는 잘 보이는데 다른 기기에서 깨진다"는 보고가 들어오면, 뷰포트 크기와 DPR을 먼저 확인해야 한다.
내 화면 정보 바로 확인하기
화면 크기 확인 도구에 접속하면 브라우저 창 크기, 모니터 해상도, 뷰포트, DPR, 색상 깊이, 터치 지원 여부가 실시간으로 표시된다. 창 크기를 줄이거나 늘리면 수치가 즉시 바뀌기 때문에 반응형 브레이크포인트를 테스트할 때도 유용하다. 아이폰, 아이패드, 4K 모니터 등 주요 기기의 해상도와 비교하는 기능도 있어서, 지금 내 환경이 어떤 기기와 비슷한 수준인지 한눈에 파악할 수 있다.
화면 정보는 디자인이나 개발뿐 아니라 모니터 구매, 외부 디스플레이 연결 설정, 게임 그래픽 옵션 조정에서도 필요한 기본 정보다.