기기별 화면 크기 및 해상도

논리 해상도와 물리 해상도, 그리고 DPR

모든 최신 화면에는 두 가지 해상도가 있습니다. 물리적 해상도는 패널에 실제로 내장된 픽셀 수로, 예를 들어 iPhone 15는 1179 × 2556입니다. 논리(CSS) 해상도는 웹페이지가 실제로 배치되는 더 작은 좌표 공간으로, 393 × 852 같은 값입니다. 기기 픽셀 비율(DPR)은 이 둘을 잇는 다리 역할을 합니다: 물리적 해상도를 논리적 해상도로 나눈 값이며, DPR이 3이라는 것은 CSS 픽셀 하나마다 실제 픽셀 3 × 3 블록을 그린다는 뜻입니다. 고밀도 '레티나' 스마트폰과 노트북은 선명한 텍스트와 이미지를 위해 DPR 2 또는 3을 사용하는 반면, 일반적인 데스크톱 모니터는 DPR이 1이어서 CSS 픽셀 1개가 물리적 픽셀 1개와 같습니다.

디자이너가 뷰포트 크기를 기준으로 작업하는 이유

반응형 레이아웃을 만들 때 CSS 미디어 쿼리와 브레이크포인트는 패널의 물리적 픽셀이 아니라 CSS 픽셀, 즉 논리적 뷰포트를 기준으로 측정됩니다. 물리적으로 1080픽셀 너비인 스마트폰도 뷰포트는 360~414 CSS 픽셀에 불과하며, 이것이 360px 모바일 브레이크포인트가 대부분의 안드로이드 기기를 커버하는 이유입니다. 원본 해상도가 아닌 뷰포트를 기준으로 디자인하면 픽셀 밀도가 크게 다른 기기 사이에서도 텍스트와 터치 영역이 일관된 물리적 크기를 유지하므로, 저밀도 노트북에서든 고밀도 플래그십 스마트폰에서든 동일한 레이아웃이 자연스럽게 보입니다.

이 표를 읽는 방법

• 뷰포트(CSS px)는 웹페이지가 인식하는 논리적 크기로, 기기의 기본 방향(스마트폰과 태블릿은 세로, 노트북과 모니터는 가로) 기준으로 기재되어 있습니다.
• 물리적 해상도는 패널의 실제 픽셀 수로, 스펙 시트에 표기되는 값입니다.
• DPR(기기 픽셀 비율)은 뷰포트를 물리적 해상도로 확대하는 배율이며, 1보다 큰 값은 고밀도 디스플레이를 의미합니다.
• 화면 비율은 화면의 형태를 나타내며, 최신 스마트폰의 세로로 긴 19.5:9부터 대부분 모니터의 16:9, 울트라와이드의 21:9와 32:9까지 다양합니다.
• 노트북과 4K 항목은 일반적인 기본 디스플레이 배율 수준을 반영하므로, 뷰포트가 패널의 기본(네이티브) 해상도보다 작을 수 있습니다.

크기는 모델마다 달라집니다

이 수치는 확정값이 아니라 실용적인 참고 자료로 활용하세요. 제조사는 세대마다 화면 크기를 거의 매번 바꿉니다 — iPhone만 해도 최근 모델들에서 375, 390, 393, 402, 414, 430, 440 CSS 픽셀 너비의 뷰포트를 선보였고, 안드로이드 기기는 편차가 훨씬 더 큽니다. 운영체제의 디스플레이 배율 설정도 표시되는 뷰포트를 다시 바꿔 놓습니다: 150% 배율로 설정된 1080p 윈도우 노트북은 DPR 1.5의 1280 × 720 화면처럼 동작합니다. 가장 신뢰할 수 있는 값은 언제나 여러분의 브라우저가 직접 보고하는 값이며, 그래서 위에서 일치하는 기기를 현재 화면을 기준으로 실시간 감지해 보여드립니다.