모니터를 새로 샀는데 4K가 정말 3840×2160인지 확인하고 싶을 때가 있다. 반응형 웹을 만들 때는 지금 브라우저 창이 정확히 몇 픽셀인지 알아야 미디어 쿼리 기준점을 잡을 수 있다. 두 상황 모두 화면 크기 확인이 필요하다.
해상도와 뷰포트, 뭐가 다른가
같은 "화면 크기"라도 가리키는 게 다를 수 있다.
- 화면 해상도 (Screen Resolution)
- 모니터 전체의 물리적 픽셀 수다. 1920×1080이면 가로 1920픽셀, 세로 1080픽셀. 모니터를 바꾸지 않는 한 변하지 않는다.
- 뷰포트 (Viewport)
- 브라우저 안에서 웹 페이지가 표시되는 영역이다. 주소창, 탭, 북마크바를 빼고 남은 공간의 픽셀 수로, 창 크기를 줄이면 뷰포트도 줄어든다.
반응형 웹에서 CSS 미디어 쿼리가 참조하는 건 모니터 해상도가 아니라 뷰포트 너비다. 같은 1920×1080 모니터라도 브라우저를 반으로 줄이면 뷰포트는 약 960px이 된다.
DPR은 뭔가
DPR(Device Pixel Ratio)은 CSS 픽셀 1개를 몇 개의 물리적 픽셀로 표현하는지 나타내는 비율이다. 일반 모니터는 DPR 1이고, 레티나(Retina) 디스플레이는 DPR 2 이상이다.
DPR 2인 화면에서 CSS로 width: 100px을 주면 실제로는 200개의 물리적 픽셀이 사용된다. 웹에서 이미지가 흐릿하게 보인다면, DPR을 고려하지 않은 저해상도 이미지를 쓰고 있을 확률이 높다.
기기별 해상도 비교
| 기기 | 해상도 | DPR |
|---|---|---|
| Full HD 모니터 | 1920 × 1080 | 1 |
| QHD 모니터 | 2560 × 1440 | 1 |
| 4K UHD 모니터 | 3840 × 2160 | 1~2 |
| MacBook Pro 14" | 3024 × 1964 | 2 |
| iPhone 15 | 1179 × 2556 | 3 |
| iPad Pro 12.9" | 2048 × 2732 | 2 |
반응형 미디어 쿼리 기준점
웹 퍼블리싱에서 자주 쓰는 뷰포트 기준점이다. 프로젝트마다 다를 수 있지만, 아래 수치가 보편적이다.
- ~767px: 모바일
- 768px~1023px: 태블릿
- 1024px~1439px: 데스크톱
- 1440px~: 대형 화면
TIP 한국에서 가장 많이 쓰이는 데스크톱 해상도는 여전히 1920×1080이다. 모바일은 360~393px 뷰포트가 주류다. 실제 사용자 통계 기반으로 기준점을 잡으면 대다수를 커버할 수 있다.
지금 바로 확인하기
브라우저 개발자 도구를 열어도 확인할 수 있지만, 숫자가 여기저기 흩어져 있어서 한눈에 보기 불편하다. 화면 크기 확인 도구를 열면 모니터 해상도, 뷰포트 크기, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 정리되어 나온다. 창 크기를 바꿀 때마다 실시간으로 갱신되니, 반응형 테스트할 때 켜 놓으면 편하다.