디자인 커스터마이징

이 페이지에서는 BuzzAd iOS용 SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 확인할 수 있습니다.

✏️  참고
추가적인 디자인 변경을 원하는 경우, 고급 설정 토픽을 참고해 UI를 직접 구현하세요.

피드 배경 색상 변경하기

✅  중요
이 기능은 BuzzAd iOS용 SDK v3.21.x부터 사용할 수 있습니다.

피드의 배경 색상을 변경할 수 있습니다.

피드의 배경 색상을 변경하려면 다음의 예시를 참고하세요.

✏️  참고
피드의 배경 색상을 지정하고 탭의 디자인을 따로 변경하지 않았다면, 피드의 배경 색상이 탭의 배경으로 자동 적용됩니다.

Swift

// BZVBuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
let buzzAdFeedTheme = BZVBuzzAdFeedTheme { (builder: BZVBuzzAdFeedThemeBuilder) in
  builder.feedBackgroundColor = UIColor.YOUR_BACKGROUND_COLOR
  // ...생략...
}

BZVBuzzAdFeed.setDefaultTheme(buzzAdFeedTheme)

Objective-C

// BZVBuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
BZVBuzzAdFeedTheme *buzzAdFeedTheme = [BZVBuzzAdFeedTheme themeWithBlock:^(BZVBuzzAdFeedThemeBuilder * _Nonnull builder) {
  builder.feedBackgroundColor = UIColor.YOUR_BACKGROUND_COLOR;
  // ...생략...
}];

[BZVBuzzAdFeed setDefaultTheme:buzzAdFeedTheme];

탭 디자인 변경하기

피드 탭이 활성화되어 있는 경우, 탭의 UI 디자인을 변경할 수 있습니다.

탭 UI 디자인을 변경하려면 다음의 예시를 참고하세요.

✏️  참고
사용자 경험을 고려하여 tabTextColor와 같은 BZVControlStateResource 타입은 인스턴스를 생성할 때 상태에 따라 다른 리소스를 설정하는 것을 권장합니다.

Swift

// BZVBuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
let buzzAdFeedTheme = BZVBuzzAdFeedTheme { (builder: BZVBuzzAdFeedThemeBuilder) in
  // ...생략...
  builder.tabBackgroundColor = UIColor.YOUR_BACKGROUND_COLOR
  builder.tabTextColor = BZVControlStateResource { builder in
    builder.setValue(UIColor.YOUR_TEXT_NORMAL_COLOR, for: .normal)
    builder.setValue(UIColor.YOUR_TEXT_HIGHLIGHT_COLOR, for: .highlight)
  }
  builder.tabIndicatorColors = BZVControlStateResource { builder in
    builder.setValue(UIColor.YOUR_INDICATOR_NORMAL_COLOR, for: .normal)
    builder.setValue(UIColor.YOUR_INDICATOR_HIGHLIGHT_COLOR, for: .highlight)
  }
}

BZVBuzzAdFeed.setDefaultTheme(buzzAdFeedTheme)

Objective-C

// BZVBuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
BZVBuzzAdFeedTheme *buzzAdFeedTheme = [BZVBuzzAdFeedTheme themeWithBlock:^(BZVBuzzAdFeedThemeBuilder * _Nonnull builder) {
  // ...생략...
  builder.tabBackgroundColor = UIColor.YOUR_BACKGROUND_COLOR;
  builder.tabTextColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
    [builder setValue:UIColor.YOUR_TEXT_NORMAL_COLOR forState:BZVControlStateNormal];
    [builder setValue:UIColor.YOUR_TEXT_HIGHLIGHT_COLOR forState:BZVControlStateHighlight];
  }];
  builder.tabIndicatorColors = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
    [builder setValue:UIColor.YOUR_INDICATOR_NORMAL_COLOR forState:BZVControlStateNormal];
    [builder setValue:UIColor.YOUR_INDICATOR_HIGHLIGHT_COLOR forState:BZVControlStateHighlight];
  }];
}];

