WidgetKit

WWDC의 iOS 파트에서 꽤 크게 소개된 WidgetKit이 있었죠..

Widget이 이제 애니메이션을 갖게 되었습니다.

다른 플랫폼으로의 확장은 덤이구요.

그런데 전 그 전의 내용도 아직 못봤거든요..

그래서 지금 시작합니다.

WidgetKit!

하지만 시작하자마자 큰 장벽을 만났습니다.

Widget은 오직 SwiftUI 로만 만들 수 있습니다…

그래도 작은 화면이니까… 한 번 해봐야겠어요..

How WidgetKit Works

애플은 위젯에 대해서 굉장히 제한적인 요소라는 생각을 가지고 있는 것 같습니다.

사용자는 홈 화면을 하루에 90회 정도 방문하지만, 그 시간은 굉장히 적다는 것을 강조하고 있네요.

그래서 Widget에는 로딩 인디케이터가 돌고 있는 상황이 없어야 한다 고 합니다.

WidgetKit은 백그라운드 익스텐션 입니다.

시간에 따라 화면들을 패키징하여 홈으로 전달해준다고 하는데요.. 이렇게 함으로써 앱을 실행하고, 데이터를 불러오고, 화면에 띄우는 일련의 과정들을 스킵합니다.

정말 위젯으로 표시될 화면을 뭉텅이로 가져오기만 하는 것이죠..

그래서 위젯을 개발하는데 있어 핵심적인 키워드는 “타임라인” 입니다.

위젯은 타임라인에 따라 동작합니다.

위젯은 타임라인에 미리 스케줄링된 대로 업데이트 될 수도 있고, 앱에서 요청하여 업데이트 될 수도 있습니다.

여기 달력 앱의 위젯이 있는데요, 이 경우에는 달력에 등록된 일정들에 따라 스케줄링을 할 수 있습니다.

각 일정이 다가오거나 끝난 시점에 위젯을 업데이트할 수 있는 것이죠.

그런데 사용자가 앱을 열고, 일정을 수정했다면요?

이럴 때는 앱에서 직접 요청하여 위젯을 업데이트 시킬 수 있는 것이죠. (정확히는 타임라인을 업데이트하는 것입니다.)

Widget Definition

실제로 위젯을 만들기 전에, 위젯을 정의해야합니다.

위젯은 네 가지로 정의할 수 있습니다: kind , configuration , supportedFamilies , placeholder 로요!

Kind

우선 kind 입니다.

위젯은 하나의 종류만 있지 않습니다.

같은 사이즈라도 여러개의 정보를 요약하여 보여주거나, 하나의 정보를 조금 더 자세하게 보여줄 수도 있죠.

Configuration

이렇게 분류된 각 종류(kind)의 위젯들은 어떤 Configuration 을 지원하는 지에 대한 정보도 담고 있습니다.

StaticConfiguration 과 IntentConfiguration , 이렇게 두 가지 Configuration이 있는데요, 아주 간단한 개념입니다!

StaticConfiguration 은 사실 Configuration이 없는 겁니다.

하나의 Configuration만을 사용하기 위해 이렇게 이름이 붙은 것 같아요.

별도의 설정이 필요 없는, 오직 하나의 고정된 종류의 데이터만을 보여줄 때 사용됩니다.

반대로 IntentConfiguration 은 설정을 통해 위젯이 보여주는 화면이 달라질 때 사용됩니다.

예시로는 “여러 종류의 리스트 중에서 어떤 종류를 위젯으로 보여줄 지 선택이 필요할 때” 가 있겠죠?

Supported Families

SupportedFamilies 는 지원하는 위젯의 크기 입니다.

기본으로는 세 종류의 크기를 모두 지원하는 것으로 되어있지만, 개발자가 선택할 수 있습니다.

Placeholder

Placeholder 도 간단합니다.

어떤 데이터도 들어가지 않은, 위젯이 어떤 형태인지만 표현하는 비어있는 View를 제공해주면 됩니다.

StatelessUI

위젯은 다음의 네 가지 원칙을 지켜야합니다.

사실 애플이 제한해두고 있기 때문에 어길 수도 없지만요?

1. 위젯은 작은 별도의 앱이 아니다. 앱에 진입시키기 위한 단편적인 정보를 제공할 뿐이다.
2. 위젯은 스크롤을 지원하지 않는다.
3. 위젯에는 움직이는 사진이나 비디오가 들어갈 수 없다.
4. 위젯에는 오직 탭 제스처만이 유효하다.

네 근데 WWDC2023에서 위 제한들 중 "움직이는 사진이나 비디오가 들어갈 수 없다"는 어느정도 허용이 됐습니다.

UI에 애니메이션을 추가할 수 있게 업데이트 되었거든요

