개발 협업을 위한 아이폰 디자인 가이드 #01

드디어 아이폰 디자인 가이드 포스팅을 시작!

초기의 아이폰 어플리케이션 GUI 디자인은 번거로움이 없었다.
단말 제조사가 많고 제조사별로 OS를 커스텀까지 하는 안드로이드에 비해 아이폰은 단일 기종(물론 새로운 기종이 출시하긴 하지만)에, 해상도도 한 가지 종류였다. 좌측 상단을 기준으로 모든 구성요소들을 좌표 값과 크기를 개발자에게 전달해 주는 것만으로도 의도대로 잘 나오곤 했다.

하지만 아이폰6와 6+가 출시되면서 그 공식은 처참히 깨졌고 아이폰 GUI 디자인도 안드로이드와 마찬가지로 여러 해상도에 대응할 수 있도록 고려하며 디자인해야 하는 시대가 도래했다. (그것이 벌써 1년이 넘게 지났다.) 지금은 그 후속기종인 6s와 6s+가 출시되어 판매되고 있고 아이패드 또한 iPad Pro가 출시되면서 고려해야 될 기준해상도가 늘어났다. 어쩌면 계속 고려해야 될 종류가 늘어날지도 모르는 iOS 디바이스들, 거기다가 iOS/Android 양 모바일 OS를 타겟으로 제작해야 하는 디자이너는 고민만 늘어난다...

1. 크기의 단위(Dimension)

Point(pt)

위에서 언급했던대로 아이폰 6, 6+ 출시 이전 시절에는 Xcode에서 크기의 단위를 mm로 쓰는지, px로 쓰는지 별 관심도 없었고, 알 필요도 없었다. 디자이너 입장에서는 그저 320x480px로 작업하면 그만이었고, 레티나 디스플레이에서도 두배 크기로 제작하면 다 맞았기 때문이었다.
하지만 이제는 @3x에, 다운샘플링에, 여러 디바이스를 고려해야 하는 안드로이드만큼 Screen Size 및 Density, Resolustion의 변화가 iOS에서도 시작됐다. 결국 iOS GUI 개발 가이드에도 안드로이드의 dip처럼 외부적 요인에 자유로운 공용 단위가 필요했고 비로소 이 Point라는 단위를 디자이너들이 사용해야만 했다. 생각해보면 Point단위를 쓰고 있는 Xcode가 참 애플스럽다는 생각이 들었다. (단위까지도 스큐어모피즘스럽다고나 할까?)

안드로이드의 dip와 마찬가지로 아주 특별한 경우를 제외하고 iOS GUI 개발 가이드에 기재되는 모든 크기 단위는 pt로 작성한다.

2. Density & Screen Size

Density(밀도)의 분류

1pt의 값

default	@2x	@3x
1px	2px	3px

밀도별 이미지 리소스를 안드로이드는 폴더로 분류하여 사용한다면, iOS는 [@배수]를 파일명에 붙혀 사용한다.

이미지 리소스 사용 예

파일명	px(픽셀)크기	pt(포인트)크기	적용 단말
img.png	100x100	100x100	3gs
img@2x.png	200x200	100x100	4~6(s포함)
img@3x.png	300x300	100x100	6+, 6s+

img라는 파일명의 리소스가 app에 제대로 적용되려면 표와 같이 3개의 파일명을 가진 리소스를 제작해야 한다. 3배의 밀도를 가진 아이폰 6+에서 img.png 이미지가 100x100pt에 맞게 잘 보여지려면 img@3x라는 파일명으로, img.png보다 3배 큰 300x300px의 사이즈인 이미지 리소스가 있어야 한다. 주절주절 개떡같이 설명했지만 앱 디자인 경험이 있으신 분들은 찰떡같이 알아보심을 믿는다.^^;

밀도별로 구분한 아이폰
iphone6+ 기준으로 3px은 1pt 값이다.

기준 해상도(Point Resolution)

iOS 디자인 방식이 조금 변경되면서 가장 중요한 것이 기준 해상도라고 생각한다. 그간 [기준 해상도=픽셀해상도]가 동일했었고 레티나 등장 이후는 640x960px로 디자인 작업을 하고 픽셀 값으로 좌표를 주어도 개발자들이 알아서 1/2해서 넣었다. 계산이 단순했기 때문이다. 이후 아이폰5의 등장도 크게 문제되는 것은 없었다. 하지만 아이폰6 출시 이후 기준 해상도가 여러개로 늘어나면서 안드로이드처럼 가로 최소~최대, 세로 최소~최대 값을 고려하며 디자인을 해야만 6s+까지 완벽히 대응하는 app GUI 디자인을 할 수가 있게 되었다. 그렇기 때문에 기준 해상도는 디자이너가 디자인을 할 때 최우선적으로 고려해야 한다.

