본문으로 건너뛰기

디자인 커스터마이징

여기에서는 BuzzAd iOS용 SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 안내합니다.

인터스티셜 지면에서는 광고 제목과 설명 문구의 색상(textColor), CTA 버튼 디자인(CTA), 지면의 배경 색상(backgroundColor)을 변경할 수 있습니다.

텍스트 색상 변경하기

인터스티셜 지면의 광고 타이틀과 설명 문구의 색상을 변경하려면 아래의 순서에 따라 구현하세요.

  1. 인터스티셜 광고의 디자인을 커스터마이징할 수 있는 BZVBuzzAdInterstitialTheme 객체를 생성하세요.
  2. BZVBuzzAdInterstitialTheme.textColor에 광고 타이틀과 설명 문구의 색상을 설정하세요.
  3. 위에서 생성한 BZVBuzzAdInterstitialTheme 객체를 BZVBuzzAdInterstitial.theme에 설정하세요.
let buzzAdInterstitial = BZVBuzzAdInterstitial { builder in
builder.unitId = "YOUR_INTERSTITIAL_UNIT_ID"
builder.type = .dialog
builder.theme = BZVBuzzAdInterstitialTheme { (builder: BZVBuzzAdInterstitialThemeBuilder) in
builder.textColor = UIColor.YOUR_TEXT_COLOR // 광고 타이틀과 설명 문구 색상
}
}

배경 색상 변경하기

인터스티셜 지면의 배경 색상을 변경하려면 아래의 순서에 따라 구현하세요.

  1. 인터스티셜 광고의 디자인을 커스터마이징할 수 있는 BZVBuzzAdInterstitialTheme 객체를 생성하세요.
  2. BZVBuzzAdInterstitialTheme.backgroundColor에 지면의 배경 색상을 설정하세요.
  3. 위에서 생성한 BZVBuzzAdInterstitialTheme 객체를 BZVBuzzAdInterstitial.theme에 설정하세요.
let buzzAdInterstitial = BZVBuzzAdInterstitial { builder in
builder.unitId = "YOUR_INTERSTITIAL_UNIT_ID"
builder.type = .dialog
builder.theme = BZVBuzzAdInterstitialTheme { (builder: BZVBuzzAdInterstitialThemeBuilder) in
builder.backgroundColor = UIColor.YOUR_BACKGROUND_COLOR // 지면 배경 색상
}
}

CTA 버튼 디자인 변경하기

BuzzAd iOS용 SDK에서 제공하는 CTA 버튼의 디자인을 변경할 수 있습니다.

다음은 BZVBuzzAdInterstitialTheme에서 구성 요소를 설정해 인터스티셜 지면의 CTA 버튼 디자인을 변경하는 예시입니다.

let buzzAdInterstitial = BZVBuzzAdInterstitial { builder in
builder.unitId = "YOUR_INTERSTITIAL_UNIT_ID"
builder.type = .dialog
builder.theme = BZVBuzzAdInterstitialTheme { (builder: BZVBuzzAdInterstitialThemeBuilder) in
...생략...
builder.rewardIcon = UIImage(named: "YOUR_REWARD_ICON")!
builder.participatedIcon = UIImage(named: "YOUR_PARTICIPATED_ICON")!
builder.ctaTextColor = BZVControlStateResource { builder in
builder.setValue(UIColor.YOUR_CTA_TEXT_NORMAL_COLOR, for: .normal)
}
builder.ctaBackgroundColor = BZVControlStateResource { builder in
builder.setValue(UIColor.YOUR_CTA_BACKGROUND_NORMAL_COLOR, for: .normal)
}
}
}