위젯은 오직 앱의 특정 지점에 도달하기 위한 숏컷을 제공할 뿐이고, 이것은 URL API 를 활용해 구현된다고 하네요!

Views

위젯에는 세 가지 View가 필요합니다.

첫 번째는 placeholder 로 이미 다룬 내용이구요..

두 번째로 snapshot 이라는 화면이 필요합니다.

Widget Gallery와 같은 곳에서 빠르게 데이터를 불러와 사용할 수 있는 단일성의 화면입니다.

마지막으로는 timeline 입니다.

실제로 위젯을 홈 화면에 띄울 때 사용되는 화면입니다.

보통 snapshot과 timeline의 첫 화면은 동일한 화면으로 구성되는게 좋다고 하네요.

타임라인은 Light Mode와 Dark Mode일 때의 화면을 동시에 제공하여 시스템이 알아서 조정할 수 있도록 되어 있고, 한 번에 며칠동안의 View를 제공한는 것이 좋다고 합니다.

Reload

하지만 위젯도 좀 더 자주 업데이트 되어야 할 때가 있겠죠?

이럴 때는 reload 라는 개념을 사용합니다.

Reload가 실행되면 화면에 배치된 모든 위젯 에 대해서 시스템이 새로운 timeline을 제공 하도록 요청합니다.

자 코드로 한 번 살펴봅시다.

public protocol TimelineProvider {
  associatedType Entry: TimelineEntry

  typealias Context = TimelineProviderContext

  func snapshot(with context: Self.Context,
                completion: @escaping (Self.Entry) -> ())
  func timeline(with context: Self.Context,
                completion: @escaping (Timeline<Self.Entry>) -> ())
}    

코드로 봐도 잘 모르겠긴 한데요.. 🤔

Entry는 보통 Date 데이터가 들어간다고 하구요..

Context에는 environment 정보와 Entry를 요청한 시스템에 대한 정보가 들어온다고 합니다.

snapshot과 timeline은 말 그대로 이전에 살펴보았던 snapshot과 timeline 데이터를 제공받기 위한 함수입니다.

snapshot에는 단일 데이터가, timeline에는 여러 개의 데이터가 들어가겠죠?

public struct Provider: TimelineProvider {
  public func snapshot(with context: Context, 
                       completion: @escaping (SimpleEntry) -> ()) {
    let entry = SimpleEntry(date: Date())
    completion(entry)
  }
  public func timeline(with context: Context, 
                       completion: @escaping (Timeline<Entry>) -> ()) {
    let entry = SimpleEntry(date: Date())
    let timeline = Timeline(entries: [entry, entry], policy: .atEnd)
    completion(timeline)
  }
}

TimelineProvider를 채택하면 이런 형태의 모습일겁니다.

여기서 주목할 점은 policy: .atEnd 부분입니다.

여기서 policy란 reload가 되는 시점을 정하는 policy라고 볼 수 있는데요,

atEnd 로 제공한 timeline이 끝날 때 reload를 할 수 있고, after(date: Date)로 일정 시간이 됐을 때 reload하거나 never로 요청하지 않을 수 있습니다.

그래서 reload는 대체 언제 되느냐?

자연적으로 발생하는 reload는 아래의 규칙에 따라 이루어집니다.

1. ReloadPolicy를 따라 되거나
2. 더 자주 화면에 등장하는 위젯에 더 많은 reload를 제공하거나
3. 기기 환경이 바뀔 때 시스템이 강제로 reload합니다.

앱이 요청하는 reload는 Background Notification 이 있거나, 사용자가 데이터를 변경 했을 때 이루어집니다.

두 경우 모두 WidgetCenter의 reloadTimelines(ofKind:)를 사용하면 된다고 하네요.

• reloadTimelines(ofKind:)
• reloadAllTimelines
• getCurrentConfigurations(completion:)

WidgetKit은 이렇게 세가지 API를 제공하고 있는 것을 알아두고 넘어갑시다!

그런데 위젯을 사용할 때, 네트워크 통신을 통해 새로운 데이터를 받아와야할 때도 있겠죠?

그럴 때는 background URLSessions를 사용합니다.

하지만! 위젯은 절대절대 실시간 데이터를 반영하기 위한 기능이 아니기 때문에 그 빈도를 잘 설정해달라고 합니다.

그래서 정리해보면.. 위젯의 Reload는 Background Networking 을 통해 이루어지거나, Timeline 에 의해 이루어지거나 앱의 요청 에 따라 이루어질 수 있겠습니다.

Personalization & Intelligence

앞에서 위젯은 여러 설정에 따라 데이터를 다르게 보여줄 수 있다고 했었습니다.

Personalization

이 기능을 사용하려면 App Intent 라는 것을 사용해야 합니다.

