Complications and widgets: Reloaded

[hyun99999]

Our widgets code-along returns as we adventure onto the watchOS and iOS Lock Screen. Learn about the latest improvements to WidgetKit that help power complex complications on watchOS and can help you create Lock Screen widgets for iPhone. We'll show you how to incorporate the latest SwiftUI views to provide great glanceable data, explore how each platform renders content, and learn how you can customize the design and feel of your content within a widget or complication.

[hyun99999]

Complications and widgets: Reloaded - WWDC22 - Videos - Apple Developer

본 글은 WWDC 를 보고, 번역 및 요약 그리고 실행해보는 스터디 프로젝트의 일환입니다.

내용

• watchOS Lock Screen 과 complications 로 액세서리 위젯을 쓸 수 있는 WidgetKit 의 API 와 SwiftUI 추가사항

🔥 Overview

• 컴플리케이션의 타임라인
• 위젯과 컴플리케이션에 입힐 색에 대한 API
• Project setup - 직접 위젯을 만드는 방법과 기존 위젯을 watchOS 에 확장하여 옮기는 작업
• Making glanceable views - 더 작은 view 의 대부분을 만드는 방법
• 위젯이 보일 여러 privacy 환경에 대한 이야기

🔥 Complication timeline

컴플리케이션은 watchOS 의 주요 요소로 시계 페이스에 quick, glaceable information 을 보여줍니다. 또한, 즉시 접근할 수 있는 high-value 의 정보를 전달하고 탭 하여 앱의 관련 위치로 이동시켜줍니다.

watchOS 2에서는 ClockKit 가 컴플리케이션을 만들 수 있도록 하였고 그때부터 시작되었습니다.

풍부한 컴플리케이션과 그래픽 컨텐츠와 새로운 families 세트와 함께 watchOS 5 가 소개되었습니다.

SwiftUI 컴플리케이션과 다수의 컴플리케이션은 watchOS 7에서 소개되어 컴플리케이션에 다양한 옵션을 제공하며 발전시킬 수 있게 해주었습니다.

오늘 컴플리케이션은 WidgetKit 과 재창조되어 iOS 16 과 watchOS 9 의 WidgetKit 으로 두 플랫폼에서 훌륭한 컴플리케이션과 위젯을 구축해 코드를 한 번 쓰면 기존 홈 화면 위젯과 인프라를 구축할 수 있게 됩니다.

이를 위해서 기존 WidgetFamily 유형에 accessory 라는 접두어를 가진 위의 새로운 위젯군을 추가했습니다.

1️⃣ accessoryRectangular

새로운 accessoryRectangular 는 기존의 ClockKit 의graphicRectangular 와 유사하게 텍스트의 여러라인이나 작은 차트를 표현하는데 쓸 수 있습니다.

2️⃣ accessoryCircular

accessoryCircular 는 간단한 정보, progress view 에 좋습니다. 이 또한 ClockKit 의 graphicCircular 를 대체합니다.

3️⃣ accessoryInline

accessoryInline 는 텍스트만 되는 슬롯이기 때문에 많은 페이스와 iOS 시간 위에 보여집니다.

슬롯 사이즈는 다양한 사이즈로 존재하는데 어떻게 최선으로 이용할지는 뒤에서 알아보겠습니다.

4️⃣ accessoryCorner

watchOS 를 특정짓는 것은 새로운 accessoryCorner 입니다. 위젯 콘텐츠의 작은 원을 게이지 및 텍스트와 섞습니다.

앞으로의 이야기는 iOS 와 watchOS 사이의 공통 families 에 초점을 맞춘 것입니다.

새 watchOS 의 자세한 사항을 더 알고 싶다면 해당 세션을 시청하면 됩니다.

색상과 렌더링 모드에 대해서 이야기해봅시다.

🔥 Colors

accessory widget 이 몇 가지 다양한 외관을 보여주는 것을 눈치챘을지도 모릅니다.

(앞서 iOS16 에서 새롭게 보여지는 반투명 위젯들)

시스템은 accessory family widget 들의 모습을 제어하고 우리들은 rendering style 에 적응하는 걸 도와줄 도구를 주었습니다.

여기 위젯이 보여졌을 때 다른 세 가지 rendering mode set 이 있습니다. 왼쪽에서부터 Full color, accented, vibrant 입니다.

