내 화면 해상도 확인

계산 방법

「내 화면 해상도가 얼마인가」에는 정답이 여러 개 있습니다. 디스플레이의 실제 픽셀, 브라우저가 계산에 쓰는 CSS 픽셀, 그리고 웹 페이지가 실제로 받는 영역인 뷰포트입니다. 이 도구는 세 가지를 나란히 보여 줍니다.

화면 해상도 확인 방법

1. 이 페이지를 엽니다. 실제 픽셀과 CSS 픽셀 해상도가 바로 나옵니다.
2. 창 크기를 바꾸거나 확대하거나 기기를 돌려 봅니다. 뷰포트, 확대율, 브레이크포인트가 실시간으로 바뀝니다.
3. devicePixelRatio, 화면 비율, 작업 표시줄을 뺀 사용 가능 영역을 확인합니다.

Windows에서는 설정 → 시스템 → 디스플레이 → 디스플레이 해상도에서도 볼 수 있고, Mac에서는 시스템 설정의 디스플레이에서 볼 수 있습니다. 갤럭시 등 일부 안드로이드 휴대폰은 설정의 디스플레이 메뉴에서 화면 해상도를 고를 수 있습니다.

계산 예: 노트북이 1536 × 864로 나오는 이유

1920 × 1080 노트북에서 Windows 배율이 125%이면 브라우저 확대 100%일 때 devicePixelRatio가 1.25로 나옵니다. CSS 픽셀로는 1920 ÷ 1.25 = 1536, 1080 ÷ 1.25 = 864, 곧 1536 × 864입니다. 실제 해상도가 낮아진 것이 아니라 글자와 아이콘을 크게 보이도록 배율을 키운 것입니다.

값의 뜻

• 실제 픽셀: CSS 픽셀 화면 크기 × devicePixelRatio입니다. 배율 125%인 풀HD 노트북은 1536 × 864 CSS 픽셀로 보고하고, × 1.25를 하면 실제 1920 × 1080이 됩니다.
• devicePixelRatio: CSS 픽셀 하나에 실제 픽셀이 몇 개 들어가는지입니다. 1은 일반 모니터, 2나 3은 레티나나 휴대폰 화면입니다. 브라우저 확대와 Windows 배율 모두 이 값을 바꿉니다.
• 사용 가능 영역: 화면에서 작업 표시줄이나 Dock을 뺀 부분입니다.
• 뷰포트: 브라우저 창의 안쪽 크기(innerWidth × innerHeight)입니다. 미디어 쿼리와 반응형 레이아웃은 이 값에 반응합니다. 휴대폰에서 두 손가락으로 확대하거나 키보드가 열리면 보이는 영역(비주얼 뷰포트)이 더 작아집니다.
• 화면 비율: 정확히 약분한 비율(1920 × 1080 = 16:9)과, 딱 떨어지지 않을 때는 흔히 부르는 이름(1366 × 768 ≈ 16:9)을 보여 줍니다.
• 브레이크포인트: 지금 창 너비에서 Bootstrap 5(sm 576, md 768, lg 992, xl 1200, xxl 1400px부터)와 Tailwind CSS(sm 640, md 768, lg 1024, xl 1280, 2xl 1536px부터)의 어느 단계가 적용되는지입니다.

자주 쓰는 해상도

한계

브라우저가 CSS 픽셀을 내림하는 경우가 있어 실제 픽셀이 1 정도 어긋날 수 있습니다(2560 대신 2561). 모니터가 여러 대면 지금 창이 있는 화면의 값을 보여 줍니다. 핑거프린팅 방지(resistFingerprinting)를 켠 Firefox는 일부러 표준값을 알려 주기도 합니다.

함께 보기: 내 공인 IP는 내 IP 확인, 이미지와 영상 크기는 화면 비율 계산기, 모니터 점검은 불량화소 테스트와 주사율 테스트에서 할 수 있습니다.

자주 묻는 질문

출처 및 근거

• MDN Web Docs – Screen
• MDN Web Docs – Window.devicePixelRatio
• MDN Web Docs – Visual Viewport API
• MDN Web Docs – prefers-color-scheme
• Bootstrap 5.3 – Breakpoints
• Tailwind CSS – Responsive design

업데이트: 2026년 9월 27일 · 편집 원칙