Intent Framework는 여러개의 파라미터로 이루어져 있습니다.

각 파라미터는 유저에게 묻는 일종의 질문이라고 생각하면 됩니다.

예를 들어 주식 앱의 경우 유저가 위젯을 터치하여 어떤 주식을 표시할 것인지를 선택할 수 있겠죠.

이 때, App Intent를 사용해 유저가 앱에서 지정해둔 주식의 리스트를 위젯으로 받아올 수 있습니다.

만약 유저가 원하는 옵션이 리스트에 없다면?

Intents는 dynamic options capability 기능을 제공합니다.

유저가 종목을 검색하면, 시스템이 주식 Intents Extension을 실행하여 리스트를 새롭게 받아올 수 있습니다.

이 부분은 따로 더 공부가 필요해보이네요…

SiriKit과 관련된 내용이라고 합니다..

Intent를 사용하면 이전의 코드도 다음과 같이 바꿔주어야 합니다.

@main
public struct SampleWidget: Widget {
  private let kind: String = "SampleWidget"

  public var body: some WidgetConfiguration {
    IntentConfiguration(kind: kind,
                        intent: ConfigurationIntent.self
                        provider: Provider(),
                        placeholder: PlaceholderView()) { entry in
                          SampleWidgetEntryView(entry: entry)
                        }
    .configurationDisplayName("My Widget")
    .description("This is an example widget.")
  }
}

StaticConfiguration 대신 IntentConfiguration 을 사용해주고 (아.. 이래서 이름이 IntentCongiruation이였구나…)

public struct Provider: IntentTimelineProvider {
  public func timeline(for configuration: ConfigurationIntent, with context: Context, 
                       completion: @escaping (Timeline<Entry>) -> ()) {
    let entry = SimpleEntry(date: Date(), configuration: configuration)

    // generate a timeline based on the values of the Intent

    completion(timeline)
  }
}

TimelineProvider도 IntentTimelineProvider로 업데이트해서 제공해주어야 합니다.

IntentHandler를 사용할 때의 주의점!

DynamicIntent를 구성하고, IntentHandler를 구현할 때 헤맨 곳이 있었는데요..

DynamicSummonerSelectionIntentHandler 프로토콜을 준수하려 했을 때입니다.

해당 프로토콜을 채택하고, stub를 추가하면 XCode가 두 가지 메서드를 추가해줍니다.

func provideSummonerOptionsCollection(for intent: DynamicSummonerSelectionIntent, with completion: @escaping (INObjectCollection<Summoner>?, Error?) -> Void) {
		//
}

func provideSummonerOptionsCollection(for intent: DynamicSummonerSelectionIntent) async throws -> INObjectCollection<Summoner> {
		//
}

저는 처음에 “@escaping 클로저 방식과 async/await의 두 가지 방식을 모두 제공해줘야하는구나!” 라고 생각하고 작업을 했습니다.

그러면 이런 에러가 뜰겁니다..

Method with Objective-C selector conflicts with method with the same Objective-C selector.

대체 어디서 Conflict가 나는거지? 라는 의문이 들었지만.. 원인은 간단했습니다.

Handler에 들어가서 내용을 잘 살펴보면.. 두 프로토콜이 대응되는 Obj-C 함수가 같습니다..

그래서 같은 함수라는 에러를 내고 있는 것이죠..

그렇다면 해결법은…?

두 함수 중 하나만 골라서 사용해주시면 됩니다… 🥲

Intelligence

자 그런데 애플이 제공하는 기본 위젯 중 “스마트 스택” 이라는 놈이 있죠?

iOS가 유저의 패턴과 환경을 분석하여 상황에 가장 맞는 위젯을 선택하여 보여주는 기능입니다.

어떻게 내 위젯이 스마트 스택에 뜰 수 있게 하느냐? 하면 두가지 방법이 있습니다.

1. Shortcuts Donate

유저가 앱 내에서 활동을 해서 Shortcuts로 donate를 하게 되면, 같은 INIntent를 사용하는 위젯이 스마트 스택의 위로 올 수 있게 됩니다.

2. TimelineEntryRelevance API

어떤 시간이 다가오고, 내 앱의 entry가 가장 중요한 시점이라고 생각되면, 시스템에게 score와 duration을 제공하여 스마트 스택의 위로 위치하게 유도할 수 있습니다.

Relevance는 TimelineEntryRelevance(score:)로 사용할 수 있습니다.

여기서 score라는 파라미터가 중요한데, 저희가 원하는 어떤 상수를 넣어주면 됩니다.

이 상수의 범위는 정해져있지 않으며, 저희가 전달한 각 상수들과의 상대적인 차이에 따라서 알아서 우선순위가 정해집니다.