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

모니터를 새로 연결하거나 반응형 웹 작업을 할 때, 내 화면이 정확히 몇 픽셀인지 궁금해지는 순간이 온다. Windows 디스플레이 설정에서 해상도는 확인할 수 있지만 브라우저 뷰포트 크기나 DPR 같은 정보는 거기에 없다.

해상도, 뷰포트, DPR은 다 다르다

세 가지를 혼동하면 반응형 레이아웃이 의도와 다르게 나온다.

TIP DPR이 2인 디스플레이는 화면 해상도가 2560 x 1440이라도 CSS 기준으로는 1280 x 720처럼 동작한다. 미디어 쿼리에서 1440px로 조건을 걸면 예상과 다른 결과가 나올 수 있다.

화면 크기를 알아야 하는 경우

• 반응형 웹 개발: 미디어 쿼리 분기점을 정할 때 실제 뷰포트 크기가 필요하다
• 디자인 시안 검수: 피그마에서 1440px 기준으로 만든 시안이 내 모니터에서 어떻게 보이는지 확인
• 모니터 구매 후 확인: 제품 스펙대로 해상도가 설정돼 있는지 체크
• 멀티 모니터 세팅: 화면마다 해상도와 배율이 다를 때 각각 맞춰야 한다

브라우저에서 바로 확인하는 법

개발자 도구(F12)를 열면 뷰포트 크기를 볼 수 있지만, DPR이나 색상 깊이 같은 정보는 콘솔에 코드를 직접 입력해야 나온다. 그것보다는 화면 크기 확인 도구를 열어보는 게 빠르다. 접속하면 브라우저 창 크기, 모니터 해상도, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 정리돼 있고, 창 크기를 바꿀 때마다 수치가 실시간으로 갱신된다.

일반적인 기기 해상도(iPhone, iPad, MacBook 등)와 내 화면을 비교하는 표도 있어서 반응형 분기점을 잡을 때 참고하기 좋다.

모니터 스펙을 볼 때 해상도 숫자만 보지 말고 DPR까지 같이 확인하는 습관을 들이면, 화면이 왜 이렇게 보이는지 의문을 가질 일이 줄어든다.