iOS - Assets 1x, 2x, 3x 에 대해

안녕하세요, Diana 입니다.

오늘은 iOS 개발을 하며 종종 궁금했던 Assets 에서의 Scale Factor에 대해 알아보려고 합니다.

Assets가 뭐냐구요?

 

↓↓↓↓

1x, 2x, 3x 보이시죠?

 

 

---

 

✅ Pixel, Point, PPI, DPI?

iOS의 Scale Factor에 대해 알아보기 위해서는 Pixel과 Point의 개념에 대해 알고 있어야 합니다.

(+ 하는김에 PPI, DPI도 ㅎㅎ)

✓ Pixel

픽셀은 컴퓨터 이미지, 디스플레이를 구성하고 있는 최소 단위를 말합니다.

우리가 모니터로 보는 모든 이미지들은 매우 작은 사각형의 점들로 구성되어 있는데 바로 이것이 픽셀이죠.

예전에 우리가 사용했던 TV 또는 핸드폰은 확대해보면 빨강, 파랑, 초록의 네모난 작은 점을 확인 할 수 있었는데 요즘은 디바이스의 해상도가 올라감에 따라 육안으로는 확인하기 쉽지 않아졌습니다.

✓ Point

일반적인 화면 구성 단위인 Pixel과 달리 Point는 iOS에서 정의한 화면 구성 단위 입니다.

iPhone4 이전에는 1pt는 1px에 대응됐었는데 디바이스의 해상도가 높아짐에 따라 해당 비율로는 선명한 이미지를 출력하는 것이 어려워졌습니다.

 

이후 Scale Factor라는 것이 생겼고 ScaleFactor에 따라 정의된 1 Point와 1 Pixel의 관계는 아래와 같습니다.

 

- @1.x: 1px = 1pt

- @2.x: 4px = 1pt

- @3.x: 9px = 1pt

 

더 자세한건 아래에서 다루겠습니다.

✓ PPI (Pixel per Inch)

PPI는 가로, 세로 1인치인 이미지가 몇 개의 픽셀로 이루어져있는지를 나타내는 단위입니다.

✓ DPI (Dots per Inch)

DPI는 가로, 세로 1인치인 이미지가 몇 개의 점(Dot)으로 이루어져있는지를 나타내는 단위입니다.

 

엥..? 점? 픽셀? 이 두 개를 제외하면 비슷한 개념이라고 생각할 수 있는데 맞습니다.

 

PPI는 디지털 이미지의 해상도를, 그리고 DPI는 프린터로 출력되는 이미지의 해상도를 나타내는 단위로 둘 다 높을 수록 선명하고 명확한 이미지를 보여주게 됩니다.

즉, 우리는 PPI를 고려하면 됩니다.

 

✅ iOS의 Scale Factor

iOS에서는 Scale Factor로 @1x, @2x, @3x가 사용됩니다.

여기서 1x, 2x, 3x로 나뉘어지는 기준은 1 point에 pixel의 밀집도가 어떻게 되어있느냐 이며 예를 들어 @1x의 경우는 1 point 가 1 pixel에 대응하는 경우를 의미한다고 하네요.

- @1.x: 1px = 1pt

- @2.x: 4px = 1pt

- @3.x: 9px = 1pt

 

https://developer.apple.com/design/human-interface-guidelines/images

 

iOS의 Assets에 이미지를 넣게되면 자동으로 @1x에 들어가게 됩니다.

그리고 별도로 @2x, @3x에 이미지를 넣어주지 않으면 해당 Scale Factor을 사용하는 디바이스에서는 @1x의 이미지를 업스케일링 하여 사용하며 이때 계산을 위한 비용이 발생하게 됩니다.

 

따라서 불필요한 계산을 줄이기 위해서는 해당 Scale에 맞는 이미지를 적용해주는 것이 좋습니다.