CLOSE SEARCH

Everything is NEW! iOS 7 User Interface Design

Minimalism and Clarity, Deference, Depth

iOS 7의 UI는 이전의 iOS 디자인을 대표하던 스큐어모피즘을 벗어나 조니 아이브의 미니멀리즘을 입고 완전히 새롭게 변신하였습니다. 새로운 UI는 Clarity, Deference, Depth를 주요한 테마로 사용자가 원하는 내용과 기능에 집중할 수 있고, 항상 읽기 쉽고 직관적인 화면을 제공하는데 중점을 두고 만들어졌다고 합니다. 그렇다면 이전의 스큐어모피즘이 직관적이지 않았던가 하는 의문이 생길 수 있습니다. 개인적으로는 그 자체로 메타포가 될 수 있는 스큐어모피즘의 직관성이 미니멀리즘의 그것에 비해 부족하다고는 생각하지 않습니다. 오히려 현실세계를 가장 잘 반영하고 있기 때문에 직관성이나 사용자 경험은 더 뛰어나지 않았나 생각됩니다.

왜 iOS 7의 UI를 이렇게 갑자기! 확! 엄청나게 많이! 바꾼 것일까를 고민해 보았습니다. 하지만 제가 그들의 머릿속에 브레이크포인트를 걸고 디버그 해볼 수는 없기 때문에 정확한 의도는 파악할 수는 없지만, 무언가 변화가 필요한 시점에, 사람들이 더 나은 무언가를 요구하는 시점에 새로운 모습으로 신선함을 주고, 다른 플랫폼으로 눈길을 돌렸던 고객들의 관심을 다시 가져오기 위한 전략이 아닌가 생각되었습니다. 특히, 하드웨어적으로 상당히 평준화된 시장에서 애플이 사용자 경험에 대해 무언가 새로운 패러다임을 제시하고 싶었던 것은 아닐까요?? (물론, Metro UI와 유사한 부분이 많기 때문에 새롭다는 말이 잘못되었다고도 할 수 있겠지만..)

어쨋든 iOS 7의 UI는 새로워졌습니다. 미니멀리즘을 충실히 구현하면서 더 나은 사용자 경험을 제공하기 위해 다양한 노력을 하였음을 곳곳에서 확인할 수 있었습니다. 새로운 부분들을 함께 살펴보면서 iOS 7의 UI, 그리고 관련된 새로운 기술에 친숙해지는 기회가 되었으면 합니다. 특히, 저와 같은 개발자나 디자이너는 가을이 오기전에 미리미리 준비를 해야 하겠죠???^^

 

Dynamic Type

애플은 사용자 경험 중에서도 읽기에 대한 경험을 가장 중요하게 생각하고 있는것 같습니다. iOS 7을 보면 텍스트의 가독성을 높이기 위해 여러가지 방법으로 노력했음을 알 수 있습니다.

Dynamic Type은 쉽게 말해서 텍스트의 크기에 관계없이 최상의 가독성을 제공해주는 기술입니다. 애플은 다음 그림을 통해서 어떻게 이를 실현했는가에 대해 설명하고 있습니다.

ios7_ui_dynamictype

일반적으로 텍스트는 작은 크기에서는 폰트가 굵을수록 읽기 편하고, 큰 크기에서는 폰트가 가늘수록 읽기가 편하다고 합니다. iOS 7은 이런 점을 감안하여 텍스트가 작아질수록 폰트의 굵기를 증가시키고, 텍스트가 커질수록 감소시키는 방법을 사용합니다. 그리고 자간이나 줄의 높이도 가장 좋은 상태로 조절해줍니다. 이를 통해 어떤 크기에서도 최상의 가독성을 제공할 수 있게 되었다고 합니다. 이 모든 것이 자동으로 이루어진다면 좋겠지만, 현실에서는 몇가지 새로운 방식을 요구합니다.

Text Styles

지금까지는 폰트의 크기를 지정할 때는 pt 값을 주로 사용했지만, iOS 7은 새로운 Text Style의 사용을 권장하고 있습니다. Text Style은 웹에서 사용하는 CSS와 유사한 기능을 한다고 볼 수 있습니다. 여기에 나열된 모든 스타일들은 Regular, Bold, Italic, Loose, Tight와 같은 익숙한 서브스타일을 가집니다.

