내 모니터 해상도 확인, 화면 크기 바로 알아보기

반응형 웹사이트를 만들다 보면 "이 레이아웃이 1920px에서 어떻게 보이지?" 같은 질문이 반복된다. 내 모니터 해상도가 정확히 몇 픽셀인지, 브라우저 뷰포트와는 어떻게 다른지 숫자를 모르면 미디어쿼리 기준점을 잡기가 어렵다.

브라우저 창 크기와 모니터 해상도는 다르다

모니터 해상도는 화면 전체의 물리적 픽셀 수를 뜻한다. 1920×1080이 대표적이다. 반면 브라우저 창 크기는 도구 모음, 즐겨찾기 바, 스크롤바를 제외한 실제 콘텐츠 영역의 크기다.

전체 화면으로 브라우저를 열어도 두 값이 같지 않은 경우가 많다. 화면 크기 확인 도구에 접속하면 모니터 해상도와 브라우저 뷰포트가 동시에 표시되고, 창 크기를 바꿀 때마다 실시간으로 갱신된다.

DPR, 레티나 디스플레이에서 왜 중요한가

DPR(Device Pixel Ratio)은 CSS 1px이 실제로 몇 개의 물리적 픽셀에 해당하는지를 나타낸다.

• DPR 1: CSS 1px = 물리 1px. 일반 모니터
• DPR 2: CSS 1px = 물리 4px(2×2). 레티나 디스플레이
• DPR 3: CSS 1px = 물리 9px(3×3). 최신 스마트폰

DPR이 2인 기기에서 100×100 이미지를 선명하게 보이게 하려면 200×200 원본이 필요하다. 이미지가 흐릿하게 보인다면 DPR을 확인해볼 만하다.

대표 기기별 해상도 비교

현재 기기와 일치하는 항목에 자동으로 표시가 붙어서, 지금 보고 있는 화면이 어떤 스펙인지 바로 알 수 있다. 색상 깊이, 터치 지원 여부, 화면 방향 같은 상세 정보도 함께 나온다.

CSS 미디어쿼리 브레이크포인트를 정할 때 내 화면이 정확히 몇 픽셀인지 모르면 기준점이 애매해진다. 한 번만 확인하면 된다.