[SwiftUI] SwiftUI란? UIKit와의 차이란? 대체 얼마나 좋길래 개발자분들 모두 칭찬을 하는거지?

안녕하세요, HoonIOS입니다.

한동안 포스팅을 못했네요... 그렇다고 개발에 손을 놓고 있던 건 아니고 공부는 틈틈이 하고 있었습니다 :)

 

최근에 Apple에서 상당히 공을 들이고 있는 새로운 프레임워크인 SwiftUI프레임워크에 대해 공부를 하고 있습니다. 

공부를 하면서 제가 모르는 부분, 생소한 부분에 대해 정리및 공유를 하려고 합니다.

 

자 그럼 SwiftUI가 무엇인지 한번 알아봐야겠죠?

 

 SwiftUI란?

애플에서 2019년 6월에 있었던 WWDC 2019에서 발표한 프레임워크입니다.

 

애플은 처음 SwiftUI를 발표하면서 아래와 같은 슬로건과 함께 발표를 했습니다.

 

"The Shortest Path to a Great App"

"Less code, Better code, EveryWhere"

 

이 말은 SwiftUI의 특징, 장점을 그대로 나타내는 말이라고 생각을 합니다. 말 그대로, "좋은 앱을 만들기 위해 제일 짧은 방법" , "어디서든 더 적은 코드, 더 좋은 코드" 라는 의미인데요 

즉 짧고 쉽게 더 좋은 앱을 만든 다는 것을 알 수 있습니다.

 

이 프레임워크는 Swift언어를 기반으로 구성한 프레임워크로 AppKit, UIKit 이렇게 구분하지 않고 인터페이스 영역까지 SwiftUI 프레임워크 하나로 모든 플랫폼에서 사용을 하수 있습니다.

 

자 이제 이 프레임워크의 특징에 대해 살펴 보겠습니다.

 

 SwiftUI 특성

가장 기본적으로 이 프레임워크의 특성에 대해 살펴보겠습니다.

1. 슬로건에서 말한 것처럼 적은 코드 더 좋은 앱을 가지는 것
   • 어떻게 UIKit보다 코드가 줄어들지?라는 생각을 하실 수 있을 것입니다. 그렇지만 이 프레임워크는 레이아웃, 뷰 갱신, 접근성, 글자크기 조정 등 UIKit에서 일일이 설정해주었던 부분에서 SwiftUI에서는 직접 지정해주는 게 아니라 프레임워크에서 대신 지원해줍니다.
     
     처음에 봤을 때는 이게 무슨 소리야 레이아웃, 글자 크기 수정 이런 걸 프레임워크가 대신해준다고?라고 생각을 하실 수 있으실 겁니다. 아래에 SwiftUI 또 다른 특성을 통해 설명해줄 때 어떻게 줄어드는지 보여드리겠습니다. :)
   • 즉 개인적으로 개발할 때 제일 까다롭게 생각한 레이아웃 부분을 프레임워크에서 대신해주다 보니 이제 레이아웃 잡을 시간에 핵심 기능에 좀 더 투자할 수 있겠죠?
