StoryBoard vs. SwiftUI

Storyboard

Pcanpi Grammar Checker 개발 당시 사용한 인터페이스 방식
장점

• 첫 입문으로 배우기에 쉬움
• 별도의 코드 입력 없이 프로토타입을 빠르게 만들 수 있음
• 스토리보드 오브젝트 라이브러리에 많은 컴포넌트들이 존재함
• 사용 기간이 오래된 만큼 커뮤니티가 발달되어있음

단점

• xml 타입의 코드들이므로 소스 컨트롤이 어려움 → 같은 스토리보드를 여러 사람이 수정할 경우 코드 충돌이 빈번히 발생함
• 코드와 화면이 일치하지 않는 경우가 있음
• 자동 레이아아웃 문제가 발생함 : 각각의 디바이스별로 체크가 필요함
• SwiftUI와 달리 Live Preview가 되지 않아 별도 빌드 후 시뮬레이터로 확인하는 과정 필요. → 개발 속도 느림
• 코드로만 관리하지 않아 스크린이 많아짐 → 다뤄야할 화면이 많아져 관리가 복잡해짐.

SwiftUI

단점

• Storyboard 사용과 다른 점을 새롭게 배워야함
• iOS 13 이상 유저만 사용 가능. Xcode 11이상부터 지원됨.
• 기술 커뮤니티가 크지 않음. (이와 별도로 Apple 측에서 SwiftUI 튜토리얼 제공)
• SwiftUI와 UIKit는 다른 방식으로 렌더링하므로 view의 위상을 살피는 것은 어려움
• 스토리보드 오브젝트 라이브러리만큼 많은 옵션의 컴포넌트가 제공되지 않음. 따라서 커스텀하여 코드를 작성해야함.

장점

• 선언적 작성 → 코드와 화면이 언제나 일치함.
• 코드가 간단 명료함. 코드의 재사용, 모듈화가 쉬움.
• 레이아웃을 더 쉽게 만들 수 있음. 라이브러리 드래그앤 드롭으로 코드를 생성할 수 있음.
• Live Preview가 지원되어 코드 변화시 바로 변화를 화면으로 볼 수 있음. 별도 빌드 과정 필요 없음. → 개발 속도 빠름
• 스토리보드의 자동 레이아웃 문제가 없음
• 하나의 프레임워크로 macOS, iOS, iPad 앱에서 이용 가능. (크로스 플랫폼 기능)
• 기존 UIKit를 사용한 프로젝트가 존재할 경우 UIHostingController를 통해 스토리보드에서 사용했던 UIKit와 SwiftUI를 섞어서 사용할 수 있음. SiwftUI 내부로 UIKit 뷰를 가지고 옴.
  • makeUIView(:) to create and configure the initial state of object view
  • updateUIView(:context:) to update the state of object view when needed by SwiftUl
  • makeCoordinator() to create a Coordinator to communicate the changes of object view with other SwiftUI elements
  • 사용 예

import Foundation 
import WebKit 
import SwiftUI 

struct WebView: UIViewRepresentable { 
  let urlString: String? 

  func makeUIView(context: Context) -> WKWebView { 
    return WKWebView() 
  } 
  
  func updateUIView(_ uiView: WKWebView, context: Context) { 
    if let safeString = urlString { 
      if let url = URL(string: safeString) { 
        let request = URLRequest(url: url) uiView.load(request) 
      } 
    } 
  } 
}

• There are three functions you need to override in order to use this protocol:
• delegate를 통해 상태를 감지하지 않고 빌트인 스테이트 관리와 바인딩이 가능함. (Environment, State, Binding, ObservableObject 제공)
  • Environment는 Next.js에서 COLOR나 FONT 같은 constant
  • State는 Next.js에서 페이지별 선언되는 state, 변수와 같이 볼 수 있음.
• 애니메이션 추가가 쉬움 : 뷰에 .animation() 을 불러와 쉽게 애니메이션을 덧붙일 수 있음

// 사용 예 

struct ContentView: View { 
  // … 
  @GestureState private var isDetectingPress = false 
  var body:some View { 
    VStack { 
      Spacer().frame(height: 32) 
      Image("shipbook-logo-circle") 
      .scaleEffect(isDetectingPress ? 2 : 1) // VStack 뷰에 animation 추가 
      //GestureState인 isDetectPress 변화에 따라 값이 달라짐 
      .animation(.easeInOut(duration: 4), value: isDetectingPress) 
      .gesture( LongPressGesture(minimumDuration: 0.1) 
      .sequenced(before:DragGesture(minimumDistance: 0)) 
      .updating($isDetectingPress) { 
        value, state,_in switch value { 
          case .second(true, nil): state = true 
          default: break 
        } 
      }
      ) 
      Spacer() 
      // … 
    } 
  }
}

참고자료

Swift UI or StoryBoard??
Swiftui vs Storyboard | Shipbook