[iOS] Image: Scale Factor와 Point, Pixel

iOS에서의 기본 개념: Point vs Pixel

개념	설명
Point	iOS 레이아웃 단위 (AutoLayout, UIView frame)
Pixel	실제 디스플레이 픽셀

iOS는 레이아웃을 Point 기준으로 설계하지만, 실제 화면은 Pixel 단위로 그려집니다. 이때 등장하는 것이 Scale Factor입니다.

 

Retina Display의 Scale Factor

디바이스	Scale
Non-Retina	1x
Retina	2x
Super Retina	3x

 

예를 들어

UIImageView.frame = 100 x 100 pt

실제 렌더링 픽셀은 다음과 같습니다.

Scale	실제 픽셀
1x	100 × 100 px
2x	200 × 200 px
3x	300 × 300 px

즉

보이는 크기 = 100pt

실제 렌더링 이미지 = 200px 또는 300px

 

UIImage에도 scale 개념이 존재

UIImage에는 내부적으로 scale 값이 있습니다.

image.scale

예시

image size = 300 x 300 px
image.scale = 3

그러면 iOS는 이것을

100 x 100 pt 이미지

로 해석합니다.

 

즉

pointSize = pixelSize / scale

 

왜 이런 구조를 만들었을까?

애플의 목표는 UI 레이아웃을 기기 해상도에 독립적으로 만들기 위해서입니다.

예를 들어

버튼 width = 100pt

• iPhone 8
• iPhone 14
• iPad

모두 동일한 UI 비율을 유지합니다.

하지만 실제 픽셀은

100pt × screen.scale

로 자동 변환됩니다.

 

디자이너와 대화할 때 (레이아웃 기준)

디자인 툴(Figma 등)은 보통 레이아웃 크기 기준입니다.

그래서 iOS 개발에서는 이것을 Point로 해석합니다.

 

예

디자인

width: 120
height: 120

iOS

imageView.width = 120pt
imageView.height = 120pt

 

즉

디자인 px ≈ iOS pt

입니다.

👉 레이아웃은 항상 Point 기준

 

실제 화면에서는 Pixel로 렌더링

디바이스는 Pixel로 화면을 그립니다.

그래서 내부적으로

pixel = point × screen.scale

예

Device	Scale	120pt
2x	2	240px
3x	3	360px

즉 UI 크기는 같지만 사용되는 픽셀 수는 달라집니다.

 

그래서 이미지 리소스는 Pixel 기준

이미지 리소스는 Pixel 기준으로 준비해야 합니다.

예

UIImageView = 120pt
device = 3x

필요한 이미지

120 × 3 = 360px

 

그래서 Asset에

image
image@2x
image@3x

가 존재합니다.

 

실무에서 가장 많이 쓰는 공식

개발할 때는 이 공식만 기억하면 됩니다.

필요한 이미지 pixel = viewSize(pt) × screen.scale

 

예

view = 80pt
device = 3x

필요한 이미지

240px

 

그래서 실제 대화 방식은 이렇게 됩니다

디자이너와 대화

이 버튼 width 48 맞나요?

→ Point 기준

개발에서 이미지 요청

48pt 아이콘이면
@3x 기준 144px 필요합니다

→ Pixel 기준

 

실제 iOS 엔지니어들이 하는 말

실무에서는 보통 이렇게 말합니다.

"레이아웃은 pt 기준이고

이미지 리소스는 px 기준이다."

이게 가장 정확한 정리입니다.

 

정리

상황	기준
디자인 레이아웃	Point
AutoLayout	Point
UIView frame	Point
이미지 리소스	Pixel
렌더링	Pixel

 

그리고 연결 공식

pixel = point × scale