[list style=”star”]

  • Headline1
  • Headline2
  • Subheadline 1
  • Subheadline 2
  • Body
  • Footnote
  • Caption 1
  • Caption 2

[/list]

Text Sizing

[one_half]ios7_ui_option2_preview[/one_half][one_half_last]ios7_ui_option1_preview[/one_half_last]

Dynamic Text 덕분에 iOS 7에서는 사용자가 직접 텍스트의 크기를 지정할 수 있게 되었습니다. 그래서 개발자와 디자이너는 항상 텍스트의 크기 변화를 생각하면서 UI를 설계하고 만들어야 합니다. 가장 손쉬우면서도 중요한 방법은, Label이나 TextView와 같이 텍스틀 표시하는 용도로 주로 사용되는 UI들은 새로운 preferredFontTextStyle: 메소드를 통해 Dynamic Type 기능을 활용하도록 해주는 것입니다.

Text Kit

애플은 그동안 텍스트에 관한 많은 연구와 노력을 거듭했고 그 결과물의 하나로 TextKit을 발표했습니다. TextKit은 CoreText를 기반으로 만들어진 최신 텍스트 레이아웃 & 렌더링 엔진입니다. iOS 7의 다양한 UIKit 클래스와 긴밀하게 통합되어 있고, 특히, UITextView, UITextField, UILabel은 TextKit을 기반으로 다시 만들어졌다고 합니다.

TextKit에 대한 상세한 내용은 아래의 링크에서 보실 수 있습니다.

Text Kit : focus on Legibility and easy API #1
Text Kit : focus on Legibility and easy API #2
Text Kit : focus on Legibility and easy API #3

 

Fullscreen View Controller

iOS 7의 뷰 컨트롤러는 전체 화면영역과 동일한 크기를 가집니다. 그래서 wantsFullScreenLayout 속성은 Deprecated 되었고, 만약 iOS 7에서 이 값을 NO라고 지정한 경우에는 뷰가 엉뚱한 위치에 잘못 표시될수도 있다고 하니 주의해야 합니다.

 

Transparent Status Bar

화면 상단의 상태바는 더 이상 자리를 차지하지 않습니다. 자신만의 배경을 가지지도 않고 뷰 컨트롤러 위에 표시되 투명하게 표시됩니다. iOS 7의 상태바를 보면 흰색 또는 검은색 배경을 가진 것으로 보이기도 하지만 실제로는 상태바의 아래쪽에 있는 뷰의 배경색을 그대로 보여준 것일 뿐입니다. iOS 6까지 사용하던 UIStatusBarStyleBlackOpaque, UIStatusBarStyleBlackTranslucent 스타일은 더 이상 사용되지 않습니다. iOS 7에서 사용하는 두가지 스타일은 배경색이 아닌 상태바에 표시되는 텍스트나 아이콘의 색상을 지정하는 용도로 사용됩니다.

[one_half]

UIStatusBarStyleDefault

ios7_statusbar_white[/one_half]

[one_half_last]

UIStatusBarStyleLightContent

ios7_statusbar_black[/one_half_last]

위에 그림에서 볼 수 있듯이 UIStatusBarStyleDefault 스타일은 상태바의 요소를 검은색으로 표시하고, UIStatusBarStyleLightContent 스타일은 흰색으로 표시합니다. 각각 밝은 배경과 어두운 배경에 맞추어서 적절히 설정해 주어야 하며, 두가지 색상 외에 다른 색상은 아직까지 제공하지 않고 있습니다.

ios7_statusbar_homescreen

