해상도 확인
내 화면의 실제 해상도와 픽셀 비율, 뷰포트를 실시간으로 확인하세요.
물리 픽셀: CSS 크기 × 픽셀 비율
- 창 크기 변경에 실시간 반응
- 픽셀 비율 표시
- 휴대폰과 태블릿에서도 작동
화면 해상도 확인 방법
- 확인하려는 기기에서 이 페이지를 여세요.
- 아래 상자에서 해상도와 픽셀 비율을 확인하세요.
- 창 크기를 바꾸거나 기기를 돌려 숫자가 바뀌는지 확인하세요.
흔한 해상도와 쓰이는 곳
| 이름 | 해상도 | 주로 쓰이는 곳 |
|---|---|---|
| HD | 1280 x 720 | 구형이거나 보급형 노트북 |
| Full HD | 1920 x 1080 | 오늘날 판매되는 대부분의 노트북과 모니터 |
| QHD(1440p) | 2560 x 1440 | 고급형 모니터와 일부 휴대폰 |
| 4K UHD | 3840 x 2160 | 프리미엄 모니터와 TV |
물리 픽셀 vs CSS 픽셀
CSS 픽셀은 웹페이지가 배치되는 단위지만 항상 화면의 물리적인 점 하나와 일치하지는 않습니다. 픽셀 비율은 CSS 픽셀 하나에 물리 픽셀이 몇 개나 들어 있는지를 알려주는데, 비율이 2라면 패널은 웹사이트가 쓰는 CSS 픽셀 하나마다 2×2로 배열된 물리 픽셀 4개를 그리고 있다는 뜻입니다.
고밀도 휴대폰과 노트북 화면은 CSS 크기는 작게, 픽셀 비율은 2나 3으로 함께 보고하는 반면, 대부분의 데스크톱 모니터는 픽셀 비율이 1이라서 CSS 픽셀과 물리 픽셀이 정확히 하나씩 대응합니다.
해상도를 바꾸는 방법
- Windows 11에서는 설정, 시스템, 디스플레이를 열어 디스플레이 해상도 드롭다운에서 다른 옵션을 고르세요.
- macOS에서는 시스템 설정, 디스플레이를 열어 기본값이나 해상도 조절 아래에 보이는 배율 조정 옵션 중 하나를 고르세요.
- 휴대폰이나 태블릿을 돌리거나 데스크톱에서 브라우저 창 크기를 바꿔 보세요. 실제 디스플레이 해상도는 바뀌지 않지만 이 페이지의 뷰포트 숫자가 실시간으로 바뀌는 것을 볼 수 있습니다.
화면 해상도 확인 자주 묻는 질문
왜 디스플레이 설정과 다른 숫자가 나오나요?
Windows와 macOS는 디스플레이 설정에서 선택한 해상도를 보여주는데, 배율 조정이 켜져 있으면 패널의 원래 해상도보다 낮을 수 있습니다. 이 페이지는 브라우저가 인식하는 값에 픽셀 비율을 곱한 값을 보여줍니다.
devicePixelRatio란 무엇인가요?
물리 픽셀과 CSS 픽셀의 비율입니다. 비율이 2라는 것은 CSS 픽셀 하나가 물리 픽셀 4개로 그려진다는 뜻으로, 휴대폰 화면과 대부분의 최신 노트북에서 흔합니다.
뷰포트가 화면 크기보다 작은 이유는 무엇인가요?
뷰포트는 브라우저 창 안에서 실제로 보이는 영역이라서, 작업 표시줄, 브라우저 도구 모음, 화면의 다른 창은 제외됩니다.
휴대폰이나 태블릿에서도 되나요?
네. 어떤 모바일 브라우저에서든 페이지를 열고 기기를 돌려 세로·가로 모드의 숫자를 각각 확인해 보세요.
모니터에는 어떤 해상도를 골라야 하나요?
디스플레이 설정에서 권장으로 표시된 항목을 고르세요. 이는 패널의 원래 해상도와 일치합니다. LCD 모니터를 원래 해상도보다 낮게 쓰면 이미지를 확대해야 해서 글자와 선이 흐릿해지는 경우가 많습니다.
화면 크기가 같은 두 휴대폰인데 숫자가 다르게 나오는 이유는 무엇인가요?
제조사는 화면의 물리적 크기가 비슷해도 각자 원하는 픽셀 밀도와 CSS 배율을 정하므로, 대각선 크기가 비슷한 두 휴대폰이라도 해상도와 픽셀 비율이 서로 다르게 표시될 수 있습니다.
해상도와 화면 크기는 어떻게 다른가요?
해상도는 화면을 가로지르는 픽셀 수를 셉니다. 크기는 인치로 잰 물리적 대각선 길이입니다. 같은 해상도를 더 작은 화면에 넣으면 픽셀 밀도가 높아지는데, 이것이 휴대폰 화면이 같은 픽셀 수의 모니터보다 가까이서 보면 더 선명해 보이는 이유입니다.