📱기기별 화면 해상도 가이드

디바이스 카테고리를 선택하면 논리 해상도, 물리 해상도, DPI, DPR을 한눈에 확인합니다.

디바이스 카테고리

디바이스	논리 px	물리 px	DPR	PPI

DPI · 픽셀 변환 계산기

DPI와 크기로 필요한 픽셀 수 계산

🖨️

인쇄용 DPI 해상도 계산기

인쇄 방식별 픽셀 해상도 계산

논리 픽셀 vs 물리 픽셀

CSS와 디자인 툴에서 사용하는 픽셀은 논리 픽셀(CSS px)입니다. 레티나나 고해상도 디스플레이에서는 화면에 실제로 더 많은 물리 픽셀을 사용해 더 선명한 이미지를 표시합니다. 디바이스 픽셀 비율(DPR)이 2x면 1 CSS px당 4개의 물리 픽셀(2×2)이 사용됩니다.

디자인 작업 기준 해상도

Figma, Sketch 등 디자인 툴에서는 1x(논리 픽셀) 기준으로 작업합니다. 내보내기 시 2x(레티나), 3x(슈퍼레티나) 옵션으로 내보내면 고해상도 기기에서도 선명하게 표시됩니다. 모바일 디자인은 375px 또는 390px 너비를 기준으로 하는 것이 일반적입니다.

반응형 디자인 브레이크포인트 참고

모바일: 375~430px, 태블릿: 768~1024px, 데스크탑: 1280px 이상이 일반적인 기준입니다. 실제 디바이스 논리 해상도를 참고해 브레이크포인트를 설정하면 더 정확한 반응형 레이아웃을 구성할 수 있습니다.

자주 묻는 질문

이미지를 어떤 해상도로 제공해야 하나요?

DPR 3x 기기를 지원하려면 이미지를 표시 크기의 3배로 제공해야 합니다. srcset 속성을 사용해 1x, 2x, 3x 이미지를 각각 제공하면 기기에 맞는 해상도를 자동으로 로드합니다.

PPI와 DPI의 차이는 무엇인가요?

PPI(Pixels Per Inch)는 화면의 픽셀 밀도이고, DPI(Dots Per Inch)는 원래 인쇄 용어입니다. 화면 해상도를 이야기할 때는 PPI가 정확한 표현이지만, 실무에서는 혼용해서 쓰이기도 합니다.

관련된 도구