WWDC 2023 - Make features discoverable with TipKit

안녕하세요~ Diana 입니다.

요즘 날씨가 점점 쌀쌀해지는데 오늘은 비까지 와서 더 춥게 느껴지네요.

올해의 20도 넘는 날씨는 이제 며칠 남지 않았나 봅니다 ㅎㅎ..

 

 

1시간 반이 좀 넘는 출퇴근을 하며 요즘 전 오늘의 집 어플을 많이 보고 있습니다.

자취는 아직 먼 미래겠지만 오늘의 집에서 예쁘게 꾸미고 사시는 분들을 보면 약간 대리만족이 되더라구요...

그러던 와중 오늘의 집에서 재밌는 UI를 발견했습니다.

 

 

"오늘의 집 고감도 셀렉트 샵" 이라 적혀있는 저 UI 보이시나요?

 

 

스크린 샷을 보면 있는 "오늘의집 고감도 셀렉트샵"이라 적혀있는 저 뷰가 뭔지 궁금했습니다.

일단 뭐라 부르는지도 몰라서 Custom Alert니 Custom Popup이니 다양하게 검색하다가 완전 동일하지는 않지만 TipKit이라는 Apple에서 지원하는 라이브러리를 발견하였고 재밌어 보여서 오늘은 이 TipKit에 대해 알아보려고 합니다.

 

서론이 너무 길었네요!

바로 시작할게요!

 

 

---

 

 

✅ TipKit이란?

TipKip은 WWDC 2023 Make features discoverable with TipKit에서 새로 발표된 프레임워크 입니다.

TipKit은 앱의 새로운 기능, 숨겨진 기능 그리고 특정 목적 달성을 위한 팁 등을 사용자에게 알려주는 것을 목적으로 하고 있으며 Apple의 모든 디바이스에서 사용 가능합니다.

 

 

위의 예시들은 권장되는 TipKit의 사용 방향입니다.

각각의 Tip들은 사용자에게 Educational, Instructional 하며 기억하기 쉽습니다.

 

그러면 TipKit 사용이 지양되는 예시에는 무엇이 있을까요?

 

위 예시들은 TipKit 사용이 지양되는 방향으로 각각의 Tip 들은 홍보를 목적으로 하고, 에러메세지를 나타내며 유저의 액션을 필요로 하지 않고 너무 복잡하고 기억하기 쉽지 않습니다.

 

이러한 경우에는 TipKit의 기본 사용 권장 방향과 거리가 있으므로 TipKit 사용이 추천되지 않습니다.

 

 

TipKit의 종류에는 두 가지가 있습니다.

 

✓ 1. PopOver View

PopOverView는 앱 UI 위에 띄우는 뷰 입니다.

해당 뷰는 버튼이나 다른 요소(Element) 들을 직접 가리킬 수 있으며 현재의 앱 화면을 변경하지 않고도 유저들을 유도할 수 있습니다.

위에서 봤던 오늘의 집의 뷰는 바로 이 PopOverView 겠네요!

 

✓ 2. In-Line View

 

In-Line View는 일시적으로 UI를 해당 뷰에 맞게 조정합니다.

이미 있는 UI의 위에 생성되거나 하는 것이 아니기 때문에 현재 UI를 막지 않는다는 장점을 가지고 있습니다.

 

이렇게 두 종류의 TipView는 관련 뷰 요소 주변에 생성된다는 공통적인 특징을 가지고 있습니다.

 

 

✅ TipKit Rule

이런 TipKit을 사용하는데는 아래와 같은 두 가지 주요 규칙이 존재합니다.

 

 ✓ 매개변수 기반 룰(Parameter-based rules)

매개변수 기반 룰은 Swift 값 유형에 기반한 팁 표시에 적합합니다.

✓ 이벤트 기반 규칙(Event-based-rules)

이벤트 기반 규칙을 쓰면 사용자가 어떤 작업을 수행해야 Tip을 볼 자격이 생기는 지를 정의할 수 있습니다.

 

 

