iOS - SwiftUI 미리보기(Preview)

 

이번2019 WWDC에서 개발자 입장에서 가장 주목할만한 내용은 여러가지가 있겠지만,

대표적으로 iPadOS 의 등장과 SwiftUI 였을 것이다.

나도 iOS 개발을 하고 있기 때문에 이번 SwiftUI 가 어떤 내용을 담고 있을지 굉장히 흥미로웠다.

바로 살펴보자.

 

애플은 SwiftUI 를 다음과 같이 정의하고 있다.

 

---

Better apps. Less code.

 

- Swift 를 활용해 모든 애플 플랫폼을 관통하는 유저 인터페이스를 만들 수 있게 해주는 혁신적(innovative)이면서도 예외적인(exceptionally) 심플한 방법.

 

- 단지 최소의 도구들과 API의 세트(Set)를 사용하여 어떤 애플의 디바이스에서도 유저 인터페이스를 만들 수 있도록 한다.

 

- 가독성이 좋고 작성하기에도 쉬운 'declarative' 한 Swift 문법을 사용하는 SwiftUI 는 여러분의 코드와 디자인을 완벽하게 동기화해주는 새로운 Xcode Design Tool 과 함께 원활하게 작동합니다.

 

- Dynamic Type(동적 타입), Dark Mode(다크 모드), localization(지역화), and accessibility(접근성) 에 대한 자동적 지원(automatic support)은 곧 여러분의 SwiftUI 코드 첫 번째 줄이 이미 여러분이 작성한 가장 강력한(the most powerful) UI 코드임을 의미합니다.

---

 

 

Source : Apple Developer

---

 

Declarative Syntax

 

 

- SwiftUI는 Declarative 한 문법을 사용한다.

  * 그래서 여러분은 여러분의 유저 인터페이스가 해야만 하는 것을 간단히 지정할 수 있습니다. 

  * 예를 들면, 텍스트 필드로 구성된 아이템들의 리스트(리스트는 기존 테이블 뷰와 유사합니다.)를 만들길 원한다고 했을 때,

    1. 각 필드의 색이라던지 폰트라던지 정렬이라던지를 설명이 가능하도록 작성할 수 있는 것이죠.

    2. 코드는 더 단순해지고 가독성이 좋아질 것이고 이는 곧 시간과 유지비용을 절약하게 될 것입니다.

        (이 부분이 바로 문두의 "Better apps. less code." 를 의미하는 것이 아닌가 싶습니다.)

 

  * 이러한 declarative 한 스타일은 심지어 애니메이션과 같은 복잡한 개념(Concepts)에도 적용됩니다.

    1. 거의 모든 컨트롤에 애니메이션을 쉽게 추가하고

    2. 바로 사용 가능한(ready-to-use) 효과들의 모음을 단지 몇 줄의 코드만으로 선택

    3. 런타임 시, 시스템은 부드러운 움직임(smooth movement)을 만들어 내기 위해 필요한 모든 단계를 처리하며, 심지어는 여러분의 앱을 안정적으로 유지하기 위한 (움직임의) 중단(interruption) 도 처리합니다. 이렇게 쉬운 애니메이션으로 여러분은 자신의 앱을 생동감있게 만들어 주기 위한 새로운 방식을 찾게 될 거에요.

 

SwiftUI Declarative

---

 

Summary

 

 

 

  Declarative 한 문법이라는 것이 어떤 것인지 잘 안 다가왔는데 이 설명을 보고 조금은 더 잘 이해할 수 있게 되었습니다.

사전적 정의로는 '선언적' 이라고 나와 있는데, 이를 보고서는 무슨 의미인지 잘 안다가왔어요. 번역을 하면서 느낀 점으로 위의 코드를 보면 자신이 입력한 코드가 한 눈에 어떤 역할을 하는지 알기가 쉬워졌어요. 이는 '코드가 더 단순해지면서 동시에 가독성은 높아지는' 을 'Declarative' 라 표현한 것이라 생각했어요.

 

뭐.. 제 개인적 의견이라 100프로 맞다고 할 순 없을 것 같습니다.

 

일단 이외에도 주니어 iOS 개발자의 눈에 띄는 몇 가지는 

 

1. import SwiftUI

2. class 가 아닌 struct

3. 타입이 UIView 가 아닌 View

4.. @State 의 정체

5. some 은 무엇인고?

6. List, VStack 등의 새로운 네이밍

 

등이 있었습니다...!

 

다음 글에서는 SwiftUI 튜토리얼 과 레퍼런스를 좀 살펴보기로 하죠 ! 일단 나머지 설명을 좀 더 보겠습니다.

---

 

Design Tools

 

 

