커스터마이징
전체 테마
Buzzvil SDK에서 제공하는 기본 UI를 사용해 광고 지면이나 CTA의 색상, 아이콘 이미지 등 테마를 변경할 수 있습니다.
주요 색상
Buzzvil SDK에서 제공하는 UI 중 다이얼로그의 버튼 색상, 바텀 시트 UI의 확인 버튼 등 앱에 연동한 모든 지면 내 주요 UI의 색상(Primary color)을 변경할 수 있습니다. 색상을 버즈빌 담당자(help@buzzvil.com)에게 전달해 주세요.
CTA 버튼 자체 구현하기
Buzzvil SDK에서 기본으로 제공하는 UI를 사용하지 않고 CTA 버튼을 자체적으로 구현할 수 있습니다. 자체적으로 구현한 CTA 버튼을 네이티브와 인터스티셜에서 사용할 수 있습니다.
CTA 버튼을 직접 구현하려면 다음의 절차를 따르세요.
뷰 레이아웃(
view_customized_cta.xml)을 구현하세요. 다음은 레이아웃 리소스로 뷰 레이아웃을 구현한 예시입니다.<!-- view_customized_cta.xml -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark">
<!-- CTA 버튼의 텍스트 -->
<TextView
android:id="@+id/textCta"/>
<!-- CTA 버튼의 아이콘 이미지 -->
<ImageView
android:id="@+id/imageReward"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="아이콘 이미지 리소스"/>
<!-- CTA 버튼의 리워드 텍스트 -->
<TextView
android:id="@+id/textReward"/>
</LinearLayout>BuzzCtaView클래스를 상속하는 서브클래스인YourCustomBuzzCtaView를 생성하세요.BuzzCtaView클래스에서 사용하던 CTA View 레이아웃을inflate하도록 구현하세요.유저의 광고 참여 상태에 따라 호출되는 아래의 오버라이딩 메소드에서 CTA 버튼의 아이콘 이미지, 텍스트, 리워드 값을 구현하세요.
renderViewParticipatingState: 유저가 광고에 참여 중인 상태 (예: 액션형 광고의 랜딩 페이지에 진입한 상태)renderViewParticipatedState: 유저가 광고 참여를 완료한 상태renderViewRewardAvailableState: 유저가 아직 광고에 참여하지 않은 상태renderViewRewardNotAvailableState: 유저가 획득할 리워드가 없는 광고import com.buzzvil.buzzbenefit.BuzzCtaView
class YourCustomBuzzCtaView(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
BuzzCtaView(context, attrs, defStyleAttr) {
private val rewardImageView: ImageView
private val rewardTextView: TextView
private val ctaTextView: TextView
constructor(context: Context) : this(
context,
null
)
constructor(context: Context, attrs: AttributeSet?) : this(
context,
attrs,
0
)
init {
inflate(getContext(), R.layout.view_customized_cta, this)
rewardImageView = findViewById(R.id.imageReward)
rewardTextView = findViewById(R.id.textReward)
ctaTextView = findViewById(R.id.textCta)
}
private fun setRewardIcon(@DrawableRes iconResId: Int) {
rewardImageView.setImageResource(iconResId)
rewardImageView.visibility = View.VISIBLE
}
private fun hideRewardIcon() {
rewardImageView.visibility = View.GONE
}
private fun setCtaText(ctaText: String) {
ctaTextView.text = ctaText
}
private fun setRewardText(rewardText: String) {
rewardTextView.text = rewardText
}
override fun renderViewParticipatingState(callToAction: String) {
setCtaText("참여 확인 중")
hideRewardIcon()
setRewardText("")
}
override fun renderViewParticipatedState(callToAction: String) {
setRewardIcon(R.drawable.custom_participated_icon)
setRewardText("")
setCtaText("참여 완료")
}
override fun renderViewRewardAvailableState(callToAction: String, reward: Int) {
setRewardIcon(R.drawable.custom_reward_icon)
setRewardText(String.format(Locale.US, "+%,d", reward)) // 원하는 포인트 단위를 적용하세요. (예시: `+1`, `1P`)
setCtaText(callToAction)
}
override fun renderViewRewardNotAvailableState(callToAction: String) {
hideRewardIcon()
setRewardText("")
setCtaText(callToAction)
}
}
⚠️ 주의
YourCustomBuzzCtaView클래스는 난독화 되지 않도록 Proguard 설정에서 제외해야 합니다. Proguard 설정 파일에 다음 라인을 추가하세요.-keep class com.your.packagename.YourCustomBuzzCtaView { *; }
자체 구현한 CTA 버튼을 GlobalTheme에 적용하기
BuzzTheme.setCustomBuzzCtaView()를 호출하여 자체 구현한 CTA 버튼을 적용하세요.
✏️ 참고
- SDK에서 기본 광고 디자인을 제공하는 인터스티셜 등에 적용됩니다.
- 네이티브는 연동 과정에서 자체 구현한 CTA 버튼을 적용하세요. 자세한 내용은 네이티브 - 2 단계. 광고 레이아웃 구성하기 토픽을 참고하세요.
- 베네핏허브에는 적용되지 않습니다.
import com.buzzvil.buzzbenefit.BuzzTheme
import com.buzzvil.sdk.BuzzvilSdk
class App : Application() {
override fun onCreate() {
super.onCreate()
val buzzAdBenefitConfig = ...
// BuzzvilSdk.initialize()를 호출하기 전에 BuzzTheme을 설정합니다.
BuzzTheme.setCustomBuzzCtaView(YourCustomBuzzCtaView::class.java)
// Buzzvil SDK 초기화
BuzzvilSdk.initialize(...)
}
}
네이티브
네이티브 오버레이 UI
버즈빌 대시 어드민을 통해 오버레이 UI를 구성하는 이미지와 텍스트를 커스터마이징할 수 있습니다.
✏️ 참고
오버레이 UI를 커스텀하지 않거나 커스터마이징 토글을 OFF 하면 버즈빌이 제공하는 UI가 적용됩니다.
네이티브 오버레이 UI를 커스터마이징하려면 다음의 절차를 따르세요.
- 버즈빌 대시 어드민(https://dashboard.buzzvil.com/)에 접속하세요.
- Inventory Manager에서 앱을 검색하고 선택한 후 왼쪽 메뉴 패널에서 Entry Point Contents 메뉴로 이동하세요.
- 진입점 유형 드롭다운 목록에서 ‘네이티브 오버레이’를 선택하세요.
- 오버레이 유형별로 커스터마이징 토글을 켜세요.
- 원하는 이미지와 UI 스트링을 등록하세요.
- 커스터마이징 UI를 실시간으로 미리보기할 수 있습니다.
- 오버레이 UI를 커스텀하지 않으면 버즈빌이 제공하는 UI가 적용됩니다.
- 이미지와 UI 스트링이 지원하는 규격은 다음과 같습니다.
- 이미지 포맷: PNG, JPG, JSON(Lottie)
- 파일 크기: 최대 2 MB
- 이미지 비율: 312 x 212 (가로 x 세로)
- UI 스트링 글자 수 & 줄 수: 최대 20 자 (공백 포함) & 두 줄
- 오른쪽 상단의 저장하기 버튼을 클릭하세요.
✏️ 참고
SDK Configuration 에서 비활성화한 기능의 오버레이는 접힌 상태로 표시됩니다.
네이티브 오버레이 영역
네이티브 오버레이가 표시되는 영역을 변경하려면 다음과 같이 BuzzNativeViewBinder에 nativeOverlayViewLayout()를 사용하여 네이티브 오버레이가 보여질 영역을 설정합니다.
✏️ 참고
yourCustomNativeAdLayout은BuzzNativeAdView의 하위 컴포넌트로 구현된ViewGroup이어야 합니다. e.g.CardView,ConstraintLayoutnativeOverlayViewLayout()를 설정하지 않으면 모서리의 radius 값이 12dp인 기본 배경이 적용됩니다.
import com.buzzvil.buzzbenefit.buzznative.BuzzNativeViewBinder
buzzNativeViewBinder = BuzzNativeViewBinder.Builder()
.buzzNativeView(buzzNativeAdView)
...
.nativeOverlayViewLayout(yourCustomNativeAdLayout)
.build(Constant.YOUR_NATIVE_ID)
베네핏허브
Buzzvil SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 안내합니다.
포인트 단위 변경
베네핏허브에 표시되는 포인트 단위를 변경할 수 있습니다. 변경하고자 하는 포인트 단위를 버즈빌 담당자(help@buzzvil.com)에게 전달해 주세요.
✏️ 참고
네이티브 및 인터스티셜에서는 CTA 버튼 자체 구현하기를 통해 포인트 단위를 변경할 수 있습니다.
럭키박스
SDK 패치 없이 UI 스트링 및 이미지 소재를 풀 커스텀하여 럭키박스의 스타일을 원하는 대로 변경할 수 있습니다. 커스텀하고 싶은 항목과 내용을 버즈빌 담당자(help@buzzvil.com)에게 전달해 주세요.
| 항목 | 설명 |
|---|---|
| 프로모션 명 |
|
| 참여 전후 진입점 |
|
| 참여도 영역 아이콘 |
|
| 럭키박스 참여 전후 CTA |
|
| 럭키박스 참여 전후 이미지 |
|
| 추가보상 배너 |
|
| 일일 리워드 금액 |
|
| 연속 참여 성공 리워드 금액 |
|
| 연속 참여 성공 문구 |
|
| 연속 참여 성공 문구 색상 |
|
| 연속 참여 성공 아이콘 |
|
| 연속 참여 성공 주변 효과 |
|
| 유의 사항 |
|
미션팩
SDK 패치 없이 UI 스트링 및 이미지 소재를 풀 커스텀하여 미션팩의 스타일을 원하는 대로 변경할 수 있습니다. 커스텀하고 싶은 항목과 내용을 버즈빌 담당자(help@buzzvil.com)에게 전달해 주세요.
| 항목 | 세부항목 | 설명 |
|---|---|---|
| 베네핏허브 진입점 | 타이틀 |
|
| 베네핏허브 진입점 | 아이콘 |
|
| 배경 | 색상 | - |
| 프로모션 타이틀 | 텍스트 | - |
| 미션 보너스 | 지급 비율 |
|
| 미션 보너스 CTA | 텍스트 | - |
| 도전 중 미션 | 도전 중 타이틀 | - |
| 도전 중 미션 | 도전 중 아이콘 |
|
| 도전 중 미션 | 도전 중 미션 설명 |
|
| 도전 중 미션 | 도전 중 미션 CTA |
|
| 도전 중 미션 | 미션 완료 CTA |
|
| 참여 완료 | 참여 완료 타이틀 | - |
| 미션 구성 | 미션 타이틀 | - |
| 미션 구성 | 설정 기준 |
|
| 미션 구성 | 미션별 진행도 |
|
| 럭키박스 진입점 | CTA |
|
| 유의 사항 | - |
|
| 성과 기록 유닛 | - |
|
| 광고 인정 유닛 | - |
|
내비게이션 바
베네핏허브 내비게이션 바의 UI 스트링을 수정하거나 내비게이션 바 영역을 자체 구현할 수 있습니다.
내비게이션 바 UI 스트링 변경하기
내비게이션 바의 UI 스트링을 변경할 수 있습니다. 변경하고자 하는 문구를 버즈빌 담당자(help@buzzvil.com)에게 전달해 주세요.
내비게이션 바 자체 구현하기
프래그먼트로 베네핏허브 연동하기 항목을 참고하여 내비게이션 바를 자체 구현할 수 있습니다.
개인정보 제3자 제공 동의 UI 자체 구현
개인정보 제3자 제공 동의 UI를 자체 구현하는 경우, SDK에 동의 여부를 전달해야 합니다.
아래 코드를 참고하여 적절한 함수를 호출해주세요.
import com.buzzvil.buzzbenefit.BuzzBenefit
lifecycleScope.launch(Dispatchers.IO) {
// SDK 초기화를 하지 않으면 privacyPolicyManager는 null을 반환합니다.
// 개인정보 동의 여부를 확인합니다.
val isConsentGranted: Result<Boolean>? = BuzzBenefit.privacyPolicyManager?.isConsentGranted()
// 직접 구현한 개인정보 제3자 제공 동의 UI에서 동의를 받았을 경우 아래 코드를 실행하면, 베네핏허브 진입 시 개인정보 제3자 제공 동의 UI가 노출되지 않으면서 광고 할당이 정상적으로 진행 됩니다.
val result: Result<Unit>? = BuzzBenefit.privacyPolicyManager?.grantConsent()
}