위의 그림은 실제로 iOS 7의 홈스크린에 표시된 상태바의 모습입니다. 앞에서 말한 것처럼 iOS 7의 상태바는 배경이 투명하기 때문에 홈스크린의 배경을 그대로 보여주고 있습니다. 이처럼 상태바가 투명해졌기 때문에 더이상 20pt의 높이를 가지는 공간이 필요없게 되었고, 그 결과 뷰 컨트롤러는 전체 화면영역을 모두 활용할 수 있게 되었습니다. 즉, iOS 6에서는 화면을 설계할 때, 460pt 또는 548pt의 높이를 기준으로 UI를 설계했지만, iOS 7에서는 480pt, 568pt의 높이와 상태바의 투명배경을 모두 고려해서 UI를 설계해야 합니다.

 

Tint Color

UIView 클래스에 tintColor라는 UIColor 형식의 새로운 속성이 추가되었습니다. iOS 6에서도 동일한 이름의 속성이 존재하였지만, 네비게이션 바나 툴바와 같은 특정 컨트롤에 한정된 속성이고, 컨트롤의 배경색상을 변경하는 용도로 사용되었다는 점에서 iOS 7의 tintColor와는 차이점을 가집니다.

iOS 7의 Tint Color는 뷰의 중심색상으로 사용되는 컬러로 버튼의 텍스트 색상, 슬라이더의 트랙 색상 등이 Tint Color입니다. Tint Color는 앱의 테마를 구성하고 사용자 경험에서 직관성을 높이는 수단으로 아주 중요하게 사용됩니다.

ios7_systemdefaultcolor

iOS 7은 위의 네가지 시스템 색상을 기본으로 사용하며, 여기에 노락색과 보라색 계열의 추가 색상을 사용하여 iOS 기본 앱들의 Tint Color를 구성하고 있습니다. Apple은 이런 색상들이 사용자의 Muscle Memory 저장되어 현재 사용중인 앱을 직관적으로 판단할 수 있는데 도움을 준다고 설명하고 있습니다.

ios7_tintcolor_app_preview

Tint Color는 UIView의 속성이고 UIView는 계층구조를 가지는 클래스입니다. Tint Color는 이 계층구조를 따라 하위 뷰로 상속되므로 앱 전체의 색상테마를 구성하는 용도로도 사용할 수 있습니다. 즉, 가장 최상위 뷰인 window의 tintColor 속성을 변경하면 앱에 있는 뷰들의 tint color가 변경됩니다. 만약, 하위에 있는 뷰가 자신의 Tint Color를 가지고 있다면 자신의 컬러를 우선적으로 사용하므로, 테마 색상에 관계없이 특정 뷰의 색상을 동일하게 유지하는 것도 가능합니다.

iOS 6에서 tintColor 속성을 사용했었다면 iOS 7의 tintColor와의 차이점을 반드시 기억하고 있어야 합니다. iOS 6의 tintColor는 네비게이션 바, 툴바 등의 배경색상을 변경하는 용도로 사용되었습니다. iOS 7에서 동일한 작업을 하려면 barTintColor 속성을 사용해야 합니다.

 

Bars, no more opaque

Translucent background

iOS 7의 모든 바는 푸른색의 불투명한 배경 대신 흰색 반투명 배경을 사용합니다. 그리고 상태바와 마찬가지로 자신의 공간을 차지하지 않고 뷰 컨트롤러 위에 표시되고, 아래쪽에 있는 뷰 컨트롤러의 내용을 블러효과를 통해 보여줍니다. 그러나 현재 나온 iOS 7 beta 1에서는 블러효과가 너무 강한 탓인지 실제로 이 효과를 확인해보기가 어렵습니다. (사진앱을 열고 사진 목록을 스크롤해보면 어느정도 확인할 수는 있습니다.)

Expand Background Image

iOS 6의 바들은 자신의 배경만을 설정할 수 있었지만, iOS 7부터는 자신의 배경을 상태바의 영역까지 확장할 수 있게 되었습니다. 새로운 UIBarPositioning 프로토콜을 구현한 바 클래스들은 barPosition 이라는 속성을 통해 바의 위치를 파악할 수 있습니다. 만약 이 속성값이 UIBarPositionTopAttached 인 경우, 상태바 아래쪽에 위치하는 바라는 것을 인식하고 자신의 배경을 상태바의 높이만큼 확장해서 출력해줍니다. 그러므로 이런 바들의 배경을 설정할 때는 barPosition 값에 따라 서로 다른 높의 이미지를 제공해 주어야 합니다. 아이폰의 경우 64pt, 아이패드의 경우 52pt의 높이를 가진 이미지를 사용해야 합니다. 만약 UIBarPositionTopAttached 값을 가지는 바에 64pt가 아닌 44pt의 이미지를 설정하면 해당이미지는 64pt만큼 늘어나게 됩니다.

