2022 WWDC SwiftUI의 새로운 기능! [ iOS 16, Xcode 14 ]

본 게시글은 Anupam Chugh 님의 게시글을 번역 / 의역 한 자료 입니다.

목차

2022 WWDC

2022 WWDC 이벤트가 6월 7일 오전 2시에 시작했습니다. 이번 WWDC에서도 마찬가지로 SwiftUI 에 다양한 기능이 추가되었습니다. 새로운 NavigationStack, SwiftUI 전용 차트 라이브러리, 그리고 Grid layout 개선 등 많은 장점들이 추가되었습니다.

이제, iOS 16에서 SwiftUI의 4가지 새로운 기능에 대해 알아보도록 하겠습니다. 이 기능들은 iOS 앱의 프론트엔드 UI와 UX를 향상하는 데 주로 사용됩니다.

추가된 기능

Charts

Charts는 완전히 새로운 SwiftUI 전용 프레임워크입니다. 이제 SwiftUI를 사용하여 data visualization apps과 위젯을 만들 수 있게 되었습니다. 현재 Chart 프레임워크는 기본적으로 Bar, Area, Line, Point 및 Rectangle 차트를 지원합니다. donut과 pie는 없습니다. 그러나 프레임워크를 활용하여 사용자 정의를 구축할 수 있다고 생각합니다.

 

SwiftUI Chart 프레임워크를 사용하여 막대 차드를 만드는 방법에 대해 간단히 예제를 들어 알아보도록 하겠습니다.

Chart{
BarMark(x: .value("Name", ""))
}

막대 차트는 BarMark view를 사용하여 구성됩니다. 여기서 x 매개변수는 막대의 설명 이름과 표시 이름이라는 두 개의 인수를 취합니다. 마찬가지로 y 인수에는 막대 이름과 길이 인수가 필요합니다. 데이터를 뷰에 직접 전달하는 대신 SwiftUI는 Plottable 오브젝트(.value)에 데이터를 래핑 하도록 요구합니다.

위의 예제는 아주 기본적인 것이지만, 실제로는 데이터 구조를 사용하여 차트를 작성해야 합니다.

struct ChartValues: Identifiable {
    var name: String
    var value: Double
    var color: Color
    var id : String {name}
}

TIP

 

 

모든 막대를 고유하게 식별하려면, 축 중 하나의 값을 Indentifiable로 설정하는 것이 중요합니다.

import SwiftUI
import Charts

struct ChartValues: Identifiable {
    
    var name: String
    var value: Double
    var color: Color
    var id : String {name}
}

struct ContentView: View {
    
    var chartValues : [ChartValues] =
    [
        .init(name: "A", value: 50, color: .green),
        .init(name: "B", value: 100, color: .blue),
        .init(name: "C", value: 120, color: .orange),
        .init(name: "D", value: 150, color: .yellow),
        .init(name: "E", value: 200, color: .red)
    ]
    
    var body: some View {
        
        Chart {
            ForEach(chartValues){
                (chart) in

                BarMark(x: .value("S", chart.name), y: .value("S",chart.value))
                    .foregroundStyle(chart.color)
            }
        }
        .padding()
    }
}

.chartYAxis(.hidden) 및 .chartXAxis(.hidden) 수정자를 통해 축 그리드 선을 숨기거나 범례를 통해 더 많은 컨텍스트를 제공하여 차트를 추가로 사용자 지정할 수 있습니다.

 

또한 LineMark, AreaMark, PointMark, RectangleMark를 사용하여 여러 개의 차트를 한 뷰에 추가할 수 있습니다.

Gradients와 Shadows

linear gradient를 추가하는 것이 이전보다 쉬워졌습니다. 색상 뒤에 .gradient 수정자를 추가하기만 하면 됩니다.

 

또한, SwiftUI 4에서는 ShadowStyle을 사용하여 내부 그림자 및 그림자에 대한 기본 지원을 제공합니다.

Circle().fill(.red.gradient.shadow(.inner(radius: 10)))
Circle().fill(.red.gradient.shadow(.drop(color: .black, radius: 10)))

위 시뮬레이터에서 제일 하단에 있는 아이콘은 내부 그림자 효과가 적용되어있는 아이콘입니다.

ZStack{
                    
    Circle().fill(.red.gradient.shadow(.drop(color: .black, radius: 10)).shadow(.inner(radius: 10)))
        .frame(width: 150, height: 150)

    Image(systemName: "swift")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 75, height: 75)
                    
}

Customizable Bottom Sheets

iOS 15에서 Apple은 UIKit용 UISheetPresentationController.Detent를 도입했습니다.

 

그리고 iOS 16에서는 PresentationDetents를 사용하여 사용자 지정 하단 시트를 SwiftUI에서 사용할 수 있습니다.

.presentationDetents([.medium, .large,])
.presentationDetents([.fraction(0.2), .height(100)])

Share Links

ShareLinks를 사용하여 다음과 같이 기본 공유 시트 인터페이스를 열 수 있습니다.

struct ContentView: View {
   
  private let shareItem = URL(string: "https://www.apple.com")!  var body: some View {
    ShareLink(item: shareItem)
  }
}

기본적으로 ShareLink는 "공유" 버튼과 아이콘이 함께 표시됩니다.  다른 아이콘과 레이블을 포함하도록 사용자 정의할 수 도 있습니다.

struct ShareLinkViews: View {
    
