iOS 앱 구조

거의 모든 iOS앱은 UIkit 프레임워크에 의해서 정의된 UI 구성요소중의 일부를 사용합니다.

image: ../Art/uikit_ui_elements_2x.png

UIKit가 제공하는 UI 요소는 네 가지 범주로 분류할 수 있습니다.

  • Bars. 바는 사용자의 위치, 사용자가 이동하거나 작업을 시작하는것을 돕도록 제어하는 문맥적 정보를 포함하고 있습니다. 

  • Content views. 콘텐츠 뷰어는 응용프로그램의 구제적인 콘텐츠를 포함하고 스크롤, 삽입, 삭제, 항목의 재배열과 같은 행동을 가능하게 합니다.

  • Controls. 컨트롤은 동작을 수행하고 정보를 나타냅니다.

  • Temporary views. 임시뷰어는 사용자에게 중요한 정보, 부가적인 선택이나 기능을 제공하기 위해 잠시 나타납니다.

UI요소를 정의하는 것 외에, UIkit는 동작인식, 드로잉, 접근성, 출력 지원과같은 기능을 수행하는 객체들을 정의합니다.

프로그램에 따라, UI 요소는 view의 유형인데 이는 UIview로부터 상속되었기 때문입니다. view는 화면 자체가 나타내어지는 방법을 알고 있으며 , 사용자가 자신의 범위를 터치했을때 감지합니다. 컨트롤들(버튼이나 슬라이더와 같은), 콘텐츠 뷰(콜렉션 뷰나 테이블 뷰 같은), 그리고 임시 뷰(알람이나, 액션시트ex-사진보내기같은)들이 view의 모든 유형이 있습이다.

당신의 앱 내 뷰의 세트, 계층구조를 관리하기 위해서 일반적으로 뷰 컨트롤러를 사용합니다. 뷰 컨트롤러는 뷰의 디스플레이를 조정하고, 사용자 상호작용 뒤 기능을 수행하고, 한 화면에서 다른화면으로의 전환을 관리해 줍니다. 예로, 설정(settings)은 뷰어의 계층구조를 표시하기 위해서 네비게이션 컨트롤러를 사용합니다.

여기에 iOS의 뷰어와 뷰어컨트롤러가 어떻게 결합하여 UI를 보여주는지에 대한 예시가 있습니다.

image: ../Art/windowlayers_world_clock_2x.png

개발자들은 뷰와 뷰 컨트롤러의 관점에서 생각하지만, 사용자들은 iOS앱을 화면의 모음으로써 경험하곤 합니다. 이러한 관점으로부터 화면은 일반적으로 고유한 시각적 상태나 응용프로그램 내 모드에 해당됩니다.

 iOS Human Interface Guidelines 에서,   screen 단어는 많은 사용자들에게 이해된 것으로 사용됩니다. 개발자로써 당신은 다른글에서 screen에 관한 것을 읽을 수도 있는데, 그 용어는  외부 디스플레이 화면에 접근할 수 있는 UI screen 개체를 말하는 것입니다.


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요

*이 글은 개인적인 학습을 위한 글입니다. 자동번역기의 기계적인 번역과 디자인용어의 번역이 학습에 혼동을 주는 부분이 있어 서툰 영어실력임에도 불구하고, 나와 같은 고충을 겪고 있을 사람들에게 조금이나마 도움이 되었으면 하는 바람으로 작성하게 되었습니다. 수정사항은 감사히 받겠습니다. 

iOS를 위한 디자인

iOS 는 다음과 같은 테마를 담고 있습니다:

  • 존중. UI는 사람들이 콘텐츠를 이해하고 상호작용할 수 있도록 돕는 것이지, 겨루기위해 있는 것이 아닙니다.

  • 명확성.텍스트는 어느 사이즈에서도 읽을 수 있고, 아이콘은 명료하고 정확합니다. 또한 장식은 섬세하고 적절합니다. 명확성에 중점두어져 있는 기능은 디자인의 동기를 부여합니다. 

  • 깊이. 시각적인 계층구조와 현실감 있는 동작은 활력을 주고 사용자들에게 보다 쉬운 이해와 사용의 즐거움을 높여줍니다.

image: ../Art/weather_app_7_2x.png

당신이예전의 앱(App)을 리디자인 하는 것이든 새로운 것을 만드는 것이든, 이와 같은 방법으로 작업에 접근 할 것을 고려해주세요:

  • 첫째, 앱의 핵심기능과 UI를 살펴보고 그 둘의 관련성을 확인합니다.

  • 다음으로,UI 디자인과 사용자 경험을 알리기 위한 iOS 테마를 사용하세요. 불필요한 요소들이 없도록 주의깊게 디테일과 장식을 추가해주세요.

  • 마지막으로,사용자들이 가능한 한 많은 상황에서 앱을 즐길 수 있도록 다양한 장치와 모드에 적용할 수 있는 UI로 디자인해야 합니다.

이러한 과정을 통해서, 선례에 도전할 것을 준비하고, 가정에 의문을 제기하며, 콘텐츠와 기능에 맞추어진 초점이 모든 디자인을 결정하는 이유가 될 수 있도록 제작하세요.

컨텐츠에 따르세요

선명하고 아름다운 UI와 유동적인 모션이 iOS의 경험을 강조 하지만, 사용자의 컨텐츠가 그 중심에 있습니다.

여기에 당신의 디자인이 기능을 향상시키고, 사용자의 컨텐츠에 따르는 것을 확실하게 하는 몇가지 방법이 있습니다.

image: ../Art/weather_focus_2x.png