[one_half]

UIBarPositionTopAttached

ios7_bar_background_topattached

[/one_half]

[one_half_last]

UIBarPositionTop

ios7_bar_background_notattached

[/one_half_last]

No more Shadow

iOS 6까지 네비게이션 바나 검색 바의 아래쪽에 그림자 효과가 기본적으로 포함되어 있었습니다. 그러나 iOS 7에서는 이부분이 1px의 라인으로 변경되었습니다. 그래서 바 아래쪽에 그림자 효과를 주고 싶다면 shadowImage 속성을 통해 그림자로 사용할 이미지를 지정해 주어야 합니다.

Borderless Only

iOS 6에는 Bordered와 Borderless의 두가지 바 버튼 스타일이 제공되었지만, iOS 7에서는 Borderless 스타일만 제공됩니다. 그리고 이미지 심볼보다는 기능을 나타내는 텍스트를 지정하는 방식을 권장하며, 이를 통해 해당 버튼의 기능에 대한 직관성을 높일수 있다고 말하고 있습니다.

Need Selected Image?

UITabBarItem 클래스에는 selectedImage라는 새로운 속성이 추가되었습니다. iOS 7부터는 탭이 선택되었을때 표시할 이미지를 직접 지정할 수 있게 되어습니다.

Look & Feel

Navigation bar

ios7_ui_navbarbuttons

Tab bar

ios7_ui_tabbarbuttons

Tool bar

ios7_ui_toolbarbuttons

 

Scroll View with Nesting, UIDynamics

iOS 6의 스크롤뷰와 iOS 7의 스크롤뷰는 외관상으로는 큰 차이가 없습니다. 단지 스크롤러의 너비가 조금 달라졌을 뿐입니다. 그러나 내부적으로는 상당히 많은 개선이 이루어 졌습니다.

특히, 스크롤뷰 내부에 스크롤뷰를 중첩해서 추가할 수 있게 되었고, 각 스크롤뷰가 서로 다른 속도로 스크롤되도록 하는 기능도 제공합니다. 그리고 UIDynamics와 잘 통합되어 있기 때문에 이전에 구현하기 힘들었던 멋진 UI를 손쉽게 구현할 수 있게 되었습니다.

스크롤뷰에 대한 내용은 별도의 포스팅을 통해 상세하게 알아보겠습니다.

 

Face off? Table View

iOS 7에서 테이블뷰, 특히 그룹 형태의 테이블뷰의 디자인이 완전히 새롭게 바뀌었습니다. 그룹테이블 고유의 특성이었던 둥근 모서리가 사라지고 셀의 너비가 화면 전체 너비로 확장되었고, 세로 줄무의의 배경 대신 밝은 회색의 배경을 사용합니다. 셀을 선택하였을 때 표시되던 파란색 배경 또한 회색으로 변경되었습니다.

[one_half]

Grouped Table View in iOS 6

groupedtable_ios6

[/one_half]

[one_half_last]

Grouped Table View in iOS 6

groupedtable_ios7

[/one_half_last]

Separator Inset

iOS 7의 셀 구분자는 iOS 6에 비해 얇고 조금 더 밝은 색상을 사용합니다. 그리고 가장 큰 차이점은 셀이 텍스트를 포함하고 있을 때 왼쪽에 여백을 추가한다는 점입니다. 이 여백의 크기는 separatorInset 속성을 통해 직접 변경할 수도 있습니다. (iOS 7 SDK에는 separatorInset 속성을 통해 왼쪽과 오른쪽 여백을 지정할 수 있다고 나와 있지만, Xcode 5 프리뷰 버전에서 확인해 본 결과 아직은 해당 속성을 사용할 수 없었습니다.)

Element Look & Feel

