화면 해상도 체커

화면 해상도는 위 도구 카드 맨 위에 표시됩니다 — 예를 들어 1920 × 1080입니다. 이것은 CSS 픽셀 단위의 화면 크기이며, 브라우저가 레이아웃에 사용하는 논리 단위입니다. 그 아래에는 디스플레이 배율을 반영한 추정 물리적 해상도도 있습니다. 두 숫자가 다르다면 디스플레이가 배율이 켜진 상태로 동작하는 것이며, 고해상도 패널에서는 정상이고 권장되는 설정입니다. 값이 실시간으로 바뀌는 모습을 보려면 브라우저 창 크기를 조정하거나 다른 모니터로 옮겨 보세요.

최신 고해상도 디스플레이는 글자와 아이콘을 편안한 크기로 유지하기 위해 배율을 사용합니다. 150% 배율의 4K 모니터는 패널이 물리적으로 3840 × 2160을 렌더링하는데도 2560 × 1440 CSS 픽셀을 보고합니다. 브라우저의 screen.width와 screen.height는 항상 CSS 픽셀을 사용하므로 보고되는 해상도는 배율이 적용된 논리 해상도입니다. 여기에 디바이스 픽셀 비율을 곱하면 물리적 해상도가 나오며, 이 페이지의 물리적 해상도 추정이 바로 그 계산을 대신 해줍니다.

디바이스 픽셀 비율은 브라우저가 CSS 픽셀 하나를 그리는 데 사용하는 물리적 픽셀 수입니다. DPR이 1이면 CSS 픽셀 하나가 물리적 픽셀 하나와 같습니다. DPR이 2인 경우(Retina와 최신 노트북에서 흔함) 각 CSS 픽셀이 2 × 2 물리적 픽셀 블록으로 그려져 콘텐츠가 더 선명해집니다. DPR은 확대할 때도 바뀝니다. 브라우저 확대를 125%로 하면 보고되는 DPR이 1.25배가 되며, 이것이 물리적 해상도 추정에 "추정"이라는 표시가 붙는 이유입니다.

화면 해상도는 디스플레이 전체 — 모니터나 휴대폰 화면 전체 — 를 나타냅니다. 뷰포트는 브라우저 창 안에서 웹 페이지가 보이는 부분으로, 브라우저 도구 모음, 인터페이스 바, 사이드바, 스크롤 막대는 제외됩니다. 브라우저를 최대화하면 뷰포트는 화면보다 조금 작고, 작은 창으로 띄우면 훨씬 작아집니다. 웹 개발자는 반응형 레이아웃을 만들 때 화면 해상도가 아니라 뷰포트 크기를 사용하며, 그래서 이 페이지는 두 값을 나란히 보여줍니다.

물리적 해상도는 CSS 해상도에 디바이스 픽셀 비율을 곱한 뒤 정수 픽셀로 반올림해 계산합니다. 두 가지 요인 때문에 추정값이 됩니다. 브라우저 확대가 보고되는 DPR을 바꾸고(110% 확대에서는 DPR 2가 2.2로 보고됩니다), 일부 브라우저가 화면 크기에 자체 반올림을 적용하기 때문입니다. 브라우저 확대가 100%일 때 추정값은 정확하므로, 정밀한 측정이 필요하면 확대를 재설정(Ctrl/Cmd + 0)한 뒤 확인하는 것을 권장합니다.

사용 가능 영역은 Windows 작업 표시줄, macOS Dock, 모바일 기기의 고정 시스템 바처럼 항상 자리하는 운영체제 요소가 차지하지 않은 화면 부분입니다. 기본 Windows 작업 표시줄이 있는 1920 × 1080 화면은 사용 가능 높이를 1040픽셀 이하로 보고합니다. 최대화한 브라우저 창을 포함한 응용 프로그램은 이 사용 가능 영역 안에 배치되므로, 최대화한 창이 실제로 얼마나 공간을 얻는지 계산할 때는 이 값이 더 실용적입니다.

