[WWDC 2013 - 2] Building User Interfaces for iOS 7

안녕하세요. 바티입니다.

많은 테크 관련 뉴스를 보셔서 알다시피 iOS 7의 주 목적은 ‘사용자 경험’이 었습니다. 저도 개인적으로 iOS 7 베타 버전을 깔고 처음에 써본 기분은 ‘새로운 핸드폰’이라는 느낌이 가더라구요. 이번 두번째 주제는 iOS 7의 새로운 User Interface에 관한 전반적인 소개입니다. 하나하나 자세히 다룰수 없지만, 여러분들의 앱에 무엇을 장착할 수 있고, 어떤 것을 변경할 수 있는지 알려면 어떤 것들이 추가가 되었으며, 어떤 기능이 변경되었는지 알아야 할 것입니다. 그럼 WWDC 2013에서 소개한 ‘Building User Interface for iOS 7′ 세션에 대해서 간단하게 살펴 보겠습니다.

 

User Interface for iOS 7

애플에서 이야기하는 ‘디자인 테마’에서 가장 중요하게 여긴 점은 다음과 같다.

  • Clarity 명확도
  • Deference 존중
  • Depth 깊이

‘명확도’와 ‘존중’이라는 개념은 이번 애플이 새로운 iOS를 발표하면서 중요하게 생각하는 부분인데, 사용자들의 컨텐츠에 방해가 되는 UI를 제거하겠다는 참 목적을 배경에 두고있다.

명확도

명확도

사용자 컨텐츠에 대한 존중

사용자 컨텐츠에 대한 존중

위 사진을 보면 알 수 있듯이 애플이 번들로 제공하는 앱들이다. 이 앱들은 state bar의 배경이 투명한 색으로 되어 있어 사용자의 컨텐츠 영역을 더욱 넓게 잡아주고 있다. 뿐만 아니라 UINavigationController의 ‘네비게이션 바’의 영역도 색이나 선으로 구분해주는 부분이 없에고, 컨텐츠를 그 아래에 겹쳐두는 효과를 통해 컨텐츠 영역을 더욱 사용할 수 있게 되었다.

그리고 많은 사람들이 열광하는 디자인 테마의 또 다른 변화는 ‘깊이’가 아닐까 싶다. iOS 6까지만 해도 디자인 테마에 있어서 ‘레이어’를 사람이 식별할 수 있는 UI는 UIActionSheet나 UIAlertView 정도 밖에 제공한 적이 없는 애플은 이번 새 OS에서는 많은 부분에서 깊이를 느낄수 있는 디자인 컨퍼넌트와 기능을 제공한다.

깊이

깊이

 

Typo-graph

애플의 개발팀과 디자인 팀이 많은 노력을 보낸 부분 중 대표적인 부분이 바로 ‘타이포 그래피’ 관련된 작업이라고 한다. 기존에 SDK와 OS 차원에서의 타이포 그래피는 정말 기본 중에 기본만 제공하고 있었다면, 새 iOS에서는 디테일에 신경쓰고 보다 더 많은 기능과 디자인을 선보이고 있다.

# Dynamic Type
  • 텍스트 스타일
  • 텍스트 크기
  • Accessibility 텍스트 크기
  • 텍스트 가독성

다이나믹 타입이라는 것은 iOS 7 전 버전에서 제공하고 있는 것 처럼 단순히 텍스트가 커졌다 작아졌다 하는 것을 말하는 것이 아니라 글씨의 굵기, 자간, 행간 등 다양한 폰트의 옵션들을 제공하는 것을 말한다.

- 텍스트 스타일: 기존에는 텍스트 스타일이라고 한다면 볼드, 이텔릭체 정도라고 한다면 이젠 정말 다양한 스타일이 생겼다.

텍스트 스타일

텍스트 스타일

- 텍스트 사이즈

텍스트 크기

텍스트 크기

- Accessibility 텍스트 크기

Accessibility 텍스트 사이즈

Accessibility 텍스트 크기

- 텍스트 가독성

Screen Shot 2013-08-28 at 3.46.32 PM

 

# Letterpress
Letterpress

Letterpress

Letterpress를 쉽게 한국 말로 말하면 ‘엠포싱’ 효과? 라고 표현하면 될까? 보통 포토샵에서 글짜가 종이에 눌린 느낌을 주는 효과를 이젠 Programmatically하게 표현이 가능하게 되었다.

 

# Kerning and Ligatures

Screen Shot 2013-08-28 at 3.55.46 PM

‘커닝’과 ‘레가쳐’라는 개념이 한글로 뭔지 모르겠지만, 영어에서 Linear한 자간을 말하는 것이 아니라 글자의 앞 뒤 글자에 따라 자간이 능동적으로 변화하는 것을 말한다. 위 그림의 예제를 보면 쉽게 이해가 갈 것이다.

 

Text Kit

Text Kit Hierchy 다이어그램

Text Kit Hierchy 다이어그램

지금까지 지켜본 새로 추가된 기능들은 미시적이였다면 거시적 측면에서 살펴 보자. 이번 iOS 7에서는 자간이나 폰트와 같은 디테일 뿐만이 아니라 문단과 글의 페이지 조정해주는 기능도 추가가되었다. Text Kit의 도움을 받아 다음 그림과 같은 기능을 제공해줄 수 있다.

 

Screen Shot 2013-08-28 at 4.03.18 PM