[one_fourth]

Checkmark

check_7_2x

[/one_fourth]

[one_fourth]

Disclosure Indicator

disclosure_indicator_7_2x

[/one_fourth]

[one_fourth]

Detail Disclosure Button

detail_disclosure_7_2x

[/one_fourth]

[one_fourth_last]

Row reorder

UITableGrabber@2x_2x

[/one_fourth_last]

[one_fourth]

Row Insert

row_insert_7_2x

[/one_fourth]

[one_fourth]

Delete Button control

delete_control_7_2x

[/one_fourth]

[one_fourth]

Delete Button

delete_button_7_2x

[/one_fourth]

[one_fourth_last]

[/one_fourth_last]

Refresh Control

주로 테이블뷰에 포함되어 리프레시 동작에 대한 피드백을 제공하던 리프레시 컨트롤은 Activity Indicator 형태로 모양이 변경되었습니다.

[one_half]

UIRefreshControl in iOS 7 TableView

ios7_refreshcontrol

[/one_half]

[one_half_last]

UIRefreshControl in iOS 6 TableView

ios6_refreshcontrol

[/one_half_last]

 

Just Blurred Alert! No Glossy, No Border

iOS 7의 경고창 역시 반투명 배경을 사용하고 있습니다. iOS 7의 디자인 테마중 하나인 Depth를 충실히 구현하기 위한 의도가 아닌가 생각됩니다.

[one_half]

iOS 7 – Blurred

alertview_ios7

[/one_half]

[one_half_last]

iOS 6 – Glossy & Border

alertview_ios6

[/one_half_last]

More customizable

외형에도 많은 변화가 있지만 iOS 7 경고창의 가장 큰 변화는 contentView 속성을 통해 경고창에 원하는 뷰를 직접 표시할 수 있게 되었다는 것입니다.

ios7_alertview_customcontentview

 

Action Sheet? Blurred too.

iOS 6까지는 actionSheetStyle 속성을 통해 액션시트의 스타일을 지정해 줄 수 있었습니다. iOS 7에서는 더 이상 이 속성을 사용하지 않고 예전 iOS 6의 그룹 테이블뷰와 유사한 UI로 버튼을 표시해줍니다. destructiveButtonTitle로 지정된 버튼의 텍스트틑 항상 빨간색으로 표시됩니다. 이전 버전과 달리 버튼의 배경이 아닌 버튼의 텍스트 색상이 변경된다는 것을 기억해 두어야 합니다.

ios7_ui_actionsheet

 

RoundedRect Button is gone

iOS 7에서 RoundedRect 버튼을 사라지고 시스템 타입((UIButtonTypeSystem))의 버튼이 기본버튼이 되었습니다. iOS 6에서 UIButtonTypeRoundedRect 타입을 사용한 코드는 iOS 7 SDK로 빌드시 자동적으로 UIButtonTypeSystem으로 교체됩니다.

[one_third]

iOS 7 System Button


ios7_systembutton

[/one_third]

[one_third]

iOS 7 System Button – selected state

iso7_systembutton_selected

[/one_third]

[one_third_last]

iOS 6 Rounded Rect Button

ios6_roundedrect

[/one_third_last]

Apple은 버튼의 외곽선과 배경을 제거하고, 더 많은 내용을 더 보기 쉽게 표시할 수 있도록 버튼을 디자인 했다고 밝히고 있습니다. iOS 7에서 UIButtonTypeDetailDisclosure, UIButtonTypeInfoLight, UIButtonTypeInfoDark 버튼 사이의 구분은 사라지고 동일한 심볼로 표시됩니다. UIButtonTypeContactAdd 버튼 역시 플랫한 심볼로 변경되었습니다.

[one_fourth]

DetailDisclosure

ios7_detaildisclosure

[/one_fourth]

[one_fourth]

InfoLight

ios7_detaildisclosure

[/one_fourth]

[one_fourth]

InfoDark

ios7_detaildisclosure

[/one_fourth]

[one_fourth_last]

ContactAdd

ios7_contactadd

[/one_fourth_last]

 

Three-Dimensional Picker

