반응형 웹사이트를 개발하다 보면 특정 픽셀에서 레이아웃이 깨지는 경우가 있습니다. CSS 미디어 쿼리를 768px로 설정했는데, 실제로 테스트해보면 어디서 깨지는지 정확히 모르겠더라고요. 브라우저 창 크기를 정확히 알아야 디버깅이 가능해요.
개발자 도구보다 편한 방법
크롬 개발자 도구에서 창 크기 보는 방법이 있긴 한데, 계속 켜놓고 작업하기가 번거롭습니다. 화면 크기 확인 사이트를 따로 띄워놓으면 실시간으로 현재 브라우저 창 크기가 몇 픽셀인지 바로 보입니다.
뷰포트 크기, 화면 해상도, DPR(디바이스 픽셀 비율)까지 한눈에 볼 수 있어요. 레티나 디스플레이처럼 고해상도 모니터에서는 DPR이 2 이상이라서, 실제 픽셀과 CSS 픽셀이 다릅니다. 이 차이를 알아야 정확한 반응형 디자인이 가능해요.
브레이크포인트 테스트할 때 유용
보통 반응형 브레이크포인트를 480px, 768px, 1024px 이런 식으로 잡는데, 창 크기를 늘렸다 줄였다 하면서 어디서 레이아웃이 바뀌는지 확인해야 합니다. 이때 현재 창 크기가 몇 픽셀인지 실시간으로 보이면 테스트가 훨씬 편해요.
예를 들어 창을 줄이다가 767px에서 갑자기 깨지면, 768px 미디어 쿼리가 제대로 적용 안 됐다는 걸 바로 알 수 있습니다. 숫자 확인 없이 대충 테스트하면 원인 찾기가 어려워요.
모바일 기기별 해상도 비교
이 사이트에서는 아이폰, 갤럭시, 아이패드 등 주요 기기별 해상도도 볼 수 있습니다. 실제 기기 테스트 전에 해당 해상도로 창 크기를 맞춰서 미리 확인할 수 있어요. 반응형 웹 개발할 때 북마크해두면 유용합니다.