도입부

기존에 UI를 구축할 때는 플랫폼마다 다른 프레임워크를 사용해야 했습니다. 대표적인 예로 iOS, tvOS UI는 UIKit을, macOS는 AppKit을, watchOS는 WatchKit을 사용했습니다.
따라서 다양한 애플 플랫폼에서 개발을 하고 싶다면 수많은 프레임워크를 공부해야했습니다.
하지만 애플의 빵빵한 지원과 함께 새로운 프레임워크가 등장했고, 모든 애플 플랫폼의 앱을 이 하나의 프레임워크로 개발할 수 있게 되었습니다.
바로 WWDC 19에서 처음 공개된 프레임워크인 SwiftUI입니다.

들어가기 전

프레임워크? UIKit? SwiftUI랑 Swift는 다른건가? Swift만 공부하면 앱 만들 수 있다며?
위는 제가 처음 SwiftUI를 공부할 때 스스로에게 했던 질문입니다. 아마 Swift를 첫 언어로 선택하여 개발을 배우시는 분들은 이런 생각을 한 번쯤은 해봤을거라 생각합니다. 저는 당시 이런 용어나 개념 정리가 안되서 정말 막막했던 기억이 있습니다. 누군가 Swift로 된 예시를 사용해서 이해하기 쉽게 설명해주길 바랬고, 끝내 찾지는 못했지만 제가 반드시 한 곳에 정리해야겠다는 생각이 들었습니다.

프로그래밍 언어, 그리고 프레임워크

Swift가 프로그래밍 언어인건 알지만, 그럼 SwiftUI는 뭔지, 또 Swift와는 무슨 관계인지 헷갈릴 수 있습니다.
이를 설명하기 위해서는 일단 Framework의 개념을 이해해야 합니다.

Framework란

사전적 의미로는 틀, 뼈대라는 뜻으로 프로그램 개발의 구조를 잡아주는 체계를 말합니다.

단순하게 "코딩할 때 지키는 규칙" 정도로 생각하시면 이해가 빠를겁니다. 이 규칙들은 특정 프로그래밍 언어로 작성되어있습니다.
SwiftUI는 Swift 기반의 프레임워크입니다.
이 말은 즉, 코딩할 때 지켜야하는 규칙 이름이 SwiftUI이고, 그 규칙들은 Swift로 작성되어있음을 말합니다.

도입부에서 언급된 UIKit, AppKit, WatchKit도 마찬가지입니다.

Swift로 코딩을 하긴 하는데,

• 아이폰 앱이나 아이패드 앱을 만들고 싶다? -> UIKit이라는 규칙에 따라 만들어야 되겠구나.
• 맥북에서 작동하는 앱을 만들고 싶다? -> AppKit이라는 규칙에 따라 만들어야 되겠구나
• 애플워치에서 작동하는 앱을 만들고 싶다? -> WatchKit이라는 규칙에 따라 만들어야 되겠구나.

코드 맨 위에 import 키워드를 통해 작성하고있는 코드에 프레임워크를 적용시킬 수 있습니다.

import SwiftUI // 이 소스 파일에 SwiftUI라는 규칙을 적용시키겠다.
 // code

사실 Swift 언어를 공부하면서 저희가 스마트폰으로 보는 일반적인 앱의 화면을 띄워본 기억은 없으실겁니다. 단지 컴파일러를 통해 출력되는 값들만 봤을뿐.
하지만 Swift 언어와 함께 SwiftUI 프레임워크를 사용한다면 앱 화면을 직접 제작할 수 있습니다.

Swift와 SwiftUI의 관계가 이해가 좀 되셨나요? 프레임워크의 자세한 정의는 다른 글에서 따로 다루기로 하고, 이제 SwiftUI에 대해 알아보겠습니다.

SwiftUI란?

앞서 설명한 것과 같이 SwiftUI는 결국 프레임워크입니다. 그렇다면 수많은 프레임워크 중 하나일 뿐인 SwiftUI에 사람들은 왜 열광하는 걸까요?

"Better Apps. Less Code."

SwiftUI를 사용하면 모든 Apple 플랫폼에서 Swift의 강력한 기능과 놀라울 정도로 적은 코드로 멋진 앱을 빌드할 수 있습니다. 단 하나의 도구 및 API 세트를 사용하여 모든 Apple 기기에서 모든 사람에게 더 나은 경험을 제공할 수 있습니다.

SwiftUI is designed to integrate with your existing code base on any of Apple's platforms.

애플은 위와 같은 문구들로 SwiftUI를 설명하고 있습니다. SwiftUI를 가장 잘 설명해주고 있는 문구들인 만큼, 여기서 등장하는 키워드들로 SwiftUI의 특징을 설명할 수 있습니다.

프레임워크의 통합(Framework Integration)

