🎸 Live Activity 사용해 보기

ActivityConfiguration | Apple Developer
Live Activities | Apple Developer

🍎 WidgetKit 이란 ?
🔒 잠금화면 위젯 만들기(WidgetKit)

이번 글에서는 WidgetKit을 사용하는 LiveActivity에 대해서 살펴보도록 하겠다.

LiveActivity ?

LiveActivity는 iOS 16 버전에서 새로 도입된 기능이다.

사용자가 실시간으로 진행 중인 작업을 홈 화면이나 잠금 화면에서 직접 추적할 수 있도록 지원하여 사용자에게 실시간으로 업데이트되는 정보를 제공할 수 있도록 하는 기능이다.

실시간 정보를 표시하고 업데이트 할 수 있으며, 음식 배달, 택시의 도착 시간, 운동 경기 점수 및 실시간 경로 탐색 등의 서비스에서 유용하게 정보를 제공해 줄 수 있다.

여기에 16.2 버전 부터 DynamicIsland를 지원하는 디바이스에 대해서는 기존 노치 영역에 추가적인 실시간 정보 제공도 가능한 기능이다.

LiveActivity는 WidgetKit과 함께 구성이 가능하고 ActivityKit을 사용해 실시간 데이터를 업데이트하고 변경할 수 있어 사용자가 앱을 열지 않더라도 원하는 실시간 데이터를 받아볼 수 있어 사용자 경험을 크게 향상시킬 수 있는 강력한 도구이다.

Add WidgetKit

LiveActivity 사용을 위해서는 위젯을 만드는 방법과 동일하게 WidgetKit을 사용해야 한다.

File > New > Target

Widget Extension을 선택해주자.

WidgetKit의 이름을 넣어주고 "include Live Activity"를 선택하여 LiveActivity도 추가해 주면 된다.

여기서 "include Configuration App Intent"를 체크하게 되면 WidgetKit의 기능 중 하나인 홈 위젯의 생성 타입을 IntentConfiguration 타입으로 생성되게 되고, 체크를 하지 않게 되면 StaticConfiguration 타입이 적용된다.

홈 위젯의 종류를 잘 모르시는 분들을 위해 간단하게 설명하자면, 홈 위젯의 편집이 가능한 위젯을 IntentConfiguration 타입이라하고 위젯의 편집이 불가능한 위젯을 StaticConfiguration이라고 한다.

WidgetKit의 전반적인 내용들을 자세히 알고 싶다면 이전에 작성한 글을 참고하시길 바란다.

정상적으로 생성이 되면 위젯 파일과 LiveActivity 위젯 파일이 각각 생성되어 있을 것이다.

이 중 LiveActivity 파일을 사용하면 되고, 위젯 파일은 홈/잠금 위젯에 사용되는 파일이니 필요에 따라 해당 파일을 사용하시거나 지워주시면 된다.

만일 본인의 서비스가 홈/잠금 위젯은 사용할 필요가 없고, 오로지 LiveActivity만 사용하길 원한다면 아래 처럼 코드를 적용해 주면 된다.
WidgetKit을 추가하면 기본적으로는 홈 위젯은 지원되게 된다.

WidgetKit에 생성된 WidgetBundle 파일에 추가되어 있는 홈 위젯 관련 객체를 사용하지 않으시면 된다.

@main
struct LiveActivityWidgetBundle: WidgetBundle {
    var body: some Widget {
//        LiveActivityWidget()
        LiveActivityWidgetLiveActivity()
    }
}

LiveActivity는 iOS 16.2버전 부터 사용이 가능하기 때문에, iOS 16.2이하 버전을 타겟하는 서비스인 경우 아래와 같이 코드를 추가해주어야 한다.

@main
struct TimerWIdgetBundle: WidgetBundle {
    var body: some Widget {
        TimerWIdget()
        if #available(iOS 16.2, *) {
            TimerWIdgetLiveActivity()
        }
    }
}

우선 LiveActivity가 정상적으로 노출되는지 테스트를 해보자.

Widget Extension을 생성한 이름이 저와 동일한 경우라면 아래 코드를 사용해 LiveActivity를 실행시켜 볼 수 있다.

import SwiftUI
import ActivityKit

