화면 해상도 확인

이 화면의 실제 해상도와 웹이 쓰는 크기를 함께 보여 줍니다

화면 해상도 확인은 페이지를 여는 순간 이 기기의 화면 값을 읽어, 실제 픽셀 기준의 해상도를 가장 크게 보여 줍니다. 많은 해상도 확인 사이트가 브라우저가 알려 주는 CSS 픽셀 값을 그대로 해상도라고 적기 때문에, 1920 × 1080 모니터가 1536 × 864로 나오는 일이 흔합니다. 이 도구는 운영체제 배율을 곱해 실제 픽셀로 되돌리고, Chrome·Edge처럼 창 크기로 확대 단계를 알아낼 수 있는 브라우저에서는 브라우저 확대도 빼고 계산합니다.

답 아래의 화면 도면은 화면 전체와 작업 표시줄, 브라우저 창, 실제로 페이지가 보이는 영역을 축척대로 그립니다. 창 크기를 바꾸거나 다른 자리로 옮기면 도면이 따라 움직이므로, 숫자가 무엇을 가리키는지 눈으로 바로 확인할 수 있습니다. 그 밖에 픽셀이 얼마나 촘촘한지, 화면이 어떤 색 영역과 HDR을 낼 수 있다고 알리는지, 운영체제·브라우저·그래픽은 무엇인지도 한 표에 모았습니다. 모든 값은 이 브라우저 안에서만 계산하며 저장하거나 보내지 않습니다.

해상도를 확인해야 하는 때

• 새 모니터나 노트북을 연결했을 때: 모니터가 4K를 지원해도 케이블·설정에 따라 더 낮은 해상도로 잡힐 수 있습니다. 실제 픽셀이 모니터 사양과 같은지 먼저 확인합니다.
• 글자가 흐리거나 너무 작게 보일 때: 권장이 아닌 해상도를 고르면 글자가 흐려지고, 배율이 너무 낮으면 글자가 작아집니다. 해상도와 배율을 함께 보면 어느 쪽 문제인지 가려집니다.
• 게임·영상 화질 설정을 고를 때: QHD 모니터에서 4K 영상을 고르거나 FHD 모니터에서 QHD 게임 해상도를 고르면 화면보다 큰 그림을 줄여서 보게 됩니다. 화면의 실제 픽셀에 맞추는 것이 기준입니다.
• 웹 페이지가 잘리거나 깨져 보여 문의할 때: 고객센터나 개발자는 대개 해상도·배율·브라우저·창 크기를 묻습니다. 결과 복사를 누르면 이 값이 한 번에 글로 정리됩니다.
• 반응형 웹을 만들거나 점검할 때: 페이지 배치는 실제 픽셀이 아니라 보이는 영역의 CSS 폭으로 바뀝니다. 창을 줄여 가며 도면과 보이는 영역 숫자를 보면 지금 어느 폭에 걸렸는지 알 수 있습니다.
• 사진·영상 작업 전에 색 영역과 HDR을 볼 때: 넓은 색(P3) 사진이나 HDR 영상은 화면과 브라우저가 둘 다 지원해야 제대로 보입니다.
• 중고 노트북·모니터를 사고팔 때: 판매 글의 해상도와 실제 화면의 해상도가 같은지, 그래픽 정보가 맞는지 그 자리에서 확인할 수 있습니다.

사용 순서