WidgetRenderingMode 를 도입해 세 가지 다른 표현을 합니다.

아래의 사용된 예시를 보게되면 widgetRenderingMode keypath 를 활용하여 Environment 에서 이 값에 접근할 수 있습니다. 이후 코드에서 콘텐츠가 적합해 보이도록 switch 문에서 변경할 수 있습니다.

1️⃣ Full color

watchOS 의 full color 모드에서 콘텐츠는 여러분이 지정한대로 보여집니다.

기존의 많은 컴플리케이션은 날씨 게이지의 변화나 activity ring 의 색깔처럼 다채로운 색을 띕니다.

2️⃣ accented

accented 모드에서는 독립된 색의 두 그룹으로 나뉘게 됩니다. 두 그룹은 차분한 색으로 원래의 불투명도만 보존합니다.

우리는 시스템이 어떻게 .widgetAccentable() view modifier 로 view 를 그룹짓는지 알 수 있었습니다. 혹은 위젯 렌더링 모드 environment 값에 근거해 flattend 되었을 때 완벽하게 보이도록 컨텐츠를 전환하는지 알 수 있었습니다.

(맨 좌측이 Accented)

일부는 검정 배경인 반면에 다른 건 watchOS 9 에서 full color 배경입니다. 이것이 watchOS 9 의 새로운 점입니다.

Vibrant 에 대한 이야기를 시작해보겠습니다.

iOS 의 Vibrant 모드에서는 컨텐츠는 흐릿해진 다음 Lock Screen 배경에 맞게 적절한 색으로 바뀝니다.

시스템은 greyscale 의 컨텐츠를 주목할 수 있도록 그려냅니다. 그리고 이것은 환경에 적합하게 나타납니다.

추가적으로 Lock Screen 은 vibrant rendering mode 를 색상으로 물들이도록 설정될 수 있습니다. 밝은 컬러는 결국 주로 불투명해지고 더 밝아집니다. 반면, 어두운 컬러는 배경에서 약간의 광택만으로 흐릿하게 나타납니다.

가독성을 보장하기 위해서 Vibrant 모드에서 투명 컬러는 사용을 피하고 대신 어두운색이나 검정을 사용하여 가독성은 유지하면서 콘텐츠는 눈에 덜 띄게 합니다.

이러한 미묘한 차이인 일관된 배경을 위젯에 주기 위해서 AccessoryWidgetBackground view 를 도입했습니다.

background view 는 다양한 위젯 렌더링 모드에서 여러 모습을 가집니다.

✅ Project setup

기존 앱인 Emoji Rangers 에 새로운 위젯 그룹군을 추가하려고 합니다.

위와 같이 Widget Extension target 을 프로젝트에 추가하여 시작할 수 있습니다.(Emoji Rangers 는 이미 있기 때문에 새 위젯과 컴플리케이션을 추가하는 것에 대해서 이야기하겠습니다.)

Emoji Rangers 프로젝트는 Emoji Rangers 를 추적하고, 홈 화면 위젯 사용으로 Ranger 의 건강과 재충전 시간의 최신 정보를 알려줍니다.

watch Extension target

기존 iOS target(CharacterDetailExtension) 과 코드를 공유하는 새로운 watchOS target 을 추가할 것입니다.

CharacterDetailExtension 인 widget extension target 을 복사하여 이름을 바꾸었습니다.

Bundle Identifier 를 변경하고 Base SDK 도 변경하여 watch App 을 위한 extension 으로 변경하겠습니다.

WatchApp 에 새로운 extension(CharacterDetailExtension watch)을 임베드 하겠습니다.

(이 과정은 기존에 만든 iOS target 과 코드를 공유하기 위함이다.

자, 이제 watchOS 를 구축하는 코드를 작성해봅시다.

EmojiRangerWidget 코드를 살펴보면 timeline provider 를 볼 수 있는데 시스템이 콘텐츠를 다시 로드할 때 사용하는 것입니다.

이미 iOS 홈 화면 위젯을 지원합니다. 우리는 small 과 medium family 에 새 그룹군을 추가할 겁니다.

accessory families 가 추가되었습니다.

추가적으로 system families 는 watch 에서는 사용이 불가능해서 supprtedFamilies 를 지정하기 위해 플랫폼 매크로를 사용해야합니다.

preview provider 에 새 families 를 위한 preview 를 추가해봅시다.(길이가 길어 코드로 대체합니다.)

EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryCircular))
                .previewDisplayName("Circular")
EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryRectangular))
                .previewDisplayName("Rectangular")
EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryInline))
                .previewDisplayName("Inline")

#if os(iOS)

// ...

#endif

다음으로 watchOS 를 성공적으로 빌드하기 전에 새로운 intentRecommendation API 를 구현해야 합니다.

Intent 가 iOS 의 위젯 편집 UI 에서 configurable 할 때 watchOS 에서는 preconfigured list 를 제공해야합니다. 이는 IntentTimelineProvider 에서 새로운 recommendations 메소드를 오버라이딩하여 제공할 수 있습니다.

🔥 recommendations

Apple Developer Documentation - recommendations

(intent 는 아래처럼 위젯을 꾹 눌러 위젯 편집을 통해 제공하는 옵션을 의미합니다. 즉, configurable widget 이라는 이야기 입니다. widget 에서는 configurable 하도록 intent 를 설정할 수 있습니다.

반면, watchOS 에서는 preconfigured list 를 제공해야 하는데 이는 IntentTimelineProvider 의 새로운 recommendations 메소드를 오버라이딩하여 제공할 수 있다는 말입니다.

그리고 preconfigured list 는 컴플리케이션에서 사용자와 가장 관련성이 높은 데이터를 표시하기위한 목적이고 사용가능한 컴플리케이션 목록에서 사용자에게 추천됩니다.

즉, 애플워치에서 컴플리케이션을 편집할 때 사용자에게 추천되는 preconfigured complications 을 만드는 역할입니다.)

Apple Developer Documentation - Making a Configurable Widget

이 문서에는 configuable 한 widget 을 만들 수 있고, watch 에 preconfigured 한 컴플리케이션을 제공하는 방법에 대해서 소개하고 있습니다.

---

다음과 같이 오버라이딩해주겠습니다.

preview 의 widget 을 확인해보겠습니다.

small widget 에 대한 컨텐츠가 새 폼팩터(accessoryCircular) 안에 잘 맞지 않습니다. 새로운 widget families 는 iOS widgets 보다 작기 때문에 여러분의 컴플리케이션 컨텐츠를 고려해야 합니다.

자, 이제 컴플리케이션을 눈에 띄게 할 새로운 view 에 대해서 이야기 해봅시다.

✅ Making glanceable views

1️⃣ accessoryCircular

zaccessoryCircular case 에 대한 코드도 추가해 봅시다.

이 progressView 는 Ranger 가 다시 전투 준비가 되는지 사용자에게 보여주는 역할을 할 것입니다.

문제는 이 progress view 가 통용되도록 활성화하기 위해 연달아 timeline entries 를 많이 요구할 것이라는 점입니다.

(widget 이 언제 실행되어 정보를 최신화할지 timeline 을 알아야 하기 때문에 timeline entry 가 존재합니다.)

대신! 우리는 SwiftUI 의 새로운 자동 업데이트 ProgressView 를 사용할 수 있습니다. 이로써 Ranger 가 완전히 회복될 날짜 간격을 가지고, 이것은 시스템이 progress view 의 업데이트 유지를 timeline entry 단 하나만 필요하다는 의미입니다.

2️⃣ accessoryRectangular

이제 Retangluar family 를 추가한 후, Ractangular preview 를 선택해봅시다.

공간이 있으니 컴플리케이션 스타일의 세 줄 view 를 만들어 봅시다. 캐릭터 이름, 레벨, 완전히 치유될 때까지의 시간으로 구성할 것이고, 캐릭터 이름은 헤드라인 서체와 색상을 조정하는 widgetAccentable modifier 를 추가할 것입니다.

vibrant 에서는 view 가 근사해 보이는데 watch 의 다른 렌더링 모드에서는 어떻게 보이는지 살펴봅시다.

캐릭터 이름이 accent color 를 어떻게 가지는지 볼 수 있습니다. widgets 과 complications 를 편안하게 느끼게 만들고 default font parameter 를 사용하고 font styles 를 사용도록 하는 것이 중요합니다.

