Snaplytics JS Tests

화면 해상도 테스트

디스플레이의 네이티브 해상도를 물리적 픽셀 단위로, 픽셀 비율·화면비·색 심도와 함께 확인하세요. 그런 다음 전체 화면 1픽셀 테스트 패턴을 실행합니다: 진짜 네이티브 해상도에서는 깨끗하고 균일한 질감으로 읽히며, 확대/축소 또는 비네이티브 모드는 흐림이나 모아레로 나타납니다.

네이티브 해상도

감지 중…

실시간
CSS 뷰포트
픽셀 비율
화면비
색 심도
테스트 패턴

패턴 전환

패턴 읽는 법
선명하고 균일한 질감

교대 픽셀이 부드러운 회색으로 섞입니다 — 디스플레이가 네이티브 해상도와 100% 배율로 실행 중입니다.

부드럽거나 흐림

이미지가 늘어나고 있습니다 — 해상도가 네이티브 미만으로 설정된 것 같아 GPU가 업스케일링 중입니다.

모아레 또는 띠 무늬

물결 패턴은 보간에서 옵니다. 브라우저 확대/축소를 100%로 재설정하고 OS 디스플레이 배율을 확인하세요.

화면 해상도란 디스플레이가 표시하는 픽셀 수를 의미하며, 가로 × 세로 형식으로 표기합니다 — 예를 들어 1920 × 1080과 같이 씁니다. 동일한 면적에 픽셀이 많을수록 이미지가 더 선명하고 세밀해집니다. 모든 평판 디스플레이에는 표시할 수 있는 고정된 물리적 픽셀 격자가 있으며, 이를 네이티브 해상도라고 합니다. 해당 해상도로 구동할 때 가장 선명하게 보입니다. 이 테스트는 브라우저가 보고하는 물리적 픽셀 격자를 읽어 위의 큰 숫자로 표시하므로, 하드웨어가 실제로 어떤 해상도로 구동되는지 확인할 수 있습니다.

낮은 해상도를 선택하면 GPU가 작은 이미지를 고정 격자에 맞게 늘려 전체적으로 흐릿하게 만듭니다. 현대 시스템은 디스플레이 스케일링(Retina, Windows 150%)을 추가하여 전체 밀도로 렌더링하면서도 인터페이스를 더 크게 표시합니다. 그래서 브라우저는 두 가지 크기를 보고합니다: 논리 픽셀 단위의 CSS 뷰포트와 실제 기기 픽셀 단위의 물리적 해상도입니다. 두 값의 비율이 기기 픽셀 비율(DPR)이며 — DPR이 2이면 각 CSS 픽셀이 2 × 2 블록의 물리적 픽셀로 뒷받침되므로, 브라우저가 인식하는 뷰포트는 화면 해상도의 절반일 수 있습니다.

일반적인 화면 해상도

해상도명칭사용 사례
1280 × 720HD / 720p구형 노트북, 보급형 디스플레이
1920 × 1080Full HD / 1080p가장 일반적인 데스크톱 및 노트북 해상도
2560 × 1440QHD / 1440p고선명 게이밍 및 업무용 모니터
3440 × 1440UltraWide QHD21:9 울트라와이드 패널
3840 × 21604K UHD대형 고DPI 화면, TV
1170 × 2532iPhone (DPR 3)최신 스마트폰 — 세로 길이가 길고 고밀도 패널

정확한 수치를 얻기 위한 팁

  • 브라우저 확대/축소를 100%로 초기화하세요 — 확대/축소는 OS와 독립적으로 페이지를 리샘플링합니다.
  • Windows에서는 Settings > System > Display에서 "(Recommended)"로 표시된 해상도를 선택하세요.
  • macOS에서는 System Settings > Displays에서 "Default for display"를 선택하세요.
  • 전체 화면 패턴을 실행해 보세요: 균일하고 깨끗한 회색이 나오면 네이티브 출력이며, 흐릿하거나 무아레 패턴이 보이면 스케일링이 적용된 것입니다.