struct ContentView: View {
    var body: some View {
        VStack {
            Button {
                let attributes = TimerWIdgetAttributes(name: "Timer Sample")
                let contentState = TimerWIdgetAttributes.ContentState(emoji: "😀")
                let content = ActivityContent(state: contentState, staleDate: nil)
                do {
                    _ = try Activity<TimerWIdgetAttributes>.request(
                        attributes: attributes,
                        content: content,
                        pushType: nil
                    )
                } catch {
                    print("LiveActivityManager: Error in LiveActivityManager: \(error.localizedDescription)")
                }
            }label: {
                Text("Show")
            }
        }
        .padding()
    }
}

만일 attributes 이름이 다르다면 Widet 폴더안에 LiveActivity 파일에서 찾을 수 있다.

여기서 코드를 똑같이 넣었는데도 attributes 객체를 찾지 못하는 에러가 발생했을 것이다.

이건 빌드 타겟에 포함되어 있지 않기 때문에 발생한 문제로 Target Membership에서 추가해 주면 된다.

LiveActivity 파일로 가서 Target Membership안에 앱 타겟을 선택해서 포함시켜 주면 객체를 찾을 수 있다.

이제 실행시켜 보도록 하자.

LiveActivity가 실행이 되지 않는데, 아직 LiveActivity 지원을 활성화 시키지 않았기 때문이다.

Info.plist에 "Supports Live Activities"를 추가하고 Value를 "YES"로 설정해주면 된다.

이제 정상적으로 LiveActivity가 실행되는 것을 확인할 수 있는데, 잠금화면에서 LiveActivity가 노출이 되고, 앱을 백그라운드로 보냈을 때에도 DynamicIsland에 등록이 잘 된것을 확인할 수 있다.

Supports Live Activities
NO	YES

기본적인 설정은 완료했으니 본격적으로 LiveActivity에 대해서 알아보도록 하자.

LiveActivity

이제 본격적으로 LiveActivity의 UI 구조 부터 사용 방법까지 자세히 다뤄보도록 하곘다.

UI 구조

LiveActivity를 사용하기 앞서 정확히 어떤 부분에서 사용하는지를 알고 있어야 하기 때문에 UI 요소가 어디에 사용되는 건지를 확인해 보도록 하자.

LiveActivity 파일의 코드를 확인해보면, Widget 코드를 확인할 수 있다.

바로 여기 코드에서 UI를 꾸며주면 되는데 ActivityConfiguration, dynamicIsland 요소를 확인하면 된다.

위의 이미지를 보면 크게 3가지의 구조를 가지게 된다.

ActivityConfiguration요소를 사용해서 잠금화면에서 보여줄 UI를 작업할 수 있고, DynamicIsland의 기본 요소는 compact, 다이나믹아일랜드의 확대된 상태의 요소는 DynamicIslandExpandedRegion을 사용할 수 있다.

DynamicIsland를 자주 사용하시는 분들은 구조를 잘 아시겠지만 크게 3가지의 UI 타입이 사용된다.

여기서 minimal은 2개 이상의 LiveActivity앱이 구동 중일때에만 노출되는 구조이고, 2개 중 하나는 DynamicIsland에 배치되고, 나머지 하나는 독립적인 영역에 표시되는데 기준은 앱에서 정한 우선순위를 따르게 된다.

expand	compact	minimal

ActivityKit

위에서 샘플 코드를 사용해서 LiveActivity를 실행해 봤는데 정확히 LiveActivity를 어떻게 제어해야 하는지에 대해서 알아보자.

LiveActivity는 ActivityKit을 사용해서 제어를 할 수 있다.

ActivityKit을 통한 제어는 시작, 업데이트, 종료 이렇게 3가지 기능을 제공한다.

start

먼저 LiveActivity를 활성화 해보도록 하자.

request를 사용해 LiveActivity를 실행할 수 있으며, attributes, content, pushType 모두 필수로 등록해야 한다.

attributes : 정적 어트리뷰트 객체

let attributes = TimerWIdgetAttributes(name: "Timer Sample")

content : 동적 어트리뷰트 객체
contentState를 사용해 동적으로 보여주고자 하는 데이터를 넘겨줄 수 있으며, ActivityContent 객체를 생성해 주면 된다.

let contentState = TimerWIdgetAttributes.ContentState(emoji: "😀")
let content = ActivityContent(state: contentState, staleDate: nil,relevanceScore: 1)

