화면 및 창 정보
별도 표시가 없으면 크기는 웹사이트가 쓰는 단위인 CSS 픽셀 기준입니다. 정확한 값을 보려면 브라우저 확대/축소를 100%로 맞추세요(Ctrl+0, Mac에서는 ⌘0).
- 화면 해상도
- 확인 중… 웹사이트가 인식하는 화면 크기입니다.
- 물리 해상도
- 확인 중…화면 해상도 × 기기 픽셀 비율: 패널의 실제 픽셀 수입니다.
- 뷰포트(브라우저 창)
- 확인 중… 도구 모음을 제외하고 페이지가 보이는 영역입니다.
- 브라우저 창 전체
- 확인 중…
- 사용 가능한 화면
- 확인 중…화면에서 작업 표시줄, Dock 또는 메뉴 막대를 뺀 영역입니다.
- 기기 픽셀 비율
- 확인 중…
- 화면 비율
- 확인 중…
- 화면 방향
- 확인 중…
- 색 심도
- 확인 중…
- 색 영역
- 확인 중…
- HDR
- 확인 중…
- 주사율
- 확인 중…
- 터치스크린
- 확인 중…
- 모니터
- 확인 중…
화면 속 내 뷰포트
바깥 상자는 화면 전체이고, 음영 상자는 이 페이지에서 보이는 영역, 즉 브라우저 창이 있는 위치입니다.
자주 쓰이는 화면 해상도
모니터와 노트북은 물리 픽셀, 휴대폰과 태블릿은 웹사이트가 인식하는 CSS 픽셀 기준입니다. 내 화면과 일치하는 행에는 표시가 붙습니다.
| 이름 | 해상도 | 화면 비율 | 주요 용도 |
|---|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 | HD TV, 소형 노트북 |
| WXGA | 1366 × 768 | 16:9 | 보급형 노트북 |
| HD+ | 1600 × 900 | 16:9 | 17인치 노트북, 구형 모니터 |
| Full HD (1080p) | 1920 × 1080 | 16:9 | 대부분의 모니터와 노트북 |
| WUXGA | 1920 × 1200 | 16:10 | 사무용 모니터, 노트북 |
| QHD / 2K (1440p) | 2560 × 1440 | 16:9 | 27인치 모니터, 게이밍 |
| WQXGA | 2560 × 1600 | 16:10 | MacBook Air와 Pro, 16:10 노트북 |
| UWQHD | 3440 × 1440 | 21:9 | 34인치 울트라와이드 모니터 |
| 4K UHD (2160p) | 3840 × 2160 | 16:9 | 4K 모니터와 TV |
| 5K | 5120 × 2880 | 16:9 | iMac, Apple Studio Display |
| iPhone 12 / 13 / 14 | 390 × 844 | 19.5:9 | iPhone(CSS 픽셀) |
| iPhone 15 / 16 | 393 × 852 | 19.5:9 | iPhone(CSS 픽셀) |
| Android | 412 × 915 | 20:9 | Android 휴대폰(CSS 픽셀) |
| iPad | 810 × 1080 | 4:3 | iPad(CSS 픽셀) |
화면 해상도란
화면 해상도는 디스플레이가 가로와 세로로 표시하는 픽셀 수로, 가로 × 세로로 씁니다. Full HD 모니터는 1920 × 1080으로, 가로 1,920픽셀, 세로 1,080픽셀, 모두 합해 약 200만 픽셀입니다.
같은 크기의 화면이라면 픽셀이 많을수록 글자와 이미지가 선명합니다. 그래서 13인치 노트북의 해상도가 24인치 사무용 모니터보다 높을 수도 있습니다.
해상도가 모니터 사양보다 낮게 나오는 이유
Windows, macOS, iOS, Android는 선명한 화면에서도 글자를 읽기 쉽도록 모든 요소를 확대합니다. 1920 × 1080 패널의 노트북을 125% 배율로 쓰면 웹사이트에는 화면이 1536 × 864로 전달되고, 2560 × 1600 패널의 MacBook은 보통 1440 × 900이나 1470 × 956으로 보고됩니다.
웹사이트는 이렇게 배율이 적용된 크기, 즉 CSS 픽셀만 볼 수 있습니다. 여기에 기기 픽셀 비율을 곱하면 물리 해상도가 되며, 이 페이지는 큰 숫자 아래에 이를 보여 줍니다. 브라우저 확대/축소도 픽셀 비율을 바꾸므로 비교하기 전에 100%로 되돌리세요.
화면 해상도, 뷰포트, 창 크기의 차이
- 화면 해상도: 다른 창에 가려진 부분까지 포함한 디스플레이 전체.
- 사용 가능한 화면: 디스플레이에서 작업 표시줄, Dock 또는 메뉴 막대를 뺀 영역.
- 브라우저 창: 탭, 주소 표시줄, 테두리를 포함한 창 전체.
- 뷰포트: 창에서 페이지가 표시되는 부분. 웹 디자이너가 레이아웃을 테스트할 때 기준으로 삼는 크기이며, 창 크기를 바꾸거나 개발자 도구를 열면 달라집니다.
화면 해상도 변경 방법
- Windows 11 및 10: 바탕 화면에서 마우스 오른쪽 버튼 클릭 > 디스플레이 설정 > 디스플레이 해상도. (권장)이 붙은 값이 모니터의 기본 해상도입니다. 배율은 바로 위에서 설정합니다.
- macOS: Apple 메뉴 > 시스템 설정 > 디스플레이에서 크기를 고릅니다. 텍스트를 크게 할수록 CSS 픽셀 수는 줄고 하나하나가 커지지만, 패널의 물리 해상도는 그대로입니다.
- iPhone과 Android: 해상도는 고정되어 있습니다. 디스플레이 확대/축소(iPhone)나 화면 크기(Android)는 화면에 보이는 크기를 바꾸며, 그에 따라 웹사이트가 인식하는 CSS 크기도 바뀝니다.
- 가장 선명한 화면을 원한다면 기본 해상도는 그대로 두고 배율을 조정하세요.
자주 묻는 질문
내 모니터 해상도는 얼마인가요?
이 페이지 맨 위에 브라우저에서 읽어 온 값이 표시됩니다. 큰 숫자는 웹사이트가 인식하는 크기이고, 그 아래 줄은 디스플레이의 물리 해상도와 시스템에서 사용 중인 배율입니다.
모니터가 1920 × 1080인데 왜 1536 × 864로 나오나요?
시스템 배율이 125%로 설정되어 있어 웹사이트에는 화면이 1.25배 작게 보이기 때문입니다. 물리 해상도는 여전히 1920 × 1080이며, 큰 숫자 아래에 표시됩니다. 마찬가지로 150% 배율에서는 1920 × 1080이 1280 × 720이 됩니다.
1920 × 1080은 1080p, 2K와 같은 건가요?
1920 × 1080은 Full HD로, 1080p라고도 합니다. 모니터에서 2K는 보통 2560 × 1440(QHD 또는 1440p)을 뜻하지만, 영화 업계의 2K는 2048 × 1080입니다. 4K UHD는 3840 × 2160으로, 1080p의 4배 픽셀입니다.
뷰포트 크기란 무엇인가요?
뷰포트는 브라우저 창에서 탭, 주소 표시줄, 스크롤바를 뺀, 페이지가 표시되는 영역입니다. 반응형 웹사이트는 이 크기에 맞춰 레이아웃을 바꾸므로, 디자이너가 브라우저 크기를 물어볼 때 말하는 것이 바로 이 값입니다.
기기 픽셀 비율이란 무엇인가요?
CSS 픽셀 하나를 몇 개의 물리 픽셀로 표시하는지 나타내는 값입니다. 1은 배율이 없다는 뜻이고, Retina Mac과 많은 휴대폰은 보통 2, 최신 iPhone은 3입니다. 브라우저 확대/축소로도 바뀝니다.
휴대폰 화면 해상도는 어떻게 확인하나요?
휴대폰에서 이 페이지를 여세요. 휴대폰은 CSS 픽셀로 보고하므로, 예를 들어 iPhone 15에서는 393 × 852로 나옵니다. 여기에 픽셀 비율(이 iPhone은 3)을 곱하면 패널의 1179 × 2556픽셀이 되며, 이 페이지가 이 계산까지 해 줍니다.
주사율은 정확한가요?
브라우저가 프레임을 그리는 빈도로 측정하므로 근사치이며 정확하지는 않습니다. 절전 모드, 백그라운드 탭, 컴퓨터의 높은 부하 때문에 디스플레이 설정값보다 낮게 측정될 수 있습니다.
관련 가이드
- IP 주소란 무엇인가요?
IP 주소는 나에게 오는 데이터를 어디로 보내야 하는지 인터넷에 알려 주는 번호입니다. 생김새와 종류, 그리고 내 IP로 무엇을 알 수 있는지 알아봅니다.
- IP 주소 확인 방법
공인 IP는 클릭 한 번이면 확인됩니다. 사설 IP는 기기마다 확인 방법이 다릅니다. 기기별 정확한 순서를 정리했습니다.
- IPv4와 IPv6의 차이점은?
IPv6는 주소가 바닥난 IPv4를 대신하기 위해 만들어졌습니다. 두 버전의 비교, 내가 어느 쪽을 쓰는지 확인하는 방법, VPN 사용자에게 IPv6가 중요한 이유를 알아봅니다.
- DNS 유출이란 무엇이고 어떻게 해결하나요?
VPN을 켜 두어도 기기가 방문하는 모든 웹사이트를 통신사에 물어보고 있을 수 있습니다. 이것이 DNS 유출입니다. 찾아내는 법과 막는 법을 알아봅니다.