Flutter 성능 이슈 발생 😫

Flutter로 앱 개발을 진행하던 도중 성능 이슈가 생겼다. 특정 기능이 iOS에서 스무스하게 동작하지 않고 지연이 발생하는 것이었는데, 다행히 동일 기능을 하는 Swift 코드를 Flutter에 연결하여 사용하니 이 지연은 발생하지 않았다.

물론 이 지연이 Flutter에서의 현재 한계인지 해당 package의 현재 한계인지 모르겠으나, 어쨌든 이 지연이 미래에는 해결되어 있을 것이라 생각하고 다른 기능 개발로 나아가기보다 어차피 향후에도 이런 경우들이 많이 있을 것으로 생각되기 때문에 Swift 공부에도 도전하기로 했다.

공부 방법? 🧑‍💻

개인적으로 JS, RN, Flutter 등을 공부할 때 동영상 강의 및 고수 분들의 github 코드 염탐이 큰 도움이 되었던 경험이 있어서, 이번에도 그렇게 진행하고자 한다. 아마 동영상 강의는 그냥 구글링하거나 유튜브, 인프런, 유데미 등에서 찾아 들을 것 같다.

SwiftUI vs UIKit 🔥

대충 보니까 애플에서 스위프트를 크게 업데이트 중인 것 같다. SwiftUI는 iOS 13.0 출시 때 새로 제공된 UI framework인데, 최신 기술이라 UIKit 대비 레퍼런스가 적은 것 같다. 아마 Swift 관련 오픈소스나 패키지를 찾더라도 UIKit으로 작성된 버전이 훨씬 많을 것이다. 그래서 이 두 개 중 어떤 방식을 공부해야 하는지 고민하며 일단 SwiftUI 인스타그램 클론 강의를 유데미에서 들었는데, 너무 쉬운 것 같아서 깜짝 놀랐다. 내가 아직 딥다이브 안 해서 그런 거일 수도 있는데, 간단한 코드 몇줄로 완성도 있는 결과물이 나오는 게 신기했다. Flutter보다 훨씬 편한 것 같은 느낌? 어쨌든 SwiftUI에 대한 첫인상이 너무 좋기도 했고, 무엇보다 최신 기술이고 현재 애플에서 밀고 있고, 아직 주류는 아니더라도 시간이 지날수록 무게 중심이 SwiftUI 쪽으로 움직일 것 같아, SwiftUI를 파기로 결정했다. 단, 가장 중요한 체크포인트가 있었다.

1. SwiftUI를 Flutter에서 사용할 수 있는지
2. UIKit으로 작성된 패키지들이 SwiftUI와 연동이 되는지

내가 지금 Swift를 공부하는 이유는 지식을 늘리고 싶어서가 아니라, 현재 Flutter로 앱을 개발하던 중 성능의 문제로 어쩔 수 없이 native 개발을 해야만 하는 상황에 처했기 때문이다. 그래서 위 1번과 2번을 따져봐야 했는데, 다행히 둘 다 가능하였다. (사실 1번은 당연한 거일 수도..?)

1. Flutter에서 SwiftUI 사용하기

그냥 임포트하면 끝이다. AppDelegate.swift 등에서

import SwiftUI

2. UIKit과 SwiftUI 연동하기

이건 구체적으로 UIKit 코드에서 SwiftUI 코드를 가져다 쓰는 것이고, 또 vice versa다. 나의 경우엔 UIKit 코드에서 SwiftUI로 만든 view를 가져다 써야 했는데, 다음과 같이 하면 된다.

2-1. UIKit에서 SwiftUI view 사용하기

SwiftUIView.swift

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

UIKitCode.swift

import SwiftUI
...
let view = UIHostingController(rootView: SwiftUIView())
...

2-2. SwiftUI에서 UIKit 사용하기

이 부분이 조금 복잡하다. 완벽히 이해는 안되지만 일단 다음과 같이 하면 된다. 이 부분은 레퍼런스도 많이 있음!

UIKitWrapper.swift

import SwiftUI

struct UIKitWrapper: UIViewControllerRepresentable {   
    func makeUIViewController(context: Context) -> some UIViewController {
        let nc = UINavigationController()
        nc.view.backgroundColor = .red
        return nc
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        
    }
    
    class Coordinator: NSObject {
    	// UI가 동적으로 반응하기 위해 작성되어야 하는 코드
    }
}

SwiftUIView.swift

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        UIKitWrapper()
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

프리뷰

---

어쨌든 앞으로 SwiftUI 공부 화이팅 🥹