Apple Watch로 실시간 현황 가져오기

Apple Watch로 실시간 현황 가져오기

iPadOS 18 및 watchOS 11로 Apple Watch의 스마트 스택에서 실시간 현황을 제공해 보세요. 실시간 현황이 Apple Watch에 표시되는 방식과 함께 이를 스마트 스택에서 더욱 효과적으로 표시하는 방법을 소개합니다. Apple Watch의 실시간 현황에 항상 최신 정보가 표시되도록 하기 위한 추가 고려 사항도 살펴봅니다.

챕터
- 0:00 - Introduction
- 1:07 - Review your Live Activity
- 3:22 - Customize for Apple Watch
- 6:02 - Keep it live
리소스
다운로드

안녕하세요, 저는 watchOS 담당 프레임워크 엔지니어 Anne입니다 Apple Watch에서 기존 실시간 현황을 근사한 경험으로 제공하는 방법을 설명해 드리겠습니다 실시간 현황을 사용하면 잠금 화면, 대기 모드 Dynamic Island와 같이 한눈에 보이는 위치에서 앱의 활동이나 이벤트에 대한 최신 정보를 표시할 수 있습니다 이제 iOS 18 및 watchOS 11에서는 iOS 실시간 현황이 Apple Watch의 스마트 스택에 자동으로 표시됩니다 우선 watchOS 11로 업데이트한 후 Apple Watch에서 실시간 현황이 어떻게 표시되는지 설명해 드리겠습니다
그런 다음 스마트 스택에 맞춰 실시간 현황 보기를 맞춤화하는 방법을 보여 드리고 watchOS의 활동 관련 업데이트에 설명해 드린 뒤에 실시간 현황을 최신 상태로 유지하는 방법을 알려 드리겠습니다
먼저 기존 실시간 현황이 watchOS 11이 설치된 Apple Watch에서 어떻게 표시되는지 살펴보겠습니다
Dynamic Island가 지원되는 iPhone에서 사용자가 잠금 화면을 켜두면 실시간 현황이 Dynamic Island의 compact leading 및 trailing 보기에서 표시됩니다 Dynamic Island의 보기는 compactLeading 및 compactTrailing 보기 빌더에서 유래합니다 Apple Watch에서 이러한 보기는 보기를 제공한 앱을 나타내는 제목과 함께 스마트 스택에서 자동으로 표시됩니다 현재 compact 보기가 사용자에게 최신 정보를 제공하기 위해 사용 가능한 공간을 최대한 활용하고 있는지 생각해 볼 좋은 기회입니다 이 앱의 경우 leading 보기에는 배송이 완료될 때까지 남은 시간을 표시하고 trailing 보기에서는 현재 주문 상태를 보여주고 있죠
iOS에서 실시간 현황에 적용된 업데이트는 자동으로 Apple Watch로 전송됩니다 iOS의 알림 업데이트는 애니메이션을 통해 Dynamic Island 확장 보기를 표시합니다 Apple Watch에서 알림 업데이트가 수신되는 경우 시계 페이스가 표시된 상태에서는 자동으로 스마트 스택이 시작된 후 알림이 표시되며 그다음 실시간 현황이 나타나죠
포그라운드에 앱이 있는 경우 Dynamic Island의 compact 보기를 포함하는 배너가 화면 하단에 표시됩니다
실시간 현황을 탭하면 관련 내용이 화면 전체를 채우며 iPhone에서 관련 앱을 열 옵션이 나타납니다
iOS 실시간 현황에 관한 Dynamic Island의 compact 보기는 스마트 스택에 자동으로 표시됩니다 사용자에게 활동의 최신 상태를 전달할 수 있도록 현재 보기가 동적으로 업데이트되는 정보를 보여주고 있는지 확인하세요 이는 iOS 18 및 watchOS 11으로 업데이트한 사용자뿐만 아니라 기존 iPhone 고객에게도 유용할 것입니다
지금까지 사용자가 iOS 18 및 watchOS 11으로 업데이트할 때 어떤 사항이 자동으로 적용되는지 알아봤습니다 개발자는 또한 Apple Watch를 위한 맞춤 실시간 현황 보기를 제공할 수도 있습니다 이 앱에서는 사용자가 지역 농산물을 배달로 주문한 다음 실시간 현황을 통해 배송 상태를 확인할 수 있습니다 Apple Watch의 실시간 현황 보기를 맞춤화하기 위해 앱을 수정해 보겠습니다
현재 실시간 현황에서는 스마트 스택에서 기본 표시 방식을 사용하고 있으며 Dynamic Island의 compact 보기를 보여주고 있습니다 Xcode의 미리보기에서 이러한 보기가 어떻게 나타날지 확인할 수 있습니다
Canvas Device Settings에서 All Variants를 선택하면 모든 보기 스타일을 캔버스에서 볼 수 있습니다 또는 스마트 스택 보기에 집중하기 위해 선택 모드로 이동하여 Content Smart Stack을 표시하도록 Canvas Device Settings를 업데이트할 수 있죠
watchOS 스마트 스택을 위해 맞춤화하려면 실시간 현황의 WidgetConfiguration에 supplementalActivityFamilies 수정자를 추가하면 됩니다 .small을 사용하면 스마트 스택 지원을 표시할 수 있습니다 이제 현황 콘텐츠의 iOS 잠금 화면 보기가 compact 보기 대신에 스마트 스택에 표시되고 있습니다 기존에는 잠금 화면 콘텐츠가 더 큰 화면에 맞춰 설계되었으므로 Apple Watch에서는 텍스트가 잘립니다 이제 스마트 스택을 위해 맞춤화하겠습니다
activityFamily Environment 값으로 이동한 다음 activityFamily가 small일 때 콘텐츠를 위한 새 레이아웃을 제공하겠습니다
activityFamily가 medium이면 iOS 잠금 화면에서는 원래의 콘텐츠 보기 레이아웃이 사용됩니다
실시간 현황에 대한 Xcode 미리보기를 통해 스마트 스택에서 보기가 어떻게 나타날지 볼 수 있죠
supplementalActivityFamilies 수정자를 추가하면 Apple Watch에서 실시간 현황의 맞춤화된 보기가 표시됩니다
Watch 앱이 없어도 실시간 현황은 Apple Watch에서 작동합니다 한편 Watch 앱이 있다면 사용자가 스마트 스택의 실시간 현황에 탭할 때 앱이 열리도록 설정할 수 있습니다
Watch 앱에 관한 타겟의 빌드 설정에서 Info.plist 섹션의 Supports Launch for Live Activity Attribute Types 키에 대한 값을 제공하세요 모든 실시간 현황에 대해 Watch 앱을 실행하려면 값을 빈 상태로 두세요 특정 실시간 현황에 대해서만 실행하려면 Watch 앱을 실행할 각 ActivityAttributes 구조 유형에 대해 항목을 추가하세요
단 몇 줄의 코드만으로 실시간 현황이 표시되는 방식을 수정하고 실시간 현황이 어떻게 표시되는지 미리 볼 수 있습니다 Apple Watch에서 실시간 현황이 최신 정보를 표시하고 의도한 대로 작동하도록 하려면 알고 있어야 할 몇 가지 사항이 있습니다 이제 업데이트 빈도 및 제한, 연결이 제한된 상황의 처리 및 화면 상시표시를 위해 실시간 현황을 조정하는 방법을 알아보죠
iPhone 및 Apple Watch의 업데이트 빈도 및 제한에는 몇 가지 차이가 있습니다
실시간 현황 업데이트는 Apple Watch와 자동으로 동기화됩니다 푸시 토큰을 별도로 관리하거나 코드를 추가할 필요가 없죠 배터리 사용 시간을 보호하기 위해 업데이트 동기화가 제한됩니다 제한 임계값은 iOS와 유사합니다 오늘 실시간 현황을 위해 업데이트를 푸시한다면 추가 작업 없이 Apple Watch에서 처리할 수 있는 범위에 있어야 합니다 요청된 경우 Apple Watch는 높은 빈도의 업데이트를 지원합니다
iOS 앱에서 ActivityKit에 의해 실시간 현황이 로컬에서 업데이트되는 경우를 고려해 보세요 이제 이러한 업데이트도 Apple Watch와 자동으로 동기화되며 업데이트 제한에 포함됩니다 업데이트가 제한을 초과하는 경우 사용자의 손목이 아래를 향한다면 업데이트가 바로 표시되지 않을 수 있죠 그러나 사용자가 손목을 올리면 실시간 현황에서 최신 정보를 보여줍니다
또한 연결 상태로 인해 Apple Watch에서 실시간 현황이 제때 업데이트되지 않을 수 있죠 페어링된 iPhone과 Watch 간 연결 상태가 양호하거나 두 기기가 같은 Wi-Fi 네트워크에 있으면 업데이트가 Apple Watch에 전송됩니다 연결이 제한되어 있는 경우 시작, 종료 및 알림 업데이트가 Apple Watch에 우선 전송됩니다
이 경우 마지막으로 연결된 시간이 스마트 스택에 표시되어 현재 정보가 최신이 아닐 수도 있음을 사용자에게 알립니다 화면 상시표시 때문에 실시간 현황 보기에 적용해야 할 조정도 고려해야 합니다 Watch가 항상 켬 모드에 있는 경우 사용자가 손목을 내리면 색상 테마가 자동으로 다크 모드로 전환되고 휘도가 낮아집니다
밝은 색상의 보기가 있는 경우 isLuminanceReduced Environment 값을 사용하여 밝은 요소를 제거하거나 밝기를 낮추세요
이 보기에서는 휘도가 낮아졌을 때 게이지에 다른 색조를 사용하여 밝기를 낮추고 가독성을 유지하고 있습니다
실시간 현황이 밝게 표시되도록 하려면 preferredColorScheme을 light로 설정하세요 화면 상시표시에서 자동으로 다크 모드가 적용되고 휘도가 낮아집니다 기본 색상과 같은 의미 색상의 경우 색상 테마에 따라 자동으로 적절한 색상이 적용됩니다 이제 실시간 현황이 근사하게 표시되고 항상 최신 정보를 표시할 수 있습니다
iOS 18 및 watchOS 11부터 iOS 실시간 현황이 Apple Watch의 스마트 스택에 자동으로 표시됩니다 Dynamic Island의 Compact 보기가 유용한 정보를 제때 제공하는지 확인하세요 Apple Watch용 실시간 현황을 맞춤화하려면 supplementalActivityFamilies를 사용하세요 멋진 실시간 현황을 설계하는 방법을 자세히 알아보려면 ‘Apple Watch용 실시간 현황 디자인하기’ 동영상을 확인하세요 아직 watchOS용 콘텐츠를 개발하신 적이 없다면 앱 콘텐츠를 watchOS용으로 맞춤화하는 과정에 있어 실시간 현황이 첫 단계가 될 수 있습니다 이 플랫폼에 참여하신 것에 대해 기쁘게 생각합니다 다양한 정보를 통해 여러 Apple Watch용 앱을 개발하시기 바랍니다 감사합니다

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
    }
}

