내 화면 해상도는?
설정 메뉴 없이도 즉시 감지되는 디스플레이 사양
반응형 뷰포트 테스터
너비 프리셋을 선택해 다양한 뷰포트 너비에서 콘텐츠가 어떻게 재배치되는지 확인하세요. 크기 배지가 실시간으로 업데이트돼요.
참고: 크로스 오리진 iframe은 대부분의 사이트에서 차단돼요. 이 미리보기 박스는 너비만 시뮬레이션해요.
디자인 브레이크포인트 참조
인기 프레임워크에서 사용하는 일반적인 CSS 브레이크포인트. 현재 뷰포트 너비가 강조 표시돼요.
| 이름 | 브레이크포인트 범위 | 일반적인 용도 |
|---|
일반 화면 해상도 참조
| 이름 / 기기 | 해상도 | 화면비 | DPR | 대표 기기 | 카테고리 |
|---|
브라우저 User Agent
이게 다 무슨 의미인가요?
화면 해상도
화면 해상도는 모니터가 표시할 수 있는 총 픽셀 수로 가로×세로(예: 1920×1080)로 표현돼요. 하드웨어 속성이라 디스플레이 설정에서 변경하지 않으면 바뀌지 않아요. 해상도가 높을수록 픽셀이 많고, 이미지가 선명하며 더 많은 콘텐츠가 화면에 들어와요.
기기 픽셀 밀도 (DPR)
DPR은 물리 픽셀과 CSS(논리) 픽셀의 비율이에요. DPR 2는 CSS 픽셀 1개가 2×2=4개의 물리 픽셀로 그려진다는 의미로, Retina 또는 HiDPI 디스플레이에서 모든 것이 더 선명하게 보여요. 대부분의 최신 스마트폰은 DPR ≥ 2, 많은 MacBook은 DPR = 2, 일부 Android 폰은 DPR = 3 이상이에요.
웹 개발자를 위해: HiDPI 화면에 고해상도 이미지를 제공하려면 JavaScript에서 @media (-webkit-min-device-pixel-ratio: 2) 또는 window.devicePixelRatio를 사용하세요.
뷰포트 vs 화면 해상도
화면 해상도는 고정(예: 1920×1080)이에요. 뷰포트는 브라우저 창의 콘텐츠 영역으로 — 브라우저 크기를 조정하거나, 브라우저 UI(DevTools, 사이드바)를 열거나, 확대/축소할 때 변해요. CSS 미디어 쿼리는 화면 해상도가 아닌 뷰포트 크기에 반응해요. 여기 표시된 뷰포트 크기는 브라우저 크기를 조정할 때 실시간으로 업데이트돼요.
색 심도
색 심도(비트)는 각 픽셀이 표시할 수 있는 색상 수를 결정해요. 24비트 = 1,677만 색상(표준 트루 컬러). 30비트 = 10억 7,000만 색상(딥 컬러, 전문가용 디스플레이). 대부분의 최신 모니터는 24비트 또는 30비트예요.
시스템 설정에서 화면 해상도 확인하는 방법
- Windows 11: 바탕 화면 우클릭 → 디스플레이 설정 → 디스플레이 해상도
- macOS: Apple 메뉴 → 시스템 설정 → 디스플레이
- Ubuntu/Linux: 설정 → 디스플레이
- 또는 이 페이지 상단을 보세요 — 설정 메뉴 없이 바로 확인할 수 있어요.
자주 묻는 질문
window.screen API를 사용해 자동으로 감지했어요. Retina/HiDPI 디스플레이를 사용한다면 물리 픽셀 줄에 실제 하드웨어 픽셀 수(화면 해상도 × DPR)가 표시돼요.