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

첫번째 포스팅은 iOS GUI를 구성하는데 있어서의 기본적인 이해도를 높이는 포스팅이었다면, 이번 포스팅은 실제 GUI개발 가이드를 작성하는 내용이다.
아이폰6 출시 이전은 안드로이드와 iOS의 구분이 명확해서 따로 포스팅할 내용이 있었지만 현재는 안드로이드 가이드 작성법과 90% 동일하다. (물론 수치 단위들은 iOS용으로 맞춰야겠지만..)
동일한 내용을 두번 작성하기 보다는 아이폰6 출시 이후 어떤 변화가 있었는지, 안드로이드 가이드와 다른 점에 대해서만 다루기로 하겠다.
(안드로이드 GUI 개발 가이드 방법론 참고 :http://leipiel.tistory.com/8 )

1. Auto Layout

아이폰6과 6+가 출시되면서 가장 크게 변화한 점은 iOS도 디스플레이 크기가 다양해졌다는 점이다. 이런 변화로 인해 기존의 좌표과 크기로 작업하던 방식으로는 다양한 디스플레이 사이즈에 대응하기 어렵다는 결론에 도달한 apple은 Adaptive layout에 대한 지원을 하게 되었다.
그것이 바로 Auto Layout이다. 

프레임 기반의 레이아웃 구조, 가변성에 대응하기 어렵다.            Auto Layout. 가변적으로 레이아웃이 구성된다.

위 두 그림의 차이를 보면 아주 간단하다. 특수한 곳에서는 현재도 왼쪽과 같은 프레임 기반의 레이아웃 구조를 쓸 수 있겠지만, 이미 iOS도 오른쪽과 같이 간격(spacing) 값과 가변(weight or length) 값으로 레이아웃을 구성해야 한다. 이는 그래픽 작업 이전에 화면을 설계할 때부터 필수적으로 고려해야 할 점이기도 하다.

이전 포스팅에서 언급한 iOS 디바이스가 갖는 모든 기준해상도에 대응할 수 있는 레이아웃 구조, 이런 것들을 고려하여 화면이 설계되고 GUI가 제작되었다면, GUI개발 가이드는 안드로이드와 동일하게 제작하면 된다. 이렇기 때문에 iOS GUI개발 가이드 작성법이 무의하다고 이야기한 것이다. (절대로 귀차니즘이 아니다 ^^; 단위까지 dp로 같이 쓰는 것은 아니다. iOS는 pt단위로 기재하면 된다.)

참고 URL

• iOS Developer Library : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1
• Adaptive Layouts for iPhone 6 : http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus
  
  
• How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development : http://mobileoop.com/how-to-use-auto-layout-in-xcode-6-for-ios-7-and-8-development

※ 링크의 이미지들의 움직임을 보면 아~ Auto Layout이 이런 것이구나~ 딱 감이 올 것이다.

2. Stretch Image

GUI를 제작하다 보면 어쩔 수 없이 이미지 리소스를 가변적으로 늘리거나 줄여서 써야할 때가 있다. 이럴 때 필요한 기능이 Stretch Image이다. Stretch Image가 디자이너에게는 조금 생소하게 들릴 수 있겠지만, 사실 굉장히 익숙한 것이기도 하다. 안드로이드에서의 9 Patch와 동일한 기능과 쓰임새라고 생각하면 된다. 안드로이드 관련 포스팅에 9 Patch에 대한 내용을 자세하게 언급한 적은 없던 것 같다. 이것은 안드로이드 초창기부터 쓰였던 기능이고 자주 쓰는 것이기 때문에 이미 잘 이해하고 있는 디자이너들도 많고 잘 정리된 포스팅도 많아서 관련 내용은 쓰지 않았으니 혹시라도 9 Patch에 대한 내용이 필요하다면 검색을 통해 얻기를 부탁드린다.

어쨋든 iOS GUI 디자인 및 개발 가이드 작성 시 꼭 기억해 두어야 할 것, 바로 Stretch Image에 대한 내용을 어떻게 개발자에게 가이드할 것인가?

안드로이드 9 Patch의 경우 늘어나는 영역, 고정인 영역을 디자이너가 직접 제작해서 주기 때문에 따로 가이드에 기재할 필요가 없다. 그저 9 Patch가 된 이미지 리소스를 던져 주기만 하면 되기 때문이다. 
그럼 iOS는 늘어나는 영역, 고정인 영역을 어떻게 전달할까? 바로 좌표다. 자 바로 참고 그림을 보자.

Stretch Image는 최대한 작게 만드는 것이 좋다.

참고 그림이 Stretch Image로 쓸 이미지 리소스라고 가정하자. 빗금 영역은 레이아웃 크기와 상관없이 항상 고정인 이미지 부분, 컬러 영역이 레이아웃 크기에 따라 늘어나는 이미지 부분이라고 한다면 가이드에 Stretch Image (30, 15, 30, 15)라고 기재해서 전달하면 된다. 저 좌표의 수치는 참고 이미지에서 보듯이 늘어나는 이미지 부분과의 간격 값(단위는 pt)이며 좌표의 순서는 (top, right, bottom, left)다.

iOS Stretch         안드로이드 9 Patch
iOS 스트레치와 안드로이드 나인패치 비교, 같은 영역을 늘리지만 그것을 표기하는 것은 다르다.

이 정도의 내용만 기억하고 있으면 iOS GUI를 개발자에게 전달하는 데 큰 무리가 없을 것이다. 

천성이 게을러서 포스팅이 많이 늦었습니다. 최초에는 안드로이드처럼 다 정리하려 했으나 같은 내용을 번복하는 것은 의미가 없다고 판단하여 iOS만의 다른 정보만 추려 정리했습니다. 우선 목표했던 GUI 개발 가이드에 대한 정리는 일단락 되었네요.
원래 쥐뿔도 모르는데다가 그나마 미약하게나마 공유할만한 정보들도 바닥이 났네요 ㅎ
현재로썬 다음 포스팅에 대한 아이디어는 전혀 없습니다만, 방문하시는 분들의 질문 중에서 유익할 수 있는 것들은 정리해서 포스팅하도록 하겠습니다.
좋은 주말 되세요~