반응형 웹을 만들 때 브레이크포인트를 정해야 합니다. 768px 이하면 모바일 레이아웃으로 바꾸는 식입니다. 그런데 지금 내 브라우저 창이 몇 픽셀인지 어떻게 알 수 있을까요. 화면 크기 확인 도구에 접속하면 현재 뷰포트 크기가 바로 표시됩니다.
뷰포트와 해상도 차이
모니터 해상도와 브라우저 뷰포트는 다릅니다. 해상도는 모니터 전체 픽셀 수이고, 뷰포트는 브라우저 안에서 콘텐츠가 표시되는 영역입니다. 1920x1080 모니터라도 브라우저 창을 작게 하면 뷰포트는 훨씬 작습니다. 반응형 디자인에서 중요한 건 뷰포트 크기입니다.
실시간 크기 변화 감지
브라우저 창 크기를 조절하면 뷰포트 수치가 실시간으로 바뀝니다. 반응형 레이아웃이 어느 시점에 전환되는지 정확히 확인할 수 있습니다. 뷰포트 측정 도구를 띄워놓고 창 크기를 조절해보면서 테스트하면 편리합니다.
DPR이란
DPR은 Device Pixel Ratio의 약자입니다. 레티나 디스플레이처럼 고해상도 화면에서는 CSS 1픽셀이 실제로 여러 물리적 픽셀을 차지합니다. DPR 2인 화면에서 100px 이미지는 실제로 200x200 픽셀로 렌더링됩니다. DPR 확인 도구에서 현재 기기의 픽셀 밀도를 확인할 수 있습니다.
기기별 해상도 참고
아이폰, 갤럭시, 아이패드 같은 인기 기기의 해상도 목록을 참고할 수 있습니다. 특정 기기에서 어떻게 보일지 미리 파악하는 데 도움이 됩니다. 다양한 기기를 직접 테스트하기 어려울 때 해상도 정보가 유용합니다.
웹 개발에서 화면 크기 파악은 기본입니다. 온라인 화면 크기 확인 도구로 뷰포트와 해상도를 바로 체크하세요.