SwiftUI와 Storyboard

개요

 Xcode를 실행하고 앱 프로젝트를 새로 만들 떄 Interface에서 선택할 수 있는 SwiftUI와 Storyboard. 이 두개는 어떤 관계이고 어떤 차이가 있을까?

 

 

 

---

Interface

 인터페이스는 어플리케이션과 사용자가 소통할 수 있도록 해주는 일종의 시스템입니다. 모바일 디바이스에서는 보통 사용자의 터치, 슬라이드 등의 손동작을 통해 어플리케이션을 제어할 수 있도록 합니다. 버튼, 스위치, 툴바 등이 대표적인 인터페이스입니다.

 

 xcode에서 선택할 수 있는 Interface는 유저의 앱 개발환경을 뜻합니다. 유저는 SwiftUI나 Storyboard 둘중 하나를 선택하여 원하는 앱 개발 환경에서 앱을 개발할 수 있습니다. 이 두개의 인터페이스는 다른 계층구조를 가집니다.

 

 

 SwiftUI는 blogSwiftUIApp, ContentView

 

 Storyboard는 Delegate두개와 ViewController 그리고 Main, LaunchScreen 등을 가지고 있습니다.

 

이 두개의 인터페이스는 계층구조, 쓰는 파일이 다를뿐만 아니라 개발 화면도 사뭇 다릅니다.

 

SwiftUI

 

Storyboard

 가장 큰 차이점은 SwiftUI는 프리뷰와 코드가 서로 연동된다는 점이 아닐까 싶습니다. 기존 Storyboard Interface는 Main에서 뷰 컨트롤러를 넣고 ctrl로 UI를 당겨 코드에 import 하였습니다. 하지만 SwiftUI는 프리뷰에 뷰 컨트롤러 요소를 추가하면 ContentView에 바로 코드가 추가됩니다.

 

 

Storyboard

---

 Xcode 내의 Interface Builder 에디터를 사용하면 코드를 작성하지 않고도 전체 사용자 인터페이스를 쉽게 설계할 수 있습니다. 윈도우, 버튼, 텍스트 필드 및 기타 객체를 디자인 캔버스에 드래그 앤 드롭하기만 하면 기능하는 사용자 인터페이스를 만들 수 있습니다.

 

 Xcode의 Interface Builder에 대한 애플의 설명입니다. 스토리보드는 iOS 5와 함께 출시된 이후 iOS 애플리케이션용 UI를 만드는 가장 일반적인 방법이 된 인터페이스 빌더입니다. 스토리 보드는 다음과 장점이 있습니다.

 

1. 초보자도 배우기 쉽다.

2. 스토리보드를 사용하면 앱의 프로토타입을 1~2시간 만에 만들 수 있기 때문에 수십만 줄의 코드를 작성하지 않고도 앱을 쉽게 시각화할 수 있다.

3. 스토리보드의 라이브러리에는 방대한 객체 컬렉션이 있다.

4. 대규모 커뮤니티의 서포트 네트워크가 있다.

 

 다음과 같은 단점 또한 있습니다.

 

1. 소스 컨트롤이 어렵다. 스토리 보드 코드는 xml 형식이기 떄문에 코드를 완전히 이해하지 않고는 병합 충돌을 해결하기 어렵다.

2. 응용 프로그램 UI를 만들 때 지원되는 모든 디바이스 크기에서 작동해야 하는 자동 레이아웃 문제를 염두에 두고 미리 보기 옵션을 사용하거나 각 디바이스에서 앱을 실행하는 모든 디바이스를 별도로 확인해야 함.

3. 화면의 수가 계속 증가함에 따라 스토리보드의 관리가 매우 혼란스러워질 수 있으며 복잡한 거미줄 구조를 형성할 수 있음.

 

 

 

SwiftUI

---

 SwiftUI는 Swift의 힘으로 가능한 한 적은 코드로 모든 애플 플랫폼에서 멋진 앱을 구축할 수 있도록 지원합니다. SwiftUI와 함께라면 오직 한 세트의 툴들과 API들을 사용하여 모든 Apple 기기에서 모든 사용자에게 더 나은 경험을 제공할 수 있습니다.

 

 SwiftUI에 대한 애플의 설명입니다. SwiftUI는 기본적으로 UI를 선언적인 방법으로 생성하는 툴킷입니다. SwiftUI의 장점은 다음과 같습니다.

 

1. 여러 iOS 플랫폼 앱(macOS, iOS, iPad 앱)을 위한 단일 프레임워크이다.
2. 자동 라이브 미리보기 옵션을 제공하여 코드의 변경 내용을 즉시 표시함.
3. 스토리보드와 같은 자동 레이아웃 문제는 없음.
4. 오브젝트 라이브러리의 드래그 앤 드롭과 파일 퍼실리티에서의 코드 기입이 모두 가능함. 

5. 코드가 단순하고 깨끗함.
6. Swift UI 뷰 요소는 작은 모듈 파일을 생성하여 쉽게 재사용할 수 있음.
7. 바인딩 가능한 객체를 제공함으로써 반응형 프로그래밍을 할 수 있게함.
8. UI Hosting Controller를 사용하여 UIKit과 Swift를 혼합할 수 있음.

 

 다음과 같은 단점이 있습니다.

 

1. iOS 13+와 Xcode 11+만 지원하므로 SwiftUI 사용하여 하위 버전의 앱을 빌드할 수 없음.
2. 새롭게 출시되었기 떄문에 스토리보드 객체 라이브러리에서처럼 UI에 컴포넌트 옵션이 많지 않음. 따라서 커스텀 뷰들을 직접 만들어야 함 (예: 검색 표시줄).
3. 뷰 계층을 코드 형태로 시각화하는 것은 어렵기 때문에 스토리보드에서 스위프트 UI로 전환하는 것은 어려울 수 있음.
4. 스토리보드에서 신속한 UI로 직접 마이그레이션하는 방법은 없습니다. 이를 통해 개발자는 기존 앱 및 하위 버전에서 스토리보드를 계속 사용해야 합니다.
5. 매우 새로운 것이기 때문에 스토리보드의 경우와는 달리 커뮤니티의 지원이 적음.

 

 

Storyboard vs SwiftUI

---

 종합해서 설명하자면 SwiftUI가 최신 기술이고, Storyboard의 상위호환격인데 나온지 얼마 안되서 (2019 WWDC) 라이브러리와 커뮤니티의 지원이 부족하다는 단점이 있습니다. 하지만 이는 시간이 지나면서 해결될 문제이고, 애플이 지속적으로 SwiftUI를 지원해줄 것이기 떄문에 SwiftUI를 배우고 사용해서 앱을 만드는것이 좋을 것 같습니다.

 Storyboard 2012년, Swift 프로그래밍 언어 2014년, SwiftUI 2019년. 애플의 개발은 정말 빠르다고 느꼈습니다. 저도 나중에 현업에서 일할 떄 언어든 인터페이스든 한번의 격변은 겪지않을까 생각이 듭니다. 그떄는 뒤쳐지지 않도록 또 새롭게 열심히 배워야겠죠.

 

---

Reference

https://medium.com/technology-nineleaps/swift-ui-or-storyboard-675ff2b40829