새 모니터를 샀는데 스펙에 적힌 해상도와 윈도우 설정에서 보이는 숫자가 다르다. 배율 설정 때문이다. 실제 픽셀 수, 브라우저가 인식하는 크기, CSS가 적용되는 영역이 전부 다를 수 있다.
해상도, 뷰포트, 창 크기의 차이
- 화면 해상도 (Screen Resolution)
- 모니터가 물리적으로 가진 픽셀 수다. 1920×1080이면 가로 1920개, 세로 1080개의 픽셀이 있다는 뜻이다.
- 브라우저 창 크기 (Window Size)
- 브라우저 윈도우의 전체 크기다. 전체 화면이 아니면 모니터 해상도보다 작다.
- 뷰포트 (Viewport)
- 웹 콘텐츠가 실제로 표시되는 영역이다. 브라우저 창에서 주소창, 탭, 스크롤바를 뺀 나머지다. CSS 미디어 쿼리는 이 뷰포트 크기를 기준으로 동작한다.
주요 해상도 한눈에 비교
| 이름 | 해상도 | 해당 기기 |
|---|---|---|
| HD | 1280 × 720 | 보급형 노트북, 구형 모니터 |
| FHD | 1920 × 1080 | 가장 일반적인 모니터 |
| QHD | 2560 × 1440 | 27인치 고해상도 모니터 |
| 4K UHD | 3840 × 2160 | 대형 모니터, TV |
| iPhone 15 | 1179 × 2556 | DPR 3x 적용 |
| iPad Pro 12.9 | 2048 × 2732 | DPR 2x 적용 |
DPR이 뭔가
DPR(Device Pixel Ratio)은 물리 픽셀과 CSS 픽셀의 비율이다. 레티나 디스플레이 같은 고밀도 화면에서 중요하다.
- DPR 1 — 1 CSS 픽셀 = 1 물리 픽셀 (일반 모니터)
- DPR 2 — 1 CSS 픽셀 = 4 물리 픽셀 (맥북 레티나)
- DPR 3 — 1 CSS 픽셀 = 9 물리 픽셀 (최신 스마트폰)
DPR 2인 화면에서 CSS width: 100px은 실제로 200개의 물리 픽셀을 차지한다. 이미지가 흐릿하게 보인다면 DPR에 맞는 고해상도 이미지를 제공해야 한다.
내 화면 정보 확인하기
화면 크기 확인 도구에 접속하면 현재 브라우저 창 크기, 모니터 해상도, 뷰포트 크기, DPR이 실시간으로 표시된다. 창 크기를 조절하면 수치가 바로 바뀌어서 반응형 디자인 테스트할 때 편하다.
반응형 웹에서 자주 쓰는 브레이크포인트
CSS 미디어 쿼리에서 레이아웃이 바뀌는 기준점을 브레이크포인트라고 한다. 프레임워크마다 조금씩 다르지만, 널리 쓰이는 기준은 다음과 같다.
| 분류 | 뷰포트 너비 | 대상 기기 |
|---|---|---|
| 모바일 | ~ 767px | 스마트폰 |
| 태블릿 | 768 ~ 1023px | 아이패드, 갤럭시탭 |
| 데스크톱 | 1024 ~ 1439px | 노트북, 일반 모니터 |
| 대형 화면 | 1440px ~ | 와이드 모니터 |
TIP 반응형 테스트는 실제 기기에서 하는 게 가장 정확하지만, 개발 중에는 브라우저 창 크기를 줄이면서 확인하는 것으로 충분하다. 크롬 개발자 도구(F12)의 기기 모드를 쓰면 특정 기기의 뷰포트를 시뮬레이션할 수도 있다.
화면 크기를 정확히 아는 것은 반응형 웹 개발의 출발점이다. 숫자를 알아야 미디어 쿼리를 제대로 잡을 수 있다.