Introducing SwiftUI: Building Your First App 정리 - WWDC2019

Introducing SwiftUI: Building Your First App - WWDC 2019 - Videos - Apple Developer

Introducing SwiftUI: Building Your First App - WWDC 2019 - Videos - Apple Developer

 

아래 내용은 WWDC2019 영상과 SwiftUI 소개 글을 조합하여 정리함
(WWDC 영상 가운데 나오는 SwiftUI의 매커니즘은 바로 이해하기가 어려웠던 부분인지라 해당 내용을 제외한 부분만 정리하기로 한다.)

 

 

SwiftUI: 더 우수한 앱. 더 적은 코드.

SwiftUI는 Swift의 성능을 바탕으로 모든 Apple 플랫폼에서 사용자 인터페이스를 구축할 수 있는 혁신적이고 간소화된 방법
유동적 글자 크기 조절, 다크 모드, 현지화 및 손쉬운 사용 자동 지원

SwiftUI 공식문서 - Xcode - SwiftUI- Apple Developer

애플의 SwiftUI 튜토리얼 - Apple Developer Documentation

 

Why using SwiftUI?

• Storyboard 를 사용하면 비주얼 편집기를 사용하거나 코드로 UI를 작성하는 선택을 해야 했다.
• 선택을 한 후에 다른 방법으로 하려면 처음부터 다시 시작해야 하는 단점 존재함
• 하지만 SwiftUI를 사용하면 위 문제를 해결할 수 있다!

SwiftUI 장점

• 코드를 수정하는 대로 미리보기(Canvas) 에서 확인할 수 있다.

• 미리보기에서 UI를 선택하면 코드에 Highlighting이 된다.

• 뷰가 매우 가벼워 로직을 캡슐화하거나 분리하기 위한 추가 뷰를 생성하는 데 걱정하지 않아도 된다

• 자체 테스트 데이터를 사용할 수 있다

• 미리보기에서 재생 버튼을 클릭하면 라이브 모드로 전환 (시뮬레이터)

• 여러 개의 미리보기를 둘 수 있다

  • localization에 따른 정렬 (left-to-right / right-to-left) 을 확인할 때
  • dark mode / light mode 에서 화면을 확인할 때 등 상황에서 유용

 

SwiftUI의 주요 설계 원칙 (SwiftUI's key design principles)

1. Declarative Syntax (선언적 구문)

선언형 프로그래밍은 프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 무엇과 같은지를 설명하는 경우에 "선언형"이라고 한다

HTML은 선언형 프로그래밍 언어라고 할 수 있는데 (HTML이 PL이냐 아니냐는 일단 무시하고)
<img src = "image.jpg"/> 라는 구문을 작성하면 그림을 화면에 나타나는 것을 설명하는 구문으로, 어떻게 그림을 화면에 표시하는 것인지 설명하는 구문이 아니다.

• SwiftUI는 선언적 구문을 사용하므로 사용자 인터페이스의 기능을 명시하기만 하면 된다.

  struct LandmarkRow: View {
    var landmark: Landmark
  
    var body: some View {
        HStack {  // 가로형 스택 추가
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
            Text(landmark.name)
            Spacer()  // 동적 space 추가
  
            if landmark.isFavorite {
                Image(systemName: "star.fill")  // 이미지를 추가해라
                    .imageScale(.medium)
                    .foregroundColor(.yellow)
            }
        }
    }
  }

   

2. Compositional Pieces

We saw the compositional pieces and how you can combine together pieces of content, modifiers and containers to build exactly the UI you're looking for.

• content, modifiers, containers 등의 조각을 조합하여 원하는 UI를 만들 수 있다.

3. Automatic Behavior

We saw all the automatic behaviors you get by saying less and letting the framework take care of more.

• SwiftUI는 프레임워크가 알아서 처리해준다.
  • Storyboard나 코드로 UI를 구성할 때는 사각형 도형에 곡선 테두리 하나 넣는 것에도 많은 코드가 들어갔지만 SwiftUI 에서는 cornerRadius() 수정자 하나면 손 쉽게 곡선 테두리를 넣을 수 있다.

4. Consistent State (일관된 상태)

We talked about how SwiftUI keeps your views in a consistent state so you never end up with a view missing or in the wrong place.

• SwiftUI는 상태를 SwiftUI가 직접 관리하기 때문에 기존에 상태를 개발자가 직접 관리할 때 발생할 수 있는 실수 (뷰 없어짐, 잘못된 위치) 등을 방지할 수 있다.
  • 그래서 SwiftUI 매커니즘을 설명할 때 코드나 Storyboard로 작업할 때는 상태가 어떻게 들어오거나 실행될 지 모르기 때문에 기능이 추가됨에 따라 버그가 발생할 비율도 증가하지만, SwiftUI를 사용하면 입구가 하나이므로 버그도 발생하지 않을거란 설명을 했다. (영상 23:18초~)