- Xcode 11. What's new ? 

 

  새로운 직관적인(intuitive) 디자인 툴을 포함하고 있으며, 이 툴은 SwiftUI 를 사용하여 인터페이스를 만드는 것을 드래그 앤 드랍 만큼이나 쉽게 만들어 줄 것입니다. 디자인 캔버스 안에서 작업하면서 여러분이 편집하게 되는 모든 것은 인접한 편집기의 코드와 완전하게 동기화 됩니다. 코드는 즉각적으로 입력하는 동시에 미리보기에 표시되며 혹은 반대로 그 미리보기에 대해서 여러분이 만들어낸 어떤 변화든 여러분의 코드에 즉시 나타납니다.

 

   Xcode 는 여러분이 만들어낸 변경 내용들을 재컴파일하며, 이 내용들을 여러분의 실행중인 버전의 앱에 삽입하여 항상 표시 및 편집할 수 있습니다.

 

Xcode 11, What's new ?

- Drag and drop. 

 

  1. 캔버스(Canvas) 상에 컨트롤을 단순히 드래깅 함으로서 여러분의 유저 인터페이스 내에 구성 요소들을 배치하세요. 

  2. 폰트, 컬러, 정렬 그리고 다른 디자인 옵션들을 선택하기 위한 인스펙터를 열기 위해 클릭하세요 그리고 쉽게 여러분의 커서로 컨트롤을 재배치 하세요.

 

  이러한 많은 비주얼 에디터의 대부분은 또한 코드 에디터에서도 사용할 수 있기에, 여러분의 인터페이스의 일부를 손으로 코딩하는 것을 선호할지라도, 각 컨트롤에 대해 새로운 수정자(modifier)를 찾기 위해서 인스펙터를 사용할 수 있어요. 또한 컨트롤들을 라이브러리로부터 드래그 할 수 있고 디자인 캔버스 상이나 직접적으로 코드 상에 이 컨트롤들을 드랍할 수 있어요.

=> 쉽게 기존 Xcode 상에서 불편하게 사용했던 스토리보드와 swift 파일 사이의 연동을 좀 더 편하게 개선하였고, 드래그 앤 드랍을 통해서 쉽게 각종 컨트롤들을 연동할 수 있으며, 디자인 캔버스(사진의 우측) 에서 각종 속성을 담당했던 어트리뷰트 인스펙터가 새로운 버전으로 개선되어 우측에서 볼 수 있듯이 쉽게 각종 속성의 수정이 가능하게 되었다고 이해하시면 되겠습니다. 

 

 

- Dynamic replacement.

 

  스위프트의 컴파일과 런타임은 Xcode에 완전히 임베드(=내장)되어 있어서, 여러분의 앱을 지속적으로 만들고 실행되도록 합니다. (위 이미지의 우측) 디자인 캔버스는 단지 여러분의 유저 인터페이스의 근사치(approximation) 가 아니라 실제 여러분의 앱인 거에요. (뭐 보이는 것이 실제다 이런거 같습니다) 그리고 Xcode 는 스위프트의 새로운 기능인 "dynamic replacement" 를 사용하여 여러분의 실시간 앱 안에서 편집한 코드를 즉시 교환할 수 있습니다. 

 

=> 기존의 방식은 Xcode 에서 시뮬레이터를 작동시켜서 앱의 동작을 확인하였는데, 이번 Xcode 11부터는 실시간으로 자신의 앱을 확인하게 되고 심지어는 편집까지 가능하게 만들것으로 보입니다..! 그 기능은 "dynamic replacement" 가 되겠네요.

 

- Previews.

 

  여러분은 이제 모든 SwiftUI의 뷰들의 하나 이상의 미리보기를 생성하여 샘플 데이터를 얻을 수 있고, 사용자가 아마도 볼 수 있는 큰 글꼴, 지역화, 다크 모드와 같은 거의 모든 것을 구성할 수 있어요. 미리보기는 모든 디바이스와 모든 방향에서 여러분의 UI 를 표시할 수도 있습니다.

 

=> 실시간으로 이제 자신의 작업을 확인할 수 있기 때문에, 이러한 미리보기의 기능을 크게 강화시킨 것으로 보입니다...! 여러 디바이스의 미리보기를 띄우는 것이 가능하기 때문에 예전에 시뮬레이터 하나씩 돌려가면서 테스트 하던거 생각하면 정말 장족의 발전이 아닐까 싶습니다.

 

 

---

 

 

 

흠 간단히 살펴보았는데, 역시나 이번 WWDC 에서 가장 인상적인 부분이 아닐 수 없네요...

다음 번에는 튜토리얼을 맛보면서 어떤 부분이 크게 달라졌는지 살펴보도록 하겠습니다.