[SwiftUI] SwiftUI 프로젝트 주요 파일 알아보기

 

오늘은 본격적으로 SwiftUI 기초부터 학습하며 기록해보자 👩🏻‍🍳

---

 

SwiftUI란?

기존에는 UI 구축할 때 플랫폼마다 다른 프레임워크를 사용했다. UIkit은 iOS, tvOS를, AppKit은 macOS를, WatchKit은 watchOS를 사용했다. 다양한 플랫폼을 개발하기 위해서는 여러 프레임워크를 공부하며 개발이 필요했다.

애플은 2019년 새로운 프레임워크인 SwiftUI를 공개했고, 이는 애플의 모든 플랫폼 앱을 하나의 프레임워크로 개발할 수 있게 되었다.

 

SwiftUI는 선언형 UI(Declarative UI) 방식의 코드 작성으로 배우기 쉽고, 읽기 쉽고, 이해하기 쉽다. 기존의 UIkit에 비해 간결하면서도 직관적이라는 점이 장점이다.

 

SwiftUI 프레임워크를 코드에 적용시키기 위해서는 아래의 키워드로 명시하면 된다.

import SwiftUI

 

 

---

프로젝트 생성하기 🛠️

1. Xcode를 실행한 후, Create New Project 클릭.

 

2. 개발하고자 하는 Application을 선택한다.

3. 프로젝트 이름, 인터페이스(SwiftUI), 언어(Swift) 선택.

4. 프로젝트 생성 완료!

---

프로젝트 파일 구조 📁

 

프로젝트 파일 구조가 정말 간단하다. 진짜 폴더 아래에 저 4개 파일이 끝이다. UIkit과 비교해보면 진짜 간단한 편이라고 볼 수 있다. 이제 이 파일들을 자세히 알아보자!!

---

1. 프로젝트명 + App.swift

import SwiftUI

@main
struct SampleProjectApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

 

@main 어노테이션

SwiftUI는 앱의 시작점을 나타내기 위해 @main을 적용한다. 이 어노테이션은 단 하나의 타입에만 적용할 수 있으며, 이 타입이 앱의 진입점이 된다.

 

: App 프로토콜

App 프로토콜은 앱의 생명주기를 관리한다. 이 프로토콜을 준수하는 타입은 앱이 시작되고 종료될 때 수행되어야 할 작업을 정의할 수 있다.

 

body 프로퍼티

모든 뷰에는 body라는 프로퍼티를 가져야 한다. 이 body는 뷰의 내용을 렌더링하는데 사용되는 뷰의 구조체를 반환한다.

 

Scene

Scene은 앱의 한 화면을 나타내는 개념이다. 사용자 인터페이스를 구성하는 요소로, 하나 이상의 뷰로 구성될 수 있다. 앱의 생명주기 이벤트를 처리하고, 사용자 인터페이스의 업데이트를 조정한다.

 

body는 뷰의 내용을 정의하고, Scene는 앱의 화면을 구성하는 역할을 본다고 할 수 있다.

 

구조체

WindowGroup

WindowGroup {
            ContentView()
        }

 

여러 윈도우를 그룹화하여 관리하는 구조체이다. iOS는 주로 하나의 윈도우를 사용하지만, iPadOS나 macOS에서는 여러 개의 윈도우를 동시에 사용할 수 있다. WindowGroup 내에서는 앱의 초기 뷰를 설정한다.

 

DocumentGroup

DocumentGroup(newDocument: YourDocument()) { file in
            ContentView(document: file.$document)
        }

 

여러 개의 문서를 그룹화하여 관리하는 구조체이다. 이 구조체를 사용해서 문서 기반 앱을 만들 때, 각 문서의 생명주기를 관리하고 사용자 인터페이스를 정의할 수 있다.

---

2. ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

 

 

ContentView.swift는 앱의 화면을 구성하는데 사용되는 뷰이다.

위에서 설명한 app.swift의 구조와 유사한 구조를 볼 수 있다.

 

: View 프로토콜

ContentView는 View 프로토콜을 준수하는 구조체이다. View는 화면에 나타나는 요소를 정의하고, 계층 구조를 만든다.

 

body 프로퍼티

위와 동일하다 ㅎㅎ..

 

UI 요소

body 안에는 Text, Image, Button 등과 같은 다양한 UI Component들을 통해 화면을 구성한다. UI 요소에 대한 자세한 학습은 이후에 정리한 후 링크 연동하기로!!

 

그리고 이 ContentView 파일을 열어보면 이렇게 Preview Content로 Simulator 없이도 Xcode에서 미리 화면을 볼 수 있는 Canvas 기능을 제공한다. 이게 진짜 편한 기능. UIkit을 했을 때는 빌드 무한 반복했었는데 이건 실시간 반영해주니까... 얼마나 좋게요!!

---

3. Assets.xcassets

Assets는 앱에서 사용하는 이미지나 아이콘, 색상 등의 리소스를 관리하는 곳이다. 이미지나 아이콘, 색상 등 프로젝트에서 사용되는 다양한 리소스를 관리하며 앱이 실행될 때 로드된다.

 

주로 사용하는 건 Image Sets, App Icons, Color Sets!

 

---

4. Info.plist

Info.plist는 프로젝트를 생성했을 때 파일 자체는 생성되지만 파일이 노출되지 않는다. 파일 내용이 변경되었을 때부터 노출이 된다.

 

이 파일은 주로 앱의 설정과 특성을 정의한다. 고유 식별자부터 버전과 빌드 번호, 앱 이름, 보안 설정, 권한 설정 등도 항목에 포함되어 있다. 추후에 Info.plist 관련 콘텐츠도 만들어보는걸로!

 

---

 

오늘의 코드 레시피👩🏻‍🍳 완료!🩷