[iOS] 프로젝트에 TipKit 사용하기.

프로젝트 TipKit 도입 배경

이번 프로젝트는 주제 선정부터 디자인, 개발까지 혼자 진행했습니다.

이 앱은 매일 밤, 달을 찍으며 하루를 정리하는 '달 사진 다이어리 앱'입니다.

 

그렇다면, 왜 TipKit을 도입하게 되었을까요?

 

 

 

해당 이유는

디자인 과정에서 달 모양의 이미지를 버튼으로 사용하기로 했기 때문입니다.

 

이 커스텀 버튼은 시각적으로 '달'이라는 컨셉을 잘 반영했다고 생각했지만,

사용자들이 이를 쉽게 버튼으로 인식하지 못하는 문제가 있었습니다.

 

이 문제를 해결하기 위해 기본 컴포넌트로의 변경이나 다른 버튼 이미지의 사용도 고려해봤지만,

기존의 버튼을 유지하고자 다른 방안을 모색했습니다.

(제가 만든 달 버튼을 포기하고 싶지 않았어요 🥲)

 

그러던 중 TipKit이라는 새로운 프레임워크를 발견했고, 해당 프레임워크는 iOS 17 버전 이상을 요구합니다.

이번 프로젝트는 iOS 버전을 크게 고려하지 않아도 되는 상황이기에 TipKit을 도입하기에 적합했습니다.

 

이제 TipKit이 무엇인지와 어떻게 활용했는지 간략히 소개하겠습니다.

---

WWDC 2023: TipKit 소개

WWDC 2023에서 새롭게 소개된 프레임워크인 TipKit은 앱 사용자에게 필요한 팁을 쉽게 제공할 수 있도록 돕습니다.

 

아래 이미지와 같이, 상황에 따라 요약된 정보를 사용자에게 효과적으로 전달할 수 있습니다.

 

저는 이 기능을 활용하여 앱 내의 달 모양 이미지가 실제로 버튼임을 사용자에게 명확히 알리고자 했습니다.

사용법은 매우 간단합니다.

 

우선 Tip 프로토콜을 구현하고, 원하는 제목(title), 메시지(message), 이미지(image)를 설정하면 됩니다.

제목은 필수로 구현해야 하며, 메시지와 이미지는 선택적으로 사용할 수 있습니다.

// 예시
struct FavoriteTip: Tip {
    var title: Text {
        Text("Save as a Favorite")
    }

    var message: Text? {
        Text("Your favorite backyards always appear at the top of the list.")
    }

    var image: Image? {
        Image(systemName: "star")
    }
}

 

Tip이 보여지는 조건을 설정하려면 rules 프로퍼티를, 

Tip의 표시 시간이나 최대 표시 횟수 같은 옵션을 조정하려면 options 프로퍼티를 사용하면 됩니다

 

Tip | Apple Developer Documentation

Tips.Rule | Apple Developer Documentation

---

내 앱에 TipKit 적용하기

제 앱에서는 달 모양 버튼의 기능을 설명하는 간단한 텍스트만 필요했습니다. 

이를 위해 다음과 같이 title을 구현하여 TipKit을 사용했습니다.

import TipKit

struct MoonButtonTip: Tip {
    var title: Text {
        Text("달 사진 찍기!")
    }
    
    var message: Text? {
            Text("달 사진을 찍어보세요.")
        }
}

 

Tip을 위의 코드로 생성한 후, 앱에 다음과 같이 구성했습니다. 

아래 코드는 사용자가 처음 앱을 사용할 때 Tip이 보여지며, 한 번만 나타나게 합니다.

import TipKit

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

 

 

마지막으로, Popover 타입의 Tip을 사용하여, 

다음과 같이 View에서 달 이미지 버튼에 팁을 보여주도록 설정했습니다.

// 생략
private let moonButtonTip = MoonButtonTip()
// 생략
NavigationLink {
    CameraView()
} label: {
    Image(Asset.moonButton.fileName)
}
.popoverTip(moonButtonTip)

---

 

추가로 Tip은 아래 이미지와 같이 Popover타입과 Inline 타입을 갖습니다.

상황에 따라 타입을 선택해주면 됩니다.

좌: Popover Type, 우: Inline Type

 

---

마무리(+ 아쉬운 점)

TipKit을 사용하여 사용자가 앱에 처음 접속했을 때

달 이미지가 버튼임을 알려주는 팁을 제공하여 달 모양이 버튼임을 인식할 수 있게 도와주었습니다.

 

TipKit은 다양한 설정을 통해 팁의 표시 조건을 세밀하게 조정할 수 있지만,

아직까지 Tip View를 내가 원하는 대로 커스텀해서 사용할 수는 없습니다.

 

예를들어 프로젝트의 컨셉에 맞게 background color를 바꿔주고 싶었는데

사용자 모드에 따른(라이트, 다크 모드) 색상 변경만 가능했습니다.

(혹시 변경이 가능하다면 관련 자료를 알려주세요 🥲)

 

이번 포스팅에서는 제가 TipKit을 왜 사용했고, 어떻게 적용했는지에 대해서만 간단히 소개했습니다.

더 자세한 정보를 원하시면 WWDC 영상과 공식 문서를 참고해 주세요!

 

잘못된 내용이나 궁금하신 점이 있다면 댓글 남겨주세요. 🤓

읽어주셔서 감사합니다.

---

📝 참고 자료

TipKit | Apple Developer Documentation

Tip | Apple Developer Documentation

Make features discoverable with TipKit - WWDC23 - Videos - Apple Developer