이 페이지에서 보여 주는 정보
맨 위의 큰 숫자는 브라우저가 알려 주는 화면 해상도입니다. 아래 표에는 웹 디자이너, 개발자, 고객 지원 담당자가 가장 자주 묻는 정보가 더해져 있습니다. 창 크기를 바꾸면 값이 바로 갱신되고, 모든 정보 복사를 누르면 표 전체가 일반 텍스트로 복사되어 버그 리포트나 상담 채팅에 바로 붙여 넣을 수 있습니다.
| 화면 해상도 | 웹페이지가 레이아웃에 쓰는 단위인 CSS 픽셀로 나타낸 화면 전체 크기입니다. |
|---|---|
| 물리 픽셀 (근삿값) | 화면 해상도 × 기기 픽셀 비율로, 대개 패널의 실제 픽셀 수입니다. |
| 기기 픽셀 비율 | CSS 픽셀 하나를 가로·세로 각각 몇 개의 물리 픽셀로 그리는지 나타냅니다. |
| 브라우저 창 (뷰포트) | 스크롤바를 포함한 브라우저 창 안쪽 크기를 CSS 픽셀로 나타낸 값입니다. |
| 사용 가능한 화면 영역 | Windows 작업 표시줄이나 macOS Dock처럼 항상 떠 있는 막대를 뺀 화면 크기입니다. |
| 색 깊이 | 픽셀당 비트 수입니다. 24비트는 빨강, 초록, 파랑에 각각 8비트씩, 약 1,670만 가지 색을 뜻합니다. |
| 브라우저와 운영체제 | 사용자 에이전트 문자열과, Chrome·Edge에서는 브라우저가 추가로 제공하는 정보로 알아냅니다. |
| CPU 스레드와 메모리 | 논리 프로세서 수입니다. 메모리는 Chromium 기반 브라우저만 알려 주며, 반올림되고 8 GB에서 상한이 걸리기 때문에 “최소”로 표시합니다. |
나머지 행은 화면 방향, 터치 지원, 선호 언어, 시간대, 다크 모드 선호 여부, 쿠키 사용 여부입니다. 여기 나오는 시간대는 시차 계산기가 내 시간대로 쓰는 값입니다.
CSS 픽셀, 물리 픽셀, devicePixelRatio
CSS 픽셀은 화면의 점 하나가 아니라 레이아웃 단위입니다. 일반 모니터에서는 CSS 픽셀 하나가 물리 픽셀 하나지만, 휴대폰이나 고밀도 노트북에서는 여러 물리 픽셀이 CSS 픽셀 하나를 그려서 글자의 실제 크기는 같으면서 더 선명해 보입니다. 이 관계가 window.devicePixelRatio입니다. 기본 설정의 레티나 디스플레이 Mac은 2, 최근의 많은 아이폰은 3, 디스플레이 배율을 쓰는 Windows 노트북은 1.25나 1.5 같은 값입니다.
그래서 레이아웃과 미디어 쿼리는 CSS 픽셀로 작동하고, 이미지는 표시되는 크기보다 더 많은 픽셀이 필요합니다. 비율이 2인 화면에서 너비 400 CSS 픽셀로 보이는 그림이 선명하려면 너비 800픽셀짜리 파일이 있어야 합니다. 이런 이미지는 이미지 크기 조절로 만들 수 있습니다.
예시
- 배율 125%인 Full HD 노트북은 1536 × 864, 기기 픽셀 비율 1.25로 나오고, 물리 픽셀 행에 실제 해상도 1920 × 1080이 표시됩니다.
- 4K 모니터는 배율 150%에서 2560 × 1440과 비율 1.5, 200%에서 1920 × 1080과 비율 2로 나옵니다. 어느 쪽이든 물리 픽셀 행은 3840 × 2160입니다.
- 아이폰 15는 393 × 852, 비율 3으로 나오며, 물리 픽셀로는 1179 × 2556입니다.
- 브라우저 확대/축소도 값을 바꿉니다. Chrome, Edge, Firefox에서 200%로 확대하면 기기 픽셀 비율은 두 배가 되고 뷰포트의 CSS 픽셀 크기는 절반이 됩니다. 값이 이상하다면 Ctrl+0(Mac은 ⌘+0)으로 배율을 원래대로 돌리세요.
물리 픽셀 값은 추정치입니다. Mac에서 ‘조정된’ 해상도를 쓰면 macOS가 화면을 그 두 배 크기로 그린 뒤 패널에 맞게 축소하므로, 결과가 디스플레이의 기본 해상도와 다를 수 있습니다.
자주 쓰는 화면 해상도
| 1366 × 768 | 오래되었거나 저렴한 노트북 |
|---|---|
| 1536 × 864 | 배율 125%인 Full HD 노트북 (CSS 픽셀 기준) |
| 1920 × 1080 | Full HD – 데스크톱 모니터에서 가장 흔한 해상도 |
| 2560 × 1440 | QHD / 1440p – 게이밍 모니터와 사무용 모니터로 인기 |
| 3840 × 2160 | 4K UHD – TV와 고급 모니터, 보통 배율을 높여 사용 |
| 390 × 844, 393 × 852 | 최근 아이폰 (CSS 픽셀 기준) |
| 360 × 800, 412 × 915 | 흔한 안드로이드 폰 (CSS 픽셀 기준) |
개인 정보
이 페이지는 표준 브라우저 기능으로 값을 읽어 나에게만 보여 주며, 어디로도 보내지 않습니다. 하지만 어떤 웹사이트든 같은 정보를 읽을 수 있고, 이런 값을 조합하면 브라우저를 식별하는 데 쓰일 수 있는데 이를 핑거프린팅이라고 합니다. 그래서 개인 정보 보호를 중시하는 일부 브라우저는 화면 크기 같은 값을 반올림하거나 일반적인 값으로 바꾸고, Chrome도 사용자 에이전트 문자열에 담는 정보를 줄였습니다.
자주 묻는 질문
4K 모니터인데 왜 2560 × 1440이나 1920 × 1080으로 나오나요?
글자가 너무 작아지지 않도록 운영체제가 화면 배율(예: 150%나 200%)을 적용하고 있기 때문입니다. 패널의 실제 해상도는 물리 픽셀 행에서 볼 수 있습니다.
뷰포트가 왜 화면보다 작나요?
뷰포트에는 브라우저의 탭과 주소 표시줄, 작업 표시줄이나 Dock이 빠져 있고, 창 크기를 바꾸면 함께 바뀝니다. 휴대폰에서는 주소 표시줄이 나타나고 사라질 때도 달라질 수 있습니다.
휴대폰은 최신 안드로이드인데 왜 Android 10으로 나오나요?
안드로이드용 Chrome은 핑거프린팅을 줄이기 위해 사용자 에이전트 문자열에 고정된 안드로이드 버전을 적기 때문에, 이 문자열로는 실제 버전을 알 수 없습니다.
Windows가 왜 “Windows 10 또는 11”로 나오나요?
두 버전이 똑같은 사용자 에이전트 문자열을 보내기 때문입니다. Chrome과 Edge는 별도의 브라우저 기능으로 차이를 알려 주므로, 이 브라우저에서는 정확한 버전이 표시됩니다.
화면 해상도는 어떻게 바꾸나요?
Windows에서는 설정 › 시스템 › 디스플레이에서 해상도나 배율을 바꿉니다. Mac에서는 시스템 설정 › 디스플레이를 이용하세요. 배율은 CSS 픽셀 크기를, 해상도는 모니터로 보내는 픽셀 수를 바꿉니다.