전체화면을 이용하라. 날씨는 이 방법의 좋은 예시입니다.위치의 현재 날씨에 대한 전체화면을 아름답게 활용한 묘사는 시간당 정보를 위한 여분의 공간에서 가장 중요한 정보를 즉시 전달합니다.

물리적이고 사실적인 것에 대한 시각적 지표를 재검토하라.베젤, 그라디언트, 그림자효과는 콘텐츠를 압도하거나 대립되는 요소로 이어지기도 합니다. 대신 콘텐츠에 초점을 맞추고 UI 가 지원하는 역할을 맡도록 합니다.

image: ../Art/restrain_visual_indicators_2x.png
image: ../Art/embrace_translucency_2x.png

반투명한 UI요소가 뒤의 콘텐츠를 암시하게 하라 . 컨트롤 센터와 같은 반투명한 요소들은 상황을 제공하고, 사용자들이 보다 많은 컨텐츠를 볼 수 있도록 도우며, 무상신호를 보냅니다. iOS에서 반투명한 요소들은 라이스페이퍼를 통해 보는 것과 같은 표현으로 컨트롤 센터 바로 뒤에 콘텐츠들만 흐리게 하고, 나머지 부분들은 흐리게 하지 않습니다.

명확성을 제공하라

명확성을 제공하는 것은 콘텐츠가 당신의 앱에서 가장 우선적이게 하는 또 다른 방법입니다. 가장 중요한 내용과 기능을 명확하고 상호작용하기 쉽도록 만드는 방법이 여기 있습니다.

image: ../Art/use_white_space_2x.png

여백을 많이 사용하라. 여백은 중요한 정보와 기능을 더 뚜렷하고 이해하기 쉽도록 만듭니다. 또한 평온하고 차분한 느낌을 주며, 앱이 더 효율적이고 중점 두어 보이게 합니다.

색상이 UI를 단순화하게 하라. 노트 안의 노란색과 같은 ㅡ 기본색은 중요한 상태를 강조하고 미묘하게 상호작용하고 있는 모습을 나타내줍니다. 또한 앱에 일관된 시각의 테마를 제공합니다. 내장되어있는 앱들은 어둡고 밝은 배경, 모든 색조와도 잘 맞는 깨끗하고 명료한 시스템 색상군을 사용합니다.  

image: ../Art/notes_color_2x.png
image: ../Art/mail_message_fonts_2x.png

시스템폰트를 사용함으로써 가독성을 보장하라. iOS 시스템폰트는 읽기 쉽고 어떠한 사이즈에서도 잘 보이도록 자동적으로 자간과 행간이 조정되어 있습니다. 당신이 시스템폰트를 사용하든 개인용 폰트를 사용하든, 사용자가 다른 글꼴크기를 선택했을 때 당신의 앱이 응답할 수 있도록 동적 유형을 채택해야 합니다.

경계가 없는 버튼을 수용하라. 기본적으로 모든 바의 버튼들은 경계가 없습니다. 콘텐츠 영역에서, 경계선이 없는 버튼은 문맥과 색상, 그리고 상호작용을 나타내기 위한 행동을 요구하는 타이틀을 사용합니다. 그리고 그것의 의미가 통했을 때, 콘텐츠 영역버튼은 얇은 테두리, 혹은 구별가능하도록 색상이 더해진 배경을 표시할 수 있습니다.

image: ../Art/contact_card_2x.png

소통에 깊이감을 사용하라

iOS 계층과 위치를 전달하고 사용자가 화면상의 개체들 사이에서 관계를 이해할 수 있도록 구별된 레이어들 안에서 콘텐츠를 보여줍니다.

image: ../Art/folder_2x.png

반투명의 배경을 사용하고, 그것이 홈 화면에 떠있는 것처럼 보이게 함으로써, 폴더는 그 콘텐츠를 홈화면의 나머지 앱으로부터 분리시킵니다.

미리알림은 다음과 같이 보여짐으로써 레이어 목록을 표시합니다. 사용자가 하나의 리스트를 작업할 때 나머지 리스트들은 화면 하단에 모입니다.

image: ../Art/layered-reminders_2x.png
image: ../Art/cal_year_2x.png

달력은 년, 월, 일을 보여줌으로써 이동했을 때 사용자가 계층구조와 깊이를 느낄 수 있도록 향상된 전환방법을 사용하였습니다. 여기에 표시된 스크롤 되는 연도를 보면서 사용자는 오늘의 날짜를 바로 볼 수 있고, 다른 캘린더 작업을 수행할 수 있습니다.

사용자가 달(month)을 선택했을 때, 년(year) 이 확대되고 달보기가 드러납니다. 오늘의 날짜는 강조되어있고 연도별로 보는 것은 돌아가기 버튼으로 보여집니다. 이렇게하여 사용자가 어디 있는지, 어디로부터 왔는지, 어떻게 뒤로 돌아가는지 알 수 있습니다.

image: ../Art/cal_month_2x.png
image: ../Art/cal_day_2x.png

날짜를 선택하였을 때도 유사한 전환이 나타납니다 : 달 별로 보기는 선택된 날짜의 시간별 보기가 보여지고 화면 상단으로 현재 주(week)를 밀면서 나누어진 상태로 보여집니다. 각각의 전환으로 캘린더는 년,월,일의 계층구조 관계를 강화시킵니다.


'UI Design Basics' 카테고리의 다른 글

Modal Contexts  (0) 2015.04.30
Starting and Stopping  (0) 2015.04.28
Adaptivity and Layout  (0) 2015.04.24
iOS App Anatomy  (0) 2015.04.23
Designing for iOS  (0) 2015.04.22
Posted by jyunipark

댓글을 달아 주세요