피커의 전체 크기에는 변함이 없지만 외곽선과 글로시 효과가 사라지고 3차원적인 모습으로 변화되었습니다. 이전 버전에서는 피커를 통해 입력을 받기 위해 별도의 뷰를 만드는 것이 일반적이었지만, iOS 7에서는 인라인 방식으로 뷰에 직접 추가하는 방식을 권장하고 있습니다. 이러한 방식은 사용자의 주의를 분산시키지 않고 좀 더 내용에 집중할 수 있도록 도와준다고 합니다.

[one_half]

iOS 7

ios7_picker

[/one_half]

[one_half_last]

iOS 6

ios6_picker

[/one_half_last]

 

Text control with Dynamic Type

Label, TextView, TextField와 같이 텍스트와 밀접한 관련이 있는 컨트롤들은 iOS에서 제공하는 텍스트 스타일을 적용하는 것이 좋습니다. 적절히 구성된 텍스트 스타일은 사용자가 설정한 텍스트 크기에 관계없이 일관된 UI를 유지하는데 큰 도움을 줍니다. Xcode 5를 사용하는 경우 Attributes Inspector의 Font 설정에서 텍스트 스타일을 선택할 수 있습니다.

ios7_ui_xcode5_textstyle

코드를 통해 폰트를 변경하고자 하는 경우에는 새로운 preferredFontForTextStyle: 사용할 수 있습니다.

Label과 TextView는 외관상 큰 변화가 없지만, TextField의 경우 다른 iOS 7 컨트롤들과 조화를 이루도록 Border가 얇아지고 내부의 그림자가 사라졌습니다.

[one_half]

iOS 7 UITextField

ios7_ui_textfield

[/one_half]

[one_half_last]

iOS 6 UITextField

ios6_ui_textfield

[/one_half_last]

 

Thinner Bar, Bigger Thumb

Progress View와 Slider의 바는 이전보다 더 얇아졌고, Slider의 Thumb은 더 커지고 그림자 효과도 변경되었습니다. 트랙의 색상을 nil로 지정한 경우에는 자동으로 부모의 Tint Color를 상속받게 됩니다. 하지만, Slider의 경우에는 maximumTrackTintColor와 thumbTintColor 색상이 nil인 경우에는 부모가 아닌 자신의 기본 컬러를 사용하게 됩니다.

[one_half]

iOS 7

ios7_ui_progressbar
[/one_half]
[one_half_last]

iOS 6

ios6_ui_progressbar
[/one_half_last]

[one_half]ios7_ui_slider[/one_half]
[one_half_last]ios6_ui_slider[/one_half_last]

 

Style deprecated Segmented Control

Segmented Control의 segmentedControlStyle 속성은 더이상 사용되지 않습니다.

[one_half]

iOS 7

ios7_ui_seg

[/one_half]

[one_half_last]

iOS 6

ios6_ui_seg

[/one_half_last]

 

Switch switched

iOS 7의 스위치는 UI 변경에 대응하기 위해 Auto Layout을 사용한다고 합니다. tintColor, thumbTintColor 속성을 통해 요소들의 색상을 변경할 수 있지만, 커스텀 이미지는 더이상 사용할 수 없습니다. 그리고 컨트롤 내부에 표시되던 ON, OFF 텍스트도 더이상 표시되지 않습니다.

[one_half]

iOS 7

ios7_ui_switch

[/one_half]

[one_half_last]

iOS 6

ios6_ui_switch

[/one_half_last]

 

Adaptive Multitasking

ios7_adaptive_multitasking

iOS 7은 이전 버전에 비해 향상된 멀티태스킹 UI를 제공합니다. 상세한 내용은 아래의 링크에서 설명하고 있습니다.

Multitasking in iOS 7 : Background Fetch, Remote Notification, Background Transfer Service

 

be ready for  iOS 7

새로운 환경에서 새로운 앱을 개발하려면 그만큼 두통이 따르는 법입니다. 지금까지 살펴본 것처럼 iOS 7의 많은 변화로 인해 당분간은 기획자, 개발자, 디자이너들이 두통에 시달릴것 같습니다. 하지만 Apple이 제시하고 있는 몇가지 가이드라인을 미리 숙지하고 준비한다면 한층 편안하게 iOS 7 앱을 준비할 수 있을 것입니다.

