WidgetKit 기초

WidgetKit 기초

위젯은 시스템 전반에서 앱의 중요한 콘텐츠를 강조하여 사용자에게 또 다른 참여 기회를 제공합니다. 위젯의 다양한 유형을 알아보고 기억에 남게 만드는 특성을 살펴보세요. 어떻게 위젯을 생성하고 최신 상태로 유지하며, 앱 인텐트와 동적 스타일링을 통해 사용자가 위젯을 맞춤 설정할 수 있는 다양한 방법을 제공할 수 있는지 알아보세요.

챕터
- 0:01 - Introduction
- 1:03 - Fundamentals
- 13:15 - Integrate with your app
- 17:04 - Adapt with the system
리소스
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC26
- 실시간 현황 기초
WWDC25
- 위젯의 새로운 기능
WWDC23
- 위젯 구현하기
- App Intent 개선 사항 살펴보기
WWDC21
- 훌륭한 위젯의 원리
안녕하세요, Jonathan Long입니다 시스템 경험 팀 엔지니어입니다 위젯을 좋아하는 분들이 많습니다 여러분의 위젯은 사람들이 자주 찾는 편리한 곳에 유용한 콘텐츠를 제공합니다 위젯은 다양한 Apple 플랫폼에서 사용할 수 있습니다 iOS, iPadOS, watchOS, visionOS, macOS 등이 있습니다 위젯은 시스템 전반에 걸쳐 앱의 영향력을 확장하여 사람들이 훌륭한 앱을 더 많이 경험할 수 있게 해줍니다 위젯을 살펴보고 WidgetKit의 기초를 알아보겠습니다 첫 위젯 빌드 방법과 최신 상태 유지 방법도 다룹니다 오늘은 위젯 기본 개념과 첫 번째 위젯 빌드를 다룹니다 WidgetKit이 앱과 위젯 경험을 더 잘 통합하는 방법도 알아봅니다 시스템 환경이 바뀔 때 위젯이 어떻게 적응하는지도 살펴봅니다 색조 환경으로 바뀌는 경우처럼요 먼저 기본 개념부터 시작합니다 위젯이란 무엇인지부터요 위젯을 기억에 남게 하는 세 가지 특성이 있습니다 위젯은 한눈에 파악할 수 있습니다 잠깐만 봐도 위젯을 이해할 수 있어야 합니다 예를 들어, 날씨 앱은 현재 예보에 대한 충분한 정보를 바로 보여줍니다 하루를 준비하는 데 도움이 되도록요 위젯은 관련성이 높습니다 위젯 콘텐츠는 시간, 개인 패턴, 위치에 맞게 표시되어야 합니다 캘린더 위젯은 현재 시간의 다음 이벤트를 보여주고 하루 종일 업데이트됩니다 위젯은 개인화할 수 있습니다 저에게 중요한 콘텐츠로 설정할 수 있어요 예를 들어 이 사진 추억 위젯은 가족 캠프에서의 소중한 추억을 딸들과 함께한 모습으로 보여줍니다 WidgetKit과 SwiftUI를 사용하면 한눈에 파악 가능하고 관련성 높은 개인화된 위젯을 앱에 제공할 수 있습니다
저는 독서를 더 많이 하기 위해 독서 모임 앱을 만들었습니다 이 앱으로 읽은 양과 완독한 책을 추적하고 다음 독서 모임 전에 완독할 수 있도록 일정도 만들 수 있습니다 홈 화면에서 바로 데이터를 볼 수 있게 위젯도 몇 가지 만들었습니다 첫 번째 위젯은 독서 목표 위젯입니다 하루 종일 독서하도록 권장해 줍니다 두 번째는 독서 기록 위젯입니다 현재 책의 진행 상황을 추적하는 데 도움을 줍니다 세 번째 위젯은 일정을 만들어 제때 책을 완독하게 해줍니다 이 세션에서는 각 위젯의 주요 결정 사항을 다룹니다 위젯 제작에 도움이 될 내용이에요 먼저 앱이 시스템에 위젯을 어떻게 제공하는지 살펴보겠습니다 SwiftUI나 UIKit으로 만든 앱 모두 위젯을 가질 수 있으며 위젯은 SwiftUI로 빌드됩니다 앱은 위젯 익스텐션을 통해 시스템에 위젯을 제공합니다 이 익스텐션은 앱과 별도의 프로세스로 실행됩니다 위젯 익스텐션이 별도의 프로세스로 실행되기 때문에 공유 컨테이너를 사용해야 합니다 앱 그룹의 공유 컨테이너를 통해 앱 데이터를 위젯 익스텐션에 전달합니다 공유 데이터베이스나 User Defaults 같은 것을 사용할 수 있습니다 위젯 익스텐션은 위젯에만 집중합니다 시스템과 WidgetKit이 익스텐션과 상호작용하여 위젯에 필요한 데이터를 가져옵니다 WidgetKit이 익스텐션에 콘텐츠를 요청합니다 이 콘텐츠를 타임라인이라고 합니다
타임라인은 여러 타임라인 항목으로 구성됩니다 WidgetKit은 이 항목들을 위젯 뷰의 데이터로 제공합니다 생성된 뷰는 보관됩니다 시스템은 관련 시간에 이를 표시합니다 위젯 익스텐션이 시스템에 위젯을 노출하고 타임라인 콘텐츠를 제공합니다 타임라인은 일련의 항목들이며 각 항목은 필요한 데이터를 담고 있습니다 특정 시점에 위젯 뷰를 렌더링하는 데 사용됩니다 이제 독서 목표 위젯의 코드를 살펴보겠습니다 이 모든 요소를 연결하는 코드입니다
위젯 익스텐션의 새 타깃을 생성할 때 Xcode가 위젯을 자동으로 생성합니다 간단한 위젯의 경우 이 구현으로 필요한 것의 대부분이 갖춰집니다 WidgetConfiguration을 제공하는 body부터 시작합니다
위젯 설정에는 두 가지 유형이 있습니다 AppIntentConfiguration과 StaticConfiguration입니다 AppIntentConfiguration은 사용자가 위젯을 설정할 수 있을 때 사용합니다 저의 위젯은 현재 읽고 있는 책으로 자동 설정될 것이라서 가장 간단한 StaticConfiguration을 사용합니다 StaticConfiguration에는 몇 가지 매개변수가 필요합니다 kind는 이 특정 위젯 유형의 고유 식별자입니다 위젯의 타임라인 항목을 생성하는 타임라인 프로바이더 그리고 타임라인 항목을 받아 View를 반환하는 클로저입니다 클로저에서 제공된 타임라인 항목에 대한 SwiftUI 뷰를 반환합니다 독서 모임 앱이 SwiftUI로 만들어져서 이미 뷰가 있습니다 DailyReadingGoalView가 위젯에 딱 필요한 것입니다 배경을 지정하기 위해 containerBackground 수정자를 사용합니다 이 수정자는 어떤 뷰가 위젯의 배경인지 식별합니다
색상 또는 투명한 틴트로 기기를 꾸미면 시스템이 지정된 배경 뷰를 교체할 수 있습니다 유리 소재 뷰로요 독서 목표 위젯의 뷰 부분이 구현되었습니다 타임라인 프로바이더의 역할과 타임라인이 위젯의 관련성을 유지하는 방법을 살펴보겠습니다
타임라인 프로바이더는 항목을 제공합니다 위젯의 세 가지 별도 상태를 나타내기 위해서입니다 Snapshot, Placeholder, 그리고 Timeline입니다
Snapshot은 위젯의 현실적인 미리보기입니다 위젯 갤러리에서 사람들이 보는 것이에요 위젯이 강한 첫인상을 남길 기회입니다 앱을 시작하기 전에는 데이터가 없어서 인기 도서를 소개합니다 Atomic Habits와 기본 메시지로요 위젯이 최상의 모습일 때를 상상할 수 있도록 홈 화면에 추가하기 전에 미리 볼 수 있게 합니다 Placeholder는 위젯이 표시할 콘텐츠가 없을 때 시스템이 보여주는 대체 뷰입니다 처음으로 타임라인을 로딩할 때처럼요 즉시 표시되어야 하므로 Placeholder 가져오기는 동기적이어야 합니다 디스크나 네트워크에서 데이터를 필요로 하지 않는 Placeholder를 제공하세요
독서 목표 위젯에는 SwiftUI의 redacted 수정자를 사용합니다 이는 View의 단순화된 버전을 만들어 줍니다
타임라인 항목은 특정 시점에 위젯이 보여주는 것입니다 지금 이 순간이 될 수도 있고 미래의 어느 시점이 될 수도 있습니다 타임라인 프로바이더는 이러한 항목들의 컬렉션을 생성하고 시스템은 각 항목을 해당 시간에 렌더링합니다
독서 목표 위젯의 타임라인 항목에는 위젯이 필요한 모든 정보가 있습니다 이 뷰를 렌더링하는 데 필요한 정보요 동기 부여 메시지, 읽은 페이지, 제목, 표지 이름입니다
이 데이터의 대부분은 위젯에서 동일할 것입니다 동기 부여 메시지를 제외하고요 메시지는 하루 동안 다양한 시간에 업데이트됩니다 타임라인에 대해 이야기할 때 변경되는 메시지만 보여드리겠습니다 시간이 지나면서 바뀌는 메시지요 타임라인은 위젯이 최신 상태를 유지하는 데 핵심적인 역할을 합니다 각 타임라인 항목은 위젯 뷰를 렌더링하는 데 필요한 데이터를 제공합니다 이 타임라인은 현재 두 항목을 보여줍니다 오전 9시와 오전 11시 30분입니다
독서 목표 위젯에 필요한 핵심 데이터는 하루 종일 업데이트되는 동기 부여 메시지입니다 WidgetKit이 타임라인을 진행하면서요
이 타임라인 항목들은 위젯에 제공되어 관련 뷰를 생성합니다 특정 시간의 해당 항목에 맞는 뷰를요 최신 콘텐츠로 위젯의 관련성을 유지합니다
어느 시점에서 타임라인은 더 많은 항목으로 새로 고침되어야 합니다 이를 타임라인 리로드라고 합니다 타임라인은 리로드 정책을 통해 리로드 동작을 지정합니다 리로드 정책에는 세 가지 옵션이 있습니다 atEnd, afterDate, 그리고 never입니다 각 정책과 언제 어떤 것을 선택하는지 알아보겠습니다
atEnd 정책은 타임라인이 리로드되어야 함을 나타냅니다 모든 타임라인 항목이 소진되었을 때요
하루 종일 새 타임라인 항목이 렌더링됩니다
오후 1시에 마지막 항목이 표시되면 시스템이 리로드를 요청합니다 위젯 익스텐션에 더 많은 콘텐츠를 요청하면서요
위젯 익스텐션은 더 많은 항목이 있는 새 타임라인을 제공합니다 독서 목표 위젯은 다양한 시간에 동기 부여 메시지를 업데이트합니다 하루 종일이요 atEnd 정책이 적합한 이유는 이 위젯이 일련의 항목을 제공하기 때문입니다 마지막 시간이 고정되어 있지 않고 타임라인이 소진되면 리로드가 필요하기 때문입니다
afterDate 정책을 사용하면 위젯에 원하는 특정 날짜를 지정할 수 있습니다 리로드가 필요한 날짜를요 이것들은 독서 일정 위젯을 구동하는 다른 타임라인 항목들입니다 전체 데이터는 생략하고 챕터 정보만 포함했습니다 시간이 지나면서 변하는 것들이요 독서 일정 위젯은 두 개의 타임라인 항목을 제공하여 읽어야 할 내용을 나타냅니다 오늘과 내일 읽어야 할 것이요 위젯은 하루 끝에 리로드되어야 합니다 이후 일정을 다시 계산하기 위해서요 이것은 하루 끝을 날짜로 지정한 afterDate 리로드 정책을 사용합니다
현재 시간이 이 날짜에 도달하면 익스텐션이 리로드됩니다 새 타임라인을 요청받으면서요
새 타임라인은 화요일과 수요일의 항목을 제공합니다 재계산된 일정과 함께요 afterDate 정책은 독서 일정 위젯처럼 위젯이 리로드될 특정 시간을 알 때 유용합니다
마지막으로 never 리로드 정책입니다 이름에서 알 수 있듯이 위젯이 자동으로 리로드되지 않습니다 자동 리로드가 필요하지 않을 때 사용하세요 독서 기록 위젯이 좋은 예입니다 앱이나 위젯과 상호작용할 때만 새로 고침이 필요합니다 리로드가 필요할 때 명시적으로 호출할 수 있습니다 WidgetCenter의 리로드 API를 사용하거나 푸시 알림을 전송하는 방법으로요 리로드 정책에 대해 더 알아보려면 WWDC21의 "Principles of great widgets"를 참고하세요
몇 가지 모범 사례가 있습니다 타임라인 빌드와 리로드를 고려할 때 기억해 두세요
가능하면 여러 타임라인 항목을 제공하세요 시스템이 항상 위젯에 표시할 콘텐츠를 가질 수 있도록 해줍니다
WidgetKit은 하루 종일 배터리를 고려하여 만들어졌습니다 따라서 각 위젯에는 업데이트 예산이 주어집니다 예산은 사용자의 시청 습관에 크게 영향을 받습니다 그리고 하루 종일 업데이트됩니다 업데이트 빈도는 다를 수 있으며 시스템은 충분히 스마트합니다 위젯에 맞게 리로드를 적절히 조정합니다 앱이 포그라운드에 있을 때 잦은 리로드는 제한될 수 있다는 점을 참고하세요 위젯 데이터가 변경되었을 수 있다면 앱이 백그라운드로 전환될 때 마지막으로 리로드를 호출하는 것이 보통 좋은 방법입니다 일부 콘텐츠는 시작과 종료 날짜가 정해진 일시적인 것이고 더 잦은 업데이트가 필요하고 스포츠 이벤트처럼 알림 기능이 필요한 경우도 있습니다 이런 콘텐츠라면 Live Activity 빌드를 고려해 보세요 Live Activity에 대해 더 알아보려면 "Live Activities essentials"를 참고하세요 WWDC 26의 세션입니다
지금까지 모든 위젯이 동일한 크기였습니다 system medium 패밀리였죠 이제 위젯 익스텐션과 타임라인 프로바이더가 연결되었으니 다양한 위젯 패밀리를 사용할 수 있게 되었습니다 위젯은 다양한 모양과 크기로 제공됩니다 가능한 한 많은 크기를 지원하는 것이 좋습니다 위젯을 사용하는 사람들이 위젯을 배치할 때 선택권을 가질 수 있도록요
system extra large portrait 패밀리는 visionOS 26에서 도입되었습니다 macOS, iOS, iPadOS 27의 새로운 기능으로 system extra large portrait 패밀리를 이제 사용할 수 있습니다 이 새로운 패밀리는 위젯 사용자들이 앱 콘텐츠를 더 잘 볼 수 있게 해줍니다 Book Club 독서 일정은 medium 위젯과 동일한 데이터를 재사용할 수 있습니다 이미 구현한 데이터를요 이 더 큰 크기를 통해 얼마나 진행되었는지 볼 수 있습니다 앞으로 며칠 동안의 진도를요
모든 위젯 패밀리가 위젯에 적합한 것은 아니므로 몇 가지 패밀리부터 시작하는 것이 가장 간단합니다
제가 빌드 중인 일일 독서 목표 위젯입니다 .supportedFamilies 수정자를 사용하여 위젯이 지원하는 모든 위젯 패밀리를 나열합니다
새 위젯 패밀리를 추가할 때 동일한 위젯과 타임라인 프로바이더를 재사용할 수 있습니다 새 패밀리의 모양과 크기에 맞는 SwiftUI 뷰를 빌드하면 됩니다 첫 번째 위젯을 빌드하는 데 필요한 기본 단계를 다뤘습니다 위젯에 집중하는 위젯 익스텐션으로 위젯을 빌드하세요 타임라인 항목으로 구성된 타임라인을 통해 위젯에 콘텐츠를 제공합니다 사용 사례에 맞는 타임라인 리로드 정책을 선택하세요
이제 앱에 훌륭한 iOS 위젯이 생겨 독서 모임을 잘 따라갈 수 있습니다 위젯은 다른 곳에서도 사용할 수 있습니다 iOS 위젯은 CarPlay에서도 사용할 수 있고 macOS에서 원격 위젯으로도 사용할 수 있습니다 위젯을 빌드하는 데 필요한 것을 알아보았습니다 이제 WidgetKit이 앱 콘텐츠를 위젯과 더 잘 통합하기 위해 제공하는 추가 옵션을 알아보겠습니다
딥 링크를 사용하여 위젯을 앱과 더 잘 통합할 수 있습니다 위젯을 설정 가능하게 만들거나 위젯에 인터랙티브 요소를 추가하는 방법도 있습니다 위젯의 기본 상호작용은 앱을 여는 것이며 이것이 좋은 시작점입니다 위젯이 앱 내의 특정 콘텐츠를 보여준다면 위젯이 해당 콘텐츠로 직접 연결하는 딥 링크를 제공할 수 있습니다 독서 목표 위젯 코드로 다시 돌아가겠습니다 이를 어떻게 하는지 살펴보겠습니다 독서 목표 위젯은 현재 읽고 있는 책을 보여줍니다 책 세부 정보 페이지로의 딥 링크를 제공하여 위젯을 탭했을 때 사용자가 예상한 곳으로 이동하게 합니다 widgetURL 수정자를 사용하여 앱의 딥 링크 URL을 지정하겠습니다 앱이 실행될 때 처리하도록요 URL에 책의 ID가 인코딩되어 있어 앱이 바로 실행됩니다 책의 세부 정보 페이지로요
딥 링크는 위젯을 앱과 통합하는 훌륭한 방법입니다 사람들이 위젯과 앱 사이를 오갈 때 맥락을 유지할 수 있도록 해줍니다 설정 가능한 위젯은 위젯을 앱과 통합하는 또 다른 훌륭한 방법입니다 위젯을 설정 가능하게 하면 사람들이 위젯을 개인화할 수 있습니다 앱의 특정 콘텐츠로요
날씨 위젯이 좋은 예입니다 사람들은 이 위젯을 설정하여 날씨를 볼 수 있습니다 자신에게 중요한 위치의 날씨를요 저는 Yosemite의 날씨를 확인하는 것을 좋아합니다 갑자기 여행을 계획할 수 있을지 모르니까요
독서 모임 앱의 독서 기록 위젯도 설정 가능한 위젯의 또 다른 예입니다 제 앱을 사용하는 사람들은 이 위젯을 설정하여 추적할 수 있습니다 특정 책의 독서 세션을요 설정 가능한 위젯은 배치된 어디서든 설정할 수 있습니다 iOS 홈 화면에서처럼요 이것이 독서 기록 위젯의 설정 UI입니다 하나의 매개변수만 있습니다 UI를 통해 위젯 사용자들이 추적하고 싶은 책을 선택할 수 있습니다 가장 최근에 읽은 책을 기본값으로 설정했습니다 사람들이 따로 선택하지 않아도 되도록요 설정 가능한 위젯을 사용하면 사람들이 추가할 수도 있습니다 다양한 설정의 여러 위젯을요 홈 화면에 독서 기록 위젯이 세 개 있습니다 제가 읽고 있는 세 권의 다른 책을 추적하고 있습니다 설정 가능한 위젯을 생각할 때 몇 가지 염두에 두어야 할 것들이 있습니다 사용자에 따라 위젯 콘텐츠가 변경되어야 하는지 고려하세요 설정을 빠르게 유지하세요 매개변수 한두 개면 보통 충분합니다 초기부터 설정을 요구하지 말고 적절한 기본값을 제공하세요 원하면 나중에 조정할 수 있도록요 App Intents로 위젯을 설정 가능하게 만드는 방법을 더 알아보려면 참고하세요 WWDC23의 "Explore enhancements to App Intents"를
설정 가능한 위젯은 위젯 사용자들이 기기를 자신에게 맞게 관련성 있게 만들게 해줍니다 위젯은 인터랙티브 요소를 통해 앱과 통합할 수도 있습니다 버튼과 토글을 통해 위젯에서 바로 작업을 수행할 수 있습니다 미리 알림은 인터랙티브 위젯의 좋은 예입니다 작업을 완료하면 위젯에서 바로 체크 표시를 할 수 있습니다 하루를 계속 나아가는 데 필요한 도파민을 얻으면서요 인터랙티브 요소를 생각할 때 몇 가지 염두에 두어야 할 것들이 있습니다 위젯은 인터랙티브 요소를 토글이나 버튼으로 표시할 수 있습니다 앱에서 가장 중요한 작업을 생각하고 위젯에서 이를 노출하세요 독서 기록 위젯의 챕터 완료 버튼처럼요 위젯 뷰는 시스템에 의해 보관되고 렌더링되므로 코드가 실행되지 않습니다 위젯이 화면에 있는 동안에는요 버튼과 토글은 시스템이 대신 실행할 수 있는 App Intent를 받습니다 누군가 요소와 상호작용할 때요 인터랙티브 위젯에 대해 더 알아보려면 WWDC23의 "Bring widgets to life"를 참고하세요 위젯은 앱의 확장입니다 딥 링크, 설정 가능한 위젯, 인터랙티브 요소는 모두 훌륭한 방법입니다 앱과 위젯 간의 경험을 통합하는 데요 위젯 사용자들은 시스템 경험도 커스터마이즈할 수 있습니다 위젯은 이러한 시스템 변화에 적응하도록 설계되었습니다 iOS에서는 특정 색상으로 시스템을 틴트하도록 커스터마이즈할 수 있습니다 또는 투명한 틴트로 설정할 수 있습니다 어떤 커스터마이즈를 하든 시스템은 위젯을 유리 소재로 렌더링하여 콘텐츠에 틴트를 적용하고 배경을 적응형 유리 효과로 교체합니다 이를 통해 홈 화면의 모든 위젯이 일관성 있게 느껴집니다 SwiftUI가 많은 부분을 처리해 주지만 위젯을 테스트하는 것이 중요합니다 멋지게 보이는지 확인하기 위해서요
독서 목표 위젯을 테스트해 보니 전체 색상으로 렌더링했을 때 정말 멋지게 보입니다 마무리하기 전에 틴트 커스터마이즈로 테스트하여 확인하고 싶습니다 위젯이 예상대로 렌더링되는지요 기기에서 실행하여 홈 화면을 커스터마이즈하겠습니다 iPhone을 클리어 모드로 변경하면 위젯이 올바르게 렌더링되지 않습니다 책 표지가 큰 흰색 직사각형으로 나타나는데 이는 의도한 동작이 아닙니다 이것이 제 BookCoverImage 뷰입니다 뷰의 body에서 이미지는 이 특정 책을 위해 렌더링됩니다 에셋 카탈로그에서요 악센트 렌더링 모드로 렌더링할 때 시스템은 이미지에 올바르게 악센트를 적용하지 못합니다 이 이미지에 사용할 렌더링 모드를 지정할 수 있습니다 widgetAccentedRenderingMode 수정자로요 이 옵션을 사용하면 위젯이 이제 책 표지를 전체 색상으로 렌더링합니다 full color 옵션을 사용하여 책 표지가 렌더링됩니다 원래 색상을 유지하면서요 이 변경으로 위젯이 악센트 렌더링 모드에서도 멋지게 보입니다 위젯이 표시되는 모든 환경에서 테스트하는 것이 중요합니다 로컬 기기부터 시작하세요 위젯을 전체 색상, 틴트, 클리어 모드에서 테스트하여 예상대로 렌더링되는지 확인하세요 iOS 위젯이 macOS에서 원격 위젯으로도 표시된다는 것을 기억하세요 상호작용이 여전히 올바르게 느껴지는지 테스트하는 시간을 가지세요 Mac에서 사용할 때도요 SwiftUI 프리뷰를 활용하여 빠르게 반복하세요
Xcode 오른쪽의 SwiftUI 캔버스에서 다양한 패밀리를 확인할 수 있습니다 Xcode를 벗어나지 않고 색 구성표와 렌더링 모드도 확인할 수 있습니다 테스트하는 동안 WidgetKit 개발자 모드를 켜세요 리로드 예산 같은 제약을 해제하기 위해서요 이를 통해 위젯을 더 빠르게 반복할 수 있습니다 이러한 시스템 커스터마이즈에 위젯을 적응시키는 방법을 더 알아보려면 WWDC25의 "What's new in widgets"를 참고하세요
오늘 많은 내용을 다뤘습니다 마무리하기 전에 이것들을 기억해 두세요 훌륭한 위젯을 만들겠다는 영감을 얻으셨으면 좋겠습니다 위젯 경험을 어떻게 확장하고 개인화할 수 있는지 고려해 보세요 앱과 통합하여요 모든 커스텀 환경에서 위젯을 테스트하고 적응시키는 것도 중요합니다 각 플랫폼이 제공하는 환경에요 위젯은 제 iPhone을 즐겁고 개인적으로 만들어 줍니다 여러분이 만들 훌륭한 위젯을 빨리 사용해 보고 싶습니다