단 하나의 도구, 모든 Apple 기기

SwiftUI가 엄청난 주목을 받고 있지만 결코 기존 프레임워크들이 수요가 적거나, 성능이 떨어지지 않습니다. Swift 출시 후부터 SwiftUI 출시 전까지 앱스토어에 배포되는 앱들은 모두 기존 프레임워크들로부터 만들어졌다는 사실을 잊으면 안됩니다.

그렇다면 개발자들은 왜 SwiftUI가 다른 프레임워크들을 대체하는걸 좋다고 여기는걸까요?

프레임워크를 배운다는게 쉬운 일이 아닙니다. 프레임워크 마다 문법이 있고, 각자 지향하는 패러다임이 있습니다. 일부 프레임워크는 언어를 새로 배우는 정도의 공부량을 요구하기도 합니다. 배워야 하는 프레임워크가 많다는 건 그만큼 습득하고 이해하는 시간이 오래 걸린다는 것을 의미하고,
이는 개발자들의 부담을 줄여주기 위해 개발된 프레임워크가 오히려 개발자들에게 부담으로 다가온 셈입니다.

하지만 도입부에서 말했다시피, SwiftUI는 모든 애플 플랫폼의 앱을 개발할 수 있습니다. 물론 아직은 기존에 사용하던 다른 프레임워크들을 완전히 대체하지는 못합니다만, SwiftUI는 애플에 의해 꾸준히 개선될 것이고, 시간이 지나면 다른 프레임워크들을 완벽히 대체할 정도로 정교해질 것 입니다.

선언형 UI(Declarative UI)

적은 코드, 멋진 앱

최근 몇년동안 모바일 UI 개발에는 새로운 트렌드가 등장하고 있습니다. 바로 선언형 UI입니다. Flutter, React, Compose, SwiftUI 등 많은 최신 프레임워크들이 선언형 UI 패러다임을 채택하고 있습니다.

이런 선언형 방식의 코드 작성법은 배우기도 쉽고, 읽기 쉬우며, 쉽게 이해할 수 있습니다.

사용자가 입력한 텍스트가 바로 아래 출력되는 간단한 예제입니다. 이를 SwiftUI로 구현해보면,

import SwiftUI

struct ContentView: View {
	@State private var text: String = ""
	var body: some View {
    	Form {
        	TextField("Write some text", text: $text) // 텍스트 적는 곳
            Text("Your write: \(text)") // 텍스트 출력하는 곳
        }
    }
}

코드가 아주 적고 직관적인게 보이시나요? 기존에 사용하던 UIKit에서는 보기힘든 코드 길이입니다.

이외에도 선언형 프로그래밍 패러다임을 채택함으로써 오는 이점들이 있는데, 이는 [Swift]프로그래밍 패러다임이란? #1 명령형 프로그래밍 VS 선언형 프로그래밍에서 자세히 다루고 있습니다.

디자인 툴

더 나은 경험

SwiftUI를 사용하면 물론 사용자들도 더 나은 경험을 할 수 있지만, 개발자들에게도 더 좋은 환경, 더 나은 경험을 제공해줍니다.
기존에는 코드를 빌드하여 시뮬레이터를 실행해야만 변화된 앱의 모습을 확인할 수 있었는데, SwiftUI를 사용하게되면 Xcode나 Swift Playgrounds 같은 IDE에서 App Preview를 제공합니다.
App Preview에서는 코드의 변경사항을 즉시 재컴파일하여 Preview를 코드와 완벽하게 동기화시키고, 개발자들은 변경사항을 상시로 확인가능하고 편집할 수 있습니다.

마무리

자료조사를 하다보니 평소엔 당연하다고 생각하며 누렸던 기능들이 다른 플랫폼에서는 고사하고, 애플 플랫폼에서도 가까운 과거까지 지원하지 않았다는걸 알았다. 좋은 시절에 코딩을 하는거 같다. 또 애플 생태계가 갈수록 개선되고, 구체화되는게 눈에 보였다.

애플이 제시한 비전과 그게 실현되는 과정을 지켜보고 있으니 더욱 이 플랫폼에 매력을 느끼게 되는 것 같다.

참고

https://medium.com/@rmeji1/declarative-and-imperative-programming-using-swiftui-and-uikit-c91f1f104252

https://blog.devgenius.io/swiftui-understanding-declarative-programming-360ede8f2551

https://medium.com/@kimdohun0104/%EC%82%AC%EB%9E%8C%EB%93%A4%EC%9D%80-%EC%99%9C-%EC%84%A0%EC%96%B8%ED%98%95-ui%EC%97%90-%EC%97%B4%EA%B4%91%ED%95%A0%EA%B9%8C-1440d03f4e49

https://developer.apple.com/xcode/swiftui/