[iOS] UIKit UI 구조(Scene, UIView)

김민석·2024년 9월 1일

UIkit iOS

iOS

목록 보기

10/12

UIKit과 iOS에서 제일 기본적인 View 에 대해 정리한 포스팅

0. UI 구조

우선 UIKit에서 UI의 구조는 아래와 같습니다.

하나의 UIScreen이 존재
: 하드웨어 기반 디스플레이와 관련된 속성을 정의하는 객체입니다.
UIWindowScene이 존재
: 앱에서 하나 이상의 창을 관리하는 장면입니다.
UIWindow가 존재
: 앱의 사용자 인터페이스의 배경이자 뷰에 이벤트를 전달하는 객체입니다.
UIView가 존재
: 화면의 직사각형 영역에 대한 콘텐츠를 관리하는 객체입니다.

처음 프로젝트 UIKit의 View 구조

그럼 제일 크게 보이는 부분이
1. UIWindowScene
2. UIWindowView
3. UIView
인데 이 부분을 정리할 예정입니다.

1. Scenes

일단 UIWindowScene에 대해 알기 전에 Scenes에 대해 알아야합니다.

1-1. 공식 문서 설명

앱 UI의 여러 인스턴스를 동시에 관리하고, 리소스를 적절한 UI 인스턴스로 전달합니다.

UIKit은 객체를 사용하여 앱 UI의 각 인스턴스를 관리합니다.
Scene에는 UI의 한 인스턴스를 표시하기 위한 창과 뷰 컨트롤러가 포함됩니다.
각 장면에는 UIKit과 앱 간의 상호 작용을 조정하는 데 사용하는 해당 객체도 있습니다.
Scene은 서로 동시에 실행되어 동일한 메모리와 앱 프로세스 공간을 공유합니다.
결과적으로 단일 앱에는 여러 장면과 장면 대리자 객체가 동시에 활성화될 수 있습니다.
UIWindowScene UIWindowSceneDelegate

2. UIScene

앱의 사용자 인터페이스의 한 인스턴스를 나타내는 객체

@MainActor
class UIScene : UIResponder

init(
    session: UISceneSession,
    connectionOptions: UIScene.ConnectionOptions
)

2-1. 특징

우리가 스토리 보드를 통해 편집하는 대부분의 ViewController들은 각자 하나씩의 화면을 담당하고 있다.
화면의 콘텐츠를 표현하고 View를 관리한다. 이를 Scene이라고 하는데, 보통 하나의 Scene을 표현하는데에는 하나의 ViewController가 사용된다.

만약 두개의 Scene으로 이루어 졌다면, 두개의 ViewController가 필요한 것이다.

UIScene은 UIResponder의 subclass이며, 사용자의 interaction을 처리하는 역할을 한다.
모든 scene은 연관된 delegate 객체를 가지고 있으며, UISceneDelegate 프로토콜을 사용한다. 또한 observer를 등록해서 notification을 보낼 수도 있다. 사용자의 어떤 이벤트던지 간에, delegate 객체 혹은 observer를 이용할 수 있다.

2-2. UISceneSession

App의 Scene들 중 하나의 Scene에 대한 정보를 갖고 있는 객체
내부에 Scene이라는 프로퍼티가 존재

옵셔널 이유 → Scene이 session으로부터 connect/disconnct 될 수 있기 때문

2-3. 프로퍼티

// 현재 세션과 관련된 Scene
var scene: UIScene? { get }

// Scene의 내용이 맡은 역할
var role: UISceneSession.Role { get }

// Scene의 가능한 역할을 나타내는 상수
struct Role

3. UIWindowScene

3-1. 공식 문서 설명

UIScene의 서브 클래스로 App의 하나 이상의 Window 관리
직접 생성하면 안됨. 대신 configuration time에 원하는 UIWindowScene에 대해 명시하라고 함
- 방법: info.plist의 scene configuration details 부분에 원하는 UIWindowScene의 class 이름을 넣으면 됨

그림과 같이 하나의 UIWindowScene에는 여러개의 Window를 가질 수 있음

3-2. 프로퍼티

// 해당 장면과 관련된 창
var windows: [UIWindow] { get }

// 장면과 연관된 중요한 창
var keyWindow: UIWindow? { get }

// 장면의 내용을 표시하는 화면
var screen: UIScreen { get }

3-3. 특징

실제로 UIWindowScene은 windows: [UIWindow] 배열을 가지고 있다.

scene의 상태가 변화되면, scene 객체는 이의 delegate의 매소드를 호출하는데, 이때 사용되는 delegate가 UIWindowSceneDelegate이다.

3-4. UIWindowSceneDelegate

UISceneDelegate를 채택하는 Protocol

우리가 프로젝트를 생성한 후, SceneDelegate 코드를 보면 UIWindowSceneDelegate Protocol을 채택한 것을 볼 수 있다.

class SceneDelegate: UIResponder, UIWindowSceneDelegate

4. UIWindow

앱의 사용자 인터페이스의 배경이자 뷰에 이벤트를 전달하는 객체입니다.

으로 아래와 같이 확인할 수 있습니다.

4-1. UIWindow란?

윈도우는 디바이스의 스크린을 빈틈없이 채우기 위한 객체
항상 유저 인터페이스 표현 계층의 최상위에 위치
View의 일종이지만, 직접 콘텐츠를 가지고 있지는 않음!
콘텐츠를 가진 View를 내부에 배치하여 화면에 출력하는 역할!

4-2. 화면전환이 일어나면?

➡️ Window 내부에 배치된 View 콘텐츠만 변경될 뿐,
윈도우 객체 자체는 전환되지 않음

4-3. 어떻게 가지는가?

모든 애플리케이션은 최소한 하나 이상의 Window를 가지고 있음
앱을 종료하는 경우에만 사라지게 됨!

4-4. 하나 이상의 Window?

대부분의 모바일 디바이스의 디스플레이는 하나뿐임 ➡️ 그래서 윈도우는 하나라고 생각할 수 있음
그러나 만약 외부 디스플레이가 연결되는 경우에 하나의 애플리케이션이지만 두번째 디스플레이에 콘텐츠를 표현하기 위해 새로운 Window 객체를 생성! ➡️ 아이패드를 사용하는 경우도 마찬가지

공식문서 내용

앱의 콘텐츠를 표시하는 주 창을 제공합니다.

추가 콘텐츠를 표시하려면 필요에 따라 추가 창을 만듭니다.

대부분의 앱은 하나의 창만 필요로 하며, 이는 기기의 메인 화면에 앱의 콘텐츠를 표시합니다. 기기의 메인 화면에 추가 창을 만들 수 있지만, 추가 창은 일반적으로 연결된 디스플레이에 콘텐츠 표시에서 설명한 대로 외부 화면에 콘텐츠를 표시하는 데 사용 됩니다 .