1. 확인할 화면에서 이 페이지를 엽니다. 모니터를 여러 대 쓰면 확인할 모니터로 브라우저 창을 옮깁니다.
2. 맨 위 큰 숫자를 봅니다. 이 숫자가 화면의 실제 해상도이고, 아래 태그에 해상도 이름·화면비·화소 수가, 그 아래 문장에 배율 때문에 웹에서는 몇 픽셀로 보이는지가 나옵니다.
3. 오른쪽 작은 판 네 개를 봅니다. 웹에서 쓰는 크기, 배율(DPR), 브라우저 확대, 보이는 영역이 차례로 나옵니다. 확대가 100%가 아니면 Ctrl+0(Mac은 ⌘+0)으로 되돌린 뒤 다시 봅니다.
4. 화면 도면에서 창을 움직여 봅니다. 창 크기를 바꾸거나 옮기면 창과 보이는 영역이 도면 위에서 따라 움직입니다. ‘실제 픽셀’과 ‘CSS 픽셀’ 단추로 도면 숫자의 단위를 바꿀 수 있습니다.
5. 모니터가 여러 대면 ‘모든 모니터 보기’를 누릅니다. Chrome·Edge에서 권한을 허용하면 모니터 배치와 모니터마다의 이름·해상도·배율이 함께 나옵니다.
6. 필요하면 화면 대각선 인치를 넣습니다. 픽셀 밀도(PPI), 화면의 가로·세로 길이, 점 간격이 계산됩니다.
7. 결과 복사를 누릅니다. 해상도·배율·창 크기·색·운영체제·브라우저·그래픽이 글로 복사되어 문의 글이나 메모에 붙여 넣을 수 있습니다.

숫자 읽는 법: 실제 픽셀, CSS 픽셀, 배율

화면에는 숫자가 두 벌 있습니다. 모니터 패널의 점 개수인 실제 픽셀과, 웹 페이지가 크기를 잴 때 쓰는 CSS 픽셀입니다. CSS 1px는 원래 96dpi 화면의 점 하나 크기를 기준으로 정한 단위이므로, 점이 촘촘한 화면에서는 CSS 1px 하나를 실제 픽셀 여러 개로 그립니다. 그 비율이 배율(devicePixelRatio, DPR)이고, 운영체제의 배율 설정과 브라우저 확대가 곱해진 값입니다.

실제 픽셀 = CSS 픽셀 × 운영체제 배율 = CSS 픽셀 × 배율(DPR) ÷ 브라우저 확대

아래 표는 배율이 숫자를 어떻게 바꾸는지 보여 주는 계산 예입니다. 브라우저가 CSS 크기를 정수로 반올림해 알려 주기 때문에, 배율이 소수이면 곱한 값이 몇 픽셀 어긋납니다. 이 도구는 그 어긋남 범위 안에 있는 표준 해상도 값(1080·1366·1440 등)을 골라 보여 줍니다.

Chrome·Edge 같은 Chromium 계열에서 확대를 걸면 배율은 커지지만 브라우저가 알리는 화면 크기와 창 바깥 크기는 그대로입니다(로베린이 2026-11-01에 확대 50%·125%·200%로 확인). 그래서 창 바깥 크기를 안쪽 크기로 나누면 확대 단계를 알아낼 수 있고, 이 도구는 폭과 높이가 같은 단계를 가리킬 때만 그 값을 빼고 실제 픽셀을 계산합니다. 옆에 붙은 사이드 패널이나 개발자 도구는 폭만 줄여 확대처럼 보이게 하므로 대개 ‘알 수 없음’으로 두지만, 드물게 다른 단계로 읽을 수 있습니다. Firefox와 Safari는 이 방법이 맞지 않아 확대를 ‘알 수 없음’으로 두고 배율을 그대로 씁니다. 가장 정확한 값은 확대를 100%로 두고 사이드 패널을 닫은 상태에서 나옵니다.

해상도 이름과 화면비: HD, FHD, QHD, 4K

FHD·QHD·4K 같은 이름은 정해진 픽셀 수를 줄여 부르는 말입니다. 아래 그림은 흔한 네 해상도를 같은 축척으로 겹친 것으로, FHD는 HD의 2.25배, 4K UHD는 FHD의 정확히 4배 화소입니다. 표에서 이 화면과 같은 해상도가 있으면 그 줄에 ‘이 화면’ 표시가 붙습니다.

