내 모니터 해상도 확인하는 법, 화면 크기와 뷰포트 차이

새 모니터를 샀는데 스펙에 "2560×1440"이라고 적혀 있다. 그런데 윈도우 디스플레이 설정에서는 "배율 125%"로 되어 있고, 브라우저에서 확인하면 또 다른 숫자가 나온다. 해상도, 뷰포트, 논리 픽셀이 각각 다르기 때문이다.

해상도, 뷰포트, DPR은 어떻게 다른가

화면 해상도 (Screen Resolution)

모니터의 물리적 픽셀 수. 예: 2560×1440은 가로 2,560개, 세로 1,440개의 점으로 화면을 구성한다는 뜻이다.

뷰포트 (Viewport)

브라우저가 웹페이지를 그리는 영역의 크기. 주소창, 탭, 북마크바를 뺀 순수 콘텐츠 영역이다. 같은 해상도라도 브라우저 창 크기에 따라 달라진다.

DPR (Device Pixel Ratio)

논리 픽셀 1개를 물리 픽셀 몇 개로 표시하는지의 비율. 윈도우 배율 150%이면 DPR이 1.5다. 레티나 디스플레이는 DPR 2 이상이다.

2560×1440 모니터에서 배율 125%(DPR 1.25)를 쓰면, 브라우저가 인식하는 논리 해상도는 2048×1152가 된다. CSS에서 width: 1000px이라고 쓰면 이 논리 픽셀 기준이다.

내 화면 정보 확인하는 법

윈도우 설정에서도 확인할 수 있지만, 브라우저 뷰포트 크기와 DPR은 표시되지 않는다. 화면 크기 확인 도구에 접속하면 모니터 해상도, 브라우저 뷰포트 크기, DPR, 색상 깊이, 터치 지원 여부까지 한 화면에 표시된다. 창 크기를 조절하면 수치가 실시간으로 변하기 때문에 반응형 테스트할 때도 유용하다.

반응형 웹 개발에서 왜 중요한가

반응형 웹은 화면 크기에 따라 레이아웃이 바뀐다. CSS 미디어 쿼리에서 기준이 되는 건 물리 해상도가 아니라 뷰포트 크기다.

TIP 아이폰 15 Pro의 물리 해상도는 2556×1179지만, DPR이 3이라서 CSS 뷰포트는 852×393으로 인식된다. 반응형 디자인을 할 때는 항상 논리 픽셀(CSS 픽셀) 기준으로 작업해야 한다.

흔한 해상도 관련 문제

• 이미지가 흐릿하다: DPR 2인 화면에서 1x 이미지를 쓰면 두 배로 늘어나서 뿌옇게 보인다. 2x 이미지를 준비하거나 SVG를 쓰면 해결된다.
• 레이아웃이 깨진다: 특정 해상도에서만 레이아웃이 틀어지는 건 브레이크포인트 사이 빈 구간이 있기 때문이다. 실제 기기의 뷰포트 크기를 확인하고 미디어 쿼리를 조정해야 한다.
• 윈도우 배율 문제: 배율 125%에서 1px 선이 흐려지는 건 물리 픽셀에 딱 맞지 않기 때문이다. border: 0.5px 대신 transform: scaleY(0.8) 같은 트릭을 쓰기도 한다.

웹 개발자라면 본인의 개발 환경 해상도를 정확히 알고 있어야 한다. 사용자 기기와 내 기기의 차이를 인식하는 것이 반응형 디자인의 출발점이다.