완성된 SwiftUI 앱은 계층적 방식으로 조합된 여러 컴포넌트로 구성된다. 가장 기본적인 SwiftUI 프로젝트 생성을 시작하기 전에 먼저 SwiftUI 앱이 어떻게 구성되는지를 이해하는 것이 유용하다.
SwiftUI 앱 계층 구조
SwiftUI 앱의 구조를 살펴볼 때 일반적인 계층구조를 시각적으로 보는 것이 도움이 된다. 예를 들어 다음은 간단한 SwiftUI 앱의 계층구조다.
- 계속 진행하기 전에 '앱'이라는 용어와 앞의 그림에 설명된 'App' 요소의 차이점을 구별하는 것이 중요하다. 모바일 장치에 설치하고 실행하는 소프트웨어 응용 프로그램을 '앱'이라고 한다. App 요소는 'App'으로 지칭하겠다. App
App 객체는 SwiftUI 앱 구조 내 최상위 요소이며 앱의 실행중인 각 인스턴스의 시작 및 생명주기를 처리한다. 또한 App 요소는 애플리케이션의 사용자 인터페이스를 구성하는 다양한 Scene을 관리하는 역할을 한다. 앱에는 하나의 App 인스턴스만 포함된다.
Scene
각 SwiftUI 앱에는 하나 이상의 Scene이 포함된다. Scene은 앱 사용자 인터페이스의 섹션 또는 영역을 나타낸다. IOS 및 WatchOS에서 Scene은 일반적으로 전체 장치 화면을 차지하는 창 형태를 취한다. 반면 macOS 및 ipadOS에서 실행되는 SwiftUI 앱은 여러 Scene으로 구성될 가능성이 높다. 예를 들어, 서로 다른 각 Scene에는 표시할 콘텍스트에 해당하는 레이아웃이 포함될 수 있다.
SwiftUI에는 응용 프로그램을 설계할 때 사용할 수 있는 미리 빌드된 기본 Scene 타입이 포함되어 있으며, 그중 가장 일반적인 것은 WindowGroup 및 DocumentGroup이다. Scene을 그룹화하여 자신만의 사용자 지정 Scene을 만드는 것도 가능하다.
View
Views는 버튼, 레이블, 그리고 텍스트 필드와 같은 사용자 인터페이스의 시각적 요소를 구성하는 기본적인 빌딩 블록이다. 각 Scene에는 앱의 사용자 인터페이스 섹션을 구성하는 뷰의 계층구조가 포함된다. View는 텍스트 뷰 또는 버튼과 같은 개별 시각적 요소이거나 다른 View를 관리하는 컨테이너 형태를 취할 수 있다.
예를 들어, VStack 뷰는 수직 레이아웃에서 자식 뷰를 표시하도록 설계되었다.
SwiftUI와 함께 제공되는 뷰 외에도 SwiftUI 앱을 개발할 때 사용자 정의 뷰를 생성한다. 이러한 사용자 지정 뷰는 응용 프로그램의 사용자 인터페이스 요구사항을 충족하기 위해 해당 뷰의 모양 및 동작에 대한 사용자 지정과 함께 다른 뷰 그룹으로 구성된다.
- 예를 들어, 다음 그림은 Button과 TextView 조합을 포함하는 Vertical Stack으로 구성된 간단한 뷰 계층 구조를 포함하는 Scene을 보여준다.
요약
SwiftUI 앱은 계층적으로 구성된다. 계층 구조의 맨 위에는 앱의 시작 및 생명주기를 담당하는 App 인스턴스가 있다. 하나 이상의 자식 Scene 인스턴스에는 앱의 사용자 인터페이스를 구성하는 View 인스턴스의 계층이 포함되어 있다. 이러한 Scene은 WindowGroup과 같은 SwiftUI 기본 Scene 타입 중 하나에서 파생되거나 사용자 정의로 구축될 수 있다.
기본 SwiftUI 프로젝트 분석
Xcode에서 멀티플랫폼 앱 템플릿을 이요해 새로운 SwiftUI 프로젝트를 생성하면 Xcode는 최종 앱으로 구축될 프로젝트의 기본을 형성하기 위해 여러 파일과 폴더를 생성한다.
기본적인 Xcode 프로젝트 구조의 각 요소에 대해 간략하게 공부해보자.
앱이름.swift 파일
이곳에서는 App 객체에 대한 선언이 포함되어 있으며 다음과 같다.
import SwiftUI @main struct AppName: App { // App 구조체로 선언돼있군 var body: some Scene { // 불투명 반환 타입이다. WindowGroup { ContentView() } } } - 구현된 선언부는 ContentView.swift에 정의된 View를 포함하는 WindowGroup으로 구성된 Scene을 반환한다. 선언부에는 @main이 접두사로 붙는다. 이것은 기기에서 앱이 실행될 때 여기가 앱의 진입점임을 SwiftUI에 알려주는 역할을 한다.
ContentView.sift 파일
이것은 앱이 시작될 때 나타나는 첫 번째 화면의 내용을 포함하는 SwiftUI 뷰 파일이다. 이 파일 및 이와 유사한 다른 파일들은 SwiftUI에서 앱을 개발할 때 대부분의 작업이 수행되는 곳이다. 디폴트로 Image 뷰와 "Hello, World"라는 단어를 표시하는 Text뷰가 VStack 컨테이너 내에 포함돼 있다.
import SwiftUI struct ContentView: View { // ContentView 구조체는 View 프로토콜을 따른다. var body: some View { // body는 불투명 반환 타입 VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text("Hello, World!") } .padding() } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } Entitlements
entitlements 파일은 앱 내에서 특정 ios 기능에 대한 지원을 활성화하는 데 사용된다. 예를 들어, 앱에서 iCloud 저장소 또는 디바이스 마이크에 접근해야 하거나 시리를 통해 음성 제어를 통합하려는 경우 이 파일 내에서 이러한 권한을 먼저 활성화해야 한다.
Preview Content
프리뷰 에셋 폴더에는 개발 중에 앱을 미리 볼 때 필요하지만 완성된 앱에서는 필요하지 않는 자산 및 데이터가 포함되어 있다. 앱을 패키징할 때 Xcode는 불필요한 공간을 차지하지 않도록 이러한 자산들을 제거한다.
요약
Multiplatform App 템플릿을 사용해 Xcode에서 새 SwiftUI 프로젝트를 생성하면 Xcode는 앱이 작동하는 데 필요한 최소한의 파일 세트를 자동으로 생성한다. 이러한 모든 파일과 폴더는 리소스 에셋 추가, 초기화 및 초기화 해제 작업 수행, 앱의 사용자 인터페이스 및 로직 구축 측면에서 앱에 기능을 추가하도록 수정할 수 있다.