- staleDate: 만료시간으로, nil 지정시 8시간 후 종료 (잠금화면 12시간)
- relevanceScore: minimal 우선순위로 0~1로 설정

pushType : 업데이트 활동에 대한 푸시 알림 여부
nil 사용시 앱의 업데이트로만 활동을 변경함

아래와 같이 LiveActivity를 시작하며, 시작함과 동시에 잠금화면에도 노출되기 시작한다.

private func start() {
	let attributes = TimerWIdgetAttributes(name: "Timer Sample")
	let contentState = TimerWIdgetAttributes.ContentState(emoji: "😀")
	let content = ActivityContent(state: contentState, staleDate: nil,relevanceScore: 1)
	do {
		_ = try Activity<TimerWIdgetAttributes>.request(
                attributes: attributes,
                content: content,
                pushType: nil
            )
	} catch {
		print("LiveActivityManager: Error in LiveActivityManager: \(error.localizedDescription)")
	}
}

LiveActivity는 최대 노출시간이 정해져 있는데, 종료 시간을 따로 지정하거나 종료를 시켜주지 않는다면 최대 8시간 까지 노출이 가능하고 잠금화면에서는 최대 12시간 까지 남아있을 수 있다.

동적 데이터 사용과 관련해서는 LiveActivity가 자체 샌드박스에 실행되기 때문에 네트워크 접근이나 위치 데이터 업데이트 등의 데이터를 받을 수 없기 때문에 동적 데이터를 사용허고자 한다면 앱의 ActivityKit을 통한 동적 데이터 전달이나 ActivityKit의 푸시를 등록해 푸시 알림을 통해 데이터를 얻을 수 있다.
푸시 알림을 통한 동적 데이터를 가져올 때에도 4KB 이상의 데이터는 전달 받을 수 없으니 이 점을 고려하셔야 한다.

update

이번에는 앱의 이벤트를 발생시켜 LiveActivity의 데이터를 업데이트하는 방법에 대해서 알아보자.

먼저 현재 활성화된 LiveActivity의 정보를 가져오도록 하자.
ActivityKit의 activities의 현재 활동의 정보가 담겨있다.

for activity in Activity<TimerWIdgetAttributes>.activities {
	// current LiveActivity
}

활동에 대한 정보를 가져와 활성화된 액티비티의 데이터를 업데이트할 수 있다.

ContentState에 데이터를 변경하고자 하는 데이터로 등록해주면 된다.

update의 content는 필수로 전달해야하는 값은 아니다.

private func update() async{
	let status = TimerWIdgetAttributes.ContentState(emoji: "Update")
	let content = ActivityContent(state: status, staleDate: nil)
	for activity in Activity<TimerWIdgetAttributes>.activities {
            await activity.update(content)
	}
}

end

마지막으로 LiveActivity의 활동을 종료시키는 방법이다.

여기서 종료를 하는 방법은 2가지 방법이 있는데, 단순히 종료만 할 수 있고 아예 잠금화면에서 지워줄 수 있다.

이번에도 update 방법과 동일하게 현재 활동 중인 액티비티를 가져와서 실행 중인 액티비티를 종료해 주도록 하자.

private func end() async{
	let finalStatus = TimerWIdgetAttributes.ContentState(emoji: "End")
	let finalContent = ActivityContent(state: finalStatus, staleDate: nil)
	for activity in Activity<TimerWIdgetAttributes>.activities {
		await activity.end(finalContent)
	}
}

dismissalPolicy

활동을 종료하는 방법에는 3가지의 타입이 있다.

.default
LiveActivity 기능만 종료

await activity.end(finalContent,dismissalPolicy: .default)

.immediate
LiveActivity 기능 종료 및 제거

await activity.end(finalContent,dismissalPolicy: .immediate)

.after(Date)
LiveActivity를 생성한 시간에 종료 및 제거

await activity.end(finalContent,dismissalPolicy: .after(Date()))

default	immediate	after(10초 후)

Attributes

LiveActivity의 요소 중 이어서 살펴볼 요소는 바로 위에서 사용해본
ActivityAttributes 객체이다.

해당 객체의 ContentState는 필수로 사용해야 하며 해당 필드에 동적 객체를 생성할 수 있도록 하면 된다.

동적 객체의 변수는 하나만 사용해야 하는 것은 아니고, 여러 변수들을 사용하여도 되니 LiveActivity에 보여주고자 하는 적절한 구조를 만들어 활용해 주면 된다.

