디자인 커스터마이징

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

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

피드 배경 색상 변경하기

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

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

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

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

Swift
Objective-C

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

BZVBuzzAdFeed.setDefaultTheme(buzzAdFeedTheme)

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

[BZVBuzzAdFeed setDefaultTheme:buzzAdFeedTheme];

탭 디자인 변경하기

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

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

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

Swift
Objective-C

// 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)

// 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
Objective-C

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)

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
Objective-C

// 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)

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
Objective-C

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)

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
Objective-C

let privacyPolicyManager = BuzzAdBenefit.privacyPolicyManager

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

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

BZVPrivacyPolicyManager *privacyPolicyManager = [BuzzAdBenefit privacyPolicyManager];

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

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

디자인 커스터마이징

피드 배경 색상 변경하기​

탭 디자인 변경하기​

필터 디자인 변경하기​

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

CTA 버튼 디자인 변경하기​

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

사용 예시​