CSS 미디어 쿼리로 반응형 웹을 만들고 있습니다. 768px 이하에서 모바일 레이아웃으로 바뀌게 설정했는데, 지금 내 브라우저 창이 정확히 몇 픽셀인지 모르겠습니다. 개발자 도구를 열어서 확인하려니 패널이 너무 많아서 복잡하고요. 화면 크기 확인 도구를 사용하면 창 크기를 실시간으로 큼직하게 볼 수 있습니다.
뷰포트와 화면 해상도의 차이
두 가지 개념을 구분해야 합니다. 화면 해상도는 모니터 전체의 픽셀 수이고(예: 1920×1080), 뷰포트는 브라우저 창 안에서 웹 콘텐츠가 실제로 표시되는 영역입니다. 주소창, 탭 바, 북마크 바 등을 제외한 영역이죠. 반응형 웹의 미디어 쿼리는 뷰포트 크기를 기준으로 작동합니다.
실시간 크기 측정
브라우저 크기 확인 페이지를 열어두면 창 크기가 실시간으로 표시됩니다. 브라우저 창을 늘리거나 줄일 때마다 숫자가 즉시 업데이트됩니다. 768px, 1024px 같은 브레이크포인트에 도달하는 순간을 정확히 확인할 수 있어서 미디어 쿼리 테스트에 편리합니다.
측정되는 정보들
단순히 가로×세로 픽셀만 보여주는 게 아닙니다. 다음 정보들을 한눈에 확인할 수 있습니다:
- 브라우저 창 크기: 현재 브라우저 창의 전체 크기
- 뷰포트 크기: 웹 콘텐츠가 표시되는 실제 영역
- 화면 해상도: 모니터의 물리적 해상도
- DPR(Device Pixel Ratio): CSS 픽셀과 물리적 픽셀의 비율
- 색상 깊이: 표현 가능한 색상 수 (비트 단위)
- 화면 방향: 가로(landscape) 또는 세로(portrait)
- 터치 지원: 터치스크린 여부
DPR이 왜 중요한가요?
레티나 디스플레이나 고해상도 모니터에서는 DPR 값이 2 이상입니다. DPR이 2라는 것은 CSS 1픽셀이 실제로 4픽셀(2×2)로 렌더링된다는 의미입니다. 이미지를 선명하게 표시하려면 DPR을 고려해서 2x, 3x 해상도의 이미지를 제공해야 합니다. 화면 크기 측정 도구에서 현재 기기의 DPR을 바로 확인할 수 있습니다.
기기별 해상도 비교
주요 기기들의 해상도가 표로 정리되어 있어서 참고하기 좋습니다:
- iPhone SE: 375×667
- iPhone 14: 390×844
- iPhone 14 Pro Max: 430×932
- iPad: 768×1024
- iPad Pro 12.9": 1024×1366
- MacBook Air: 1440×900
- Full HD: 1920×1080
- 4K UHD: 3840×2160
현재 내 기기와 비교하면서 타겟 기기에서 어떻게 보일지 예상할 수 있습니다.
반응형 브레이크포인트 가이드
일반적으로 많이 사용하는 미디어 쿼리 기준점입니다:
- 768px 이하: 모바일 기기
- 769px ~ 1024px: 태블릿
- 1025px ~ 1440px: 노트북, 소형 데스크톱
- 1441px 이상: 대형 데스크톱
창 크기를 조절하면서 이 기준점에 도달했을 때 레이아웃이 제대로 바뀌는지 테스트해볼 수 있습니다.
개발자 도구 대신 간단하게
크롬 개발자 도구(F12)에서도 화면 크기를 확인할 수 있지만, Elements, Console, Network 등 패널이 많아서 복잡합니다. 화면 크기 확인 페이지는 필요한 정보만 크게 보여주기 때문에, 멀리서도 숫자를 확인할 수 있습니다. 듀얼 모니터 환경에서 한쪽에 띄워두고 작업하기 좋습니다.
마무리
반응형 웹을 개발하면서 현재 뷰포트가 몇 픽셀인지 확인하고 싶을 때, 화면 크기 확인 도구를 활용하면 됩니다. 실시간 크기 업데이트, DPR 확인, 기기별 해상도 비교까지 한 페이지에서 가능합니다. 미디어 쿼리 브레이크포인트를 테스트하거나 크로스 브라우저 호환성을 확인할 때 유용합니다.