[BZVBuzzAdFeed setDefaultTheme:buzzAdFeedTheme];

필터 디자인 변경하기

피드 필터가 활성화되어 있는 경우, 필터의 UI 디자인을 변경할 수 있습니다.

필터 UI 디자인을 변경하려면 다음의 예시를 참고하세요.

✏️  참고
사용자 경험을 고려하여 filterTextColor, filterBackgroundColor와 같은 BZVControlStateResource 타입은 인스턴스를 생성할 때 상태에 따라 다른 리소스를 설정하는 것을 권장합니다.

Swift

let buzzAdFeedTheme = BZVBuzzAdFeedTheme { (builder: BZVBuzzAdFeedThemeBuilder) in
  // ...생략...
  builder.filterBackgroundColor = BZVControlStateResource { builder in
    builder.setValue(UIColor.YOUR_BACKGROUND_NORMAL_COLOR, for: .normal)
    builder.setValue(UIColor.YOUR_BACKGROUND_HIGHLIGHT_COLOR, for: .highlight)
  }
  builder.filterTextColor = BZVControlStateResource { builder in
    builder.setValue(UIColor.YOUR_TEXT_NORMAL_COLOR, for: .normal)
    builder.setValue(UIColor.YOUR_TEXT_HIGHLIGHT_COLOR, for: .highlight)
  }
}

BZVBuzzAdFeed.setDefaultTheme(buzzAdFeedTheme)

Objective-C

BZVBuzzAdFeedTheme *buzzAdFeedTheme = [BZVBuzzAdFeedTheme themeWithBlock:^(BZVBuzzAdFeedThemeBuilder * _Nonnull builder) {
  // ...생략...
  builder.filterBackgroundColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
    [builder setValue:UIColor.YOUR_BACKGROUND_NORMAL_COLOR forState:BZVControlStateNormal];
    [builder setValue:UIColor.YOUR_BACKGROUND_HIGHLIGHT_COLOR forState:BZVControlStateHighlight];
  }];
  builder.filterTextColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
    [builder setValue:UIColor.YOUR_TEXT_NORMAL_COLOR forState:BZVControlStateNormal];
    [builder setValue:UIColor.YOUR_TEXT_HIGHLIGHT_COLOR forState:BZVControlStateHighlight];
  }];
}];

[BZVBuzzAdFeed setDefaultTheme:buzzAdFeedTheme];

지면 구분선 디자인 변경하기

피드의 광고 및 콘텐츠 구분선의 디자인을 변경할 수 있습니다.

지면 구분선 디자인을 변경하려면 다음의 예시를 참고하세요.

Swift

// BZVBuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
let buzzAdFeedTheme = BZVBuzzAdFeedTheme { (builder: BZVBuzzAdFeedThemeBuilder) in
  // ...생략...
  builder.separatorColor = UIColor.YOUR_SEPARATOR_COLOR
  builder.separatorHeight = YOUR_SEPARATOR_HEIGHT
  builder.separatorHorizontalMargin = YOUR_SEPARATOR_HORIZONTAL_MARGIN
}

BZVBuzzAdFeed.setDefaultTheme(buzzAdFeedTheme)

Objective-C

BZVBuzzAdFeedTheme *buzzAdFeedTheme = [BZVBuzzAdFeedTheme themeWithBlock:^(BZVBuzzAdFeedThemeBuilder * _Nonnull builder) {
  // ...생략...
  builder.separatorColor = UIColor.YOUR_SEPARATOR_COLOR;
  builder.separatorHeight = YOUR_SEPARATOR_HEIGHT;
  builder.separatorHorizontalMargin = YOUR_SEPARATOR_HORIZONTAL_MARGIN;
}];

[BZVBuzzAdFeed setDefaultTheme:buzzAdFeedTheme];

CTA 버튼 디자인 변경하기

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

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

