[iOS] image asset의 크기 1x ,2x, 3x 사용하는 이유 | scale factor, 해상도(Resolution), pixel, point

 

image asset의 크기가 1X, 2X, 3X 세 가지로 나누어져 있는데 이것들이 필요한 이유..

다들 알고 계셨나요?

 

 

 

 

일단 저는 몰라왔습니다.. (자랑이다)

그래서 이번 계기로 한번 정리해보려고 해요.

 

이 개념이 또 앱시닝(App Thinning)에서의 슬라이싱(Slicing) 기술과 연결되기 때문에 이어서 블로그를 써볼게요!

 

 

 

---

 

📌 iOS의 다양한 디스플레이

 

아이폰 기기는 정말 많죠. 그리고 이러한 핸드폰 기기마다  탑재하는 다양한 디스플레이가 있습니다.

최신 기종일수록 디스플레이가 좋겠죠?

 

 

특히 아이폰 4이후 부터는 레티나 디스플레이라는 디스플레이를 탑재했는데요.

레니타 디스플레이가 탑재되지 않은 것보다 탑재된 게 더 좋은 디스플레이라는 건 맥락상 알겠는데.. 레티나 디스플레이가 뭐길래?

 

레티나 디스플레이가 뭔지 간단히 알아보면

- 일정 수준 이상의 고밀도 디스플레이를 의미하고, Apple 이 사용하는 마케팅 용어이다 정도로만 알아두면 될 것 같네요!
- 사람의 눈으로 픽셀이 보이지 않을 수준으로 고밀도 디스플레이를 두고 영어 단어로 망막에 해당하는 "Retina"라는 단어를 붙여서 망막(Retina) 디스플레이라고 칭한다고 합니다.
- 2010년도에 애플이 아이폰4를 공개하면서 처음으로 사용한 용어이고, 당시 아이폰4는 (960 x 640)의 해상도를 가진 3.5인치 크기로 출시되었는데 326 PPI(Pixels per Inch : 1인치 안에 픽셀이 얼마나 있는지)는 그 당시 별로 없었다고 합니다.

 

Retina Display가 나온 이후로 다양한 기종에서 Super Retina, Super Retina XDR, Liquid Retina 등의 디스플레이를 탑재했다고 하는데 자세한 기술력은 알지 못하니 궁금하면 찾아보시길 추천드립니다!

 

 

 

 

 

여튼 이 글에서 필요한 정보는 기종이 출시될수록 발전된 디스플레이가 탑재되어 왔다! 입니다!

 

근데 디스플레이가 발전되어 온 건 알겠는데 좋은 디스플레이란 무엇일까요?

여러 기준이 있겠지만 대표적으로 ‘높은 해상도(Resolution)’를 꼽을 수 있죠!

 

아이폰, 아이패드 등 애플기기도 기기별로 디스플레이가 다른데 즉, 해상도가 다른데 다른 해상도에 맞는 이미지를 보여줘야 사용자가 우리 앱을 다운로드 받고 사용할 때 이미지가 깨지지 않습니다.

그렇기 때문에 개발자는 image asset에다가 1X, 2X, 3X 세 가지 이미지 크기를 넣어주어야 하는 것입니다!

 

 

 

 

 

좀 더 자세히 살펴볼까요?

표준해상도와 고해상도 디스플레이가 있다고 했을 때

 

표준해상도에서 1포인트 = 1픽셀 입니다!

하나의 포인트에 하나의 픽셀만 들어가는 것이죠.

*여기서 포인트란, 1인치를 72로 나눈 값이 1 포인트입니다. (절대적인 값이며, 약 0.3527mm에 해당합니다.)
*2D 플랫폼에서 포인트는 디스플레이 해상도에 따라 달라질 수 있는 픽셀 수에 매핑됩니다.

 

 

그러나 고해상도가 될수록 어떨까요??

한 포인트 안에 픽셀의 밀도가 높아집니다.

(한 포인트 안에 더 많은 픽셀 수가 있어야 이미지가 깨지지 않고 보여지는 것이죠)

 

 

그래서 고해상도의 디스플레이일수록  픽셀 크기가 큰(1포인트에 들어가는 픽셀의 밀도가 큰) 이미지가 필요한 것입니다

 

 

 

 

 

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

Images | Apple Developer Documentation

 

애플 공식문서의 휴먼 인터페이스 가이드라인에서 이미지에 대한 내용을 보면 

scale factor 라는 단어로 설명하는데, 이 scale factor는 포인트 안에 픽셀의 밀도에 따른 배율이라고 볼 수 있습니다.  

 

 

다양한 해상도의 2D 디스플레이에서는 포인트당 픽셀 밀도를 고려하여 scale factor를 알 수 있는데

