디자이너가 만든 시안대로 웹페이지를 퍼블리싱했는데, 특정 노트북에서 레이아웃이 깨진다. 원인을 찾으려면 그 기기의 화면 해상도와 브라우저 창 크기를 정확히 알아야 한다. 개발자 도구를 열어도 되지만, 더 간단한 방법이 있다.
화면 크기, 해상도, 뷰포트 차이
- 모니터 해상도
- 디스플레이 전체의 물리적 픽셀 수다. 1920×1080이면 가로 1920, 세로 1080 픽셀이라는 뜻이다.
- 브라우저 창 크기
- 브라우저 윈도우의 크기다. 전체 화면이면 모니터 해상도와 비슷하지만, 창을 줄이면 당연히 작아진다.
- 뷰포트(Viewport)
- 웹 콘텐츠가 실제로 표시되는 영역이다. 브라우저 창에서 주소창, 탭, 스크롤바를 빼고 남는 부분이다. CSS 미디어 쿼리가 기준으로 삼는 값이 이것이다.
DPR이란
DPR(Device Pixel Ratio)은 물리 픽셀과 CSS 픽셀의 비율이다. 일반 모니터는 DPR 1이고, 맥북 레티나 디스플레이는 DPR 2다. DPR 2이면 CSS에서 1px이 실제로는 2×2 = 4개의 물리 픽셀로 렌더링된다. 이미지가 흐릿하게 보이는 문제의 원인이 DPR인 경우가 많다.
TIP 레티나 디스플레이에서 이미지가 선명하게 보이려면 실제 표시 크기의 2배(DPR 2 기준) 해상도로 제공해야 한다. 300px 너비로 표시할 이미지라면 원본은 600px 이상이어야 한다.
주요 기기별 해상도
| 기기 | 해상도 | DPR |
|---|---|---|
| iPhone SE | 375×667 | 2 |
| iPhone 15 Pro | 393×852 | 3 |
| iPad | 768×1024 | 2 |
| 노트북 (FHD) | 1920×1080 | 1~1.5 |
| 맥북 프로 14" | 1512×982 (CSS) | 2 |
| 4K 모니터 | 3840×2160 | 1~2 |
내 화면 크기 바로 확인하기
화면 크기 확인 도구에 접속하면 현재 브라우저 창 크기, 모니터 해상도, 뷰포트 크기, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 나온다. 창 크기를 조절하면 수치가 실시간으로 바뀌어서, 특정 뷰포트에서 CSS가 어떻게 적용되는지 테스트할 때 유용하다.
반응형 레이아웃 문제는 대부분 뷰포트 크기와 미디어 쿼리 브레이크포인트의 불일치에서 시작된다. 정확한 수치를 먼저 파악하면 디버깅이 빨라진다.