[SwiftUI/TipKit] 사용자에게 Tip 제공하기

별다른 설명 없이도 사용자가 해당 UI가 무엇을 의미하는지, 어떤 기능을 포함하는지 알게끔 ux가 고려 되면 좋겠지만 설명이 필요한 경우도 있어요. 이 설명을 보여주기 위해 TipKit을 사용해 보려고 합니다. 사이드 프로젝트라 minimum target iOS 17로 설정해 놓고 해보고 싶은거 다 해보고 있어요 아이 좋아라

 

TipKit과 같은 ToolTip이 필요한데 버전이 안되시면 아래 글에서 툴 팁 그리는 방법 참고해 보세요!

> 2023.11.06 - [SwiftUI] - [SwiftUI] Shape path로 Tooltip 그리기

---

What is TipKit

Tipkit은 iOS 17 부터 사용할 수 있는 프레임워크로 애플이 제공합니다. 앱에서 사용자에게 설명이나 안내를 표시하는데 사용할 수 있어요. 

---

Tutorial

import TipKit

TipKit을 사용하기 위해서는TipKit 라이브러리를 임포트 해줘야 합니다. Tip 프로토콜을 따르는 구조체가 필요하기 때문에 새로운 파일 혹은 Tip 구조체를 정의할 파일에 임포트 해주세요!

 

struct InfoTip: Tip {
    var title: Text
}

 

구조체 하나를 만들어 준뒤 Tip 프로토콜을 채택합니다.

Tip 프로토콜을 잠시 살펴볼게요!

@available(macOS 14.0, iOS 17.0, tvOS 17.0, watchOS 10.0, *)
public protocol Tip : Identifiable, Sendable {
    var id: String { get }
    var title: Text { get }
    var message: Text? { get }
    var image: Image? { get }
    @Tips.ActionBuilder var actions: [Self.Action] { get }
    @Tips.RuleBuilder var rules: [Self.Rule] { get }
    @Tips.OptionsBuilder var options: [TipOption] { get }
}

Tip 프로토콜 내부에는 툴팁을 구현하는데 필요한 상태값을 저장하기 위한 변수들이 이미 정의되어 있어요

 

struct InfoTip: Tip {
    var title: Text {
        Text("삭제하고 싶다면 길게 눌러주세요.")
    }
}

필수로 title을 구현해 줘야 합니다. 

 

LazyVStack(spacing: 20) {
    ForEach(chatRooms, id: \.id) { chatRoom in
        // 생략
    }
}
.padding(.bottom, 40)
.popoverTip(InfoTip()) // <- 여기

 

툴팁을 표현하고 싶은 View에 .popoverTip modifier을 사용해서 Tip 프로토콜을 따르는 struct를 선언해 줍니다.

이제 툴팁을 언제 띄우고 싶은지 정해줘야 해요. 가장 최상위 뷰로 이동해 주세요.

 

import TipKit

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

 

마찬가지로 TipKit을 임포트 해주세요.

displayFrequency 에서 이 툴팁을 얼마나 노출시킬 건지 정할 수 있습니다. 얼마나 노출시킨다는 뜻이 뭔지는 여기 들어 갈 수 있는 값을 보면 바로 감이 올거에요!

이 툴팁을 매일 띄울건지, 매 시간마다 띄울 건지, 아니면 횟수 제한 없이 띄울건지 정할 수 있어요!

실행하면 해당 영역에 툴팁이 뜨게 됩니다.