내 모니터 해상도 확인하는 법과 반응형 기준 해상도 정리

반응형 웹을 만들면서 @media (max-width: 768px)를 썼는데, 본인 브라우저에서 테스트하려니 지금 창 크기가 정확히 몇 픽셀인지 모르겠다. 브라우저 개발자 도구를 열어도 되지만, 더 빠른 방법이 있다.

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

화면 해상도 (Screen Resolution)

모니터가 표시할 수 있는 전체 픽셀 수다. 1920x1080이면 가로 1,920개, 세로 1,080개의 픽셀을 가진 것이다. 운영체제 디스플레이 설정에서 확인할 수 있다.

뷰포트 (Viewport)

웹 페이지가 실제로 보이는 브라우저 창 영역이다. 주소창, 즐겨찾기 바, 작업 표시줄 등을 제외한 나머지 공간이 뷰포트다. CSS 미디어 쿼리는 이 뷰포트 크기를 기준으로 동작한다.

DPR (Device Pixel Ratio)

논리 픽셀 1개를 표현하는 데 물리 픽셀이 몇 개 쓰이는지를 나타낸다. 레티나 디스플레이는 DPR이 2이므로, 논리 해상도가 1920x1080이어도 물리적으로는 3840x2160으로 렌더링된다.

반응형 웹 기준 해상도

미디어 쿼리 breakpoint로 흔히 쓰이는 값들이다.

지금 내 화면 크기 확인하기

화면 크기 확인 도구에 접속하면 브라우저 창 크기, 모니터 해상도, 뷰포트, DPR, 색상 깊이가 실시간으로 표시된다. 창 크기를 드래그해서 줄이면 숫자가 바로 업데이트되니, 특정 breakpoint에서 레이아웃이 어떻게 바뀌는지 확인하면서 테스트할 수 있다.

TIP 주요 기기(iPhone, iPad, MacBook, 4K 모니터 등)의 해상도가 함께 나열되어 있어서, 내 현재 화면이 어떤 기기와 비슷한 크기인지 비교하기 편하다.

반응형 디자인은 결국 다양한 화면 크기에서 깨지지 않는 게 목표다. 기준이 되는 숫자를 정확히 알고 시작하면 미디어 쿼리 작성이 훨씬 수월해진다.