화면비는 긴 변과 짧은 변의 비율입니다. 1366 × 768은 정확히 16:9가 아니지만 아주 가까워 16:9로 부르고, 2560 × 1080과 3440 × 1440처럼 21:9로 팔리는 울트라와이드는 실제 비율이 2.37:1과 2.39:1입니다. 휴대폰은 1080 × 2340을 19.5:9, 1080 × 2400을 20:9처럼 세로로 길게 부릅니다. 4K는 TV·모니터의 3840 × 2160(UHD)과 영화관 기준의 4096 × 2160(DCI 4K)이 서로 다르므로, 모니터 사양의 4K는 대개 3840 × 2160입니다.

화면 크기(인치)와 픽셀 밀도

같은 해상도라도 화면이 크면 점이 듬성해집니다. 픽셀 밀도(PPI)는 대각선 픽셀 수를 대각선 인치로 나눈 값이고, 작업면의 화면 대각선 칸에 인치를 넣으면 이 화면의 PPI와 가로·세로 길이가 계산됩니다. 브라우저는 화면의 물리적인 크기를 알려 주지 않으므로 인치는 직접 넣어야 합니다.

PPI = √(가로² + 세로²) ÷ 대각선 인치 · 가로 길이(cm) = 대각선 × 2.54 × 가로 ÷ √(가로² + 세로²)

27형 모니터라면 FHD는 약 82 PPI, QHD는 약 109 PPI, 4K는 약 163 PPI입니다. 점이 촘촘할수록 글자는 매끄럽지만 배율 100%에서는 글자가 작아지므로, 고밀도 화면일수록 운영체제 배율을 올려 씁니다. 픽셀 확대경 칸은 이 배율이 정수가 아닐 때 CSS 1px 선이 기기 픽셀 두 칸에 나뉘어 걸치는 모습을 보여 줍니다. 배율 125%·150%에서 아주 가는 선이나 작은 글자가 조금 번져 보이는 까닭입니다.

운영체제에서 직접 확인하는 곳

이 도구의 값이 예상과 다르면 운영체제 설정에서 해상도와 배율을 직접 확인합니다. 설정 화면에 ‘권장’으로 표시된 해상도가 대개 패널의 실제 해상도입니다.

Retina 화면의 Mac은 배율이 2로 나오므로 이 도구는 브라우저가 알린 화면 크기에 2를 곱합니다. 이 크기는 디스플레이 설정에서 고른 해상도를 따라가므로 패널의 화소 수와 다를 수 있습니다. 로베린이 MacBook Pro 14형에서 확인했을 때 시스템 정보의 패널 해상도는 3024 × 1964였지만, 기본값보다 넓은 해상도를 고른 상태의 브라우저는 화면을 1800 × 1169로 알려 이 도구가 3600 × 2338을 보여 주었습니다. 패널의 화소 수는 Apple 메뉴 > 시스템 설정 > 일반 > 정보 > 시스템 리포트의 그래픽/디스플레이 항목에서 함께 확인합니다.

색 영역과 HDR 읽는 법

색 영역 칸의 그림은 사람이 볼 수 있는 색 전체(말굽 모양) 위에 sRGB, Display P3, Rec. 2020 세 삼각형을 그린 것입니다. 삼각형이 넓을수록 더 진한 빨강·초록을 낼 수 있고, 브라우저가 이 화면이 낼 수 있다고 알린 가장 넓은 삼각형이 강조색으로 칠해집니다. 흔한 사무용 모니터는 대개 sRGB로 나오고, P3를 지원하는 Mac·iPhone이나 넓은 색 모니터는 P3로 나옵니다.

• 넓은 색 시험의 원리: 두 네모의 바탕은 sRGB에서 가장 진한 빨강과 초록이고, 글자는 같은 이름의 P3 색입니다. sRGB 화면에서는 P3 색이 낼 수 있는 가장 가까운 색, 곧 바탕과 같은 색으로 줄어들어 글자가 안 보입니다. P3 화면에서는 글자가 바탕보다 진하게 떠오릅니다.
• HDR: 브라우저가 이 화면을 높은 밝기 범위(dynamic-range: high)로 알리면 ‘지원’으로 나옵니다. Windows에서는 디스플레이 설정의 HDR이 꺼져 있으면 HDR 모니터라도 표준 범위로 나올 수 있으므로, 이때는 HDR 켜기부터 확인합니다.
• 색 깊이: 사양상 브라우저는 색 깊이를 모르거나 감추고 싶으면 24비트를 돌려줄 수 있습니다. 그래서 24비트로 나와도 10비트 패널일 수 있고, 30비트로 나오면 색마다 10비트로 그린다는 뜻입니다.

