SwiftUI에서 외부 라이브러리로 BottomSheet 구현하기

SwiftUI는 애플의 최신 UI 프레임워크로, 직관적이고 간결한 코드를 통해 앱 인터페이스를 제작할 수 있습니다. 그러나 SwiftUI 자체로는 복잡한 UI 요소들을 구현하기 힘든 경우가 많습니다. 이 때 외부 라이브러리를 활용하면 작업을 훨씬 수월하게 할 수 있습니다. 이 글에서는 쉽게 사용할 수 있는 라이브러리를 통해 SwiftUI에서 BottomSheet를 구현하는 방법을 자세히 다룹니다.

외부 라이브러리 선택

먼저, BottomSheet를 구현하기 위한 적합한 외부 라이브러리를 선택해야 합니다. BottomSheet 라이브러리에는 여러 가지가 있지만, 이번 예제에서는 PartialSheet이라는 SwiftUI용 라이브러리를 사용하겠습니다. PartialSheet는 간단하고 사용하기 쉬우며, SwiftUI 프로젝트에 쉽게 통합할 수 있습니다.

프로젝트에 라이브러리 추가하기

프로젝트에 PartialSheet 라이브러리를 추가하려면, Swift 패키지 매니저(Swift Package Manager)를 사용하면 됩니다. Xcode를 열고, 다음 단계를 따라 진행하세요:

1. Xcode 상단 메뉴에서 File > Swift Packages > Add Package Dependency를 선택합니다.
2. https://github.com/AndreaMiotto/PartialSheet URL을 입력하고 Next를 클릭합니다.
3. 사용할 버전을 선택한 후 Finish를 클릭합니다.

이제 PartialSheet 라이브러리가 프로젝트에 추가되었습니다.

BottomSheet 구현하기

이제 PartialSheet 라이브러리를 사용하여 SwiftUI 앱에 BottomSheet를 추가해보겠습니다. 다음 예제 코드를 통해 쉽게 이해할 수 있습니다.

1. PartialSheet 매니저 설정하기

우선, @StateObject로 PartialSheet 매니저를 생성해야 합니다. 이 매니저는 BottomSheet의 상태 관리를 담당합니다. ContentView에 다음 코드를 추가합니다.

swift
import SwiftUI
import PartialSheet

struct ContentView: View {
    @StateObject var partialSheetManager = PartialSheetManager()

    var body: some View {
        ZStack {
            // 기존 View
            Text("BottomSheet 예제")
                .padding()
            // PartialSheet View 추가
                .partialSheet(isPresented: $showBottomSheet) {
                    Text("이것은 BottomSheet입니다.")
                        .padding()
                }
        }
        .environmentObject(partialSheetManager)
    }

    @State private var showBottomSheet = false
}

2. BottomSheet에서 보여줄 컨텐츠 작성하기

BottomSheet에서 보여줄 내용을 작성해야 합니다. 예를 들어, Text를 보여주려면 partialSheet(isPresented:) 클로저 내부에 추가할 수 있습니다.

swift
.partialSheet(isPresented: $showBottomSheet) {
    VStack {
        Text("이것은 BottomSheet의 내용입니다.")
            .padding()
        Button(action: {
            showBottomSheet = false
        }) {
            Text("닫기")
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
    }
}

3. BottomSheet 트리거 만들기

BottomSheet를 트리거할 버튼이나 다른 UI 요소도 필요합니다. 이를 위해 Button을 추가해보겠습니다.

swift
var body: some View {
    ZStack {
        // 기존 View
        VStack {
            Text("BottomSheet 예제")
                .padding()
            Button(action: {
                showBottomSheet = true
            }) {
                Text("BottomSheet 열기")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        // PartialSheet View 추가
        .partialSheet(isPresented: $showBottomSheet) {
            Text("이것은 BottomSheet입니다.")
                .padding()
        }
    }
    .environmentObject(partialSheetManager)
}

결론

이번 글에서는 SwiftUI 프로젝트에 외부 라이브러리인 PartialSheet를 추가하여 BottomSheet를 구현하는 방법을 알아보았습니다. 기본적인 설정부터 실질적인 구현까지 단계별로 설명하였으니, 이를 통해 여러분의 SwiftUI 어플리케이션에서 BottomSheet를 쉽게 적용할 수 있기를 바랍니다. 이외에도 다양한 UI 요소를 구현할 수 있는 외부 라이브러리들이 많이 있으니, 필요에 따라 적절히 활용해 보세요.