내 모니터 해상도 확인, 브라우저 창 크기도 같이 보는 법

웹사이트를 만들었는데 내 컴퓨터에서는 잘 보이고, 동료 컴퓨터에서는 레이아웃이 깨진다. 원인의 90%는 모니터 해상도와 브라우저 창 크기 차이다. 내 화면이 몇 픽셀인지 정확히 알아야 반응형 기준점을 제대로 잡을 수 있다.

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

화면 해상도 (Screen Resolution)

모니터 전체의 픽셀 수. 1920×1080이면 가로 1920개, 세로 1080개의 점으로 화면이 구성된다.

뷰포트 (Viewport)

브라우저 창에서 웹 콘텐츠가 실제로 표시되는 영역. 주소 표시줄, 북마크 바, 스크롤바를 제외한 크기다. 화면 해상도보다 항상 작다.

CSS 미디어 쿼리는 화면 해상도가 아니라 뷰포트 기준으로 작동한다. 그래서 같은 모니터라도 브라우저 창 크기를 줄이면 모바일 레이아웃이 적용되는 것이다.

DPR(디바이스 픽셀 비율)이란

레티나 디스플레이나 최신 스마트폰은 DPR이 2 또는 3이다. CSS에서 100px로 지정한 요소가 실제로는 200px(DPR 2) 또는 300px(DPR 3)의 물리적 픽셀로 그려진다. 이미지를 DPR을 고려하지 않고 올리면 고해상도 화면에서 흐릿하게 보인다.

반응형 웹의 주요 브레이크포인트

내 화면 정보 바로 확인하기

화면 크기 확인 도구에 접속하면 현재 브라우저 창 크기와 모니터 해상도가 실시간으로 표시된다. 창 크기를 조절하면 숫자가 바로 바뀌기 때문에 미디어 쿼리 브레이크포인트를 잡을 때 편하다. DPR, 색상 깊이, 터치 지원 여부까지 함께 확인할 수 있고, iPhone, iPad 등 주요 기기 해상도와 비교하는 표도 제공된다.

TIP 크롬 개발자 도구(F12)에서도 뷰포트 크기를 확인할 수 있지만, 일반 사용자가 "내 모니터가 몇 인치/몇 픽셀인지" 확인할 때는 웹 도구가 더 직관적이다.

반응형 웹을 만들 때는 내 화면에서 잘 보이는지가 아니라, 다양한 해상도에서 어떻게 보이는지가 중요하다. 기준점을 정하려면 우선 내 화면 크기부터 정확히 파악해야 한다.