브라우저로 알 수 있는 기기 사양과 알 수 없는 것

‘내 컴퓨터 사양 확인’을 찾는 사람이 많지만, 웹 페이지가 읽을 수 있는 기기 정보는 일부러 거칠게 줄여 놓았습니다. 아래 표의 값은 참고로만 보고, 정확한 사양은 운영체제 화면에서 확인합니다.

자주 틀리는 경우

• CSS 픽셀을 해상도로 읽는 경우: 배율 125%인 FHD 노트북은 웹에서 1536 × 864로 보입니다. 모니터를 바꿀 필요가 있는 것이 아니라 배율이 걸린 것입니다.
• 브라우저 확대를 켠 채로 재는 경우: 확대를 하면 배율과 보이는 영역이 함께 바뀝니다. Firefox·Safari는 확대를 알려 주지 않으므로 Ctrl+0(⌘+0)으로 되돌린 뒤 봅니다.
• 다른 모니터에서 재는 경우: 이 도구는 지금 창이 있는 화면을 잽니다. 두 번째 모니터를 확인하려면 창을 그쪽으로 옮깁니다.
• Mac의 값을 패널 화소 수로 읽는 경우: 디스플레이 설정에서 기본값이 아닌 해상도를 고르면 macOS가 그리는 크기가 패널보다 크거나 작을 수 있습니다.
• 휴대폰의 디스플레이 크기를 키운 경우: Android에서 화면 확대·디스플레이 크기를 키우면 실제 픽셀은 그대로 두고 배율을 올리므로 웹 크기만 작아집니다. iPhone의 디스플레이 확대/축소(더 큰 텍스트)는 화면을 더 작은 크기로 그린 뒤 키워 보여 주므로 이 도구의 값도 기기 사양보다 작게 나올 수 있습니다.
• 앱 안 브라우저에서 여는 경우: 카카오톡·네이버 앱 같은 앱 안 브라우저는 브라우저 이름과 일부 값이 다르게 나올 수 있습니다. 정확히 보려면 기본 브라우저로 엽니다.

한계

• 브라우저는 화면의 물리적인 크기(인치)를 알려 주지 않습니다. 인치와 PPI는 직접 넣은 값으로 계산합니다.
• 브라우저 확대는 Chrome·Edge 같은 Chromium 계열에서만 창 크기로 알아냅니다. 옆에 붙은 개발자 도구나 사이드 패널은 대개 ‘알 수 없음’으로 처리하지만 드물게 다른 확대 단계로 읽을 수 있으므로, 정확히 재려면 확대를 100%로 두고 패널을 닫습니다.
• 모니터가 여러 대일 때 모든 모니터의 배치와 이름은 Chrome·Edge에서 권한을 허용해야 보입니다. 권한 없이 그린 작업 표시줄 위치는 어림입니다.
• 창 테두리와 도구 모음의 정확한 크기는 알 수 없어, 도면의 창 안 보이는 영역 위치는 테두리를 양옆 같다고 보고 그립니다.
• CPU·메모리·그래픽 값은 브라우저가 지문 추적을 막으려고 줄이거나 감춘 값입니다. 정확한 사양은 운영체제에서 확인합니다.
• 개인정보 보호 설정이 강한 브라우저는 화면 크기와 기기 값을 일부러 바꿔 알려 줄 수 있습니다.

기준일 설정 메뉴 이름과 출처 문서는 2026-11-01에 확인했습니다. 운영체제와 브라우저가 업데이트되면 메뉴 이름과 알려 주는 값이 바뀔 수 있습니다.

출처

