iOS개발01. SwiftUI 시작하기

January 06, 2021

본 글은 raywenderlich.comiOS & SwiftUI 강의를 요약 및 정리한 것이다.


SwiftUI vs UIKit

  • iOS 개발 IDE는 Xcode를 사용한다.
  • iOS Framework로는 기존의 UIKit과 최근에 출시한 SwiftUI가 있다.
  • SwiftUI는 iOS 13부터 지원하며, 2020년 12월 기준 최근 4년 간 도입된 기기의 98%, 전체 기기 90% 이상이 iOS 13 이상을 사용하고 있다.
    iOS 버전 점유율

    iOS 버전 점유율

  • 학습 방향은 SwiftUI를 우선적으로 습득하되, 이후 Legacy 코드를 다루기 위해 UIKit을 학습한다.

SwiftUI Views

  • 모든 화면 구성 요소를 View라고 부르며, 예로는 Text View, Slider View, Vertical Stack View 등이 있다.
  • 하나의 View는 다른 View들의 Container가 될 수 있다. 예컨대, Vertical Stack View는 다른 View를 세로 축으로 정렬하여 포함하는 container view이다.
  • SwiftUI를 사용하면 Xcode에서 그래픽 도구 프로그램을 다루듯 WYSIWYG 방식으로 View를 입력할 수 있다. 물론 기본적으로 코드로 입력도 가능하다.
  • Xcode의 코드 우측 부분에는 Preview가 출력되며, 코드를 통해 다른 비율의 Preview를 추가할 수 있다. 이를 활용하면 Landscape 모드를 함께 확인하며 개발을 진행할 수 있다.

    // ContentView.swift
    ...
    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      ContentView()
      ContentView().previewLayout(.fixed(width: 568, height: 320))
    }
    }
    ...

    SwiftUI의 Preview

    SwiftUI의 Preview


SwiftUI View Modifier

  • Modifier는 View의 스타일 수정을 담당한다.
  • Modifier를 실행할 경우 SwiftUI는 대상 View에 스타일을 적용한 새 View를 반환한다.
  • 여러 Modifer를 사용할 경우 이전 Modifier가 스타일을 적용하고 반환한 View를 대상으로 다음 Modifier의 스타일이 적용된다.

    Text("100")
    .opacity(0.5)
    .border(Color.red, width: 5)

    위 코드의 결과는 아래와 같다.

    SwiftUI Modifier 적용 결과 예시

    SwiftUI Modifier 적용 결과 예시

    코드가 실행된 순서는 다음과 같다.

    1. Text("100") // Text View를 생성
    2. .opacity(0.5) // 1번에서 생성한 Text View에 opacity 0.5를 적용한 새 View를 반환
    3. .border(Color.red, width: 5) // 2번이 반환한 View에서 border를 적용한 새 View를 반환
  • font-weight, text-align 등과 같은 CSS 속성도 .bold() , .multilineTextAlignment(.center) 와 같은 Modifier를 추가하면 된다.
  • 단, View에도 몇 가지 type이 있으며, 몇몇 Modifier는 특정 type의 View에만 적용할 수 있다. 예컨대, 자간을 설정할 수 있는 .kerning() Modifier의 경우 Text View에만 적용 가능하다.
  • font size의 경우 12 point 와 같이 고정 값을 설정할 수도 있지만, Apple이 제공하는 Dynamic Type Size 값을 사용하는 것이 유리하다.
  • iOS의 경우 앱 내에서 font size를 크게 또는 작게 할 수 있는 기능을 제공하는데, Dynamic Type Size를 사용했다면 이를 활용할 수 있다. (카카오톡 채팅 글자 크기 조절 기능을 떠올려보라.)
  • Dynamic Type Size는 여기에서 확인할 수 있다.
  • 예컨대, 13 point를 설정하고자 한다면 Footnote style을 선택하면 된다.

참고 예제 코드
//
//  ContentView.swift
//  Bullseye
//
//  Created by Jinsol on 2021/01/03.
//

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      Text("PUT THE BULLSEYE CLOSE AS YOU CAN TO")
        .bold()
        .kerning(2.0)
        .multilineTextAlignment(.center)
        .lineSpacing(4.0)
        .font(.footnote)
      Text("89")
      HStack {
        Text("1")
        Slider(value: .constant(50), in: 0.0...100.0)
        Text("100")
      }
      Button(action: {}) {
        Text("Hit me")
      }
      Text("100")
        .opacity(0.5)
        .border(Color.red, width: 5)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
    ContentView().previewLayout(.fixed(width: 568, height: 320))
  }
}```

Jinsol Kim

Front-end Developer. Busan, South Korea.

#React #ReactNative #Firebase and #Swift#ing

© 2021, Jinsol Kim