내 화면 크기 확인, 해상도와 뷰포트 한 번에 보는 법

CSS를 짜다가 미디어 쿼리 분기점을 정해야 하는데, 지금 보고 있는 브라우저 창이 정확히 몇 픽셀인지 모를 때가 있다. 디스플레이 설정에 들어가면 해상도는 나오지만 뷰포트 크기나 DPR 같은 값은 별도로 확인해야 한다.

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

화면 해상도 (Screen Resolution)

모니터가 물리적으로 표현할 수 있는 총 픽셀 수다. 1920×1080이면 가로 1920개, 세로 1080개의 픽셀로 이루어져 있다.

뷰포트 (Viewport)

브라우저에서 웹 페이지가 실제로 렌더링되는 영역이다. 주소창, 북마크바, 탭 영역을 제외한 순수 콘텐츠 표시 공간을 말한다.

DPR (Device Pixel Ratio)

CSS 1px을 물리적 픽셀 몇 개로 표시하는지의 비율이다. 맥북 레티나 디스플레이는 DPR이 2라서, CSS 1px이 실제로는 4개(2×2)의 물리 픽셀에 대응한다.

주요 디스플레이 해상도 기준

윈도우에서 배율을 125%나 150%로 설정해두면 실제 해상도와 유효 해상도가 달라진다. 화면 설정의 "권장" 해상도가 모니터의 물리적 해상도인데, 배율 때문에 웹 브라우저에 찍히는 뷰포트 크기는 그보다 작게 나온다.

반응형 웹에서 왜 중요한가

반응형 디자인의 미디어 쿼리는 뷰포트 너비를 기준으로 동작한다. 화면 해상도가 아니라 브라우저 창 크기에 반응하는 것이기 때문에, 개발할 때 두 값을 혼동하면 레이아웃이 의도대로 나오지 않는다.

참고 자주 쓰는 미디어 쿼리 분기점: 모바일 480px 이하, 태블릿 768px 이하, 데스크톱 1024px 이상. 실제 프로젝트에서는 디자인에 맞춰 조정한다.

내 화면 정보 확인하기

개발자 도구(F12)를 열어서 window.innerWidth를 콘솔에 찍어도 되지만, 매번 그러기엔 번거롭다. 화면 크기 측정 도구를 띄워놓으면 브라우저 창 크기, 모니터 해상도, DPR, 색상 깊이, 터치 지원 여부까지 한 화면에 실시간으로 갱신된다. 창 크기를 드래그로 줄이면 수치가 즉시 바뀌어서 미디어 쿼리 테스트할 때 편하다.

개발자가 아니더라도 모니터 스펙이 궁금하거나, 중고 노트북을 살 때 판매자가 말한 해상도가 맞는지 확인할 때 쓸 수 있다. 접속만 하면 되니까 따로 설치할 건 없다.