# UI 설정

Source: https://docs.buzzvil.com/docs/buzzbenefit-ios/v6/ui-configuration
Platform: iOS
SDK major version: v6
Language: Korean (ko)

## 전체 테마

Buzzvil SDK에서 제공하는 기본 UI를 사용해 광고 지면이나 CTA의 색상, 아이콘 이미지 등 테마를 변경할 수 있습니다.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-ios/v6/image/08-ui-configuration/00-benefithu_custom.png)

### 주요 색상

Buzzvil SDK에서 제공하는 UI 중 다이얼로그의 버튼 색상, 바텀 시트 UI의 확인 버튼 등 앱에 연동한 모든 지면 내 주요 UI의 색상(Primary color)을 변경할 수 있습니다. 색상을 버즈빌 담당자(<help@buzzvil.com>)에게 전달해 주세요.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-ios/v6/image/08-ui-configuration/02-benefithub_primary_color_custom.png)

### CTA 버튼 자체 구현하기

Buzzvil SDK에서 기본으로 제공하는 UI를 사용하지 않고 CTA 버튼을 자체적으로 구현할 수 있습니다. 자체적으로 구현한 CTA 버튼을 네이티브와 인터스티셜에서 사용할 수 있습니다.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-ios/v6/image/M-customization_cta.png)

CTA 버튼을 직접 구현하려면 `BuzzCtaViewProtocol` 프로토콜을 준수하는 `UIView` 클래스의 서브클래스를 생성하세요.

다음은 `UIStackView`를 활용하여 CTA View 클래스를 생성한 예시입니다.

**Swift**

```swift
import UIKit
import BuzzvilSDK

final class CustomCtaView: UIStackView, BuzzCtaViewProtocol {
  let rewardImageView = UIImageView(frame: .zero)
  let rewardLabel = UILabel(frame: .zero)
  let ctaLabel = UILabel(frame: .zero)

  required init(coder: NSCoder) {
    super.init(coder: coder)
    setUpView()
  }

  override init(frame: CGRect) {
    super.init(frame: frame)
    setUpView()
  }

  private func setUpView() {
    addArrangedSubview(rewardImageView)
    addArrangedSubview(rewardLabel)
    addArrangedSubview(ctaLabel)
  }

  // MARK: BuzzCtaViewProtocol
  func renderRewardNotAvailableViewState(ctaText: String) {
    // 리워드가 없는 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = true
    rewardLabel.isHidden = true
    ctaLabel.text = ctaText
  }

  func renderRewardAvailableViewState(ctaText: String, reward: Int) {
    // 리워드가 있는 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = false
    rewardLabel.isHidden = false

    rewardImageView.image = UIImage(named: "YOUR_REWARD_IMAGE")
    rewardLabel.text = "+\(reward)" // 원하는 포인트 단위를 적용하세요. (예시: `+1`, `1P`)
    ctaLabel.text = ctaText
  }

  func renderParticipatingViewState(ctaText: String) {
    // 참여 확인 중인 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = true
    rewardLabel.isHidden = true
    ctaLabel.text = "YOUR_PARTICIPATING_TEXT"
  }

  func renderParticipatedViewState(ctaText: String) {
    // 참여 완료한 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
    rewardImageView.isHidden = false
    rewardLabel.isHidden = true

    rewardImageView.image = UIImage(named: "YOUR_PARTICIPATED_IMAGE")
    ctaLabel.text = "YOUR_PARTICIPATED_TEXT"
  }
}
```

**Objective-C**

