[SwiftUI] SwiftUI 마이그레이션 느낀점

회사에서 남는 시간을 활용해 기존 UIKit으로 되어있는 코드들을 SwiftUI로 마이그레이션 하는 시간을 가지고 있다.
현재는 비교적 간단한 하위 VC들(5~6화면)을 대상으로 마이그레이션을 완료했다.

 

처음에 마이그레이션을 시작할 당시에는 이걸 어디서부터 건들어야 되나 막막했던 것 같다. Coordinator, ViewController, Component 등 손 볼 것들이 한두가지가 아니었다.

성격 상 일단 시작하고 보는 타입이어서 편의점 리스트를 불러와 화면에 보여주는 비교적 간단한 기능을 가진 화면을 대상으로 개발을 시작했다.
하루 이틀이면 끝날 줄 알고 시작했지만 생각보다 수정할게 많았던 것 같다. 기존에 사용하던 얼럿뷰, 토스트 뷰, 컴포넌트 등을 하나도 사용할 수 없었던 게 컸던 것 같다. 사용하려면 할 수는 있지만, 컴포넌트들도 SwiftUI용으로 만들어두어야 다음 화면을 작업을 하는데 수월할 것 같아서 우선 위에 해당하는 기본적인 컴포넌트들을 개발했다.

일단 SwiftUI를 활용하면서 얻었던 장점부터 말하자면 코드양, Preview, 직관성 이라고 생각한다. 그리고 combine을 좀 더 활용하기 편하다?라는 느낌을 받았던 것 같다.
 가령 코드양이 기존 250줄이었던 화면이 160줄로 줄었다. 물론, 이건 단순히 마이그레이션 뿐만이 아니라 리팩토링도 같이 진행해서이긴 하지만 그래도 기존 대비 20~30퍼 정도는 줄어드는 것 같다.
 그리고 가장 좋았던 점 중 하나는 Preview... 개발하고 있는 UI를 바로바로 볼 수 있어서 편의성 면에서 좋았던 것 같다. 사실 UIKit에서도 Preview를 사용할 수 있긴 했지만, UIKit에 어느정도 적응되어 굳이 사용을 하지 않았었는데, 있으니 확실히 편하다는 느낌을 받았다.
 또한, 직관성 면에서도 SwiftUI가 보기 편하다는 느낌을 받았다. 아무래도 선언형이다 보니 코드만 보더라도 대충 어떤 view인지 알 수 있겠다 라는 생각이 들었다.

    var body: some View {
        VStack {
            ScrollView {
                LazyVStack(spacing: 0) {
                    HeaderContainerView() {
                        print("취소 버튼 눌림")
                    }
                    
                    DepositGuideContainerView(strings: depositGuideString,
                                              tintText: StaticValues.getTranslation(of: viewModel.firstGuideTintedTextKey))
                    .padding(.top, moderateScale(number: 20))
                    
                    StoreBarcodeViewSU(depositDetail: viewModel.depositHistoryDetail,
                                       remainingTimeString: viewModel.timeString,
                                       barcodeImage: barcodeImage)
                    .padding(.top, moderateScale(number: 20))
                    
                    InfoGuideContainerView()
                        .padding(.top, moderateScale(number: 20))
                }
            }
            .scrollIndicators(.hidden)
            
            SubmitButton(text: StaticValues.getTranslation(of: "renewal.common.next"),
                         type: .activePrimary)
            .onTapGesture {
                self.coordinator?.moveToAnotherFlow(TabBarFlow.home(.main), userData: nil)
            }
        }
        .padding(.horizontal, moderateScale(number: 20))
        .globalAlert()
        .loadingOverlay(isLoading: $viewModel.isLoading)
        .toast($viewModel.toast)
        .task {
            await viewModel.getDepositTransactionDetail()
        }
        .onChange(of: viewModel.depositHistoryDetail.verificationCode) { code in
            guard !code.isEmpty else { return }
            generateBarcode(code)
        }
    }

 

물론 단점도 있었다. 사실 좀 치명적인 단점이긴 한데 숙련도 문제였다. 과장 좀 보태서 말하면 기존 UIKit을 활용할 때보다 3배는 더 걸리는 것 같다. 그치만 이 부분은 충분히 보완할 수 있는 부분이기도 하고, 지금은 아직 초기 단계라 컴포넌트 같은 기반들이 다져지지 않아서 그러는 경향도 있는 것 같다.

 

결론은 마이그레이션을 진행하면서 여러모로 하기를 잘했다는 생각이 들었다. 그리고 기존에 엄두가 나지 않아서 구조적으로도 건들지 못했던 부분들도 이 참에 리팩토링을 병행하고 있는데, 진짜 이때까지 못 긁고 있던 부분을 긁을 수 있게 되어 시원했던 것 같다.

알맞는 방향으로 마이그레이션을 하고 있는지는 정확하진 않지만, 그래도 좋은 구조와 방향성을 가져가기 위해 지피티를 열심히 갈구고 있으니 나름 괜찮은 방향으로 가고 있는게 아닐까 싶다.(결코 지피티한테 욕한적 없습니다^^) 

그리고 마이그레이션 적용되어 배포나간 버젼에서 제발 이슈가 생기지 않도록 열심히 기도를 하고 있다.. 기도메타