이 페이지를 열고 물리적 해상도 추정값을 읽어보세요 — 브라우저 확대가 100%라면 패널의 네이티브 해상도와 일치합니다. 배율은 하드웨어가 렌더링하는 픽셀 수를 바꿀 수 없기 때문입니다. 운영체제에서 교차 확인할 수도 있습니다. Windows에서는 설정 › 시스템 › 디스플레이의 "디스플레이 해상도"를 보세요(권장 항목이 네이티브 해상도입니다). macOS에서는 시스템 설정 › 디스플레이를 열고 "디스플레이 기본값"을 선택하면 일반적으로 네이티브 해상도에 선명도를 위한 배율이 적용됩니다.

네. 표준 브라우저 인터페이스만 사용하므로 데스크톱뿐 아니라 Android와 iOS 브라우저에서도 실행됩니다. 모바일에서 보고되는 화면 해상도는 보통 기기의 논리(CSS) 해상도입니다 — 예를 들어 많은 Android 휴대폰에서 393 × 851입니다 — 반면 물리적 해상도 추정값은 실제 패널을 반영합니다. 기기를 회전하면 방향, 화면비, 두 치수가 실시간으로 바뀌는 것을 볼 수 있습니다. 모바일의 사용 가능 영역은 시스템 상태 표시줄과 내비게이션 바를 제외합니다.

네 — 완전히 그렇습니다. 요금도, 가입도, 다운로드도 없고 확인 횟수 제한도 없습니다. 모든 측정은 브라우저에서 로컬로 이루어집니다. 페이지가 화면, 창, 디스플레이 설정을 읽어 화면에 표시할 뿐입니다. 화면 데이터나 기기 지문, 사용 통계가 서버로 전송되지 않으며 탭을 닫은 뒤 저장되는 것도 없습니다. 페이지를 한 번 불러오면 오프라인에서도 실행할 수 있습니다.

카드는 설계상 실시간으로 업데이트됩니다. 창 크기를 조정하면 뷰포트가 바뀌고, 확대하면 디바이스 픽셀 비율이 바뀌어 물리적 추정값에 영향을 주며, 휴대폰을 회전하면 너비와 높이가 바뀌고, 창을 두 번째 모니터로 옮기면 옮겨간 화면을 다시 측정합니다. 아무것도 하지 않았는데 숫자가 바뀌었다면 외부 요인이 원인입니다 — 예를 들어 디스플레이 절전, 도킹한 노트북의 출력 전환, 접근성을 위해 운영체제가 배율을 자동 변경한 경우입니다.

하나의 정답은 없습니다. 알맞은 해상도는 패널 크기와 시청 거리에 따라 달라지기 때문입니다. 실용적인 기준으로 1920 × 1080은 여전히 가장 널리 쓰이는 데스크톱 해상도이고, 2560 × 1440은 27인치 이상 모니터에, 3840 × 2160은 32인치 이상 디스플레이에 적합합니다(그 크기에서 높은 픽셀 밀도를 실제로 활용할 수 있습니다). 노트북에서는 고밀도 패널에 운영체제 배율을 조합한 쪽이 저해상도 패널을 100%로 쓰는 것보다 글자가 더 선명한 경우가 많습니다.

해상도는 픽셀 수를 세고, 크기는 패널의 대각선 길이를 인치로 잽니다. 둘은 서로 독립적입니다. 24인치 모니터와 32인치 모니터가 모두 1920 × 1080일 수 있지만, 같은 픽셀 수가 더 좁은 면적에 들어간 작은 쪽이 더 선명하게 보입니다. 이 밀도를 인치당 픽셀 수로 나타내며, 글자의 선명도를 실제로 결정하는 값이 바로 이것입니다 — 그래서 고해상도 노트북 패널이 더 큰 저해상도 데스크톱 모니터보다 보기 좋은 경우가 많습니다.