iOS 와 watchOS 는 서체와 사이즈가 다릅니다. iOS 는 regular 디자인이고, watchOS 는 rounded 디자인입니다. 위젯과 컴플리케이션은 다른 것들과 가까이 스크린에 자리할 것입니다. 그래서 일관되게 보이는 font styles Title, Headline, Body, Caption 사용하기를 권장합니다.

Avatar 를 남은 공간에 추가하였습니다. iPhone 에서는 어떻게 보이는지 살펴봅시다.

좋습니다! 마지막으로 텍스트 라인과 선택적으로 이미지를 게시하는 accessoryInline 을 추가해 봅시다.

3️⃣ accessoryInline

system-defined coloring 과 font 에 따라 그려졌다는 것에 주목해 봅시다.

위의 코드에서 히어로 이름과 재충전 카운트다운을 보여주겠습니다.

그런데 이 텍스트는 watch 슬롯에서 너무 깁니다. 여러분들께 VeiwThatFits 를 보여드릴 때입니다.

길이를 축약해서 여러 view 를 지원할 수 있고, ViewThatFits 는 끊거나 잘라내기 없이 가능한 공간에 맞춰서 처음 콘텐츠 view 를 선택합니다.

너무 길지도 모르겠네요. 세번째 대안을 적용해보겠습니다.

이렇게 아바타와 재충전 카운트다운을 통해 보여줄 수도 있습니다.

(더 알고 싶다면 Compose Custom layouts with SwiftUI 세션을 참고해주세요.)

✅ Privacy

지금까지 위젯과 컴플리케이션의 활성화 상태를 논의했습니다. 하지만, 플랫폼을 넘어서 콘텐츠를 편집 중이거나 밝기가 어두운지를 고려해야 합니다.

iOS Lock Screen 에서 기본 행동은 기기가 잠겨있는 동안에도 셀 왼쪽 상단의 콘텐츠(하이라이트된 셀)를 보여주는 겁니다.

이것은 Settings 에서 설정이 가능하고 사용자들은 알림처럼 잠긴 상태에서도 민감한 내용을 삭제할 수 있습니다.

watchOS 에서는 watch 를 차고 있는 한 기기가 잠금 해제된 상태로 있습니다. 비활성화일 때 watch 는 어두운 밝기 표현의 콘텐츠와 낮은 업데이트 케이던스로 always-on 으로 변합니다.

기본적으로 콘텐츠는 제일 하단 왼쪽의 상태로 삭제와 같은 수정이 되지 않습니다.

잠금 화면에서처럼 사용자들이 always-on 상태에서 컴플리케이션 콘텐츠가 삭제되도록 설정할 수 있습니다.

위의 모든 상태를 고려해 여러분의 컴플리케이션과 위젯이 잘 동작할 수 있도록 해야 합니다.

watch 에서는 위젯은 always-on 디스플레이 경험을 지원해야 합니다. \.isLuminanceReduced environment 값으로 콘텐츠를 늘 always-on 상태에 대응할 수 있도록 할 수 있습니다.

ClockKit 에서 모든 timeline entry 에 always-on 콘텐츠를 준비할 수 있습니다.

always-on 에서 시간 관련 텍스트와 progress view 가 always-on 의 낮은 업데이트 케이던스를 지원하려고 감소한 fidelity mode(정확도 모드)로 바뀔 것입니다. 이 모드를 지원하기 위해 environment 값을 사용하여 시간에 민감한 콘텐츠를 삭제하고, 업데이트 빈도를 낮추기 위해 콘텐츠 최적화하도록 해야 합니다.

redaction(민감한 사항 편집)에 관한 이야기를 해볼게요. 기본적으로 privacy mode 는 TimelineProvider 가 생성하는 placeholde view 의 redaction 버전을 보여줄 것입니다.

일부 element 가 민감하고 다른 element 는 redacted 할 필요가 없다면 redacted view 만 표시하기 위해 .privacySensitive modifier 를 사용할 수 있습니다.

이 예시에서 위젯의 heart rate 를 redact 했지만 이미지는 unredact 된 채로 남습니다.

SwiftUI 의 새로운 기능을 더 알고 싶다면 세션을 시청해주세요.