✏️  참고
CTA textColor 및 backgroundColor는 BZVControlState.normal 상태의 색상만 적용됩니다.
추가적인 커스터마이징을 원하는 경우, CTA 버튼 자체 구현하기 토픽을 참고해 UI를 직접 구현하세요.

Swift

let buzzAdFeedTheme = BZVBuzzAdFeedTheme { (builder: BZVBuzzAdFeedThemeBuilder) 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)
  }
}

BZVBuzzAdFeed.setDefaultTheme(buzzAdFeedTheme)

Objective-C

BZVBuzzAdFeedTheme *buzzAdFeedTheme = [BZVBuzzAdFeedTheme themeWithBlock:^(BZVBuzzAdFeedThemeBuilder * _Nonnull builder) {
  // ...생략...
  builder.rewardIcon = [UIImage imageNamed:@"YOUR_REWARD_ICON"];
  builder.participatedIcon = [UIImage imageNamed:@"YOUR_PARTICIPATED_ICON"];
  builder.ctaTextColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
    [builder setValue:UIColor.YOUR_CTA_TEXT_NORMAL_COLOR forState:BZVControlStateNormal];
  }];
  builder.ctaBackgroundColor = [BZVControlStateResource resourceWithBlock:^(BZVControlStateResourceBuilder * _Nonnull builder) {
    [builder setValue:UIColor.YOUR_CTA_BACKGROUND_NORMAL_COLOR forState:BZVControlStateNormal];
  }];
}];

[BZVBuzzAdFeed setDefaultTheme:buzzAdFeedTheme];

개인정보 처리방침 UI 자체구현하기

개인정보 처리방침 UI를 자체 구현하는 경우, SDK에 동의 여부를 전달해야 합니다. 아래 표를 참고하여 적절한 함수를 호출 해 주세요.

Class	API	설명
BuzzAdBenefit	privacyPolicyManager (정적 변수)	BZVPrivacyPolicyManager 인스턴스를 반환합니다.
BZVPrivacyPolicyManager	grantConsent()	개인정보 수집에 동의합니다.
	revokeConsent()	개인정보 수집 동의를 철회합니다.
	isConsentGranted()	개인정보 수집 동의 여부를 확인합니다.

사용 예시

Swift

let privacyPolicyManager = BuzzAdBenefit.privacyPolicyManager

// 직접 구현한 개인정보 제3자 제공 동의 UI에서 동의를 받았을 경우 아래 코드를 실행하면, 피드 화면에서 개인정보 제3자 제공 동의 UI가 노출되지 않으면서 광고 할당이 정상적으로 진행 됩니다.
// 아래의 코드를 실행하지 않을 경우 피드 진입 시 개인정보 제3자 제공 동의 UI가 노출되기 때문에 필수적으로 실행이 필요합니다.
privacyPolicyManager.grantConsent()

// 아래 코드를 통해서 수집 동의를 철회할 수 있습니다. 이 코드가 실행되면 피드에서 광고 할당이 이루어지지 않습니다.
privacyPolicyManager.revokeConsent()

Objective-C

BZVPrivacyPolicyManager *privacyPolicyManager = [BuzzAdBenefit privacyPolicyManager];

// 직접 구현한 개인정보 제3자 제공 동의 UI 에서 동의를 받았을 경우 아래 코드를 실행하면, 피드 화면에서 개인정보 제3자 제공 동의 UI가 노출되지 않으면서 광고 할당이 정상적으로 진행 됩니다.
// 아래의 코드를 실행하지 않을 경우 피드 진입 시 개인정보 제3자 제공 동의 UI가 노출되기 때문에 필수적으로 실행이 필요합니다.
[privacyPolicyManager grantConsent];

// 아래 코드를 통해서 수집 동의를 철회할 수 있습니다. 이 코드가 실행되면 피드에서 광고 할당이 이루어지지 않습니다.
[privacyPolicyManager revokeConsent];