• 01MDN: Window.devicePixelRatio실제 픽셀과 CSS 픽셀의 비율, 페이지 확대는 값을 바꾸고 핀치 확대는 바꾸지 않음
• 02MDN: Screen.availHeight화면 크기는 CSS 픽셀, 쓸 수 있는 영역은 Dock·메뉴 막대·작업 표시줄을 뺀 값
• 03W3C: CSS Values and Units Level 41px = 1/96인치, 96dpi 화면을 팔 길이에서 볼 때의 기준 픽셀
• 04MDN: Window.innerWidth보이는 영역 폭에는 세로 스크롤 막대 너비가 포함됨
• 05W3C: CSS Color Module Level 4sRGB·display-p3·rec2020 색 공간의 빨강·초록·파랑 좌표
• 06MDN: dynamic-range · color-gamut 미디어 기능높은 밝기 범위(HDR)와 sRGB·P3·Rec. 2020 색 영역을 알리는 미디어 쿼리
• 07W3C: CSSOM View색 깊이를 모르거나 감추려면 24를 돌려줌
• 08MDN: Window.getScreenDetails()여러 모니터의 배치·이름·주 모니터 여부, window-management 권한, Chrome 100부터
• 09Microsoft Learn: Detect Windows 11 using User-Agent Client HintsplatformVersion 주 버전 13 이상 = Windows 11, 1~10 = Windows 10
• 10Chromium: User-Agent ReductionUA 문자열의 macOS 버전 10_15_7, Windows NT 10.0, Android 기기 모델 K 고정
• 11WebKit Bugzilla 298473Safari가 UA의 iOS 버전을 18.6(18.6.2)으로 고정, 지문 추적을 줄이려 영구 적용
• 12MDN: Navigator.deviceMemory2의 거듭제곱으로 반올림한 메모리, 상한·하한은 구현이 정함(Chrome 147부터 2~32 GB)
• 13MDN: WEBGL_debug_renderer_info그래픽 칩 이름, 개인정보 설정에 따라 막히거나 줄어듦
• 14WebKit 소스: NavigatorBase.cpp지문 추적을 줄이려 코어 수를 4 또는 8로만 알림
• 15W3C: Mitigating Browser Fingerprinting in Web Specifications창 크기·기기 특성은 브라우저 지문 추적에 쓰일 수 있음
• 16Microsoft 지원: Windows에서 화면 해상도와 레이아웃 변경디스플레이 해상도·권장 표시·비율 크기 조정 경로(Windows 11·10)
• 17Microsoft 지원: Windows의 HDR 설정설정 > 시스템 > 디스플레이 > HDR, Windows 10은 Windows HD Color 설정
• 18Microsoft 지원: Windows 장치 정보 찾기설정 > 시스템 > 정보의 장치 사양에서 프로세서와 설치된 RAM 확인
• 19Microsoft: How to check your GPU작업 관리자 > 성능 > GPU의 오른쪽 위에 그래픽 칩 이름
• 20Mac 사용 설명서: 디스플레이 해상도 변경시스템 설정 > 디스플레이에서 해상도 선택, 목록 보기
• 21Mac 사용 설명서: 정보 설정시스템 설정 > 일반 > 정보에서 칩·메모리·디스플레이, 시스템 리포트
• 22iPhone 사용 설명서: 디스플레이 및 텍스트 설정 조절하기화면 모드 > 디스플레이 확대/축소 > 더 큰 텍스트
• 23Samsung US: Change the screen resolution on your Galaxy phoneSettings > Display > Screen resolution(HD+·FHD+·QHD+), Screen zoom, 모델에 따라 메뉴가 다름
• 24Google Pixel 도움말: 화면 및 디스플레이 설정 관리하기디스플레이 및 터치 > 디스플레이 크기 및 텍스트
• 25Chrome 도움말: Chrome 단축키Ctrl + 0(Mac ⌘ + 0) = 페이지의 모든 항목을 기본 크기로 되돌리기
• 26Firefox 도움말: 글꼴 크기와 확대/축소주소창의 확대 비율을 누르면 기본 확대 수준으로 재설정

자주 묻는 질문

함께 쓰는 도구