화면 정보 확인 무료 온라인 도구. 현재 모니터의 해상도·DPI·화면비·색상 깊이 정보를 확인. 브라우저 처리, 설치 불필요.
Ctrl+D 를 눌러 이 페이지를 즐겨찾기에 추가하세요
화면 정보 도구는 현재 기기의 화면 해상도, 뷰포트 크기, DPR, 색 깊이 등을 표시하는 무료 온라인 도구입니다. 반응형 디자인 개발과 디버깅에 유용하며 실시간으로 창 크기 변경을 감지합니다. 브라우저 처리, 무료.
DPR은 CSS 픽셀 1개에 해당하는 물리적 픽셀 수입니다. DPR 2는 레티나 디스플레이로, 이미지를 2배 크기로 준비해야 선명하게 표시됩니다.
화면 해상도는 모니터의 전체 물리적 픽셀 수이고, 뷰포트는 브라우저에서 콘텐츠가 표시되는 영역입니다. 뷰포트는 툴바, 스크롤바 등을 제외한 크기입니다.
특정 기기 이름에 맞춰 값을 정하면 새 기기가 나올 때마다 무너집니다. 대신 레이아웃이 실제로 어색해지는 지점에서 끊으세요. 실무에서는 480px, 768px, 1024px, 1280px 정도가 흔한 출발점이지만, 이는 기억하기 쉬운 기준일 뿐 규칙이 아닙니다. 브라우저 창을 천천히 좁혀 보며 글줄이 너무 길어지거나 카드가 찌그러지는 폭을 찾아 그 자리에 중단점을 두는 편이 훨씬 튼튼합니다.
CSS 픽셀은 물리적 화소가 아니라 눈에 보이는 크기의 단위이기 때문입니다. 4K 화면에서 배율을 200%로 두면 물리 화소 3840개가 CSS 기준 1920px로 표시되고, 글자와 아이콘은 더 촘촘하고 또렷하게 보입니다. 이때 기기 픽셀 비율은 2가 되므로, 이미지를 선명하게 보이려면 표시 크기의 두 배 해상도 파일을 srcset으로 함께 제공해야 합니다.