    let link = URL(string: "https://seons-dev.tistory.com/")!
    var body: some View {
        VStack(spacing: 10) {
            ShareLink(item: link)
            ShareLink(item: link) {
                Text("Share Without Icon")
                
            }
            
            ShareLink(item: link) {
                    Label("Share With Custom Icon", systemImage: "arrow.up")
            }
            .presentationDetents([.medium])
            
            ShareLink(item: link) {
                Button("Button Doesn't Work") {}
            }
        }
    }

참고로, 버튼에 ShareLink를 래핑 하는 것은 작동하지 않습니다. (ShareLink가 버튼 자체이기 때문일 것으로 추정)

또한 기본적으로 ShareLink는 full-sheet bottom sheet를 표시합니다. 하지만 이것도 PresentationDetents를 사용하여 하단 시트와 똑같이 사용자 정의할 수 있습니다.

 

참고로, 작성 시 한 ShareLink에 대한 presentationDetents를 사용자 지정하면 계층 구조의 다른 뷰에도 반영됩니다.

Gauges

SwiftUI에서 ProgressView로 작업한 적이 있다면 이번에 추가된 Gauge가 너무 새롭다고 느껴지지 않을 수도 있습니다. 기본적으로 Gauge는 스테로이드에 대한 ProgressView입니다.

백분율 형식으로 값을 설정할 수 있는 ProgressView와 달리 Gauge를 사용하면 지정된 범위 내에서 값을 나타낼 수 있습니다.

또한 추가된 사용자 지정 기능으로 인해 앱 위젯 구축에 대한 강력한 경쟁자가 되었습니다.

Gauge(value: 50, in: 0...100) {
  Text("Gauge Name")
}
.gaugeStyle(.accessoryCircular)

Gauge에 대한 maximumValueLabel, minimumValueLabel 및 currentValueLabel을 추가로 사용자 정의하고 추가할 수 있습니다.

New Grids

앞으로, SwiftUI는 더 복잡한 레이아웃을 구성하기 위해 built-in Grid view를 제공합니다.

GridRows 및 gridCellColumn 수정자를 사용하여 그리드를 사용자 정의하는 것이 훨씬 쉽고 빠릅니다.

Grid {
          
      GridRow {
          Color.red
              .gridCellColumns(2)
          Grid{
              GridRow{
                  Color.orange
              }
              GridRow{
                  Color.black
              }
              GridRow{
                  Color.purple
              }
          }
      }

      GridRow {
          Color.green
          Color.blue
      }

      GridRow {
          Color.yellow
              .gridCellColumns(3)
      }

Multi Date Pickers

SwiftUI에서 선택기를 통해 날짜를 선택할 수 있게 되었습니다. iOS 16에 추가된 MultiDatePicker를 사용하면 됩니다.

ViewThatFits

ViewThatFits는 iOS 16에 도입된 새로운 뷰 유형입니다. 그리고 이름에서 알 수 있듯이 SwiftUI는 사용 가능한 공간에 가장 적합한 두 가지 뷰 중 하나를 자동으로 선택할 수 있습니다.

아래와 같이 다양한 화면 크기와 방향에 대해 다양한 뷰를 설정하는 매우 편리한 도구입니다.

AnyLayout

iOS 16용 SwiftUI는 하위 뷰의 상태를 잃지 않고 유형이 지워진 레이아웃 사이를 전환하는 구조체인 AnyLayout을 도입합니다. VStack 및 HStack에서 정상적으로 작동하지만, ZStack에서는 작동하지 않습니다.

ViewThatFits는 SwiftUI가 우리를 위해 보기를 선택하도록 하게 했줬지만, AnyLayout은 사용자 정의를 제어합니다.

 

transitions 및 geometry 효과를 사용하지 않고 transitions 효과를 만드는 게 더욱 쉬워졌습니다!

struct SwitchLayouts : View{
    
    @State private var switchStack: Bool = false
    
    var body: some View{

        let layout = switchStack ? AnyLayout(HStack()) : AnyLayout(VStack())
        
        VStack{
            
            Button {
                self.switchStack.toggle()
            } label: {
                Text("Switch")
            }

            layout {
                RoundedRectangle(cornerRadius: 20)
                    .fill(.orange)
                RoundedRectangle(cornerRadius: 20)
                    .fill(.blue)
            }
            .frame(width: 200, height: 200)
        }
        .padding()
        .animation(.default, value: self.switchStack)
    }
}

Variable SF Symbols 4

새로운 아이콘 외에도 SF Symbols 4에는 가변 기호도 도입되었습니다.

즉, 이제 심볼 색상을 백분율 값으로 동적으로 설정하여 진행률을 애니메이션 화하거나 표시할 수 있습니다.

Image(systemName: "wifi", variableValue: value)

마무리

이 기능 외에도 아래와 같이 다양한 기능들이 있습니다.

• Photo Picker
• SwiftUI 목록의 개선 사항(예를 들어, 더 이상 UITableView를 사용하지 않음)
• Search View control
• 사용자 정의 레이아웃을 구성하기 위한 새로운 레이아웃 프로토콜 등..
• Xcode 14부터 SwiftUI 뷰 자동 들여 쓰기 기능

---

오늘은 이렇게 2022 WWDC 에서 발표된 SwiftUI 의 새로운 기능을 iOS 16 및 Xcode 14에서 어떻게 사용할 수 있는지 간단하게 알아보았습니다.

 

읽어주셔서 감사합니다 🤟

 

10 SwiftUI Features for iOS 16