MAC Xcode xcassets 크기? (1x, 2x, 3x)

안녕하세요!!

오늘 할 주제는 1x, 2x, 3x의 차이에 대해서 알아볼거에요.

1x, 2x, 3x가 뭐냐구요?

xcode로 iOS개발을 하다보면

Assets.xcassets이라는 폴더를 보게되죠?

이 폴더안에 이미지를 넣게 되면,

 우리는 스토리보드에서 이미지를 불러올 수 있답니다. 

그런데,

이미지 하나를 넣게되면

 

이렇게 1x, 2x, 3x로 나누어진 칸을 볼 수 있어요.

이 1x,2x,3x로 구분해놓은 이유가 뭘까요?

이 글을 읽기전에 제가 전에 썼던 MAC에서의 포인트와 픽셀의 관계에 대해

 읽고오시면 이해가 더 잘 되실 거에요 :)

시작해볼게요.

MAC Xcode xcassets 크기? (1x, 2x, 3x)

---

먼저, 애플 기기들은 종류가 참 많죠? 

작은 아이폰 4/s 부터 아이패드까지 크기가 다양합니다.

정확하게 말하자면, 

Apple 디바이스 (iPhone 및 iPad)에는 3 가지 종류가 있습니다.

애플은 iPhone 4부터 레티나 디스플레이를 탑재했는데, 

이 이전에 나온 아이폰 및 아이패드 기기. 

즉 레티나 디스플레이를 탑재하지 않은 기기들.

그리고 레티나 디스플레이를 탑재한 iPhone 4 세대  ~ iPhone 5 세대.

마지막으로  

iPhone 6 세대  ~ iPhone 7세대입니다. 

iPhone 4 세대  ~ iPhone 5세대와 무슨 차이냐구요? 

iPhone 6 세대  ~ iPhone 7세대는 

레티나 HD 디스플레이를 탑재했습니다. 

iPhone 4 세대  ~ iPhone 5세대는 

그냥 레티나 디스플레이에요.

간단하게 정리하자면,

아이폰 4이전 -> 일반 디스플레이

아이폰 4 ~ 아이폰 5 -> 레티나 디스플레이

아이폰 6 ~ 아이폰 7 -> 레티나 HD 디스플레이

이렇게 세가지 종류의 디바이스들이 있다고 생각하시면 될 것 같아요.

이게 1x, 2x, 3x랑 무슨상관이야ㅡㅡ

하실 수도 있는데,

굉장한 상관관계를 가지고 있습니다. 

iOS는 좌표 시스템을 사용하여 화면에 콘텐츠를 배치합니다. 

표준 해상도 화면(레티나가 아닌 디스플레이)

에서 한 점 (1/72 인치)은 한 픽셀과 같습니다.

(1pt =  1px)

 

고해상도 화면의 픽셀 밀도가 높아집니다.

동일한 물리적 공간에 더 많은 픽셀이 있기 때문에 

점 당 더 많은 픽셀이 있습니다. 

결과적으로 고해상도 디스플레이에는 픽셀이 더 많은 이미지가 필요합니다.

이렇게요!

그러니까 

어떤 아이폰앱이 있다고 생각해 볼게요.

이 앱을 쓰는 사용자들이 똑같은 디바이스를 사용하는 건 아니겠죠?

어떤 사람은 아직 레티나가 아닌(아이폰 4이전) 디바이스를 사용 할 수도 있고,

최신의 아이폰 7 디바이스일 수도 있습니다.

개발자는 이 모든 기기에 대해 고해상도 이미지를 제공해야해요.

그래서 장치에 따라 각 이미지의 픽셀수에 특정 배율 인수를 곱해 이를 수행합니다.

 

표준 해상도 이미지의 배율은 1.0이며 @ 1x 이미지라고합니다. 

고해상도 이미지의 배율은 2.0 또는 3.0이며 

@ 2x 및 @ 3x 이미지라고합니다.

표준 해상도 @ 1x 이미지 (예 : 100x100 픽셀)가 있다고 

가정 해 보겠습니다. 

이 이미지의 @ 2x 버전은 200x200 픽셀입니다. 

@ 3x 버전은 300x300 픽셀입니다.

그리고 반드시 알아야 할 것이 있어요.

 2x 및 3x 이미지를 생성하면 각 iPhone 화면에서 똑같은 레이아웃을 기대할 수 없습니다. 레이아웃은 화면마다 다를 수 있습니다. 

1x, 2x 및 3x 이미지 크기는 화면의 픽셀 밀도만을 처리합니다.

320 * 70의 이미지를 가지고 있다고 가정 해 보겠습니다.

"1x, 2x 및 3x 이미지 크기는 화면의 픽셀 밀도만 처리한다"