위 예제를 보면 멀티 분단 뿐만이 아나라 꽃있는 부분 처럼 여러 텍스트 레이아웃이 지원이 된다. 이 부분에 관심이 있다면 WWDC 2013의 다음 세션을 더 자세히 보면 좋을 것이다.

  • Introducing Text Kit
  • Advanced Text Layout and Effects with Text Kit
  • Using Fonts with Text Kit

 

New Default for Full Screen Content

  • View controller layout
  • View controller bar styles
  • Status bar styles
  • Scroll view content inset adjustments

 

- View controller layout:

View controller layout

View controller layout

기존의 iOS에서는 사용자 컨텐츠의 영역이 Navigation Bar의 영역을 넘어서지 않았다. 하지만 iOS 7에서는 새로운 ‘깊이’라는 개념이 생겨, 이제는 Navigation Bar 영역까지도 표기가 가능해졌다. 이럴 경우에는 Navigation Bar의 약간 탁한 듯한 BG 아래로 사용자의 컨텐츠가 있다는 것을 나타내 줄수 있다.

 

- View controller bar styles

View controller bar styles

View controller bar styles

UINavigationController의 navigationBar에는 기존에 있었다. ‘Opaque’ 뿐만이 아니라 ‘Transparent, Blurred’등 다양한 Look and feel를 제공한다.

 

- Status bar styles

Status bar styles

Status bar styles

Status bar의 스타일에도 기존에 있던, 블랙이나 tinted이 외에도 ‘Non backgound’가 생겼다.

 

UIKit Dynamics

Screen Shot 2013-08-29 at 2.30.55 PM

UIKit Dynamics는 iOS의 꽃이라고 불릴만한 디자인이 뛰어난 감각적인 디자인 요소임에 틀림없다. UIKit Dynamics를 통하여서 디바이스의 자이로스코프 센서에 따라 화면이 살아 움직이는 듯한 느낌을 적용할 수 있다. 기전의 앱은 뭔가 딱딱하다는 느낌과 모든 움직임이 Linear하게 움직이는 단점이 있어 오래 사용한 사용자들에게 지루한 느낌을 주고 있었다. 하지만 UIKit Dynamics의 발전을 통해 OS 차원에서 살아있는 느낌의 앱을 만들수 있게 되었다.

더 자세히 알고 싶다면 WWDC 2013의 ‘Getting STarted with UIKit Dynamics’를 참조하면 될 것이다. 그 이외에도 더 자세히 알고 싶다면 다음 세션을 찾아보자.

  • ‘Getting STarted with UIKit Dynamics’
  • ‘Advanced Techniques with UIKit Dynamics’
  • Exploring Scroll Views on iOS 7
  • Implementing Engaging UI on iOS

 

# Controls

컨트롤이란 소위 말하는 기본 컴포넌트들을 뜻한다. 기본 컴포넌트도 새 디자인 테마에 맞추어 변화와 발전을 거듭하고 있는 모습이다.

버튼

버튼

세그멘트와 스탭퍼

세그멘트와 스탭퍼

스위치와 슬라이더

스위치와 슬라이더

픽커뷰

픽커뷰

 

# Multitasking

더욱 더 강력해진 멀티 테스킹에 기능을 적용하자. iOS 7은 여러가지 기술과 트윅으로 다양한 멀티 테스킹 기능을 지원하고 있다고 한다. 자세한 내용은 다음 세션에서 살펴 보도록 하자.

  • What’s New with Multitasking

 

# iOS 7 적용하기

새로운 것들이 무엇이 있는지 간략하게 알아보았다. 하지만 아직도 자신의 프로젝트에 어떻게 적용해야할지 모르는 분들을 위해 애플이 추천해주는 리스트가 다음과 같다.

상위 레벨에서…
  • 기본 기능에 집중하라
  • Exalt it
  • 새 생명을 불어 넣어주어라
  • 레티나를 위한 고려도 하자

iOS 7에 대한 대응을 할때 상위 개념으로 살펴보면 가장 중요한 것이 먼저 되던 기능이 지속적을 되어야 할 것이다. 하지만 그 뿐만이아니라 새로 나온 기능도 포함 시켜면서 새로운 Look & Feel도 적요하고자 노력하라고 추천한다. 뿐만 아니라 당신의 테스트 디바이스 한개에서만이 아니라 레티나 디스플레이를 가지고 있는 사용자도 고려해야할 것 이다.

API 레벨에서…
  • 새로운 텍스트 API 적용하기
  • view controller들이 전체화면에서 활용 되고 있는지 확인하기
  • 적용 가능한 멀티-테스킹 기능 포함시키기
  • view controller이나 collection view controller의 자연스러운 트랜지션 만들기
  • 다이나믹과 모션 에팩트 고려하기

지금까지 여러가지 새로운 UI에 대한 내용을 다루웠지만, 실질적으로 위와 같은 순서대로 새로운 프로젝트에 적용해보는 것은 어떠한가? 텍스트 API가 강력해졌으니 이번 기회에 최대 활용해보는 것도 좋을 것이라 생각되고, 컨텐츠를 화면 전체에 충분히 사용 가능하도록 적용하는 것도 중요할 것이다. Android 진형에 비해 아직도 작은 화면 크기에 많은 불만을 자기고 있는 유져들이 많지만, UI, UX적인 연구로 충분히 커버할 수 있다고 생각한다. 그런 발전이 이번 iOS 7의 진짜 힘이 아닐까 생각된다.

 

iOS 6와 iOS 7 같이 적용하기
  • iOS 7 UI 트랜지션 가이드 사용하기
  • AutoLayout이 도움이 될 것이다.
  • 새로운 디자인 고려해보기

 

 

Leave a Comment.