UI 설정

전체 테마

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)을 구현하세요. 다음은 레이아웃 리소스로 뷰 레이아웃을 구현한 예시입니다.



<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark">
        
    <TextView
        android:id="@+id/textCta"/>
        
    
    <ImageView
        android:id="@+id/imageReward"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="아이콘 이미지 리소스"/>

    
    <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를 커스터마이징 하려면 버즈빌 담당자(help@buzzvil.com)에게 연락하세요.

이미지와 UI 스트링이 지원하는 규격은 다음과 같습니다.
- 이미지 포맷: PNG, JPG, JSON(Lottie)
- 파일 크기: 최대 2 MB
- 이미지 비율: 312 x 212 (가로 x 세로). 이미지의 비율이 맞지 않을 경우, 여백이 발생하거나 이미지 일부가 잘릴 수 있습니다.
- UI 스트링 글자 수 & 줄 수: 최대 20 자 (공백 포함) & 두 줄

네이티브 오버레이 영역

네이티브 오버레이가 표시되는 영역을 변경하려면 다음과 같이 BuzzNativeViewBinder에 nativeOverlayViewLayout()를 사용하여 네이티브 오버레이가 보여질 영역을 설정합니다.

✏️ 참고

yourCustomNativeAdLayout은 BuzzNativeAdView의 하위 컴포넌트로 구현된 ViewGroup이어야 합니다. e.g. CardView, ConstraintLayout

nativeOverlayViewLayout()를 설정하지 않으면 모서리의 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 버튼 자체 구현하기를 통해 포인트 단위를 변경할 수 있습니다.

내비게이션 바

베네핏허브 내비게이션 바의 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()
}