아이폰(iOS) 리소스 파악하기

안드로이드 개발프로그램에는 android studio가 있는 것처럼, iOS에는 xcode라는 개발 프로그램이 있다. 

오늘은 xcode와 iOS 앱 디자인에 관련한 첫 번째 시간으로써, 아이폰 디바이스에 따라 리소스를 관리하는 방법에 대해 설명하려고 한다. 

사실 리소스 사이즈를 파악하는건, 모바일 디자이너로서 꼭 꼭 알아두어야 하는 부분이다. 수치 계산이라 머리가 아파질 수도 있지만, 생각하는 것보다 너-무 쉬우니 겁먹을 필요없다. 

iOS 디바이스별 해상도 비교

보통 기업에서 대응하고 있는 iOS 디바이스로는 아이폰 5,5S / 아이폰 6,6S / 아이폰 6 plus가 있다. 

(4시리즈는 너무 옛날이라 요즘은 거의 신경쓰지 않는 추세다...)

아이폰 리소스는 파일명뒤에 @2x, @3x 를 붙여 리소스를 구분짓는다.

아이폰3(320x480)이 1배수이며, 이를 기준으로 2배수는 @2x, 3배수는 @3x를 붙여 제작하면 된다.

예를 들어, plus_btn.png가 있다고 치자.

뒤에 아무것도 안붙은 이 이미지는 1배수로 인식한다.

그리고 여기에 plus_btn@2x.png는 원래 리소스의 2배, 

plus_btn@3x.png는 plus_btn의 3배수 리소스가 되는 것이다. 

그럼 해당 디바이스에 따라 리소스를 어떻게 적용되는지를 설명해보겠다.

우선, 5시리즈-

아이폰 5, 5S에서의 리소스

5/5S에서는 다음과 같은 사이즈의 리소스가 제작되는 것을 알 수 있다. 

그럼 6시리즈에는 어떻게 보일까?

아이폰 6, 6S에서의 리소스

여기서 특이한 부분이 있다!

6/6S의 화면을 보면, 5/5S에서 보이는 화면과 동등한 리소스가 적용되는 것을 알 수 있다. (중요해요!)

마지막으로 아이폰의 가장 큰 해상도를 가진 6플러스 시리즈를 살펴보자.

아이폰 6 플러스에서의 리소스

6+에서는 아이폰 5, 5S의 리소스의 x1.5배의 사이즈로 노출되는 것을 볼 수 있었다.

이를 종합적으로 보면, 

아래의 표로 정리할 수 있다.

아이폰 해상도별 리소스 관리

현재 보통 회사들이 아이폰 5를 기준으로 작업한다는 것을 가정한다면,

5 기준으로 제작한 아이콘을 그대로 잘라 @2x로 리소스를 제작하고 

@2x의 1.5배로 확대한 값의 리소스를 추가로 제작하여 @3x를 붙여 개발자에게 전달하면

아이폰4에서부터 6+까지 적용할 수 있다.

---

iOS의 디바이스가 아직은 한정적이라서 2~3벌의 리소스로 모든 디바이스 대응이 가능하지만, 

6시리즈가 @2x의 리소스로 적용된다는 것을 꼭 알아두기 바란다.

(5에서는 딱 적당해보이는데, 6에서는 뭔가 작은 느낌을 받을 수 있기 때문ㅎㅎ)

FIN.