[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이 도움이 될 것이다.
  • 새로운 디자인 고려해보기

 

 

[WWDC 2013 - 1] What’s new in Xcode 5

안녕하세요.

업무가 바쁘다는 핑계로 이제서야 뒷 북치는 느낌으로 WWDC에서 발표한 자료 동영상을 가지고 블러그를 다시 시작합니다. 어차피 회사에서 하고 있는 업무에 적용을 해야하는 입장이니 정리를 한번 해두면 좋을 것 같아서 많은 사람과 함께 공유했으면 합니다. 도움이 되시면 좋을 것 같고 혹시 부족한 부분이나 잘못 된 부분이 있다면 주저 마시고 댓글 달아주시면 감사하겠습니다.

 

Xcode 5

Xcode 5

 

What’s new in Xcode 5

대표적인 변화:

# 툴바 (Tool Bar):

만약 여러분들도 Xcode 5를 설치하셨다면 먼저 눈에 띄는 것이 아마 넓어진 작업 영역일 것이다. 여러가지 이유가 있겠지만 발표자의 주장에 의하면 ‘툴바’의 영역이 더 적어진 것을 이유로 뽑는다. 실제로 더 얇아 졌으며 UI 버튼들이 상당히 사라지고 정말 기본적인 것만 남아 있다.

Tool Bar

Tool Bar

# 레퍼런스 문서 뷰어:

Xcode 5는 기본적으로 Xcode 4 위에서 발전이 된 모습이다. 레퍼런스 문서 뷰어 같은 경우는 기존의 Xcode 4에서는 ‘Organizer’에 포함 되어 있었던 부분인데, 이제는 단독으로 웹 브라우저의 느낌으로 열리게 된다. 여기에서 주목할 점은 이젠 멀티 탭이 열린다는 점이다. 개발자라면 아마 기존 Xcode의 뷰어에서 상당한 불편함을 느꼈을 부분인데, 멋진 발전이라고 생각한다. 그 외에 PDF로 열기등 다양한 기능이 생겨서 보다 편리함을 준다.

Reference Viewer

Reference Viewer

# Source Control :

드디어 소스 컨트롤 기능이 Xcode에 강력한 모습으로 들어왔다. 아이폰 개발전 저자의 개발 환경은 대부분 ‘이클립스’ 바탕에서 이루워졌기 때문에 Xcode로 오면서 아쉬웠던 부분 중 하나인데 이제서야 들어왔다. Xcode를 처음에 실행하면서 부터 Checkout을 받을 수 있는 장치가 있으며, 메뉴바에 ‘Source Control’ 기능이 추가되어 브랜치를 따거나, 머지를 하는 등 이제는 서드 파티 앱을 사용하지 않고도 보다 쉽게 형상관리가 가능하게 되었다.

Source Code Control

Source Code Control

# Automatic Configuration

iOS 관련 프로젝트를 하다 보면 provisioning profile 관련된 설정 때문에 번거러운 적이 한 두번이 아닐꺼라고 생각된다. Xcode 5를 발표하면서 관람자들이 환호했던 부분중 하나인데, 이제는 수동으로 provisioning profile을 선택하지 않아도 된다고 한다. 그 외에도 iCloud, Game Center와 같은 설정도 이젠 Xcode에서 편리하게 사용 여부를 쉽게 설정할 수 있다.

이젠 팀별로 프로젝트 별로 Profile를 관리 선택 할 수 있다.

이젠 팀별로 프로젝트 별로 Profile를 관리 선택 할 수 있다.

# Interface Design

Xcode는 다른 IDE에 비해 강력한 장점 중 하나는 IDE에서 인터페이스 디자인도 상대적으로 쉽게 구현 할 수 있다는 점이다. 그런데 소소하게 여러가지 기능이 추가되고 향상되었지만 크게 눈여겨 봐야 할 것은 두개 정도라고 생각되어진다.

- Auto-layout: iOS 6에서 부터 적용되었던 relative auto layout이 보다 향상되어 돌아왔다. UI 컴포넌트를 선택을 하고 미스된 Constrains가 있으면 바로 적용 시켜주는 기능부터, 국제화에 대비한 보다 정확한 레이아웃을 자동으로 구사해주는 기능까지 더욱 더 강력해진 기능을 제공한다.

- Asset Catelog: 기억하는가? 레티나용 디자인 소스 파일 뒤에는 ‘@2x’를 붙이며 관리했던 디자인 소스를 이제는 보다 강력한 툴을 사용하여 관리할 수 있게 되었다. 개인적으로 Xcode 프로젝트를 할 때면 프로젝트 내에서 그룹을 생성하면 실제 파일 시스템에서 폴더가 생기는 것이 아니라 소프트 레러펀스를 해주는 가상의 그룹이 생겨서 실제 파일을 보면 복잡하기 그지 없었는데, 이미지 파일까지 네이밍 룰이 따로 있어 힘들었던 그 시절을 이젠 잊어도 될 듯 싶다.

Screen Shot 2013-08-27 at 6.52.26 PM

# Apple LLVM 5 (컴파일러)

Xcode 4 버전 까지 Xcode는 LLVM과 llvm-gcc 4.2를 컴파일러로 채택하고 사용자들에게 선택의 권한을 부여했었다. 하지만 Xcode 5에서는 이제 gcc를 더 이상 볼수가 없게 되었다. 이와 동시에 수많은 프래임워크의 import를 통해 .m파일들이 점점 커지는 부작용이 일어났다 이것을 해결하기 위해 Apple은 ‘Modules’이라는 개념을 가지고 들어오게 된다.

기존의 파일을 빌드해주고 컴파일 해주는 과정을 간략하게 설명하면, 한 .m 파일에 여러게의 헤더 파일들이 import 되어 있다. 그런데 그 밑 물에서는 컴파일 타임 때 임포트 되어 있는 파일들을 다 해당 .m에 붙이게 되기 때문에 .m 파일이 커대해질 수 밖에 없는 상황이였다. 그런데 Xcode에서 채택한 ‘모듈’이라는 매카니즘을 통해 이 비효율적인 방식을 버릴수 있게 되었다고 한다.

- 모듈: 은 일종의 데이터 베이스로써 프래임 워크를 디비에 담고 그것이 필요한 .m 파일마다 컴파일 타임 때 링크 시켜 주기 때문에 이제는 더 이상 소스 파일이 커질 일이 없다고 한다. 이런 효과를 통해서 개발 성능이 눈에 띄게 좋아졌는데, 빌드, 분석, 인덱싱 등 평균적인 상향이 2.3 배나 좋아졌다고 한다.

모듈의 매커니즘

모듈의 매커니즘

- 그 밖에: C++ 11 지원, Auto-Vectorizer

 

# Xcode Debugger (LLDB)

- Data Tips: Xcode 5의 눈 부신 변화 중 하나로는 디버그에 대한 혁신이 있다. 이제는 더 이상 gdb를 사용하지 않는 다고 한다. 그리고 소스 코드에서 디버깅 타임 때 ‘Data Tips’라고 해서 말 풍선으로 커서 아래 있는 변수에 대한 데이터 정보를 보다 멋지게 보여주는 기능이 포함되었다. 예를 들어 아래 사진과 같이 클래스 변수에 커서를 올리면 멤버 변수에 대한 내용이 말 풍선으로 나오는데, 만약 이미지가 포함 되어 있는 인스턴스라면 이미지까지도 소스코드 위에서 바로 볼 수가 있다.

- break point: 이젠 각 브레이크 포인트 마다 조건을 부여할 수 있는 기능이 생겼다. 생각지도 못했던 기능인데, 정말 좋은 기능임은 분명한 것 같다.

- Debug Gauges: 가장 맘에 드는 기능중 하나는 Analyzer의 light 버젼인 ‘디버깅 게이지’이다. 이 툴은 Analyzer가 했던 기능을 보다 가볍게 사용 하는 툴로써 디버깅 시간에 보다 간편하고 빠르게 사용 가능하다는 점이 장점으로 뽑힌다.

디버깅 타임 때 소스 코드 위해서 데이터 팁을 보여주는 장명

디버깅 타임 때 소스 코드 위해서 데이터 팁을 보여주는 장면

# Test Navigator

Xcode는 유닛 테스트의 지원이 거의 미미하다가 Xcode 4에서 OCUnit을 채택하여서 사용하고 있었다. 그런데 이번 새 버젼에서 XC Test가 적용되면서 더욱 매력적이 툴이 되었다. 이 툴은 테스팅을 할 때 마다 모든 테스팅을 하지 않고 원하는 테스트만 골라서 테스팅하는 기능을 포함 하고 있다. 그 외에도 더 많은 기능들이 있는데, 그것은 프로젝트에 직접 적용을 하면서 추가하다록 하겠다.

Screen Shot 2013-08-27 at 6.56.05 PM

# Bots

마지막으로 Bots이라는 QA 팀에 필요한 툴이 생겼다. 봇을 통해서 어떤 개발자가 테스트에 많이 실패를 하였는데, 혹은 빌드에 대한 히스토리를 보여주는 프로젝트 모니터링 툴로써 매우 신기한 툴이 제공되기 시작한다. 자세히 써본 일이 없어 얼마나 도움을 줄지는 모르겠으나 프로젝트를 관리하는 역할의 사람들에게는 비쥬얼 적인 부분에 제공으로 뛰어난 성능과 기능을 제공할 것이다.

Screen Shot 2013-08-27 at 6.56.57 PM

 

 

# 그 밖의

개인적으로 무엇 보다도 자동 문서화 시켜주는 기능이 맘에 든다. 기존 Xcode에는 해당 기능이 없어 오픈 소스를 적용해야만 가능했던 부분이 이제는 기본으로 적용되어, 커맨드를 통해 자동으로 문서를 뽑아준다고 하니 정말 감사하다는 생각 밖에 안든다.

 

해당 프리젠테이션을 보면서 느낀 점은 정말 말로는 표현을 못하고 있던 가려운 부분을 잘 알아서 글거주는 기분이라고나 할까? ^^ 아무튼 Xcode는 최신인 만큼 역대 최대의 기능과 성능으로 무장했음이 틀림없다.