참고로 기본 코드에 생성되어 있는 name 변수는 필수가 아니다.

struct TimerWIdgetAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        // Dynamic stateful properties about your activity go here!
        var emoji: String
    }

    // Fixed non-changing properties about your activity go here!
    var name: String
}

Widget

마지막으로 UI를 구성해주는 Widget 객체에 대해서 알아보자.

Widget은 WidgetConfiguration 프로토콜을 반환해야 하며 LiveActivity는 ActivityConfiguration을 사용할 수 있다.

ActivityConfiguration(for: TimerWIdgetAttributes.self) { context in
         // Lock Scrren UI
		} dynamicIsland: { context in
        // DynamicIsland UI
	}
)

DynamicIsland

LiveActivity의 잠금화면과 함께 구성이 가능한 DynamicIsland에 대해서도 알아보도록 하자.

잠금화면에서는 앱의 활성화 상태에서도 잠금화면에 노출되지만, DynamicIsland는 앱이 비활성 상태인 경우에만 노출되게 된다.

DynamicIsland의 UI는 위에서도 간단하게 살펴봤지만, 크게 3가지로 구성된다.

expand	compact	minimal

먼저, compact 모드에 대해서 살펴보면, 활성화된 다이나믹아일랜드가 단 하나의 앱만 있는 경우에 노출되는 모드이며 LeadingSide, TrailingSide의 UI를 사용할 수 있다.

struct TimerWIdgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: TimerWIdgetAttributes.self) { context in
        //
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                }
                DynamicIslandExpandedRegion(.trailing) {
                }
                DynamicIslandExpandedRegion(.bottom) {
                }
            } compactLeading: {
            	// Compact 모드 Leading Side
            } compactTrailing: {
            	// Compact 모드 Trailing Side
            } minimal: {
            }
        }
    }
}

이어서 활성화 된 다이나믹아일랜드가 2개 이상의 앱이 있는 경우에 사용되는 모드인 minimal에 대해서 살펴보자.

minimal 모드시 attached, detached의 영역에 UI를 노출하게 되는데, UI에 대한 구성은 compact 모드처럼 별도로 구성해주지 않아도 하나의 UI를 사용하게 된다.

struct TimerWIdgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: TimerWIdgetAttributes.self) { context in
        //
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                }
                DynamicIslandExpandedRegion(.trailing) {
                }
                DynamicIslandExpandedRegion(.bottom) {
                }
            } compactLeading: {
            } compactTrailing: {
            } minimal: {
            	// minimal 모드 
            }
        }
    }
}

마지막으로 expand 모드에 대해서 살펴보도록 하겠다.

expand모드는 활성화된 다이나믹아일랜드를 길게 터치 했을 때에 더 많은 정보를 보여주기 위해 사용되는 모드이다.

여기서는 leading, trailing, bottom, center 이렇게 4가지의 영역을 구성할 수 있는데 각 영역들은 옵셔널로 필수는 아니지만 반드시 하나의 영역에 대해서는 코드를 사용해 주어야 한다.

struct TimerWIdgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: TimerWIdgetAttributes.self) { context in
        //
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                	// expand 모드 leading 영역
                }
                DynamicIslandExpandedRegion(.trailing) {
                	// expand 모드 trailing 영역
                }
                DynamicIslandExpandedRegion(.bottom) {
                	// expand 모드 bottom 영역
                }
                DynamicIslandExpandedRegion(.center) {
                	// expand 모드 center 영역
                }
            } compactLeading: {
            } compactTrailing: {
            } minimal: {
            }
        }
    }
}

다이나믹아일랜드 UI를 작업할 때에 반드시 고려해야 하는 부분이 있는데, 바로 오버플로우가 발생하게 되면 활성화가 안될 수 있으니 이 부분을 고려해 사이즈 기준을 맞춰줘야 한다.

마무리

WidgetKit의 기능 중 LiveActivity를 사용하여 잠금화면과 다이나믹아일랜드의 UI 사용 및 제어 방법에 대해서 알아봤다.

이번 글에서 직접 예제를 사용해 LiveActivity를 구성하면서 글을 작성하려고 하였지만 글의 내용이 너무 길어져서 별도로 글을 올리도록 하겠다.

감사합니다.