화면 해상도와 뷰포트 차이 완벽 정리 - 같은 1920인데 왜 다르게 보일까
모니터는 1920px인데 브라우저는 1536px이라고 말합니다. 화면 해상도와 뷰포트의 차이, 그리고 그 차이를 만드는 기기 픽셀 비율(DPR)의 원리를 실제 기기 수치와 함께 쉽게 정리했습니다.
모니터 사양표에는 분명 1920×1080이라고 적혀 있는데, 개발자 도구를 열어 보면 화면 너비가 1536px로 나오는 경험, 한 번쯤 있으실 겁니다. 스마트폰은 더 심합니다. 아이폰 15의 해상도는 2556×1179인데, 웹사이트가 인식하는 너비는 고작 393px입니다. 화면 해상도와 뷰포트 차이를 정확히 모르면 이 숫자들이 전부 오류처럼 보입니다.
하지만 이 두 개념은 반응형 웹 제작, 방송 화면 세팅, 썸네일 제작까지 거의 모든 화면 작업의 출발점입니다. 원리는 생각보다 단순합니다. 하나씩 풀어보겠습니다.
화면 해상도와 뷰포트 차이, 한 문장으로 정리하면
화면 해상도는 디스플레이 하드웨어가 가진 물리적 픽셀의 개수이고, 뷰포트는 브라우저가 웹페이지를 그려 넣는 논리적 영역의 크기입니다. 전자는 기기의 스펙이고, 후자는 소프트웨어가 계산해 낸 값입니다.
비유하자면 해상도는 도화지에 찍힌 모눈의 개수이고, 뷰포트는 그 도화지 위에서 실제로 그림을 그리기로 정한 작업 영역입니다. 모눈이 아무리 촘촘해도 작업 영역의 크기는 별도로 정해집니다. 그래서 같은 모니터라도 운영체제의 배율 설정이나 브라우저 확대 비율에 따라 뷰포트 숫자는 얼마든지 달라집니다.
화면 해상도: 하드웨어의 물리적 픽셀
해상도는 디스플레이 패널에 실제로 박혀 있는 픽셀의 가로×세로 개수입니다. 공장에서 정해져 나오는 값이라 사용자가 바꿀 수 없습니다. 운영체제에서 해상도를 낮추는 것은 픽셀 수를 줄이는 게 아니라, 낮은 해상도의 화면을 물리 픽셀에 맞춰 확대해 보여주는 것입니다.
자주 쓰이는 해상도 규격
- FHD(1920×1080): 가장 보편적인 모니터, 노트북 해상도이며 방송 송출의 표준이기도 합니다
- QHD(2560×1440): 27인치 모니터에서 많이 쓰이는 규격입니다
- 4K UHD(3840×2160): FHD의 정확히 4배 픽셀 수를 갖습니다
- 스마트폰: 아이폰 15는 1179×2556, 갤럭시 S24는 1080×2340입니다
위 규격들은 대부분 16:9 비율을 따릅니다. 영상이나 썸네일을 만들 때 특정 너비에서 16:9를 유지하려면 높이를 매번 계산해야 하는데, 이럴 때는 화면 비율 계산기를 이용하면 원하는 너비에 맞는 높이를 바로 구할 수 있어 편리합니다.
뷰포트: 브라우저가 페이지를 그리는 영역
뷰포트는 브라우저 창에서 주소창, 탭, 북마크 바를 제외하고 웹페이지가 실제로 표시되는 영역을 말합니다. 단위는 물리 픽셀이 아니라 CSS 픽셀입니다. CSS에서 width: 100px이라고 쓸 때의 그 픽셀이 바로 CSS 픽셀이고, 미디어 쿼리가 판단하는 기준도 이 값입니다.
모바일의 기본 뷰포트는 980px
모바일 브라우저는 뷰포트 설정이 없는 페이지를 만나면 뷰포트 너비를 980px로 가정하고 페이지 전체를 축소해서 보여줍니다. PC 전용으로 만든 옛날 사이트를 스마트폰에서 열었을 때 글자가 깨알같이 작게 보이는 이유가 이것입니다.
숫자 차이를 만드는 핵심, 기기 픽셀 비율(DPR)
물리 해상도와 뷰포트 사이의 환산 비율이 DPR(Device Pixel Ratio, 기기 픽셀 비율)입니다. 계산은 간단합니다. 물리 픽셀 수를 CSS 픽셀 수로 나눈 값입니다. 아이폰 15는 물리 너비 1179px을 뷰포트 너비 393px로 나눈 3이 DPR입니다. CSS 픽셀 1개를 물리 픽셀 3×3, 즉 9개로 표현한다는 뜻이고, 그만큼 화면이 선명해집니다.
| 기기 | 물리 해상도 | 뷰포트 너비(CSS px) | DPR |
|---|---|---|---|
| FHD 모니터(배율 100%) | 1920×1080 | 약 1920 | 1 |
| FHD 노트북(윈도우 배율 125%) | 1920×1080 | 약 1536 | 1.25 |
| 아이폰 15 | 1179×2556 | 393 | 3 |
| 갤럭시 S24 | 1080×2340 | 360 | 3 |
글 서두의 의문이 여기서 풀립니다. 윈도우 노트북은 글자가 너무 작아지지 않도록 기본 배율이 125%나 150%로 설정된 경우가 많습니다. 배율 125%면 DPR이 1.25가 되어 1920을 1.25로 나눈 1536이 뷰포트 너비가 되는 것입니다.
웹에서 다루는 픽셀은 대부분 CSS 픽셀입니다. 물리 해상도는 화면의 선명도를 결정하고, 레이아웃을 결정하는 것은 언제나 뷰포트입니다. 이 한 줄만 기억해도 화면 관련 숫자의 혼란은 대부분 사라집니다.
내 화면의 해상도와 뷰포트 확인하는 방법
브라우저 개발자 도구의 콘솔에서 아래 값을 입력하면 바로 확인할 수 있습니다.
- window.screen.width: 화면 전체의 너비를 CSS 픽셀 기준으로 보여줍니다
- window.innerWidth: 현재 뷰포트의 너비입니다. 스크롤바를 포함한 값이며, 스크롤바를 뺀 순수 콘텐츠 영역은 document.documentElement.clientWidth로 확인합니다
- window.devicePixelRatio: 현재 화면의 DPR을 알려줍니다. 브라우저 확대 비율을 바꾸면 이 값도 함께 변합니다
실무에서 이렇게 적용하세요
반응형 웹은 뷰포트 기준으로 설계합니다
미디어 쿼리의 분기점은 물리 해상도가 아니라 뷰포트 기준입니다. 갤럭시 S24의 물리 너비가 1080px이라고 해서 1080px 분기점을 만들면 안 됩니다. 실제 뷰포트는 360px이기 때문입니다. 모바일은 360~430px, 태블릿은 768px 전후, 데스크톱은 1024px 이상을 기준으로 잡는 방식이 널리 쓰입니다.
이미지와 방송 화면은 물리 픽셀을 신경 씁니다
DPR 3인 스마트폰에서 뷰포트 기준 300px 폭으로 표시될 이미지를 300px짜리로 만들면 흐릿하게 보입니다. 물리 픽셀로는 900px이 필요하기 때문입니다. 그래서 표시 크기의 2배 해상도로 이미지를 준비하는 2x 이미지가 관행이 되었습니다. 방송 송출도 마찬가지입니다. OBS의 캔버스와 출력 해상도는 브라우저 뷰포트와 무관한 실제 픽셀 값이므로, 모니터 배율 설정과 상관없이 1920×1080 같은 규격 그대로 지정하면 됩니다.
오늘 바로 해볼 수 있는 것은 두 가지입니다. 첫째, 지금 쓰는 기기에서 개발자 도구 콘솔에 window.innerWidth와 devicePixelRatio를 입력해 내 화면의 실제 뷰포트와 DPR을 눈으로 확인해 보세요. 둘째, 웹 작업을 한다면 뷰포트 기준으로, 이미지와 영상 작업을 한다면 물리 픽셀 기준으로 크기를 정한다는 원칙을 작업 문서에 한 줄 적어 두세요. 이 구분 하나만으로 화면이 흐리게 나오거나 레이아웃이 깨지는 문제의 상당수를 예방할 수 있습니다.