struct DailyReadingGoalWidget: Widget {
    let kind = "DailyReadingGoalWidget"
    
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: kind,
            provider: DailyReadingGoalProvider()
        ) { entry in
            DailyReadingGoalView(book: entry.book,
                                 message: entry.message,
                                 timeOfDay: entry.timeOfDay)
            .environment(\.colorScheme, .dark)
            .containerBackground(for: .widget) {
                Background()
            }
        }
    }
}

12:25 - Supported Families

struct DailyReadingGoalWidget: Widget {
    let kind = "DailyReadingGoalWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: kind,
            provider: DailyReadingGoalProvider()
        ) { entry in
            DailyReadingGoalView(book: entry.book,
                                 message: entry.message,
                                 timeOfDay: entry.timeOfDay)
            .environment(\.colorScheme, .dark)
            .containerBackground(for: .widget) {
                Background()
            }
        }
        .supportedFamilies([.systemMedium])
    }
}

14:03 - Adding deep links

struct DailyReadingGoalWidget: Widget {
    let kind = "DailyReadingGoalWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: kind,
            provider: DailyReadingGoalProvider()
        ) { entry in
            DailyReadingGoalView(book: entry.book,
                                 message: entry.message,
                                 timeOfDay: entry.timeOfDay)
            .environment(\.colorScheme, .dark)
            .containerBackground(for: .widget) {
                Background()
            }
            .widgetURL(URL(string: "bookclub://reading/\(book.bookID)"))
        }
        .supportedFamilies([.systemMedium])
    }
}