• 예를 들어 "scale factor1"(@1x라고도 함)은 1:1 픽셀 밀도를 나타내며, 여기서 1픽셀은 1포인트와 같습니다.
• 고해상도 2D 디스플레이는 2:1 또는 3:1과 같이 픽셀 밀도가 더 높습니다. 2:1 밀도(@2x라고도 함)의 scale factor는 2이고, 3:1 밀도(@3x라고도 함)의 scale factor는 3입니다.

 

 

 

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

 

 

1x → 2x → 3x 가 될수록 같은 면적 안에 픽셀이 더 많이 들어가는 것을 볼 수가 있죠.

1X 이미지가 10X10 px 이라고 할 때, 2X 이미지는 20X20 px 이 되고 , 3X 이미지는 30X30 px 이 됩니다!

 

 

 

 

 

일단 해상도, 포인트, 픽셀 등에 대한 설명은 이 정도까지 하고 다시 이미지 asset에 1x, 2x, 3x 를 모두 등록해놓아야 하는 이유를 다시 생각해 보면,

 

우리 앱의 사용자들 중에는 옛날 기기를 사용하는 사람도 있을 것이고 최신 기종 기기를 사용하는 사람도 있겠죠? 

이 뜻은 저해상도, 고해상도의 디스플레이에 맞는 이미지크기를 개발자가 모두 세팅해 놓아야 어떤 사용자가 우리 앱을 실행해도 깨지지 않는 이미지를 볼 수 있는 것이죠.

 

 

 

 

 

 

📌 주의

 

"1X, 2X, 3X 여기서의 이미지 크기는 화면의 픽셀 밀도만을 처리한다"라는 것을 기억해야 합니다.

 

이 말은,

 

사용자가 보는 이미지size는 (여기서 말하는 이미지 size는 ui 레이아웃 상 size, 지정해 둔 constraints에 맞게 그려진 이미지 size) 개발자가 지정해주어야 하고 픽셀과는 관련이 없는 것이죠!

 

 

에이 누가 레이아웃 상 이미지 size줄 알아.. 네 제가 그랬습니다..ㅎ

그냥 1X, 2X, 3X 만 보고 이미지 size와 관련된 것인 줄 알았던 나란 개발자.. 아직 멀었다
역시 ‘미루어 짐작’ 하지 말자.

 

 

 

 

 

 

📌  앱 시닝(App Thinning)과 1x, 2x, 3x

 

위에서 설명한 바로는 기기별로 필요한 이미지 크기가 다르다고 했는데

 

어떻게 기기에 맞는 이미지를 선별해서 보여주는 걸까? 누가 선별작업을 하는가?

(일단 개발자인 우리는 1x, 2x, 3x 모두 때려 넣어줬는데, 누가 기기에 맞는 이미지 보여줄래?)

 

 

 

사용자가 앱을 다운로드 받을 때 이 이미지를 다 다운받아놓는걸까?

아닙니다. 이렇게 하면 앱의 크기, 용량이 너무 커지겠죠?

 

 

 

 

 

결론만 말하자면 앱스토어가 해줍니다.

여기서 앱 시닝과 슬라이싱개념이 나오는데 다음 글에서 설명해 볼게요!

 

 

 

 

 

 

📌 각 기기별 scale factor, PPI 등을 알고 싶을 때

 

기기마다 디스플레이가 다르기 때문에  -> 해상도가 다르고 -> 1포인트에 들어가는 픽셀의 밀도가 다르다(scale factor 가 다르다)

라는 것을 이해했는데 

그럼 어떤 기기가 어떤 해상도, scale factor, ppi 값을 가지고 있는지가 궁금하죠??

 

 

https://www.ios-resolution.com/

iOS Resolution // Display properties of every iPhone, iPad, iPod touch and Apple Watch Apple ever made

 

 

이때 ios 기기별로 해상도에 대한 정보가 있는 페이지를 참고할 수 있습니다.

 

아까 우리가 봤던 scale factor 항목도 있는 걸 볼 수 있죠

알아보고 싶은 기기별로 scale factor 도 볼 수 있고 ppi도 볼 수 있습니다!!

 

 

역시 가장 최근에 나온 모델인 15는 scale factor가 3이네요! 

 

 

 

 

 

 

📌 asset catalog에 이미지 추가하는 방법

프로젝트 asset catalog에 각 이미지를 추가할 때 파일 이름에 "@1x", "@2x" 또는 "@3x"를 추가하여 scale factor을 식별하도록 할 수 있습니다.

 

이렇게 이미지 이름을 생성해 놓고 xcassets파일에 넣어주면 1x 2x 3x 배율의 이미지들이 자동으로 세팅이 됩니다.

 

 

 

 

 

 

 

 

 

잘 모르고 있었던 1x, 2x, 3x 이미지의 의미도 알아보았고 여전히 개발자로서 부족함이 넘 많다는 것을 느끼며 마무리해보겠습니다! 

다음 글은 앱 시닝으로 적어볼게요! 이번 글의 내용과도 연관된 내용이니 꼭 보시기를!