[swift] Firebase와 SwiftUI를 통한 멀티플랫폼 앱 개발하기

24 Nov 2023

swift

Firebase는 Google에서 제공하는 개발 플랫폼으로, 실시간 데이터베이스, 클라우드 스토리지, 인증, 푸시 알림 등 다양한 기능을 제공합니다. SwiftUI는 Apple에서 iOS, macOS, watchOS 및 tvOS용 인터페이스를 구축하기 위한 새로운 UI 프레임워크입니다.

Firebase와 SwiftUI를 결합하여 멀티플랫폼 앱을 개발하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, Xcode에서 새로운 프로젝트를 생성하고 SwiftUI로 구성된 기본 뷰를 생성합니다. 그리고 Firebase 콘솔에서 프로젝트를 생성하고 iOS 앱을 추가합니다. Firebase SDK 설정 파일을 다운로드하고 Xcode 프로젝트에 추가합니다.

2. Firebase 인증 설정

Firebase 인증을 사용하여 사용자의 이메일 및 비밀번호를 사용하여 로그인, 회원가입 기능을 구현할 수 있습니다. Firebase 콘솔에서 인증을 활성화하고 필요한 인증 방법(이메일/비밀번호, 구글, 페이스북 등)을 설정합니다.

SwiftUI의 View에서는 @State 데코레이터를 사용하여 사용자 이메일 및 비밀번호를 추적하고, 이를 Firebase 함수에 전달하여 회원가입 및 로그인 기능을 구현할 수 있습니다.

import SwiftUI
import Firebase

struct ContentView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    
    var body: some View {
        VStack {
            TextField("Email", text: $email)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            SecureField("Password", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Button(action: {
                Auth.auth().createUser(withEmail: email, password: password) { authResult, error in
                    // 회원가입 성공 또는 실패 처리
                }
            }) {
                Text("회원가입")
            }
            Button(action: {
                Auth.auth().signIn(withEmail: email, password: password) { authResult, error in
                    // 로그인 성공 또는 실패 처리
                }
            }) {
                Text("로그인")
            }
        }
        .padding()
    }
}

3. 실시간 데이터베이스

Firebase의 실시간 데이터베이스는 실시간으로 동기화되는 JSON 트리 형식의 데이터 저장소입니다. SwiftUI에서도 실시간 데이터베이스를 사용하여 데이터 변경 사항을 실시간으로 업데이트할 수 있습니다.

Firebase 콘솔에서 실시간 데이터베이스를 활성화하고 적절한 규칙을 설정한 후, SwiftUI에서 @ObservedObject 데코레이터를 사용하여 데이터베이스 참조를 추적할 수 있습니다.

import SwiftUI
import FirebaseDatabase

class ViewModel: ObservableObject {
    @Published var messages: [String] = []

    private var ref = Database.database().reference()
    private var handler: UInt?
    
    init() {
        handler = ref.child("messages").observe(.childAdded) { [weak self] snapshot in
            if let message = snapshot.value as? String {
                self?.messages.append(message)
            }
        }
    }
}

struct ContentView: View {
    @ObservedObject private var viewModel = ViewModel()
    @State private var message: String = ""
    
    var body: some View {
        VStack {
            List(viewModel.messages, id: \.self) { message in
                Text(message)
            }
            TextField("메시지 입력", text: $message)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Button(action: {
                viewModel.send(message)
                message = ""
            }) {
                Text("전송")
            }
        }
        .padding()
    }
}

4. 클라우드 스토리지

Firebase의 클라우드 스토리지를 사용하여 앱에서 이미지, 동영상 등의 파일을 저장하고 관리할 수 있습니다. SwiftUI에서도 Firebase 클라우드 스토리지를 사용하여 이미지를 업로드하고 다운로드할 수 있습니다.

Firebase 콘솔에서 클라우드 스토리지를 활성화하고 필요한 보안 규칙을 설정한 후, SwiftUI에서 UIImagePicker를 사용하여 이미지를 선택하고 Firebase Storage에 업로드할 수 있습니다.

import SwiftUI
import FirebaseStorage

struct ContentView: View {
    @State private var image: Image?
    @State private var showImagePicker: Bool = false
    
    private let storageRef = Storage.storage().reference()
    
    var body: some View {
        VStack {
            if let image = image {
                image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
            } else {
                Text("이미지를 선택해주세요.")
            }
            Button(action: {
                showImagePicker = true
            }) {
                Text("이미지 선택")
            }
        }
        .padding()
        .sheet(isPresented: $showImagePicker) {
            ImagePicker(image: $image)
                .onDisappear() { // 이미지 선택 완료 또는 취소 시 호출되는 클로저
                    uploadImage()
                }
        }
    }
    
    private func uploadImage() {
        guard let image = image else { return }
        
        if let jpegData = image.jpegData(compressionQuality: 0.8) {
            let imageRef = storageRef.child("images/image.jpg")
            _ = imageRef.putData(jpegData, metadata: nil) { metadata, error in
                // 업로드 성공 또는 실패 처리
            }
        }
    }
}

위의 예제는 Firebase와 SwiftUI를 결합하여 멀티플랫폼 앱을 개발하는 기본적인 방법입니다. Firebase의 다양한 기능을 활용하여 앱의 일관성과 사용자 경험을 향상시키는데 도움이 될 것입니다. 자세한 내용은 Firebase 및 SwiftUI의 공식 문서를 참조하시기 바랍니다.

Firebase: https://firebase.google.com
SwiftUI: https://developer.apple.com/xcode/swiftui/