```objectivec
@import UIKit;
@import BuzzvilSDK;

@interface CustomCtaView : UIStackView <BuzzCtaViewProtocol>

@end

@interface CustomCtaView ()

@property (nonatomic, strong, readonly) UIImageView *rewardImageView;
@property (nonatomic, strong, readonly) UILabel *rewardLabel;
@property (nonatomic, strong, readonly) UILabel *ctaLabel;

@end

@implementation CustomCtaView

- (instancetype)initWithCoder:(NSCoder *)coder {
  if (self = [super initWithCoder:coder]) {
    [self setupView];
  }
  return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
    [self setupView];
  }
  return self;
}

- (void)setupView {
  _rewardImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
  [self addArrangedSubview:_rewardImageView];

  _rewardLabel = [[UILabel alloc] initWithFrame:CGRectZero];
  [self addArrangedSubview:_rewardLabel];

  _ctaLabel = [[UILabel alloc] initWithFrame:CGRectZero];
  [self addArrangedSubview:_ctaLabel];
}

#pragma mark - BuzzCtaViewProtocol
- (void)renderRewardNotAvailableViewStateWithCtaText:(NSString *)ctaText {
  // 리워드가 없는 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
  [_rewardImageView setHidden:YES];
  [_rewardLabel setHidden:YES];
  [_ctaLabel setText:ctaText];
}

- (void)renderRewardAvailableViewStateWithCtaText:(NSString *)ctaText reward:(NSInteger)reward {
  // 리워드가 있는 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
  [_rewardImageView setHidden:NO];
  [_rewardLabel setHidden:NO];
  
  [_rewardImageView setImage:[UIImage imageNamed:@"YOUR_REWARD_IMAGE"]];
  [_rewardLabel setText:[NSString stringWithFormat:@"+%ld", reward]]; // 원하는 포인트 단위를 적용하세요. (예시: `+1`, `1P`)
  [_ctaLabel setText:ctaText];
}

- (void)renderParticipatingViewStateWithCtaText:(NSString *)ctaText {
  // 참여 확인 중인 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
  [_rewardImageView setHidden:YES];
  [_rewardLabel setHidden:YES];
  [_ctaLabel setText:@"YOUR_PARTICIPATING_TEXT"];
}

- (void)renderParticipatedViewStateWithCtaText:(NSString *)ctaText {
  // 참여 완료한 광고에 대한 CTA 뷰 레이아웃을 정의합니다.
  [_rewardImageView setHidden:NO];
  [_rewardLabel setHidden:YES];
  
  [_rewardImageView setImage:[UIImage imageNamed:@"YOUR_PARTICIPATED_IMAGE"]];
  [_ctaLabel setText:@"YOUR_PARTICIPATED_TEXT"];
}

@end
```

#### 자체 구현한 CTA 버튼을 GlobalTheme에 적용하기

`BuzzBenefitTheme`에 `ctaViewClass`를 추가해 자체 구현한 CTA 버튼을 적용하세요.

