[iOS] vector 이미지를 쓰는 이유와 Bitmap 이미지의 1x 2x 3x가 뭔가요

개요

회사 입사 후..

???: 제플린에서 애셋 다운은 이렇게 받으시면 됩니다~

이미지 클릭 → pdf 클릭 & 저장 → Asset으로 옮기기 → Single Scale 설정 → Preserve Vector Data 체크

hyunndy: 넵 알겠습니다! 👩🏻‍🎨

.

.

.

지금까지 이렇게 아무 생각없이 asset을 넣고있다가

토이프로젝트 작업할 때 게임 UI 디자이너 친구에게 리소스를 부탁할 때 이런 대화가 있었습니다.

hyunndy: Y야 이거 리소스 pdf형식으로 뽑아주라~

Y: 그래~ 근데 pdf?! 오 왜 pdf형식으로 써? 신기하다.

hyunndy: ...(충격)

 

그렇습니다. 제가 또 얼레벌레 이유를 명확하게 설명하지 못하고 관습적으로 작업하고 있었던것입니다...(이마탁)

공부해보겠습니다.

---

iOS에서 이미지 파일을 Asset에 추가할 때 크게 두 가지 경우로 작업합니다.

1. 비트맵 이미지(.jpg, .png etc)을 1x 2x 3x Scale에 맞게 생성해서 추가
2. 벡터 형식 이미지(.pdf, (iOS13 이상) .svg) 추가 후 Preserve Vector Data + Single Scale

 

먼저 기본적인 개념을 잡고 가겠습니다.

비트맵 이미지

서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식

벡터 형식 이미지

점과 점을 연결해 수학적 공식으로 이미지를 그려 표현하는 방식

 

비트맵 이미지의 1x 2x 3x는 무엇일까요?

이 1x 2x 3x에 대해 공부하다보니..

픽셀(px)과 포인트(pt)에 대한 개념 이해가 필요합니다.

 

픽셀(px)이란?

픽셀은 디스플레이의 가장 기본이 되는 단위로, 점의 갯수라고 생각하면 편합니다.

이미지 확대했을 때 나오는 사각형 모양이 1개의 점, 한 개의 픽셀이라고 생각하면 됩니다.

 

픽셀은 해당 위치에서 그 픽셀이 가진 색상 정보를 표현하고, 그 픽셀들이 모여서 우리가 멀리서 바라보는 하나의 이미지가 됩니다.

그래서 같은 화면에 픽셀이 더 많을수록 우린 선명한 이미지를 보게됩니다.

 

포인트(pt)란?

과거에...

Apple은 과거 인쇄물에 쓰이던 point를 모니터상에서도 똑같은 크기로 가져오기 위해서

1pt = 1/72 inch로 나누는 기준을 정해서 사용했다고 합니다.

이를 72dpi(dot per inch) 해상도 기준이라고 합니다.

 

하지만 그건 Apple만의 생각이었죠

마이크로소프트는 Window에 1pt = 1 / 96 inch로 나누는 96dpi 해상도 기준으로 정해서 사용했다고 합니다.

그래서 과거 초창기에는 1 inch를 표시하기 위해서

맥: 72px

윈도우: 96px

가 필요한 상황이 됩니다.

 

이렇게 기준이 달라지기 때문에 1pt가 나타나는 크기가 OS별로 달라지게 되었습니다.

예를들어 9pt가

맥: 9pt = 9px

윈도우: 9pt = 12px

정도로 차이가 납니다.

 

그럼 Apple이 과거에 1pt = 1px로 정한 것 같은데,

비트맵이미지(픽셀)을 넣을 때 1x 2x 3x를 설정한다...는

왠지 1px, 2px, 3px를 뜻하는것 같은데 이게 어찌된 일일까요?

더 알아봅시다.

 

Apple은 기술이 발전함에 따라 레티나 디스플레이라는 기술을 선보입니다.

이 때, 1pt = 72dpi였던 과거의 기준이

1pt = 220dpi, 1pt = 270dpi 등으로 늘어남에 따라 dot per inch, 즉 1인치 당 필요한 픽셀의 수가 220px, 270px로 늘어납니다.

 

그 기준에 따라 1pt에 따른 픽셀 수가

1pt = 2px

1pt = 3px

로 픽셀수가 더 많아지게 됩니다...!!!!!

출처:  https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

여기서 중요한게 등장합니다.

과거 Apple에서는 1pt = 1px였기 때문에, iOS 개발에도 pixel을 사용해도 괜찮았을겁니다.

 

하지만 아이폰4 부터 레티나 디스플레이가 적용되면서 1pt = 2px로 해상도 대응이 필요했을겁니다.

불쌍한 iOS개발자는 레이아웃을 짤 때 디바이스가 레티나 디스플레이이냐 아니냐에 따라 해상도 대응을 해줘야한다는건데 그럼 정신이 나가겠죠.

 

그래서 Apple은 이 때 부터 iOS에 포인트(pt) 개념을 도입해줍니다.

모든 점에서 포인트(pt)를 사용하면, iOS 내부에서 자동으로 포인트를 각 픽셀에 적용해줍니다.

 

정리해보자면...

iOS의 디바이스가 어떤 디스플레이를 쓰냐에 따라

1pt = 1px / 1pt = 2px / 1pt = 3px

로 1pt의 기준이 달라지므로,

비트맵 형식(= 픽셀(px)로 이미지를 표현하는 방식) 이미지를 사용할 때

1pt가 1x, 2x, 3x인 경우, 즉 3가지 경우를 대응하기 위해 3개가 필요했던 것입니다!!!

 

어차피 앱스토어에서 다운받을 때는 앱 슬라이싱으로 인해 해당 디바이스에 필요한 이미지만 필요할테니까 용량에 영향도 없습니다!

(레티나 HD 디스플레이를 쓰는 디바이스의 경우 3x 이미지만 다운로드됨)

 

그럼 그냥 2x인 애로 다 대응하면 안되냐?

픽셀로 이루어진 비트맵 형식에 맞지 않은 해상도를 표현하려고 하면 업스케일, 다운스케일을 해야하므로 디자이너가 원하는 표현이 높은 확률로 나타나지 않을겁니다.

 

하지만 맨날 이미지를 1x 2x 3x로 변환해서 뽑고...넣기 너무 귀찮습니다.

그럴 때 쓰는게 vector 형식 이미지 입니다.

Vector 형식의 이미지를 쓰는 이유

벡터형식의 이미지란

점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식을 말합니다.

이미지에 대한 정보가 모양/선에 대한 형태로 파일 내에 저장되어 있어서 확대 시 깨지지 않고, 용량이 변하지 않습니다.

 

Asset에 1x 크기의 Vector 이미지를 넣고 Single Scale을 설정해놓으면,

프로젝트가 빌드 될 때 XCode에서 Asset에 들어있는 PDF파일을 1x 이미지 기준으로 잡고 iOS에서 자동으로 1x, 2x, 3x 이미지를 디바이스에 맞게 생성합니다.

 

이런식으로 OS 내부에서 2x, 3x 이미지를 생성해도 Vector 형식의 이미지는 수학 공식으로 이미지를 그려서 표현하기 때문에 이미지가 깨진다거나 화질구지가 되지 않고 사용할 수 있는것입니다!!!!

 

여기까지 정리해보았는데요.

틀린점이나 궁금한점이 있으시면 댓글 부탁드립니다.

 

참고:

https://berkbach.com/ios-pdf-image-file-assets-적용하기-341e51d741cf

https://zeddios.tistory.com/6

https://paper-garden.tistory.com/27

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=luna3504&logNo=220206463836