Essential

[list style=”check”]

  • 고해상도 앱 아이콘의 크기가 120×120으로 변경되었습니다.
  • 시작 이미지는 상태바의 영역을 포함한 화면 크기로 작성해야 합니다.
  • 고해상도 이미지는 반드시 제공되어야 하고, 4인치 UI 지원도 필수입니다.
  • 뷰 컨트롤러의 영역이 전체화면과 동일하다는 것을 기억해야 합니다.

[/list]

One Step further

[list style=”star”]

  • 새로운 Text API (TextKit 등)를 통해 텍스트 크기 변화에 유연하게 대응할 수 있습니다.
  • Auto Layout과 Story board를 적극 활용해 생산성을 높일 수 있습니다.
  • Adaptive Multitasking을 적용하여 더 나은 사용자 경협을 제공할 수 있습니다.
  • 새로운 Transition, UI Dynamics, Motion Effects를 통해 멋진 효과를 연출할 수 있습니다.

[/list]

 

Multi OS Supporting – iOS 6 & iOS 7

device_os_status

Apple이 WWDC 2013에서 발표한 자료에 따르면 iOS 디바이스 사용자들의 90%이상이 최신 OS를 사용하고 있고, 최신 OS 출시 후 업데이트까지 소요되는 기간도 다른 플랫폼에 비해 매우 짧다고 합니다. 이 자료를 보면 새로운 API를 적극 활용해서 더 멋진 앱을 만들수 있을것 같지만, 현실적으로 이전 버전에 대한 지원을 완전히 무시할 수는 없습니다. 그래서 대다수의 앱 개발업체들은 최신 OS버전보다 한두단계 낮은 OS까지 지원하기 위해 노력하고 있습니다.

두 버전을 모두 지원하는데 가장 어려운 점은 셔로 다른 UI를 확인하고 양쪽에서 의도한대로 동작하도록 만드는 것이라고 생각됩니다. 화면을 구성한 다음, iOS 6 디바이스로 한번 확인하고, iOS 7 디바이스로 확인하고를 반복하다보면 누구라도 귀찮고 지칠수 밖에 없습니다. 이런 작업을 할 때는 Xcode 5의 Preview 기능을 적극 활용하시기 바랍니다.

ios7_ui_xcode5_preview

그리고 버전별로 서로 다른 리소스를 읽어야 하는 경우에는 아래의 코드가 도움이 될 것입니다.

Apple은 기존의 앱을 업데이트하거나 새로운 앱을 개발하는 경우 모두 iOS 7의 UI를 먼저 구성한 후, iOS 6 화면에서 수정이 필요한 부분을 찾아서 적용하는 방법이 가장 효율적이라고 말하고 있지만, 어떤 것이 더 나은지는 실제로 맨땅에 헤딩을 하다보면 알게되지 않을까 생각합니다. 그 어느 버전보다도 많은 변경사항 때문에 어려움도 있겠지만, 미리미리 공부하고 준비한다면 남들보다 한발 먼저 멋진 앱을 만들 수 있는 좋은 기회가 될 것입니다.

 

** 이 글에서 설명하고 있는 내용 중 일부는 베타 버전에서 제대로 동작하지 않거나 아직 지원되지 않고 있습니다. 정식버전이 출시되는 시점에 맞추어 다시한번 업데이트 될 예정입니다.

Filed under: Apple WWDC 2013, iOS

  1. 덕분에 많은 정보를 알게 됐내요 정말 정리 잘하셨습니다. 좋은글 감사하게 잘봤습니다.
  2. 로기
    정리 정말 감사합니다~^^
  3. 하루아부지
    항상 좋은 정보 감사합니다.^^
  4. 샤코
    정말 퀄리티에 비해 리플이 너무 없군요 ^^; 엄청난 포스팅 잘 보고 갑니다.
  5. 히파루스
    깔끔한 정리에 리플이 없다니... 감사합니다.