말로만 하면 무슨의미인지 잘 모르겟으니 직접 사용해봐야겠죠?

 

✅ TipKit 사용해보기

화면에 특정 버튼에 Tip을 추가하기 위해 CustomTip을 구현해보도록 하겠습니다.

struct CustomTipKit: Tip {
    var title: Text {
        Text("CustomKit Title")
            .foregroundStyle(.white)
    }
    
    var message: Text? {
        Text("Hello, this is CustomKit messsage")
    }
    
    var asset: Image {
        Image(systemName: "globe")
    }
    
    var actions: [Action] {
        Tip.Action(id: "hello", title: "Hello World")
    }
}

 

Tip의 기본요소에는 제목(Title)과 메세지(Message) 그리고 asset, actions 등이 있습니다.

위에서도 보았듯이 해당 내용들은 유저에게 교육적이여야 하며 간단한 액션을 유도해야 합니다.

 

@main
struct SwiftUI_FeatureDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
    
    init() {
        try? Tips.configure([.displayFrequency(.immediate), .datastoreLocation(.applicationDefault)])
    }
}

 

간단히 Tip을 구현했으면 팁을 컨트롤할 TipCenter를 구성해야 합니다.

하지만 WWDC에서 안내한 바와 달리 현재 제 Xcode 버전 15에서는 TipsCenter가 사용이 불가능하므로 위와 같이 Tips.configuration을 통해 Tip을 구성해주엇습니다.

 

 

Configuration 내부에는 위와 같이 datastoreLocation과 displayFrequency를 설정해줄 수 있는데 각각에 대해 알아보면 dataStoreLocation의 경우 Tip에서 사용할 커스텀 dataStore을 지정해주는 것이며 디폴트로는 ApplicationDefault를 사용합니다. 그리고 displayFrequency의 경우 화면 위의 모든 팁이 동시 다발적으로 표시되면 확인이 어려우므로 하나의 팁이 나온 이후 그 다음 팁이 표시될 간격을 나타냅니다.

 

 

 

아무튼 해당 코드와 같이 구현하면 위와 같이 기본적인 TipKit을 구성할 수 있습니다.

 

하지만 이렇게 끝내기에는 우리는 마지막에 규칙에 대해 배웠습니다.

이 부분도 간단히 구현해보도록 하겠습니다.

 

@Parameter
    static var isLoggedIn: Bool = false
    static let enterView: Event = Event(id: "didViewVisted")
    
    
    var rules: [Rule] {
        #Rule(Self.$isLoggedIn) { $0 == true }
        #Rule(Self.enterView) { $0.donations.count > 3 }
    }

 

위 코드에서 isLoggedIn은 매개변수 기반 규칙입니다.

우리는 해당 값을 파라미터로 생성한 뒤 #Rule 매크로를 사용하여 해당 값에 대한 팁의 규칙을 지정해줄 수 있습니다.

 

아래의 Event를 만족시키고 있는 enterView 또한 이벤트 기반 규칙을 만족시키는 값으로 이를 통해 해당 뷰에 3번 이상 방문한 경우($0.donations.count > 3) Tip을 띄워주도록 이벤트에 대한 팁의 규칙을 지정해 줄 수 있습니다.

 

이렇게 설정된 규칙들은 Tips의 dataStore가 리셋될 때가지 유지됩니다.

 

 

 

오늘은 재미있는 기능인 TipKit에 대해 알아보았는데 물논 위의 오늘의 집에 사용된 뷰가 정확하게 TipKit이다 라고는 확신할 수 없습니다.

하지만 TipKit 내부 코드를 확인해보면 PopOver TipKit이 가리키는 방향이나 백그라운드 색상을 변경하는 등 어느정도의 커스텀이 가능한 것 같던데 이 부분은 이후 사용하게 되면 추가하도록 하겠습니다.