iOS앱의 구조를 뜯어 보자

iOS의 UI에 관하여

Apple의 공식 Human Interface Guidelines를 비롯한 디자인 시스템은 아래 블로그 링크로 들어가시면 보실 수 있어요.

디자인 시스템 자료 정리한 내용

https://blog.naver.com/jess0884/222003982618

iOS의 UI component는 UI View Class를 상속합니다. 그러므로 일종의 View로 볼 수 있죠.

 

Apple Developer > Human Interface Guidelines

 

iOS의 UI Component는 크게 세가지로(Bars, Views, Controls) 분류됩니다. iOS의 UIkit는 UI Component를 정의할 뿐만 아니라 사용자의 제스처를 인식하거나 드로잉, 접근성, 프린트 지원 등의 기능을 담당하는 객체를 정의하기도 합니다.

View Controller는 View를 배치해서 보여주고, 사용자의 상호작용에 반응하는 기능을 구현하거나 한 화면에서 다른 화면으로 전환하는 효과를 관리합니다.

 

 

View Controller는 하위에 있는 콘텐츠를 관리하고, 보여주거나 숨기는 등의 구성을 조정하는 역할을 합니다. 그래서 View Controller는 내부적으로 View를 포함하고 있으며, View 에 대한 관리를 주로 하죠. 또한 View Controller는 화면 전환이 발생할 때 다른 View Controller와 서로 통신하고 조정하는 일을 수행하기도 합니다.

 

App interface와 구성 요소

그림 왼쪽의 객체들이 연결되어 App interface를 구성합니다.

 

View Controller가 내부적으로 콘텐츠를 관리하기 위해 View를 포함하고, 조정하며 외부적으로는 다른 View Controller와 연결되고 앱의 데이터를 화면으로 연결해주는 역할까지 하고 있기 때문에, 객체 간의 연결 관계까지 한꺼번에 이해하는 것은 무척 힘든 일입니다. 그래서 그 대신, interface builder를 사용하여 storyboard라는 형식의 파일을 만들게 됩니다. storyboard는 앱에서 연결 관계를 더 쉽게 눈으로 직접 확인할 수 있도록 해주며, 실행 시 앱을 초기화하기 위해 필요한 여러 가지 노력을 매우 간단하게 줄여 줍니다.

 

---

 

화면을 구성하는 데는 세 가지 주요 객체가 사용됩니다.

 

1. UI Screen : 기기에 연결되는 물리적인 화면을 정의하는 객체
2. UI Window : 화면 그리기 지원 도구를 제공하는 객체
3. UI View : 그리기를 수행할 객체 세트


Window에 첨부된 UI View 객체는 이것을 기본으로 하는 많은 파생 요소들을 가지는 객체로서, 우리가 흔히 접하는 화면 구성 요소 대부분이 이에 해당합니다. 수많은 UI View 객체가 모인 Window는 이들을 화면으로 구성하여 Screen 객체에 보내고, Screen 객체는 이를 물리적인 기기에 표시합니다. 이 객체들은 모두 UIKit Framework에 정의된 클래스로서, 이 객체들과 연관된 주요 클래스들이 UIKit Framework 내에서 어떻게 정의되어 있는 지는 아래 그림을 통해 확인 할 수 있어요!

 

UIKit Framework와 화면 구성요소의 관계

 

 

유심히 보셨다면 위 그림에 ViewController가 빠져있다는 걸 아실 수 있죠? 사실 View Controller는 화면을 그려내는 데에 반드시 필요한 요소는 아닙니다. App architecture에서 MVC(Model-View-Controller)패턴을 도입하면서 생겨나게 된 단순한 컨트롤러 객체라고 볼 수 있죠. 하지만 iOS에서 ViewController에 기대하는 특별한 역할이 있는데, 바로 View와 Resource를 관리하는 역할입니다. 모든 View Controller는 이 역할을 해야 하고, 각 역할에 대한 내용은 모두 UIViewController 클래스에 정의되어 있습니다. 따라서 모든 View Controller는 UIViewController를 상속받아야 합니다.

 

️ UIKit Framework에서 화면 구성요소의 관계 속성

위 그림은 App interface를 구성하는 객체들에 MVC패턴에 따라 컨트롤러의 역할을 보강한 Architecture를 보여줍니다. 그림에서 보듯이, 화면을 구성할 때 Window에 View 객체를 바로 할당해서는 안 됩니다. 대신 Window에 View Controller를 할당해서 View Controller가 자동으로 자신에게 첨부된 View들을 화면에 추가하도록 해야 합니다.

이번 편에는 iOS앱을 만들기 위해 반드시 알아야 할 기본 구조와 개념에 대해 가볍게 살펴보았습니다.

읽어주셔서 감사합니다 

 

<출처>
1.꼼꼼한 재은 씨의 Swift: 기본편, 이재은 지음, Rubypaper
2.모바일 UI/UX 디자인 실무, 이영주 지음, 한빛아카데미
3.사용자 경험을 창조하는 UX/UI 디자인, 이광훈 지음, 프리렉
4.MVC 디자인 패턴, 생활코딩 (https://opentutorials.org/course/697/3828)