스위프트로 SwiftUI 방식, 아이폰 앱 개발, 코어 그래픽으로 꽃 모양 그리기

최근 몇 년간 애플의 SwiftUI 프레임워크는 개발자들에게 많은 가능성을 열어주었습니다. SwiftUI를 사용하면 사용자 인터페이스를 선언적으로 만들고, React와 유사한 방식으로 생산적인 앱 개발이 가능합니다. 이 글에서는 SwiftUI를 사용하여 간단한 아이폰 앱을 개발하고 Core Graphics를 사용하여 꽃 모양을 그리는 방법을 알아보겠습니다.

1. SwiftUI란 무엇인가?

SwiftUI는 애플이 도입한 최신 UI 프레임워크로, iOS, macOS, watchOS 및 tvOS 앱을 만드는 데 사용됩니다. SwiftUI의 가장 큰 장점은 선언적인 문법과 함께 상태 기반의 UI 업데이트를 지원하는 것입니다. 즉, 뷰의 상태가 변경될 때 해당 뷰가 자동으로 업데이트됩니다.

1.1 SwiftUI의 주요 개념

SwiftUI는 몇 가지 핵심 개념을 기반으로 작동합니다:

뷰(View): 사용자 인터페이스의 기본 구성 요소입니다. 뷰는 텍스트, 이미지 및 그리기 요소를 포함할 수 있습니다.
모델(Model): 앱의 데이터와 비즈니스 로직을 담당합니다. SwiftUI와 Combine 프레임워크를 함께 사용하여 반응형 프로그래밍을 구현할 수 있습니다.
상태(State): SwiftUI에서 뷰의 상태를 관리하는 방법입니다. @State, @Binding 및 @ObservedObject와 같은 속성을 사용합니다.

2. 아이폰 앱 개발 환경 설정

SwiftUI 기반의 아이폰 앱을 개발하기 위해서는 Xcode가 필수적입니다. 최근 버전의 Xcode를 설치해야 하며, SwiftUI 템플릿을 사용하여 새 프로젝트를 생성할 수 있습니다.

2.1 Xcode 설치 및 새 프로젝트 생성

Xcode를 Mac App Store에서 다운로드하여 설치합니다.
Xcode를 실행하고 “Create a new Xcode project”를 선택합니다.
템플릿 선택에서 “App”을 선택한 다음 “Next”를 클릭합니다.
프로젝트 이름, 조직 이름 및 버전을 입력합니다. 인터페이스 선택에서 “SwiftUI”를 선택합니다.
“Next”를 클릭한 후 프로젝트를 저장할 위치를 지정하고 “Create”를 클릭합니다.

3. SwiftUI로 기본 앱 UI 만들기

이제 기본적인 SwiftUI 앱의 UI를 만들어 보겠습니다. 카운터 앱을 예시로 들어 UI를 구성해보겠습니다.

import SwiftUI

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("현재 카운트: \(count)")
                .font(.largeTitle)
                .padding()
            Button(action: {
                count += 1
            }) {
                Text("카운트 증가")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

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

이 코드는 카운터 앱을 구현합니다. 버튼을 클릭하면 현재 카운트가 증가하는 구조입니다.

4. Core Graphics로 꽃 모양 그리기

이제 Core Graphics를 사용하여 꽃 모양을 그리는 방법을 살펴보겠습니다. Core Graphics는 iOS에서 2D 그래픽을 렌더링하는 데 사용되는 강력한 API입니다.

4.1 Core Graphics 사용하기

SwiftUI에서도 Core Graphics를 사용할 수 있습니다. Custom Shape을 만들어 꽃 모양을 그릴 수 있습니다.

import SwiftUI

struct FlowerShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let center = CGPoint(x: rect.midX, y: rect.midY)
        let petalWidth: CGFloat = 30
        let petalHeight: CGFloat = 70

        for i in 0..<8 {
            let angle = CGFloat(i) * .pi / 4 // 45도 간격
            let xOffset = cos(angle) * petalWidth
            let yOffset = sin(angle) * petalHeight
            let petalCenter = CGPoint(x: center.x + xOffset, y: center.y + yOffset)

            path.addEllipse(in: CGRect(x: petalCenter.x - petalWidth / 2, y: petalCenter.y - petalHeight / 2, width: petalWidth, height: petalHeight))
        }

        return path
    }
}

struct ContentView: View {
    var body: some View {
        FlowerShape()
            .fill(Color.pink)
            .frame(width: 200, height: 200)
            .padding()
    }
}

위의 코드는 FlowerShape이라는 커스텀 모양을 정의합니다. 꽃의 꽃잎을 생성하기 위해 반복문을 사용하여 8개의 타원형을 그립니다. 이 꽃 모양을 사용할 수 있는 ContentView를 구현하였습니다.

5. SwiftUI와 Core Graphics 통합

이제 엔드 투 엔드(End-to-End) 통합을 통해 앱을 완성해보겠습니다. 사용자가 버튼을 클릭하면 꽃의 색상이 변경되는 기능을 추가해 보겠습니다.

import SwiftUI

struct ContentView: View {
    @State private var flowerColor: Color = .pink

    var body: some View {
        VStack {
            FlowerShape()
                .fill(flowerColor)
                .frame(width: 200, height: 200)
                .padding()
            
            Button(action: {
                flowerColor = flowerColor == .pink ? .yellow : .pink
            }) {
                Text("꽃 색상 변경")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

이 코드는 꽃 모양을 그리고, 버튼을 클릭할 때마다 꽃의 색상이 변경되는 기능을 구현하였습니다.

결론

이 강좌에서는 SwiftUI와 Core Graphics를 활용하여 간단한 아이폰 앱을 개발하는 방법을 익혔습니다. SwiftUI의 선언적인 문법으로 UI를 쉽게 구성하고, Core Graphics를 통해 커스텀 도형을 만들어 시각적으로 매력적인 결과물을 얻을 수 있었습니다. 더 나아가, 이러한 기술들을 활용하여 복잡한 앱을 개발하는 데 필요한 기초 지식을 쌓을 수 있었습니다.

이 강좌를 통해 배운 내용을 바탕으로 더 다양한 프로젝트를 시도해보기를 권장합니다. SwiftUI와 Core Graphics는 강력한 도구이므로, 다양한 예제와 실습을 통해 더 많은 지식을 쌓을 수 있습니다. 앞으로도 이 두 기술을 활용한 다양한 개발 사례를 더 많이 만나볼 수 있기를 기대합니다.