내 모니터 해상도 확인하는 법, 화면 크기가 중요한 이유

쿠팡에서 27인치 QHD 모니터를 샀다. 스펙에는 2560x1440이라고 적혀 있는데, 실제로 그 해상도로 출력되고 있는 건지 확인할 방법이 마땅치 않다. 윈도우 디스플레이 설정에서 볼 수 있긴 한데, 브라우저 뷰포트 크기나 DPR까지 알고 싶으면 다른 방법이 필요하다.

해상도와 뷰포트, 뭐가 다른가

윈도우에서 배율을 150%로 설정하면, 1920x1080 모니터의 뷰포트는 1280x720으로 줄어든다. 해상도는 그대로인데 뷰포트가 달라지는 거다. 웹 개발자라면 이 차이를 반드시 구분해야 한다.

Step 1. 접속만 하면 바로 나온다

화면 크기 확인 도구에 들어가면 별도 조작 없이 현재 브라우저 창 크기와 모니터 해상도가 큰 숫자로 표시된다. 창 크기를 드래그로 조절하면 수치가 실시간으로 바뀌기 때문에, 반응형 브레이크포인트를 눈으로 확인할 때도 쓸 만하다.

Step 2. 상세 정보 확인

아래쪽 상세 영역에서는 뷰포트 너비/높이, DPR, 색상 깊이(비트), 기기 방향(가로/세로), 터치 지원 여부까지 한눈에 볼 수 있다. 특히 DPR은 맥북 레티나(2x)와 일반 모니터(1x)를 구분하는 데 유용하다. 이미지를 2배 크기로 준비해야 하는지 판단하는 기준이 된다.

Step 3. 내 기기와 비교

하단 비교표에서 iPhone, iPad, MacBook, Full HD, 4K UHD 등 주요 기기의 해상도를 나란히 볼 수 있다. 현재 뷰포트와 일치하는 기기가 있으면 강조 표시된다. CSS 미디어 쿼리 브레이크포인트를 잡을 때 참고하기 좋다.

해상도 확인이 필요한 실제 상황

• 새 모니터 구매 후: 설정에서 권장 해상도가 아닌 낮은 해상도로 잡혀 있는 경우가 있다. 드라이버 설치 전에는 특히 그렇다.
• 반응형 웹 개발: 768px, 1024px, 1440px 등 브레이크포인트에서 레이아웃이 제대로 바뀌는지 뷰포트 크기를 보면서 테스트.
• 디자인 시안 전달: 디자이너에게 "내 화면에서는 이렇게 보인다"고 할 때, 정확한 해상도와 배율 정보가 있어야 소통이 된다.
• 외부 모니터 연결: 노트북에 모니터를 연결했을 때 실제로 어떤 해상도로 출력되는지 확인.

참고 같은 27인치라도 FHD(1920x1080)와 QHD(2560x1440)는 화면에 들어가는 정보량이 크게 다르다. 해상도가 높을수록 글자와 아이콘이 작아지니까, 적절한 배율 설정이 중요하다.

모니터 해상도는 한 번만 확인해두면 되지만, 브라우저 뷰포트는 창 크기를 바꿀 때마다 달라진다. 반응형 작업 중이라면 브라우저 옆에 띄워놓고 수시로 참고하는 게 편하다.