[SwiftUI] 간단하게 Widget 알아보기

안녕하세요 :)

오늘은 iOS가 14로 업데이트가 된 후 주목받게 된 Widget에 대해 알아볼게요.

(iOS 14+에서만 사용할 수 있으며, SwiftUI로만 작성이 가능합니다.)

 

간단한 예제를 만들면서 알아보도록 하겠습니다.

 

프로젝트 설정

우선 프로젝트를 만들어봤습니다. 그 후에

위의 과정으로 들어가서 Widget Extension을 추가해줄게요.

Next 버튼을 누르면 이름을 설정하라고 나오는데 저는 WidgetEx로 설정했습니다.

scheme도 activate 눌러주세요!

 

Widget Extension도 적용해 주었으니 프로젝트를 빌드해서 살펴보도록 할게요.

 

 

빌드해서 Edit > + 버튼 > 내 앱 찾기 를 눌러주면 하단에 방금 만든 프로젝트가 뜨는 것을 볼 수 있습니다.

아무것도 설정하지 않았기 때문에 기본 설정 그대로 위젯이 만들어졌습니다.

 

기본으로 생성된 WidgetEx.swift 파일을 보면 굉장히 길고 어려운 코드가 있습니다.

하나씩 보도록 할게요!

Widget

제가 만든 WidgetEx라는 타입이 Widget 프로토콜을 채택하고 있습니다.

Widget 프로토콜은 Widget의 컨텐츠를 나타내는 configuration 타입입니다.

 

body 프로퍼티는 required 프로퍼티이고, 이 body는 Widge의 content를 나타낸다고 하네요.

body는 WidgetConfiguration타입입니다.

 

WidgetConfiguration

WidgetConfiguration 역시 프로토콜입니다.

Widget content를 나타내는 타입이라고 생각하면 될 것 같습니다.

 

처음 기본으로 생성된 WidgetEx.swift 파일에 보면

위와 같은 부분이 있습니다.

음..매우 복잡해 보이네요.

 

일단 Widgt에서 사용할 수 있는 Configuration은 StaticConfiguration, IntentConfiguration이 있습니다.

 

- StaticConfiguration : 사용자가 구성할 수 있는 프로퍼티가 없는 위젯

ex) 활동 위젯

- IntentConfiguration : 사용자가 구성할 수 있는 프로퍼티가 있는 위젯

ex) 미리 알림 위젯

 

처음 Widget Extension을 추가할 때 Include Configuration Intent 체크박스가 있습니다.

이 체크박스를 체크하면 IntentConfiguration을 사용하고, 체크하지 않으면 StaticConfiguration을 사용하게 됩니다.

 

저는 체크한 상태로 만들어서 IntentConfiguration이 되었는데 위와 같이 StaticConfiguration으로 변경해주었습니다.

 

StaticConfiguration 생성자

StaticConfiguration의 생성자로는 kind, provider, content를 넘겨주고 있습니다.

 

kind : 모든 Widget에는 고유한 문자열이 존재하는데, 이 문자열을 가지고 위젯을 식별할 수 있습니다.

지금은 이렇게 정의되어 있습니다. 이것을 만들면 기본적으로 target 이름으로 생성해주는 것 같습니다.

앱의 Bundle Identifier를 사용해서 unique 하게 사용하는 경우도 있습니다.

 

 

provider : 위젯을 새로고침 할 타임라인을 결정하는 객체입니다.

 

위젯 업데이트를 위한 미래 날짜를 주면 시스템이 새로 고침 프로세스를 최적화한다고 합니다.

기본 생성된 파일을 보면 제일 상단에 위와 같은 부분이 있는데, 생성자에 이것을 인스턴스 화해서 넣어준 것 같습니다.

 

 

content : 이 클로저에는 WidgetKit이 Widget을 렌더링 하는데 필요한 SwiftUI View가 포함되어 있습니다.

WidgetKit은 이 클로저를 호출할 때, Widget Provider의 getSnapshot(in:completion:) 또는 getTimeline(in:completion:) 메소드로

타임라인 항목들을 전달한다고 합니다.

위의 WidgetExampleEntryView를 클로저 안에 넣어준 것을 확인할 수 있습니다.

 

 

Widget Modifier

Configuration 밑에 modifiere들이 코딩되어있는데, 이것들을 살펴보겠습니다.

 

- configurationDisplayName : 사용자가 위젯을 추가/편집할 때 위젯에 표시되는 이름을 설정하는 메소드입니다.

- description : 사용자가 위젯을 추가/편집할 때 위젯에 표시되는 설명을 설정하는 메소드입니다.

 

위젯을 추가할 때 뜨는 My Widget이 configurationDisplayName이고,

This is an example widget이 description입니다.

 

- supportedFamilies : 위젯이 지원하는 크기를 설정할 수 있습니다.

supportedFamilies 안에는 WidgetFamily 타입의 배열이 들어가게 되는데,

이 WidgetFamily는 enum 타입입니다.

 

위젯의 사이즈는 3가지입니다.

systemSmall, systemMedium, systemLarge가 있는데요.

이 supportedFamilies 안에 systemSmall만 넣어주면 위젯 사이즈가 제일 작은 사이즈 하나로만 설정 가능합니다.

 

EntryView

위의 EntryView를 살펴보겠습니다.

이 구조체는 Widget의 content를 보여주는 SwiftUI View입니다.

 

이 EntryView에서 WidgetFamily에 따라 분기가 가능합니다.

struct WidgetExEntryView : View {
    @Environment(\.widgetFamily) private var widgetFamily
    
    var entry: Provider.Entry

    var body: some View {
        switch widgetFamily {
        case .systemSmall:
            Text("systemSmall")
        case .systemMedium:
            Text("systemMedium")
        case .systemLarge:
            Text("systemLarge")
        @unknown default:
            Text("unknown")
        }
    }
}

 

 

분기 처리 코드를 작성해주면 위와 같이 분기 처리가 됩니다!!

 

마무리

오늘은 정말 간단하게 Widget에 대해서 알아봤는데요.

다음 포스팅은 Widget View를 꾸며서 오겠습니다!!

 

오늘도 포스팅 읽어주셔서 감사합니다 🤗