내 모니터 해상도 확인, 화면 크기와 DPR 쉽게 알아보기

모니터를 새로 샀는데 스펙표에 적힌 해상도가 실제로 맞는지 궁금하다. 또는 반응형 웹을 만드는 중에 지금 브라우저 창이 정확히 몇 픽셀인지 알아야 한다. 설정 메뉴를 뒤지는 것보다 빠른 방법이 있다.

화면 해상도와 브라우저 창 크기는 다르다

많은 사람이 화면 해상도와 브라우저 창 크기를 같은 것으로 생각하지만, 둘은 다른 개념이다.

화면 해상도 (Screen Resolution)

모니터 전체의 픽셀 수다. 1920x1080이면 가로 1920, 세로 1080 픽셀. 윈도우 디스플레이 설정에서 변경할 수 있다.

브라우저 창 크기 (Viewport)

현재 열린 브라우저 창의 내부 영역 크기다. 전체화면이 아니면 화면 해상도보다 작다. 반응형 웹 개발에서 기준이 되는 값이다.

DPR (Device Pixel Ratio)

논리 픽셀 대비 실제 물리 픽셀의 비율이다. 레티나 디스플레이는 DPR이 2 이상이라, CSS의 1px이 실제로는 2~3개의 물리 픽셀로 표현된다.

기기별 화면 해상도 비교

같은 모니터라도 윈도우 배율 설정(125%, 150%)에 따라 브라우저가 인식하는 뷰포트 크기가 달라진다. 1920x1080 모니터에 배율 150%를 적용하면 뷰포트는 1280x720이 된다.

내 화면 정보 확인하는 법

화면 크기 확인 도구에 접속하면 브라우저 창 크기, 화면 해상도, DPR, 색상 깊이, 터치 지원 여부가 실시간으로 표시된다. 브라우저 창 크기를 줄이거나 늘리면 숫자가 즉시 바뀌어서 반응형 브레이크포인트를 테스트할 때 유용하다.

반응형 웹 개발에서 해상도가 중요한 이유

• 브레이크포인트 설정 — CSS 미디어 쿼리에서 768px, 1024px, 1440px 같은 기준점을 정할 때 실제 기기 뷰포트 크기를 참고해야 한다.
• 이미지 최적화 — DPR이 2인 기기에서는 2배 크기 이미지를 제공해야 선명하게 보인다. srcset 속성으로 대응한다.
• 폰트 크기 조정 — 모바일에서 16px 폰트가 데스크톱과 같은 크기로 보이지 않을 수 있다. DPR과 뷰포트를 고려해서 조정해야 한다.

TIP 크롬 개발자 도구(F12)에서도 뷰포트 크기를 확인할 수 있지만, 실제 사용자 환경(배율, DPR)을 정확히 반영하지 못하는 경우가 있다. 실제 기기에서 확인하는 게 가장 정확하다.

내 모니터가 진짜 4K인지, 브라우저 창이 정확히 몇 픽셀인지 알고 싶으면 접속 한 번이면 된다.