SwiftUI Introduction: Building Modern iOS and Cross-Platform Apps

모바일 앱 개발은 끊임없이 진화하고 있으며, 사용자 경험을 극대화하기 위한 UI 프레임워크의 중요성은 더욱 커지고 있습니다. Apple이 2019년 WWDC에서 선보인 SwiftUI는 선언형 UI 패러다임을 기반으로 iOS, macOS, watchOS, tvOS 등 Apple 생태계 전반의 앱 개발 방식을 혁신하고 있습니다. 이 글에서는 SwiftUI의 기본 개념부터 실제 코드 예제를 통해 강력한 UI를 구축하는 방법, 그리고 React Native나 Flutter와 같은 크로스 플랫폼 프레임워크와 비교하며 SwiftUI가 모바일 개발 생태계에서 가지는 의미를 심층적으로 다루고자 합니다.

SwiftUI란 무엇인가요? 선언형 UI의 시대

SwiftUI는 Apple이 제공하는 현대적인 UI 프레임워크로, Swift 언어를 사용하여 모든 Apple 플랫폼에서 앱을 개발할 수 있게 해줍니다. 기존의 UIKit이 명령형(Imperative) 방식으로 UI를 구성했던 것과 달리, SwiftUI는 선언형(Declarative) 패러다임을 채택하여 개발자가 '어떻게' UI를 변경할지가 아니라 '무엇을' 보여줄지를 코드로 기술합니다. 이는 React Native나 Flutter와 같은 인기 있는 크로스 플랫폼 프레임워크들이 이미 채택하여 개발자들에게 익숙한 방식이기도 합니다.

선언형 UI는 앱의 상태(State)에 따라 UI가 자동으로 업데이트되므로, 개발자는 복잡한 UI 업데이트 로직을 직접 관리할 필요가 없어 코드의 가독성과 유지보수성을 크게 향상시킵니다. SwiftUI는 Live Previews 기능을 제공하여 코드 변경 사항을 실시간으로 확인할 수 있게 함으로써 개발 생산성을 비약적으로 높여줍니다. 또한, Swift 언어의 강력한 타입 시스템과 현대적인 문법을 활용하여 보다 안전하고 직관적인 코드 작성을 가능하게 합니다.

SwiftUI의 핵심 개념 이해하기

SwiftUI를 효과적으로 사용하기 위해서는 몇 가지 핵심 개념을 이해해야 합니다. 이러한 개념들은 SwiftUI가 데이터를 중심으로 UI를 구성하고 업데이트하는 방식을 이해하는 데 필수적입니다.

• View: SwiftUI의 모든 UI 요소는 View 프로토콜을 준수합니다. Text, Image, Button과 같은 기본 요소부터 VStack, HStack과 같은 레이아웃 컨테이너까지 모든 것이 View입니다. View는 앱의 상태에 따라 자동으로 다시 그려집니다.

• State: 앱의 데이터를 나타내며, 이 데이터가 변경되면 해당 데이터를 사용하는 View가 자동으로 업데이트됩니다. @State 프로퍼티 래퍼를 사용하여 View 내에서 관리되는 데이터를 선언합니다. 이는 View의 생명주기와 함께 존재하며, View가 사라지면 함께 소멸합니다.

• Binding: @State로 선언된 데이터를 다른 View와 공유할 때 사용합니다. @Binding은 양방향 연결을 제공하여 자식 View에서 부모 View의 데이터를 변경할 수 있게 합니다. 즉, 부모 View의 @State 변수를 자식 View에서 읽고 쓸 수 있도록 연결해주는 역할을 합니다.

• ObservableObject & StateObject / ObservedObject: 복잡한 데이터 모델이나 여러 View에서 공유해야 하는 데이터를 관리할 때 사용합니다. ObservableObject 프로토콜을 채택한 클래스를 만들고, @Published 프로퍼티 래퍼를 사용하여 변경 사항을 알립니다.
  • @StateObject: View의 생명주기 동안 객체를 생성하고 유지합니다. View가 재생성되어도 객체 인스턴스는 유지됩니다. 주로 View의 소유 객체에 사용됩니다.
  • @ObservedObject: 외부에서 생성된 객체를 주입받아 관찰합니다. View가 재생성되면 객체도 다시 주입받을 수 있습니다. 주로 다른 View나 환경에서 넘어온 객체에 사용됩니다.

• EnvironmentObject: 앱 전반에 걸쳐 공유되어야 하는 데이터(예: 로그인 정보, 테마 설정)를 주입할 때 사용합니다. 앱의 환경에 데이터를 추가하면, 해당 환경 내의 모든 View에서 손쉽게 접근할 수 있으며, 명시적으로 View 계층 구조를 따라 전달할 필요가 없습니다.

SwiftUI 기본 프로젝트 생성 및 구조

Xcode를 통해 SwiftUI 프로젝트를 생성하는 것은 매우 간단합니다. 다음 단계를 따라 새로운 SwiftUI 앱을 시작할 수 있습니다.

1. Xcode 실행: Xcode를 엽니다.
2. 새 프로젝트 생성: 시작 화면에서 "Create a new Xcode project"를 선택하거나, 메뉴에서 File > New > Project...를 선택합니다.
3. 템플릿 선택: "iOS" 탭에서 "App" 템플릿을 선택하고 "Next"를 클릭합니다.
4. 프로젝트 옵션 설정:
   • Product Name: 프로젝트 이름을 입력합니다 (예: MySwiftUIApp).
   • Interface: 반드시 SwiftUI를 선택합니다.
   • Language: Swift를 선택합니다.
   • Team: 개발자 계정이 있다면 선택합니다.