현재까지 아이폰 단말의 기준 해상도는 다음과 같다.

아이폰의 기준 해상도는 다음과 같이 4분류로 나뉜다.

현재까지 출시된 아이폰의 기준 해상도는 4종으로 분류되며 단순히 디스플레이 확대가 아닌 표출 영역의 확장성을 갖고 있다. 그러므로 디자인할 때 그 확장성을 충분히 고려해서 디자인하는 것을 명심하자.

기준 해상도별 비교표

아주 중요한 기준해상도!

• 가장 작은 사이즈 : 320x480pt

• 가장 큰 사이즈 : 414x736pt

• Width 차이 값 : 94pt

• Height 차이 값 : 256pt

픽셀 해상도(Dimension)

조상님이 되신 3gs는 제외하였다. (묵념)

현재까지 출시된 아이폰의 픽셀 해상도 정리했다. 여기서 눈여겨 보아야 할 것은 6+ 군이다. 아이폰 6+의 실제 디스플레이는 1080x1920(FHD)의 물리적 픽셀을 가지고 있다. 하지만 414x736pt의 기준 해상도, @3x의 밀도를 계산하면 1242x2208px의 사이즈가 나온다. 왜 그럴까?
정확한 이유는 모르겠지만 pt단위의 특성상 눈에 보여지는 물리적 사이즈가 동일해야 하므로 1242x2208px의 UI를 디스플레이에 1:1 픽셀매칭하면서 기존의 폰과 맞추려면 6.3인치가 넘어야 한다. 6.3인치 디스플레이를 가진 폰을 만드는 것에 대한 문제, 5.5인치에 맞추면서 물리적 크기가 동일하게 보이기 위해서이지 않을까란 개인적 추측을 해본다.

중요한 것은 실제 1242x2208px의 화면을 축소(downsampling)해서 1080x1920px에 보여준다는 것이다. 그렇기 때문에 디자이너는 6+ 기준으로 디자인 작업을 하려면 1242x2208px로 진행을 해야한다. 그리고 3px = 1pt 이므로 3배수의 픽셀 값으로 구성요소를 디자인하게 되면 나중 GUI 가이드라인을 제공할 때 편하다.

3. Launch Resource

iOS는 디자인 시 제작하는 요소 이외에 필수적으로 들어가야 하는 이미지 리소스가 많다. 사이즈도 다양하고 파일명도 정확해야 한다. 그렇기 때문에 필요할때마다 사이즈며, 파일명이며 찾는 소동이 발생한다. (머리가 나쁘면 몸이 고생한다더니..) 결국 필수 런처 리소스 세트를 폴더에 저장해 필요할때 마다 복사해서 덮어쓰는 형태로 진행하고 있다.
이 내용은 외울 필요는 없고 밑의 내용을 참고해서 만들어 놓고 필요할 때 덮어쓰는 형태로 쓰자.

Launch Image

App 구동 시 보여지는 Launch image의 사이즈 및 파일명은 동일하게 지정되어 있다.
특이한 것은 iPhone 6(s), iPhone 6(s)+의 경우 폰 기본형태인 세로형의 Launch image뿐만 아니라 패드처럼 가로, 세로 각각 Launch image를 사용할 수 있다. (추가 : 6과 6+군의 경우 가로, 세로 각각 런처 이미지를 사용할 경우 회색으로 되어 있는 파일명으로 제작하면 된다. 하지만 이는 필수가 아니다. 세로만 사용해도 되고, 이때는 default 파일명을 갖는다.)

모든 사이즈의 런처 이미지는 필수로 app 리소스에 들어가야 한다.

Launch Icon

App 제작 또는 App store 등록 시 필요한 앱 아이콘의 종류, 크기를 분류한다.

iOS6 이하 지원 app일 경우 57x57 크기의 app icon도 필요하며 그 이상일 경우는 60x60만 필수로 제작한다. 요즘은 보기 드문 iOS6이니 굳이 만들 필요는 없다. spotlight 및 setting 아이콘은 설정화면 등 app을 작게 표현할 때 사용하는데, app icon만 있어도 자동 리사이징해서 표현해 주기 때문에 필수 값은 아니다.
앱스토어에 노출되는 아이콘은 app 리소스로 들어가는 것은 아니고 앱스토어에 등록할 때 필요하다. 하지만 여기서 언급해 놓은 것은 가장 큰 사이즈로 제작해야 하기 때문에 적어 놓았다. 애초 app icon을 앱스토어용 크기로 제작하는 것이 여러모로 편하다.

아이폰 GUI를 제작할때 필요한 기본 정보를 적어 보았다. 아이패드의 내용은 나중에 따로 정리할 예정이다. (큰 차이는 없고 기준 해상도가 추가된다.) 다음엔 아이폰 GUI 개발 가이드 작성에 대해 정리할 예정이다.