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

디자이너에게 "네 모니터 해상도가 뭐야?"라는 질문을 받았는데 바로 대답을 못 했다. 1920x1080인 것 같기도 하고, 윈도우 배율을 150%로 쓰고 있어서 실제 해상도와 보이는 크기가 다를 수도 있다. 해상도, 뷰포트, DPR은 각각 다른 개념이라 한 번 정리해둘 필요가 있다.

해상도 vs 뷰포트 vs DPR, 뭐가 다른가

화면 해상도 (Screen Resolution)

모니터가 물리적으로 표시할 수 있는 픽셀 수. 1920x1080이면 가로 1920개, 세로 1080개의 점으로 화면을 구성한다.

뷰포트 (Viewport)

브라우저 안에서 웹 페이지가 실제로 보이는 영역의 크기. 주소창, 탭, 북마크바를 뺀 나머지 부분이다. 같은 모니터라도 브라우저 창 크기에 따라 뷰포트가 달라진다.

DPR (Device Pixel Ratio)

CSS 1px을 표현하는 데 실제 몇 개의 물리 픽셀을 쓰는지의 비율. DPR 2이면 CSS 1px이 실제 2x2=4개의 물리 픽셀로 그려진다. 레티나 디스플레이가 DPR 2~3이다.

예시 MacBook Pro 14인치는 물리 해상도가 3024x1964이지만 DPR이 2라서 CSS 해상도는 1512x982로 동작한다. 텍스트와 UI가 작아지지 않으면서도 선명하게 보이는 이유다.

주요 기기별 해상도 정리

내 해상도 확인하는 방법

Windows 설정에서

1. 바탕화면 우클릭 → 디스플레이 설정
2. "디스플레이 해상도" 항목 확인
3. "배율" 항목이 DPR에 해당 (100%=1, 150%=1.5)

Mac에서

1. Apple 메뉴 → 시스템 설정 → 디스플레이
2. 해상도 옵션 확인

브라우저에서 바로 확인

설정 화면을 뒤질 필요 없이 화면 크기 확인 도구에 접속하면 모니터 해상도, 브라우저 뷰포트 크기, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 나온다. 브라우저 창 크기를 조절하면 뷰포트 값이 실시간으로 바뀌니까 반응형 브레이크포인트를 테스트할 때도 유용하다. 주요 기기(iPhone, iPad, MacBook 등)와 내 화면 크기를 비교하는 표도 제공된다.

반응형 디자인에서 왜 중요한가

반응형 웹은 뷰포트 너비에 따라 레이아웃을 바꾸는 방식이다. 주로 쓰이는 브레이크포인트는 이렇다.

• 360~414px: 모바일
• 768px: 태블릿
• 1024px: 작은 노트북
• 1280px: 데스크톱
• 1920px: 대형 모니터

DPR을 고려하지 않으면 레티나 디스플레이에서 이미지가 흐릿하게 보이는 문제가 생긴다. DPR 2 이상인 기기에는 원본 해상도의 2배 크기 이미지를 제공하는 게 일반적이다.

모니터 해상도와 뷰포트가 같은 개념이라고 착각하면 반응형 레이아웃에서 예상 못 한 결과가 나온다. 세 가지 수치를 구분해서 이해하면 화면 관련 이슈를 더 빠르게 잡을 수 있다.