5. 저장: 프로젝트를 저장할 위치를 선택하고 "Create"를 클릭합니다.

새로 생성된 프로젝트의 주요 파일은 다음과 같습니다.

• MySwiftUIAppApp.swift: 앱의 진입점 역할을 하는 파일입니다. @main 어트리뷰트가 붙어 있으며, App 프로토콜을 준수하는 구조체를 포함합니다. 이 구조체의 body 프로퍼티에서 WindowGroup을 통해 앱의 메인 View를 지정합니다. WindowGroup은 앱의 윈도우를 나타내며, 그 안에 들어갈 초기 View를 설정합니다.

    import SwiftUI

    @main
    struct MySwiftUIAppApp: App {
        var body: some Scene {
            WindowGroup {
                ContentView() // 앱이 시작될 때 표시될 첫 번째 View
            }
        }
    }

• ContentView.swift: 앱의 초기 UI를 정의하는 파일입니다. View 프로토콜을 준수하는 구조체를 포함하며, body 프로퍼티 내에서 실제 UI 계층을 구성합니다. Xcode의 Canvas 기능을 통해 이 파일의 UI를 실시간으로 미리 볼 수 있으며, 이는 개발 생산성을 크게 향상시키는 요소입니다.

    import SwiftUI

    struct ContentView: View {
        var body: some View {
            VStack { // 수직으로 View들을 배치하는 컨테이너
                Image(systemName: "globe") // SF Symbols에서 제공하는 아이콘
                    .imageScale(.large)
                    .foregroundStyle(.tint) // 시스템 기본 색상 사용
                Text("Hello, SwiftUI!") // 텍스트 View
            }
            .padding() // View 주변에 여백 추가
        }
    }

    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }

위 코드는 MySwiftUIAppApp.swift에서 ContentView를 앱의 시작 View로 설정하고, ContentView.swift에서 기본적인 텍스트와 이미지를 표시하는 UI를 정의하는 예시입니다. PreviewProvider는 Xcode Canvas에서 View를 미리 볼 수 있도록 돕는 역할을 합니다.

간단한 UI 컴포넌트와 레이아웃

SwiftUI는 다양한 빌트인 View와 강력한 레이아웃 컨테이너를 제공하여 유연하고 아름다운 UI를 쉽게 구축할 수 있습니다.

기본 컴포넌트

• Text: 텍스트를 표시합니다. 폰트, 색상, 정렬 등 다양한 수식어(Modifier)를 적용할 수 있습니다.
• Image: 이미지를 표시합니다. UIImage 또는 SF Symbols를 사용할 수 있습니다.
• Button: 탭 가능한 버튼을 만듭니다. action 클로저에 버튼이 눌렸을 때 실행될 코드를 정의합니다.
• TextField: 사용자 입력을 받습니다.
• Toggle: 스위치 형태의 UI를 제공합니다.
• Slider: 슬라이더를 통해 값을 선택할 수 있게 합니다.

struct BasicComponentsView: View {
    @State private var userName: String = ""
    @State private var isToggleOn: Bool = false

    var body: some View {
        VStack(spacing: 20) { // View들 사이에 20포인트 간격
            Text("Welcome to SwiftUI!")
                .font(.title) // 제목 스타일 폰트
                .fontWeight(.bold) // 볼드체
                .foregroundColor(.blue) // 텍스트 색상 파란색

            Image(systemName: "apple.logo") // SF Symbols 아이콘
                .resizable() // 크기 조절 가능하게 설정
                .scaledToFit() // 비율 유지하며 View에 맞게 조절
                .frame(width: 100, height: 100) // 프레임 크기 설정
                .foregroundColor(.red)

            Button("Tap Me!") { // 버튼 텍스트와 액션 정의
                print("Button tapped!")
            }
            .font(.headline)
            .padding()
            .background(Color.green) // 배경색 초록색
            .foregroundColor(.white) // 전경색 흰색
            .cornerRadius(10) // 모서리 둥글게

            TextField("Enter your name", text: $userName) // 사용자 입력 필드
                .textFieldStyle(.roundedBorder) // 둥근 테두리 스타일
                .padding(.horizontal)

            Toggle(isOn: $isToggleOn) { // 토글 스위치
                Text("Enable Feature")
            }
            .padding(.horizontal)
        }
        .padding()
    }
}

레이아웃 컨테이너

• VStack: 자식 View들을 수직으로 정렬합니다. alignment와 spacing을 조절할 수 있습니다.
• HStack: 자식 View들을 수평으로 정렬합니다. alignment와 spacing을 조절할 수 있습니다.
• ZStack: 자식 View들을 깊이(Z-axis) 방향으로 겹쳐서 정렬합니다. (예: 배경 위에 텍스트)
• List: 스크롤 가능한 행(Row) 기반의 UI를 만듭니다. UIKit의 UITableView와 유사합니다.
• ScrollView: 내용이 View의 경계를 넘어설 때 스크롤 기능을 제공합니다. 수직 또는 수평 스크롤을 지정할 수 있습니다.

struct LayoutExampleView: View {
    var body: some View {
        VStack {
            Text("Header")
                .font(.largeTitle)

            HStack { // 수평으로 두 개의 텍스트 View 배치
                Text("Left")
                    .frame(maxWidth: .infinity) // 가로 공간 최대한 차지
                    .background(Color.yellow)
                Text("Right")
                    .frame(maxWidth: .infinity)
                    .background(Color.orange)
            }
            .frame(