내 모니터 해상도 확인하는 법 (화면 크기, DPR 측정)

새 모니터를 샀는데 스펙표에 적힌 해상도가 실제와 맞는지 확인하고 싶을 때, 윈도우 디스플레이 설정을 열면 "배율 150%"가 적용되어 있어서 실제 픽셀 수가 헷갈린다. 브라우저에서 바로 측정하면 배율과 관계없이 정확한 수치를 알 수 있다.

해상도, 뷰포트, DPR의 차이

화면 해상도 (Screen Resolution)

모니터가 실제로 가진 물리적 픽셀 수. 예를 들어 1920×1080이면 FHD, 2560×1440이면 QHD다.

뷰포트 (Viewport)

브라우저 창에서 콘텐츠가 표시되는 영역의 크기. 메뉴바, 즐겨찾기 바 등을 제외한 순수 표시 영역이다. 창 크기를 줄이면 뷰포트도 같이 줄어든다.

DPR (Device Pixel Ratio)

CSS 1px을 렌더링하는 데 쓰이는 물리 픽셀 수. DPR이 2면 CSS 1px이 물리 2×2 = 4px로 표시된다. 맥북 레티나 디스플레이가 대표적인 DPR 2 기기다.

내 화면 정보 확인하기

화면 크기 확인 도구에 접속하면 현재 브라우저 창 크기와 모니터 해상도가 실시간으로 표시된다. 창 크기를 조절하면 숫자가 바로 바뀌니 반응형 브레이크포인트 테스트에도 쓸 수 있다. DPR, 색상 깊이, 터치 지원 여부까지 나오기 때문에 기기별 환경을 파악하기에 좋다.

주요 기기별 해상도 비교

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

CSS 미디어 쿼리의 기준은 물리 해상도가 아니라 뷰포트 크기다. FHD 모니터에서 브라우저를 반쪽만 열면 뷰포트는 약 960px이 되고, 태블릿용 레이아웃이 적용될 수 있다. 개발할 때 특정 뷰포트 크기에서 레이아웃이 깨지는지 확인하려면 창 크기를 실시간으로 보면서 조절하는 게 가장 확실하다.

TIP 윈도우에서 배율을 150%로 설정하면 1920×1080 모니터의 CSS 해상도가 1280×720으로 줄어든다. "해상도는 FHD인데 왜 콘텐츠가 크게 보이지?"라는 의문이 들면 배율 설정을 확인하자.