그러니까 이미지에 꼭 constraint를 주셔야 겠죠?

정리하면,

1 픽셀 = 1 포인트 @ 1x (이전 iPhone 및 iPad 기기)

라는 용어를 사용하는 일반 기기

4 픽셀 (2 x 2) = 1 포인트 @ 2x (iPhone 4+)

라는 용어의 레티나 장치

Retina iPhone6 및 iPad에서 9 픽셀 (3 x 3) = 1 포인트 @ 3 배 (iPhone6 +)

---

1pt = 1px 레티나 X => 1x 이미지

1pt = 4px 레티나 => 2x 이미지 

1pt = 9px 레티나 HD  => 3x 이미지

---

그럼 굳이 왜 1x, 2x, 3x로 나눠서 귀찮은 짓을 해 ㅡㅡ

..라고 궁금증이 생겼는데요,

만약 딱 한사이즈 만으로 이 모든 이미지들을 처리한다고 가정해볼게요.

일단 기기별로 처리하는 픽셀의 수가 다르다는 것은 이제 아시죠?

이야기를 이어가기 전에, 

업스케일링과 다운스케일링에 대해 아셔야합니다.

100 x 100픽셀의 이미지가 있다고 생각해보겠습니다.

1pt = 1px의 기기에서는 이미지가 별 탈없이 잘 보이겠죠?

하지만 1pt = 4px, 9px에서는?

여기서는 200 x 200픽셀, 300 x 300 으로 이미지를 보이게 되죠.

하지만 우리의 이미지는  100 x 100입니다. 

이 이미지는 200 x 200, 300 x 300에서 어떻게 보일까요?

이때 업스케일을 하여 이미지를 보여주게 됩니다. 

이해가 잘 안가시나요?

쉬운 예를 들어서 설명해드릴게요.

10 x 10 의 정사각형의 퍼즐이 있습니다. 총 100피스가 있어요.

이 100피스를 맞춰서 어떤 그림을 완성했어요.

그리고 그 어떠한 그림을 

100x100=10000개로 만든 것 같은 그림을 나타내고 싶다면 

이미 배열된 물체(10x10)의 간격을  벌린다음
그 사이의 빈공간에 어색하지 않게 

색칠된 물체를 채워넣는 방식으로 업스케일을 합니다. 

다운 스케일은 반대겠죠?

간단히 설명해드리면,

480p->720p해상도가 오르면 업스케일
720p->480p해상도가 내리면 다운스케일

업스케일의 경우,

 해상도가 올라서 고해상도에 맞게 그림을 확 늘렸다고 치면 

늘어난만큼 빈 픽셀이 생깁니다.
이 빈공간을 이미지 보간법이라는 특정 공식에 따라 계산하여 채우게 됩니다.

(방식이 여러가지 있고 고화질이 될수록 느리며, 저화질일수록 빠름)

다운스케일은 거꾸로 넘치는 픽셀을 어떻게 없애느냐입니다.

마찬가지로 이미지 보간법을 사용합니다.

정확한 크기가 없으면 이 업스케일링과 다운스케일링이 빈번해지겠죠?

iOS에서의 업스케일링은 

1x에서 2x,3x의 업스케일링은 가능하지만, 

결과는 흐리며 두꺼운 선은 잘 보이지 않게 됩니다. 

다운스케일링은

일반적으로 업 스케일링보다 결과가 훨씬 우수하지만, 

모든 이미지에 적용되는 것은 아닙니다.

 

그리고 다운 스케일링은 모든 세부 사항을 파괴합니다.

다운 스케일링은 (비록 거대하지 않더라도) 품질의 손실로 이어지죠.

왜냐하면 넘치는 픽셀을 어떠한 방법으로 없앤거니까요.

또한 이미 미리 렌더링 된 이미지를 표시하는 것보다 

이미지를 축소하는 데 더 많은 계산 능력이 필요합니다.

보시다시피 하나의 이미지만 제작하면 

앱의 성능과 품질에 영향을 주며 

오래된 기기를 사용하는 이미지에 불균형하게 영향을 미칩니다.

 앱 슬라이싱 덕분에 기기는 실제로 앱 스토어에서 

기기에 맞는 이미지만 다운로드하게됩니다. 

(즉 레티나 디바이스는 non-레티나 이미지들을 다운로드하지 않습니다.)

나는 3x이미지만 사용하는데 1x이미지를 다운 받을 필요는 없겠죠?

이것이 바로 애플이 이런 종류의 규칙을 만들어내는 이유입니다. 

말이 길어졌는데,

1x, 2x, 3x로 굳이 나눈 이유는

메모리 / 디스크 사용량을 줄여서 성능을 향상시키는 것.

이라고 할 수 있습니다.