2. 제가 생각한 가장 큰 특성은 바로 선언형이라는 것
   • 해당 프레임워크에서는 기본적으로 코드들이 가지는 명령형이 아니라 선언형 프로그래밍 방식을 사용하고 있습니다.
     
     
   • 우선 UIKit에서 사용하는 명령형이란 화면의 중앙으로 잡아주고 그다음 글자 크기는 10으로 해주고 글자 색깔을 red로 잡아주는 식으로 코드를 하나씩 적용해서 구현을 해줍니다.
     
     그렇지만 선언형이랑 뷰 중간에 크기가 10인 빨간 글자를 놓을 거야 이렇게 바뀝니다.
     
     명령형이란 어떻게 가야 하는지 초점을 설명해주고 반면 선언형은 각 단계를 설명하는게 아니라 내 목적 즉 무엇을 만들고 싶은지 정해주면 됩니다.
     
     
   • 예를 들어 설명해 보겠습니다. 언어를 배울 때 가장 먼저 배우는 Hello SwiftUI라는 버튼을 화면 중간에 놓겠습니다.
     

             let button = UIButton(type: .system)
             button.setTitle("Hello SwiftUI", for: .normal)
             button.setTitleColor(.red, for: .normal)
             button.titleLabel?.font = .preferredFont(forTextStyle: .largeTitle)
             button.addTarget(self, action: #selector(setButtonEvent(_:)), for: .touchUpInside)
             self.view.addSubview(button)
             
             button.translatesAutoresizingMaskIntoConstraints = false
             
             NSLayoutConstraint.activate([
                 button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                 button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
             ])
         
         ...
         @objc func setButtonEvent(_ sender: UIButton) {
             print("is make swift code")
         }

     이 코드를 보시면 정확히 명령형이죠 Button을 만들어주고 Title, color, font, layout, event를 하나씩 잡아주고 view에 추가해주는 것을 보실 수 있을 겁니다.
     
     그럼 이걸 선언형인 SwiftUI로 작성을 해보겠습니다.
     

     struct ContentView: View {
         var body: some View {
             Button(action: {
                 print("is make swiftUI code")
             }) {
                 Text("Hello SwiftUI")
                     .font(.largeTitle)
                     .foregroundColor(.red)
             }
         }
     }

     위 코드를 보시면 위에 명령형 코드와 비교해 봤을 때 코드 길이가 확실히 줄어든 걸 보실 수 있습니다.
     
      간단하게 해석하면 폰트는 largeTitle로 해주고 글자 색깔은 빨간색으로 만들어 주고 Hello SwiftUI라는 text를 가질 거야, 아 그리고 버튼을 클릭하면 is make swiftUI code라는 코드를 콘솔 창으로 만들어줘 라는 것입니다.
     ( 어떤가요? 저는 여기서 와 미쳤다...라는 생각을 하게 되었는데 아마도 많은 분들이 공감을 하실 겁니다.)

   • ※참고 사항

     - 위에. font,. foregroundColor와 같은 것들은 또 다른 뷰를 반환하기 때문에 메서드 대신에 수식어라고 표현을 합니다.
     
     

   •  이렇게 선언형은 내가 무엇을 원하는지 UI구성을 전달하면 SwiftUI 프레임워크가 알아서 처리를 해줍니다.
   • 간단하게 위 방식은 명령형은 UI 수정하기 위해 버튼 속성을 직접 변화를 주었지만 선언형은 .font, .foregroundColor 수식어를 통해 뷰를 변경하는게 아니라 새로운 타입의 뷰를 반환합니다.
     새로운 타입의 뷰를 반환하다 보니 많은 객체들이 Struct로 되어 있다고 하네요 
3. preview
   • 저는 공부하면서 제일 편하게 생각했던게 따로 시뮬레이터로 결과를 보는게 아니고 캔버스 영역 안에서 프리뷰를 통해 결과물을 확인할수 있다는것입니다.
   • 즉 바로바로 수정된 부분을 바로 확인할수 있는거이죠
   • 다양한 기기 또 지정한 설정을 통해 여러가지인 (폰트, 다크모드 라이트 모드) 동시에 생성할수 있습니다.
4. 애플에 해당하는 모든 플랫폼 지원
   • 원래는 애플워치를 개발하려면 WatchKit, macOS는 AppKit 프레임워크를 사용해야 합니다. 그렇지만 SwiftUI는 애플 플랫폼에 해당하는 모든 기기들을 해당 프레임워크로 개발을 할수 있습니다.
     
     단, 그냥 적용이 되는게 아니라 플랫폼에 맞게 최적화는 해야 되겠죠 즉 코드 재활용이 편해졌다는 것을 뜻합니다.

 SwiftUI 4가지 원칙

SwfitUI는 다음 4가지 원칙을 기반으로 설계가 되었다고 합니다. 

한번 살펴볼까요?

 

1. 선언형
   • 앞에서 말씀드린 것처럼 SwiftUI프레임워크는 선언형으로 구현이 되어 있습니다. 
     
     위에서 설명드렸으니 혹시 모르시다면 위에 설명해 놓은 거 다시 봐주시면 됩니다. 이해 안 된다면 댓글 남겨주시면 저도 열심히 공부하고 말씀드릴게요 ㅎㅎ
2. 자동화
   • SwiftUI 프레임워크가 자동으로 다 해결해준다고 말씀을 드렸는데요, 그만큼 프레임워크가 자동으로 해결해주고 있어 따로 명령형과 다르게 일일이 설정을 안 해줘도 됩니다!!!!!
   • 저는 공부하면서 가장 좋았던 게 레이아웃 부분과 애니메이션 효과 기능 모두 매우 단순해진 거였습니다.
3. 조합
   • 큰 뷰를 하나의 기능을 가진 작은 뷰들로 자르거나 각각의 뷰를 조합해서 원하는 뷰를 쉽게 만들 수 있도록 지원을 합니다. 
4. 데이터 업데이트, 최신화
   
   • 그동안 UIKit으로 작업을 할 때는 데이터가 변경될 때 UI도 따로 적용을 해줬어야 합니다. 그만큼 코드가 더 필요했고 잘못 입력을 했을 때는 에러, 버그가 발생했습니다.
     
     SwiftUI는 데이터가 변경되면 즉시 UI도 자동으로 갱신을 해줬습니다. 그냥 되는 건 아니고 뷰의 특정한 상태를 저장할 State난 모델 객체의 변화를 관찰하는 ObservableObject 같은 데이터의 변화를 반영해 뷰에 반영을 해줍니다.
   • 이렇게 실시간으로 업데이트를 해주므로 따로 동기화를 해줘야 하는 번거로움이 줄어들었습니다. 그러므로 에러, 버그가 발생할 확률도 줄어든 거죠?

 

이렇게 간단하게 SwiftUI에 대한 특성 원칙에 대해 설명을 드렸는데요, 앞으로 열심히 공부해서 SwiftUI에 대해 배운 것들을 같이 배울 수 있도록 하겠습니다.

 

혹시 이해 안 된 부분이나 보충설명이 필요한 부분이 있으면 댓글 남겨주세요 :)