반응형 웹사이트를 만들거나 디자인 작업을 할 때 현재 화면의 정확한 픽셀 크기를 알아야 할 때가 있습니다. 모니터 설정에서 확인할 수도 있지만 브라우저 창 크기는 또 다릅니다. 화면 크기 확인 도구로 뷰포트와 해상도를 실시간으로 확인할 수 있습니다.
해상도와 뷰포트의 차이
모니터 해상도는 화면 전체의 픽셀 수입니다. 하지만 브라우저 창은 전체 화면보다 작을 수 있고, 주소창이나 북마크바가 공간을 차지합니다. 뷰포트는 웹 콘텐츠가 실제로 표시되는 영역의 크기입니다. 반응형 웹 개발에서는 뷰포트 크기가 더 중요합니다.
실시간 크기 측정
koreaeu.kr/screen-size에 접속하면 현재 브라우저 창의 뷰포트 크기가 표시됩니다. 창 크기를 조절하면 숫자가 실시간으로 변합니다. 특정 브레이크포인트에서 레이아웃이 어떻게 바뀌는지 테스트할 때 정확한 픽셀 값을 보면서 확인할 수 있습니다.
DPR 디바이스 픽셀 비율
화면 크기 확인 도구는 DPR(Device Pixel Ratio)도 보여줍니다. 레티나 디스플레이처럼 고해상도 화면에서는 CSS 픽셀 하나가 실제 여러 픽셀로 표시됩니다. DPR이 2면 1px이 4개의 물리적 픽셀로 렌더링됩니다. 이미지 선명도나 아이콘 크기를 설계할 때 참고해야 하는 값입니다.
기기별 해상도 비교
대표적인 디바이스들의 해상도 목록도 함께 제공됩니다. 아이폰, 아이패드, 갤럭시 시리즈, 일반 데스크톱 모니터 등의 뷰포트 크기를 비교해볼 수 있습니다. 타겟 기기에 맞춰서 미디어 쿼리 브레이크포인트를 설정할 때 참고하면 좋습니다.
정리
반응형 웹 작업이나 UI 디자인에서 정확한 화면 크기를 아는 것이 기본입니다. 온라인 화면 크기 확인 도구로 뷰포트, 해상도, DPR을 한눈에 확인해보세요.