WidgetKit 알아보기

WidgetKit에 대해서 간단하게 알아보겠습니다.

Widget이란?

스마트폰의 홈 화면 또는 잠금 화면에 배치할 수 있는 작은 애플리케이션 창으로, 앱의 중요한 정보나 기능을 빠르게 확인하거나 접근할 수 있게 해줍니다

Widget을 사용하면?

• 유저 참여도 증가
• 빠른 정보 제공
• 개인화된 경험 제공
• 브랜드 인지도 향상
• 앱 기능 확장
• 사용자 인터페이스 간소화

좋은 위젯이란(Great Widget)?

• Glanceable : 한눈에 보여준다
• Relevant : 적절한 시점에 적절한 정보를 제공
• Personalization : 개인 맞춤화 되어 제공

Widget Types (WidgetFamily)

• systemSmall
  

• systemMedium
  

• systemLarge
  

• accesoryCircular
  

• accesoryRectangle
  

• accesoryInline
  

• systemExtraLarge(iPad Only)

Widget Components

일반적으로 4개의 컴포넌트를 가집니다.

컴포넌트 구현(Code)

Timeline entry : Date(Mandatory) & contents

import Foundation
import WidgetKit
struct HelloWidgetEntry: TimelineEntry {
  var date: Date
}

Timeline Provider : handling the process of updating a widget
Snapshot을 요청하는 방식

• hold array of timeline entry
• policy → 리프레시 정책
  .never: 새로운 타임라인 요청 X
  .atEnd: Timeline Entry가 없을때
  .after: 일정 시간마다 요청

import WidgetKit
struct HelloWidgetTimelineProvider: TimelineProvider {
  typealias Entry = HelloWidgetEntry
  func placeholder(in context: Context) -> HelloWidgetEntry {
    HelloWidgetEntry(date: Date())
  }
  func getSnapshot(in context: Context, completion: @escaping (HelloWidgetEntry) -> Void) {
    completion(HelloWidgetEntry(date: Date()))
  }
  func getTimeline(in context: Context, completion: @escaping (Timeline<HelloWidgetEntry>) -> Void) {
    completion(Timeline(entries: [HelloWidgetEntry(date: Date())], policy: .never))
  }
}

WidgetView: UI View

import SwiftUI
import WidgetKit
struct HelloWidgetView: View {
  var body: some View {
    ZStack {
      ContainerRelativeShape()
        .fill(Color.orange.gradient)
        .padding(10)
      VStack {
        Text("Hello")
          .font(.title3)
        Text("DevTechie")
          .font(.title2.bold())
          .foregroundStyle(.indigo.gradient)
      }
    }
  }
}

Widget: Configuration to determine static or configurable. + Identifier

• Configuration
  Static configuration: Not have user configurable properties (사용자 설정 X → ex: 활동량 위젯)
  Intent configuration: user select what to see - defined at SiriKit intent (사용자 설정 O → ex: 리마인더 위젯)

import WidgetKit
import SwiftUI
struct HelloStaticWidget: Widget {
  var body: some WidgetConfiguration {
    StaticConfiguration(kind: "com.kyle.helloStaticWidget", provider: HelloWidgetTimelineProvider(), content: { entry in
      HelloWidgetView()
    })
    .supportedFamilies([.systemSmall])
  }
}

Widget에 대해서 간단하게 알아봤습니다. 여러 용도로 사용할 수 있고 UX적으로도 유저들에게 노출하기에 좋은 기능입니다.