px: 본질, 모바일 개발에서의 물리적 픽셀
px — 물리적 픽셀, 장치 화면에서 이미지의 가장 작은 요소입니다. 모바일 개발에서 px는 화면 해상도와 픽셀 밀도(PPI)의 기본 단위로 사용되지만, 인터페이스 레이아웃에는 실질적으로 사용되지 않습니다 — 대신 논리 단위 pt, dp, sp가 사용됩니다. 이 기사는 px가 논리 단위와 어떻게 다른지, 해상도와 PPI가 어떻게 관련되는지, 그리고 코드에서 px를 직접 사용하는 것이 안티패턴인 이유를 설명합니다.
주요 포인트
- px — 화면 밀도(PPI)를 고려하지 않는 디스플레이의 물리적 픽셀
- 화면 해상도(px) — 너비와 높이의 픽셀 수, 예: 1179 × 2556 px
- PPI — 인치당 픽셀 수, 이미지 선명도의 주요 지표
- 논리 단위(dp, pt, sp)는 px를 추상화하고 다양한 화면에 인터페이스를 적용
- 코드에서 px 사용은 안티패턴입니다. 밀도가 다른 장치에서 인터페이스가 올바르게 표시되지 않음
px란 무엇인가?
px(픽셀, 픽처 엘리먼트) — 래스터 이미지 또는 디스플레이의 가장 작은 주소 지정 가능 요소입니다. 각 픽셀은 RGB 모델(빨강, 초록, 파랑)에서 채널당 8~10비트의 색상 깊이로 색상 정보를 저장합니다. 최신 모바일 장치 디스플레이는 수백만 개의 픽셀을 포함합니다: iPhone 15 Pro — 300만, iPad Pro 12.9" — 560만 픽셀.
픽셀의 물리적 크기는 디스플레이 밀도(PPI)에 따라 달라집니다. 326 PPI(iPhone 11) 장치에서 하나의 픽셀은 약 0.078mm입니다. 460 PPI(iPhone 15 Pro) 디스플레이에서 — 0.055mm입니다. 픽셀의 물리적 크기가 작을수록 이미지의 선명도가 높아집니다. 동시에 픽셀 밀도는 렌더링 성능에 직접적인 영향을 미칩니다: 더 많은 픽셀 = GPU에 더 많은 작업.
Apple에 따르면, iPhone 15 Pro의 디스플레이 해상도는 1179 × 2556 px, 460 PPI입니다. 비교를 위해, iPhone SE(3세대) — 750 × 1334 px, 326 PPI입니다. 총 픽셀 수의 차이는 거의 3배이며, 이는 Pro 모델에서 더 높은 GPU 요구 사항을 설명합니다.
픽셀 단위의 화면 해상도
화면 해상도 — 가로 및 세로 방향의 물리적 픽셀 수입니다. 너비 × 높이 형식으로 작성되며, 예: 1179 × 2556 px입니다. 해상도는 디스플레이의 기본 특성으로 프로그래밍 방식으로 변경할 수 없습니다 — 하드웨어 및 매트릭스 수준에서 고정됩니다.
| 장치 | 해상도(px) | PPI | 화면 비율 |
|---|---|---|---|
| iPhone SE(3세대) | 750 × 1334 | 326 | 16:9 |
| iPhone 14 | 1170 × 2532 | 460 | 19.5:9 |
| iPhone 15 Pro Max | 1290 × 2796 | 460 | 19.5:9 |
| Samsung Galaxy S24 Ultra | 1440 × 3120 | 505 | 19.5:9 |
| Google Pixel 8 Pro | 1344 × 2992 | 490 | 20:9 |
| iPad Pro 12.9" | 2048 × 2732 | 264 | 4:3 |
픽셀 단위의 해상도를 화면의 논리적 크기(iOS의 pt 또는 Android의 dp)와 혼동해서는 안 됩니다. 예를 들어, iPhone 14의 논리적 크기는 390 × 844 pt이지만 물리적 해상도는 1170 × 2532 px입니다 — 스케일 팩터가 3이므로 정확히 3배 더 큽니다.
PPI와 픽셀 밀도
PPI(인치당 픽셀 수) — 디스플레이의 인치당 픽셀 수입니다. 공식: PPI = √(너비² + 높이²) / 대각선. PPI가 높을수록 개별 픽셀이 작아지고 이미지가 더 부드러워 보입니다. Apple은 일반적인 시청 거리에서 PPI가 300 이상인 디스플레이를 Retina 디스플레이로 간주합니다.
장치 카테고리별로 밀도가 다릅니다: Apple Watch — 326 PPI, iPhone — 326~460 PPI, iPad — 264 PPI, MacBook Pro — 254~264 PPI. Android 장치는 Density Buckets을 통해 밀도를 분류합니다: mdpi(160dpi), hdpi(240), xhdpi(320), xxhdpi(480), xxxhdpi(640). 이 버킷은 장치에 로드될 리소스(이미지, dimens)를 결정합니다.
개발에 미치는 PPI의 영향: 밀도가 높을수록 텍스처와 이미지를 저장하는 데 더 많은 메모리가 필요합니다. 500 PPI 디스플레이의 픽셀은 동일한 논리적 요소 크기에 대해 320 PPI 디스플레이보다 2.5배 더 많은 GPU 메모리가 필요합니다. 특정 밀도 버킷에 맞게 에셋을 최적화하는 것은 Android 개발의 표준 관행입니다.
px vs 논리 단위: pt, dp, sp
물리적 픽셀(px)은 논리 단위(pt, dp, sp)와 달리 하드웨어 해상도에 연결되어 있으며 크기가 조정되지 않습니다. 반면 논리 단위는 개발자를 특정 디스플레이에서 추상화하여 100 pt의 단일 값이 다른 장치에서 동일한 물리적 크기로 표시될 수 있도록 합니다.
| 단위 | 플랫폼 | PPI 의존성 | 크기 조정 | 목적 |
|---|---|---|---|---|
| px | 모두 | 예(물리적 픽셀) | 아니오 | 이미지, 버퍼, Metal |
| pt | iOS/macOS | 아니오(논리적 포인트) | 스케일 팩터 | 레이아웃, UIKit, SwiftUI |
| dp | Android | 아니오(밀도 독립) | 밀도 버킷 | 레이아웃, 요소 크기 |
| sp | Android | 아니오(스케일 독립) | 밀도 + 글꼴 스케일 | 텍스트(textSize) |
변환 공식: iOS의 경우 — px = pt × scale(scale = 1, 2 또는 3). Android의 경우 — px = dp × (dpi / 160). 코드에서 px를 직접 사용하면 밀도가 다른 장치에서 인터페이스가 다르게 보입니다: 높은 PPI 화면에서는 요소가 너무 작고, 낮은 PPI에서는 너무 큽니다.
코드에서 px를 사용하지 않는 이유
모바일 애플리케이션의 소스 코드에서 px를 사용하는 것은 픽셀 밀도가 다른 장치에서 인터페이스가 잘못 표시되는 안티패턴입니다. 최신 프레임워크(UIKit, SwiftUI, Jetpack Compose, XML Layouts)는 픽셀 단위로 크기를 지정하는 것을 금지하거나 권장하지 않습니다.
- iOS UIKit — 모든 frame, bounds 및 constraint constants는 pt로 설정됩니다. 픽셀은 UIGraphicsImageRenderer를 통한 래스터화 단계에서만 나타납니다
- SwiftUI — px로 크기를 설정하는 API가 없습니다. 모든 값은 Font, frame, padding을 통해 pt입니다
- Android XML — dimens.xml에서 px를 지정하면 Android Studio에 lint 경고가 표시됩니다: "텍스트 크기에 `px` 대신 `sp`를 사용하세요"
- Jetpack Compose — 텍스트용 TextUnit, 요소용 Dp. 컴파일러는 유형 혼합을 허용하지 않습니다
코드에서 px를 사용하는 유일한 합법적인 경우는 래스터 작업입니다: Bitmap 로드, Canvas에서 이미지 렌더링, Metal 또는 OpenGL 작업. 이러한 경우 px는 대상 버퍼의 물리적 픽셀이며 올바른 렌더링을 위해 고려해야 합니다. 다른 모든 경우에는 논리 단위가 사용됩니다.
이미지 및 에셋의 픽셀
이미지와 아이콘은 픽셀로 저장되지만 각 화면 유형에 대해 다른 버전이 제공됩니다. iOS는 Assets.xcassets에서 @1x, @2x, @3x 접미사를 사용합니다. Android는 drawable-mdpi(1×), drawable-hdpi(1.5×), drawable-xhdpi(2×), drawable-xxhdpi(3×), drawable-xxxhdpi(4×) 폴더를 사용합니다. 시스템은 화면 밀도에 따라 자동으로 올바른 파일을 선택합니다.
| iOS 스케일 | Android 버킷 | 계수 | 예시(48 pt/dp) |
|---|---|---|---|
| @1x | mdpi(160dpi) | 1× | 48 × 48 px |
| @2x | xhdpi(320dpi) | 2× | 96 × 96 px |
| @3x | xxhdpi(480dpi) | 3× | 144 × 144 px |
| — | xxxhdpi(640dpi) | 4× | 192 × 192 px |
에셋 제공 규칙: 벡터 형식(PDF, SVG)으로 이미지를 만들고 필요한 크기의 래스터 복사본으로 내보냅니다. 벡터 에셋은 품질 손실 없이 크기를 조정할 수 있으며 저장소에서 공간을 덜 차지합니다. Android에서는 VectorDrawable을 통해 벡터 리소스를 직접 사용할 수 있어 여러 래스터 복사본이 필요하지 않습니다.
자주 묻는 질문
px와 dp의 차이점은 무엇인가요?
px — 화면의 물리적 픽셀입니다. dp(밀도 독립 픽셀) — 160dpi 밀도의 화면에서 1px과 동일한 논리적 Android 단위입니다. 다른 밀도에서 dp는 자동으로 다른 수의 px로 변환되어 요소의 물리적 크기를 유지합니다.
왜 코드에서 px로 크기를 지정할 수 없나요?
px가 화면 밀도를 고려하지 않기 때문입니다. 100px 요소는 PPI가 다른 장치에서 다르게 보입니다: 326 PPI 화면에서는 460 PPI보다 더 크게 보입니다. 논리 단위(dp, pt, sp)가 이 문제를 자동으로 해결합니다.
PPI란 무엇이며 어떻게 계산하나요?
PPI(인치당 픽셀 수) — 디스플레이의 인치당 픽셀 수입니다. 공식: PPI = √(w² + h²) / d, 여기서 w와 h는 px 단위의 해상도, d는 인치 단위의 대각선입니다. PPI가 높을수록 이미지가 더 선명합니다. Apple Retina 디스플레이는 300 PPI부터 시작됩니다.
px 사용이 정당화되는 경우는?
px는 래스터 버퍼 작업 시 정당화됩니다: Bitmap 생성, Canvas에서 렌더링, Metal/OpenGL 셰이더 프로그래밍, 카메라 이미지 처리. 레이아웃과 타이포그래피에서는 px를 사용하지 않으며 pt(iOS), dp 및 sp(Android)가 적용됩니다.
px 단위로 화면 해상도를 확인하는 방법은?
iOS에서: UIScreen.main.nativeBounds가 px 단위의 크기를 반환합니다. Android에서: DisplayMetrics.widthPixels 및 heightPixels를 context.resources.displayMetrics에서 가져옵니다. SwiftUI에서: GeometryReader가 pt 단위의 크기를 반환하며, px로 변환하려면 displayScale을 곱해야 합니다.
요약
- px — 디스플레이의 물리적 픽셀, 화면 해상도의 기본 단위
- 해상도 — 가로 및 세로 픽셀 수, 하드웨어 수준에서 고정
- PPI — 인치당 픽셀 수, 이미지 선명도 및 GPU 요구 사항 결정
- 논리 단위(pt, dp, sp)는 px를 추상화하고 모든 화면에 인터페이스 적용
- 안티패턴 — 레이아웃 및 타이포그래피에서 px 사용; 올바른 영역은 래스터 버퍼
- 에셋은 다양한 해상도로 제공됨(iOS는 @1x/@2x/@3x, Android는 density buckets)
- 벡터 형식(PDF, SVG, VectorDrawable)이 여러 래스터 복사본보다 선호됨
턴키 방식의 모바일 애플리케이션을 개발해 드립니다
IT Sectr는 2017년부터 스타트업과 기업을 위한 iOS 및 Android 애플리케이션을 만듭니다. 저희가 상담해 드리고 최적의 솔루션을 제안하겠습니다.
더 읽어보기