3:43 - Preview Live Activities with Xcode Previews

extension DeliveryActivityAttributes.ContentState {
    static var shippedOrder: DeliveryActivityAttributes.ContentState {
        .init(
            status: .shipped,
            courierName: "Johnny"
        )
     }

     static var packedOrder: DeliveryActivityAttributes.ContentState {
         .init(
            status: .packed,
            courierName: "Contacting Courier...")
     }
}

#Preview(
    "Dynamic Island Compact",
    as: .dynamicIsland(.compact),
    using: DeliveryActivityAttributes.preview
) {
    DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

4:15 - Add .supplementalActivityFamilies to indicate support for the Smart Stack

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
        .supplementalActivityFamilies([.small])
    }
}

4:49 - Customize view layout for the small activity family

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

5:06 - Preview customized layouts for the Smart Stack

#Preview("Content", as: .content, using: DeliveryActivityAttributes.preview) {
   DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

8:37 - Use isLuminanceReduced to remove bright elements with Always On Display

struct DeliveryGauge: View {
    @Environment(\.isLuminanceReduced) private var isLuminanceReduced
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        Gauge(value: context.state.progressPercent) {
            GaugeLabel(context: context)
        }
        .tint(isLuminanceReduced ? .gaugeDim : .gauge)
    }
}

8:57 - For Live Activities with a light appearance, use a light preferredColorScheme

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
                .preferredColorScheme(.light)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.

쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.

챕터

리소스