본문으로 건너뛰기

엔트리포인트(EntryPoint)

엔트리포인트를 추가하고 SDK 인터페이스를 사용해 부가 기능을 구현하는 방법을 알아보세요.

주요 특징

엔트리포인트는 앱 내 다양한 위치에 자연스럽게 배치할 수 있는 진입 컴포넌트로, 유저가 콘텐츠에 쉽게 접근할 수 있도록 도와줍니다. 플로팅 버튼(FAB), 배너(Banner), 바텀 시트(BottomSheet), 팝업(Popup), 커스텀(Custom) 등 다양한 UI 유형을 지원하며, 기획 목적에 따라 자유롭게 선택하고 배치할 수 있습니다. 버즈빌 대시 어드민을 통해 설정할 수 있으며, 클릭 시 베네핏허브, 럭키박스, 미션팩 등으로 이동하거나 앱 내 특정 화면으로 연결되는 딥링크를 설정할 수 있습니다.

연동

엔트리포인트를 연동하는 방법을 확인해 보세요.

1 단계. 준비하기

2 단계. 설정하기

✏️  참고
네이티브 오버레이의 경우 네이티브 오버레이 사용하기를 참고하세요.
엔트리포인트를 설정하려면 버즈빌 담당자(help@buzzvil.com)에게 연락하세요.

엔트리 포인트 유형

유형설명
FAB플로팅 액션 버튼으로, 화면의 오른쪽 하단에 위치합니다.
Banner화면 내 원하는 위치에 고정된 배너 형태로, 여러 개의 배너 엔트리 목록을 슬라이드 형식으로 표시하며 3초마다 자동 전환됩니다.
Popup팝업 형태로, 화면 중앙에 표시됩니다.
BottomSheet바텀 시트 형태로, 화면 하단에서 위로 슬라이드 하여 표시됩니다.
Custom커스텀 UI를 사용하여 엔트리포인트를 구현할 수 있습니다.

엔트리 포인트 이미지

유형이미지
FAB
Banner
Popup
BottomSheet

엔트리 포인트 UI 지원 규격

유형규격
FAB
  • 이미지 포맷: PNG, JPG, JSON(Lottie)
  • 파일 크기: 최대 2 MB
  • 이미지 비율: 60 x 60 (가로 x 세로)
  • 툴팁 글자 수: 최대 6 자 (공백 포함)
  • 메시지 글자 수: 최대 20 자 (공백 포함)
Banner
  • 이미지 포맷: PNG, JPG, JSON(Lottie)
  • 파일 크기: 최대 2 MB
  • 이미지 비율: 351 x 112 (가로 x 세로)
Popup
  • 이미지 포맷: PNG, JPG, JSON(Lottie)
  • 파일 크기: 최대 2 MB
  • 이미지 비율: 335 x 380 (가로 x 세로)
BottomSheet
  • 이미지 포맷: PNG, JPG, JSON(Lottie)
  • 파일 크기: 최대 2 MB
  • 이미지 비율: 335 x 256 (가로 x 세로)

3 단계. 요청하기

아래 코드를 참고하여 엔트리포인트를 요청하세요.

✏️  참고
load를 호출하면 대시 어드민에 활성화된 모든 엔트리포인트 정보를 한 번에 가져옵니다.

BuzzEntryPoint.shared.load(
onSuccess: { [weak self] availableTypes in
// 요청에 성공하면 표시 가능한 엔트리포인트 타입 배열과 함께 호출됩니다.
},
onFailure: { [weak self] error in
// 요청에 실패하면 에러와 함께 호출됩니다.
}
)

엔트리 포인트 타입 BuzzEntryPointType 종류

유형SwiftObjective-C
FAB.fabBuzzEntryPointTypeFab
Banner.bannerBuzzEntryPointTypeBanner
Popup.popupBuzzEntryPointTypePopup
BottomSheet.bottomSheetBuzzEntryPointTypeBottomSheet
Custom.customBuzzEntryPointTypeCustom

4 단계. 표시하기 (FAB)

아래 코드를 참고하여 엔트리포인트 FAB를 표시하세요.

✏️  참고
showFab 메소드는 BuzzEntryPoint.shared.load 메소드를 호출하여 성공적으로 onSuccess 응답을 받은 후에 호출할 수 있습니다.
canShow 메소드를 사용하여 FAB를 표시할 수 있는지 확인한 후에 호출할 수 있습니다.

import SwiftUI
import BuzzvilSDK

struct YourView: View {
@State private var isFabPresented = false

var body: some View {
Color.clear
.buzzEntryPointFab(isPresented: $isFabPresented)
}
}

