CSS 미디어 쿼리에 max-width: 768px을 넣었는데, 태블릿에서 확인해보니 데스크톱 레이아웃이 나온다. 기기 해상도는 1024px인데 뷰포트는 768px이고, DPR은 2라서 실제 물리 픽셀은 2048개다. 숫자가 세 개나 나오니 어느 기준으로 미디어 쿼리를 잡아야 할지 헷갈린다.
해상도, 뷰포트, DPR 구분
- 화면 해상도(Screen Resolution)
- 모니터가 물리적으로 표현할 수 있는 전체 픽셀 수. 1920×1080이면 가로 1920개, 세로 1080개의 픽셀이 있다.
- 뷰포트(Viewport)
- 브라우저에서 웹 콘텐츠가 실제로 표시되는 영역. 주소창, 탭, 북마크 바를 뺀 나머지다. 창 크기를 줄이면 뷰포트도 줄어든다.
- DPR(Device Pixel Ratio)
- CSS 1px을 표현하는 데 쓰이는 물리적 픽셀 수. 레티나 디스플레이는 DPR이 2 또는 3이다. 해상도가 높아도 CSS 기준 뷰포트는 해상도 ÷ DPR이 된다.
CSS 미디어 쿼리는 물리적 해상도가 아니라 CSS 픽셀 기준의 뷰포트 너비에 반응한다. 그래서 실제 기기의 뷰포트가 몇인지 아는 게 중요하다.
내 화면 크기 확인하기
화면 크기 확인 도구에 접속하면 브라우저 창 크기, 모니터 해상도, 뷰포트, DPR, 색상 깊이, 화면 방향(가로/세로)이 한 화면에 나온다. 창 크기를 드래그해서 조절하면 수치가 실시간으로 바뀌니까, 특정 뷰포트 너비에서 레이아웃이 어떻게 전환되는지 직접 눈으로 확인할 수 있다.
반응형 브레이크포인트 기준
| 분류 | 뷰포트 너비 | 대표 기기 |
|---|---|---|
| 모바일 | ~479px | iPhone SE (375px) |
| 모바일 가로 | 480~767px | iPhone 14 가로 (844px ÷ DPR) |
| 태블릿 | 768~1023px | iPad (810px) |
| 데스크톱 | 1024~1439px | MacBook Air (1440px ÷ DPR) |
| 대형 데스크톱 | 1440px~ | 외장 모니터 (1920px) |
TIP Tailwind CSS의 기본 브레이크포인트는 sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)이다. 프레임워크 기본값에 맞추면 디바이스 테스트가 편해진다.
DPR을 고려해야 하는 경우
이미지 선명도가 DPR에 달려 있다. DPR 2인 기기에서 100×100 CSS 픽셀 자리에 100px 이미지를 넣으면 흐릿하게 보인다. 200×200 이미지를 넣어야 선명하다.
- DPR 1: 일반 모니터. 1x 이미지면 충분하다
- DPR 2: 레티나 MacBook, 대부분의 스마트폰. 2x 이미지 권장
- DPR 3: 최신 플래그십 스마트폰. 3x까지 준비하면 완벽하지만, 2x로도 충분한 경우가 많다
HTML의 srcset 속성이나 CSS의 image-set()으로 DPR별 이미지를 분기할 수 있다.
반응형 디자인에서 숫자 하나 잘못 잡으면 특정 기기에서 레이아웃이 깨진다. 개발자 도구보다 실제 뷰포트 값을 먼저 확인하고 브레이크포인트를 잡는 게 순서다.