> ✏️ **참고**
>
> - SDK에서 기본 광고 디자인을 제공하는 인터스티셜 등에 적용됩니다.
> - 네이티브는 연동 과정에서 자체 구현한 CTA 버튼을 적용하세요. 자세한 내용은 [네이티브 - 2 단계. 광고 레이아웃 구성하기](https://docs.buzzvil.com/docs/buzzbenefit-ios/v6/native#2-%EB%8B%A8%EA%B3%84-%EA%B4%91%EA%B3%A0-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0) 토픽을 참고하세요.
> - 베네핏허브에는 적용되지 않습니다.

**Swift**

```swift
import BuzzvilSDK

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
        let config = ...

        // BuzzBenefit.initialize()를 호출하기 전에  GlobalTheme을 설정합니다.

        let theme = BuzzTheme.Builder()
          .ctaViewClass(CustomCtaView.self)
          .build()
        BuzzAdBenefit.shared.setTheme(theme)

        // ...
        return true
    }
}
```

**Objective C**

```objectivec
@import BuzzvilSDK;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    BuzzBenefitConfig *config = ...

    // BuzzBenefit.initialize()를 호출하기 전에  GlobalTheme을 설정합니다.
    BuzzTheme * buzzTheme = [BuzzTheme themeWithBlock:^(BuzzThemeBuilder * _Nonnull builder) {
      builder.ctaViewClass = CustomCtaView.self;
    }];
    [BuzzAdBenefit.sharedInstance setTheme:buzzTheme];

    // ...
    return YES;
}

@end
```

## 네이티브

### 네이티브 오버레이 UI

네이티브 오버레이 UI를 커스터마이징 하려면 버즈빌 담당자(<help@buzzvil.com>)에게 연락하세요.

- 이미지와 UI 스트링이 지원하는 규격은 다음과 같습니다.

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

## 베네핏허브

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

### 포인트 단위 변경

베네핏허브에 표시되는 포인트 단위를 변경할 수 있습니다. 변경하고자 하는 포인트 단위를 버즈빌 담당자(<help@buzzvil.com>)에게 전달해 주세요.

> ✏️ **참고**\
> 네이티브 및 인터스티셜에서는 [CTA 버튼 자체 구현하기](https://docs.buzzvil.com/docs/buzzbenefit-ios/v6/ui-configuration#cta-%EB%B2%84%ED%8A%BC-%EC%9E%90%EC%B2%B4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0)를 통해 포인트 단위를 변경할 수 있습니다.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-ios/v6/image/08-ui-configuration/01-benefithub_unit_custom.png)

### 내비게이션 바

베네핏허브 내비게이션 바의 UI 스트링을 수정하거나 내비게이션 바 영역을 자체 구현할 수 있습니다.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-ios/v6/image/A-feed_toolbar_custom.png)

#### 내비게이션 바 UI 스트링 변경하기

내비게이션 바의 UI 스트링을 변경할 수 있습니다. 변경하고자 하는 문구를 버즈빌 담당자(<help@buzzvil.com>)에게 전달해 주세요.

#### 내비게이션 바 자체 구현하기

[하위 뷰 컨트롤러로 베네핏허브 연동하기](https://docs.buzzvil.com/docs/buzzbenefit-ios/v6/benefithub#%ED%95%98%EC%9C%84-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC%EB%A1%9C-%EB%B2%A0%EB%84%A4%ED%95%8F%ED%97%88%EB%B8%8C-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0) 항목을 참고하여 내비게이션 바를 자체 구현할 수 있습니다.

### 개인정보 제3자 제공 동의 UI 자체 구현

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

| Class                  | API                          | 설명                    |
| ---------------------- | ---------------------------- | --------------------- |
| `BuzzAdBenefit.shared` | `grantPrivacyConsent()`      | 개인정보 수집에 동의합니다.       |
|                        | `loadPrivacyConsentStatus()` | 개인정보 수집 동의 여부를 확인합니다. |

#### 사용 예시

**Swift**

```swift
BuzzAdBenefit.shared.loadPrivacyConsentStatus(onSuccess: { [weak self] status in
  // 현재 개인정보 처리 방침 상태를 가져올 수 있습니다
}, onFailure: { [weak self] error in
  // 개인정보 처리방침에 대한 상태를 가져오는데 실패 했을 경우 호출 됩니다.
})

BuzzAdBenefit.shared.grantPrivacyConsent(onSuccess: { [weak self] in
  // 개인정보 처리방침 동의에 성공했을 경우 호출 됩니다.
}, onFailure: { [weak self] error in
  // 개인정보 처리방침 동의 요청에 실패했을 경우 호출 됩니다.
})
```

**Objective-C**

```objectivec
[BuzzAdBenefit.sharedInstance loadPrivacyConsentStatusOnSuccess:^(enum BuzzPrivacyConsentStatus status) {
  // 현재 개인정보 처리 방침 상태를 가져올 수 있습니다
} onFailure:^(NSError * _Nonnull error) {
  // 개인정보 처리방침에 대한 상태를 가져오는데 실패 했을 경우 호출 됩니다.
}];

[BuzzAdBenefit.sharedInstance grantPrivacyConsentOnSuccess:^{
  // 개인정보 처리방침 동의에 성공했을 경우 호출 됩니다.
} onFailure:^(NSError * _Nonnull error) {
  // 개인정보 처리방침 동의 요청에 실패했을 경우 호출 됩니다.
}];

```