iOS - UIKit vs SwiftUI 에 대해서 (2)

UIkit에 대해서  →  2023.07.16 - [iOS] - UIKit vs SwiftUI 에 대해서 - (1)

 

SwiftUI 란?

사용자 인터페이스(UI) 프레임워크로, iOS, macOS, watchOS, tvOS 앱 개발에 사용되는 최신 UI 툴킷이다.

 

Swift 언어와 함께 사용되며, 선언적 구문을 활용하여 UI를 빠르고 간단하게 구축할 수 있다.

 

UIKit은 ViewController와 Storyboard를 중심으로 UI를 개발한다. 인터페이스 빌더를 사용해서 UI 요소를 시각적으로 배치하고 코드로 이를 조작한다. 

 

 

SwiftUI의 주요 특징과 기능 (예시 코드)

 

 

선언적 구문

SwiftUI는 선언적인 구문을 사용하여 UI를 설계한다.

코드로 UI 요소들을 설명하고 구성하는 대신, SwiftUI는 원하는 결과를 선언하는 방식으로 동작한다.

이로 인해 코드가 간결하고 읽기 쉽고 유지보수가 용이하다는 장점이 있다. 

 

import SwiftUI

struct MyView: View {
    // body 프로퍼티는 View를 반환하는 계산된 프로퍼티로, 뷰의 구조를 정의
    var body: some View {
        // VStack은 세로로 뷰를 배치하는 컨테이너
        VStack {
            Text("Hello, SwiftUI!")		//텍스트 표시
            Button("Tap Me!") {		//사용자의 탭을 처리하는 버튼
                print("Button tapped!")		//버튼을 탭했을 때 실행되는 클로저
            }
        }
    }
}

// 뷰 인스턴스 생성 및 미리 보기
import PlaygroundSupport
// Playground에서 MyView의 미리 보기를 표시합니다.
PlaygroundPage.current.setLiveView(MyView())

 

 

 

자동화된 레이아웃

SwiftUI는 UI 요소들의 레이아웃을 자동으로 처리한다.

뷰의 크기와 위치를 설정하는 데 필요한 제약 조건을 직접 작성할 필요 없이, 자동으로 최적의 레이아웃을 구성한다.

 

import SwiftUI

struct MyView: View {
    var body: some View {
        // HStack은 가로로 뷰를 배치하는 컨테이너
        HStack(spacing: 20) {
            Image("icon")	// 이미지 표시
                .resizable()
                .frame(width: 50, height: 50)
            // VStack은 세로로 뷰를 배치하는 컨테이너
            VStack {
                Text("Title")		// 텍스트 표시
                    .font(.headline) // 글자 크기 지정
                Text("Description")
                    .font(.subheadline) // 글자 크기 지정
            }
        }
    }
}

 

 

 

크로스 플랫폼 지원

iOS, macOS, watchOS, tvOS 와 같은 다양한 플랫폼에서 동일한 코드를 공유하여 앱을 개발할 수 있다. 

종류가 다양한 Apple 기기들에 대응하는 앱을 쉽게 만들 수 있다. 

 

import SwiftUI

struct MyView: View {
    var body: some View {
        // #if os() 조건문을 사용하여 플랫폼 별로 다른 뷰를 표시
        #if os(iOS)
        Text("iOS")
        #elseif os(macOS)
        Text("macOS")
        #elseif os(watchOS)
        Text("watchOS")
        #else
        Text("tvOS")
        #endif
    }
}

 

 

 

실시간 프리뷰

실시간으로 UI를 프리뷰하고 수정 사항을 즉시 확인할 수 있는 기능을 제공한다. 

코드를 수정할 때마다 UI 변경 사항을 실시간으로 확인해서 개발자들에게 생산성을 높여준다.

 

import SwiftUI

struct MyView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

#if DEBUG
import SwiftUI
struct MyView_Previews: PreviewProvider {
    static var previews: some View {
        MyView()	    // MyView의 미리 보기를 생성하여 미리 보기 창에 표시
    }
}
#endif

 

 

 

모듈화 및 재사용성

모듈화와 재사용성을 강조한다. UI 요소들을 커스텀 뷰로 정의하고 재사용할 수 있어서 앱의 구조를 간결하게 유지하고 유지보수를 용이하게 한다. 

 

import SwiftUI

struct CustomButton: View {
    var title: String // 버튼에 표시될 텍스트
    var action: () -> Void // 버튼이 탭되었을 때 실행될 클로저
    
    var body: some View {
        Button(action: action) {
            // 버튼 내부에 텍스트를 배치
            Text(title)
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(8)
        }
    }
}

 

 

 

Dark Mode 지원

Dark Mode를 자동으로 지원하여 앱이 라이트 모드와 다크 모드 사이에서 자연스럽게 전환해준다.

 

import UIKit

class FirstViewController: UIViewController {
    // FirstViewController의 코드
}

class SecondViewController: UIViewController {
    // SecondViewController의 코드
}

// UITabBarController를 사용하여 탭 화면 전환하기
let tabBarController = UITabBarController()
let firstVC = FirstViewController()
let secondVC = SecondViewController()
tabBarController.viewControllers = [firstVC, secondVC]

 

 

 

애니메이션과 상태 관리 

애니메이션을 적용하거나 상태를 관리하기 위해 별도의 라이브러리를 사용할 필요가 없다.

 

import SwiftUI

struct MyView: View {
    // 상태 변수 isAnimating을 선언
    @State private var isAnimating = false
    
    var body: some View {
        Button("Animate") {
            // 버튼을 탭했을 때, 애니메이션을 적용
            withAnimation {
                // isAnimating을 토글하여 애니메이션 효과를 적용
                self.isAnimating.toggle()
            }
        }
        // 버튼의 크기를 조절
        .scaleEffect(isAnimating ? 1.5 : 1.0)
    }
}

 

 

 

SwiftUI의 장점

기존의 UI 프레임워크에 비해 훨씬 간편하고 뛰어난 기능을 제공하다. 이로 인해 iOS 앱 개발을 더욱 쉽고 효율적으로 만들어 준다.

특히 신속한 개발과 다양한 플랫폼 지원으로 인해 SwiftUI는 많은 개발자들에게 인기가 있고, 앞으로 더욱 발전할 것으로 기대된다.