4 단계. 표시하기 (Banner)

아래 코드를 참고하여 엔트리포인트 Banner를 표시하세요.

✏️  참고
showBanner 메소드는 BuzzEntryPoint.shared.load 메소드를 호출하여 성공적으로 onSuccess 응답을 받은 후에 호출할 수 있습니다.
canShow 메소드를 사용하여 Banner를 표시할 수 있는지 확인한 후에 호출할 수 있습니다.

import SwiftUI
import BuzzvilSDK

struct YourView: View {
@State private var isBannerPresented = false

var body: some View {
VStack {
if isBannerPresented {
// aspectRatio 는 연동 가이드 비율(351 x 112)에 맞추는 것을 권장합니다. 비율이 맞지 않을 경우 이미지가 잘리거나, 여백이 생길 수 있습니다.
BuzzEntryPointBannerView.Representable(isVisible: $isBannerPresented)
.aspectRatio(351.0 / 112.0, contentMode: .fit)
.frame(maxWidth: .infinity)
.listRowInsets(EdgeInsets())
.listRowBackground(Color.clear)
}
}
}
}

4 단계. 표시하기 (Popup)

아래 코드를 참고하여 엔트리포인트 Popup을 표시하세요.

✏️  참고
showPopup 메소드는 BuzzEntryPoint.shared.load 메소드를 호출하여 성공적으로 onSuccess 응답을 받은 후에 호출할 수 있습니다.
canShow 메소드를 사용하여 Popup을 표시할 수 있는지 확인한 후에 호출할 수 있습니다.

import SwiftUI
import BuzzvilSDK

struct YourView: View {
@State private var isPopupPresented = false

var body: some View {
Color.clear
.buzzEntryPointPopup(isPresented: $isPopupPresented)
}
}

4 단계. 표시하기 (BottomSheet)

아래 코드를 참고하여 엔트리포인트 BottomSheet을 표시하세요.

✏️  참고
showBottomSheet 메소드는 BuzzEntryPoint.shared.load 메소드를 호출하여 성공적으로 onSuccess 응답을 받은 후에 호출할 수 있습니다.
canShow 메소드를 사용하여 BottomSheet을 표시할 수 있는지 확인한 후에 호출할 수 있습니다.

import SwiftUI
import BuzzvilSDK

struct YourView: View {
@State private var isBottomSheetPresented = false

var body: some View {
Color.clear
.buzzEntryPointBottomSheet(isPresented: $isBottomSheetPresented)
}
}

4 단계. 표시하기 (Custom)

아래 예시 코드를 참고하여 엔트리포인트 Custom을 표시하세요. UI를 자유롭게 구성하고, customEntryPointClicked 메소드를 호출하여 클릭 이벤트를 처리할 수 있습니다.

✏️  참고
customEntryPointClicked 메소드에서 식별되지 않는 identifier를 인자로 받게 되면, 기본 동작인 베네핏허브 열기로 동작합니다.

import SwiftUI
import BuzzvilSDK

struct YourView: View {
var body: some View {
CustomEntryViewControllerRepresentable()
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}

fileprivate struct CustomEntryViewControllerRepresentable: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> CustomEntryViewController {
CustomEntryViewController()
}

func updateUIViewController(_ uiViewController: CustomEntryViewController, context: Context) {}
}

fileprivate final class CustomEntryViewController: UIViewController {
private lazy var customEntryButton: UIButton = {
let button = UIButton(type: .system)
button.setTitle("Custom Entry", for: .normal)
button.addTarget(self, action: #selector(customEntryButtonTapped), for: .touchUpInside)
return button
}()

override func viewDidLoad() {
super.viewDidLoad()

view.addSubview(customEntryButton)

customEntryButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
customEntryButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
customEntryButton.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
}

@objc
private func customEntryButtonTapped() {
BuzzEntryPoint.shared.customEntryPointClicked(identifier: "YOUR_IDENTIFIER", on: self)
}
}

추가 구현

엔트리포인트에 추가 기능을 구현하는 방법을 안내합니다.

딥링크 동작 커스터마이징

엔트리포인트 클릭 시 딥링크 동작을 커스터마이징할 수 있습니다. 아래 예시 코드를 참고하세요.

✏️  참고
기본으로 설정된 딥링크 클릭 동작은 외부 브라우저로 열기입니다.

BuzzEntryPoint.shared.setDeepLinkHandler { deepLinkURL in
// 대시 어드민을 통해 설정한 deepLink url string이 전달됩니다.
YourRouter.route(deepLinkURL)
}