18:17 - Accented rendering mode

struct BookCoverImage: View {
    let imageName: String

    var body: some View {
        Image(imageName: bundle: .main)
            .widgetAccentedRenderingMode(.fullColor)
    }
}

- 0:01 - Introduction
- Widgets highlight your app's most important content across the system. The best widgets are glanceable, relevant, and personalizable. Learn how to build your first widget and keep it up to date, extending the reach of your app across platforms with WidgetKit and SwiftUI.
- 1:03 - Fundamentals
- Widgets should be glanceable, relevant, and personalizable. They are built by creating a widget extension that exposes a timeline of TimelineEntry values. Each TimelineEntry provides the data to render a SwiftUI view at a particular moment in time. Learn how to define a widget with a StaticConfiguration or AppIntentConfiguration, build a quality TimelineProvider, and select a timeline reload policy to keep your widget up to date. Discover the various sizes and placements for widgets with .supportedFamilies — including the new systemExtraLargePortrait family coming to macOS, iOS, and iPadOS 27.
- 13:15 - Integrate with your app
- WidgetKit offers three key integration points to tighten the connection between a widget and your app. Deep links route taps directly to specific content in your app. Configurable widgets let people personalize widget content. Interactive elements that let people perform the most important actions from within your app using App Intents.
- 17:04 - Adapt with the system
- Widgets are dynamic and adapt with the system appearance modes like full color, tinted, and clear. SwiftUI handles most of the adaptation automatically, though you can customize the behavior of particular Views with the .widgetAccentedRenderingMode(.fullColor) modifier. Learn techniques to test your widgets for considerations with appearance modes and budgeted reloads.

시작하기 탐색

알림 받기

플랫폼 탐색

피처링

기술 탐색

피처링

커뮤니티 탐색

피처링

문서 탐색

릴리즈 노트

다운로드 탐색

피처링

지원 탐색

피처링

빠른 링크

챕터

리소스

관련 비디오

WWDC26

WWDC25

WWDC23

WWDC21