iOS에서 제공하는 TipKit 프레임워크를 도입하고, 새로운 기능을 더 쉽게 검색할 수 있도록 사용자를 도운 사례를 가져와 봤습니다! 사용자 경험에 큰 도움이 되는 요소입니다.

Tip은 사용자에게 앱의 가장 중요한 세부 정보를 안내하는 데에 큰 도움이 되는 요소인데요. '

앱에 새로운 기능을 추가할 계획이 있다면 이 기능을 더 쉽게 구현할 수 있는 방법에 대해 살펴보겠습니다.

원글을 작성한 개발자는 Coffee Shop 앱에 추가한 새로운 기능에 대한 Tip을 작성했습니다. 사용자가 주문 내역을 보고 신속하게 액세스하고, 반복할 수 있죠.

1. Tip content

   • Tip 프로토콜을 구현하여 팁에 표시하려는 내용을 정의한다.

struct HistoryTip: Tip {
    var title: Text {
        Text("Access your order's history!")
    }
    
    var message: Text? {
        Text("You can quickly repeat any order you want")
    }
}

2. Loading tip

   • 팁을 앱에 로드한다. 앱이 시작할 때 configure(_:) 메소드를 호출한다.

@main
struct CoffeeShopDemoApp: App {
    
  init() {
    try? Tips.configure()
  }

  var body: some Scene {
    WindowGroup {
      ContainerView()
    }
  }
}

3. Showing tips

   • 두 가지 보기 스타일 중 선택할 수 있음

     • Inline : 원하는 곳에 배치할 수 있음. 팁 인트턴스와 화살표를 놓을 방향만 결정

       import SwiftUI
       import TipKit
       
       struct HomeView: View {
         private let tip = HistoryTip()
           
         var body: some View {
             HStack {
                 TipView(tip, arrowEdge: .trailing)
                 Button {...}
             }
             .padding(.horizontal, 16)
         }
       }

     • Popover : 모든 화면 요소 위에 팁을 표시하는 View Modifier

       import SwiftUI
       import TipKit
       
       struct HomeView: View {
         private let tip = HistoryTip()
           
         var body: some View {
             HStack {
               Text("Menu")
                 .font(.largeTitle)
               Spacer()
               Button {
                 ...
               } label : {
                   Image(systemName: "clock.arrow.circlepath")
                       .resizable()
                       .aspectRatio(contentMode: .fit)
                       .frame(width: 25, height: 25)
               }
               .popoverTip(tip)
               .onTapGesture {
                 tip.invalidate(reason: .actionPerformed)
               }
             }
             .padding(.horizontal, 16)
         }

이 외에도 팁을 언제 표시할 지 제어하는 기능도 사용할 수 있습니다.

더 다양한 코드와 기능들은 아래 링크를 참고해 보세요 ^,^

https://medium.com/@blorenzop/swiftui-and-tipkit-eb7d99657fc8