배너 광고 - Ad Control Help Center

개요

배너 광고는 화면의 일부 영역에 표시되는 직사각형 광고입니다. UIKit과 SwiftUI 모두에서 사용할 수 있습니다.

주요 특징

화면 상단, 하단 또는 중간에 고정 배치 가능
이미지 및 동영상 광고 지원
UIKit 및 SwiftUI 모두 지원
델리게이트를 통한 광고 이벤트 처리

개발 환경에서는 테스트 유닛 ID를 사용하세요: PUBLIC_TEST_UNIT_ID_320_100

UIKit 구현

UIKit 환경에서는 AdropBanner 클래스를 사용하여 배너 광고를 구현합니다.

기본 구현

import UIKit
import AdropAds

class ViewController: UIViewController {
    private var banner: AdropBanner?

    override func viewDidLoad() {
        super.viewDidLoad()

        // 1. 배너 인스턴스 생성
        banner = AdropBanner(unitId: "YOUR_UNIT_ID")

        // 2. 델리게이트 설정
        banner?.delegate = self

        // 3. 뷰 계층에 추가
        if let bannerView = banner {
            view.addSubview(bannerView)

            // 4. Auto Layout 설정
            bannerView.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
                bannerView.widthAnchor.constraint(equalToConstant: 320),
                bannerView.heightAnchor.constraint(equalToConstant: 100)
            ])
        }

        // 5. 광고 로드
        banner?.load()
    }

    deinit {
        // 6. 메모리 해제 전 배너 제거
        banner?.removeFromSuperview()
        banner = nil
    }
}

// MARK: - AdropBannerDelegate
extension ViewController: AdropBannerDelegate {
    func onAdReceived(_ banner: AdropBanner) {
        print("배너 광고 수신 성공")
    }

    func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
        print("배너 광고 수신 실패: \(errorCode)")
    }

    func onAdImpression(_ banner: AdropBanner) {
        print("배너 광고 노출")
    }

    func onAdClicked(_ banner: AdropBanner) {
        print("배너 광고 클릭")
    }
}

AdropBanner 초기화

unitId

String

required

애드컨트롤 콘솔에서 생성한 유닛 ID

let banner = AdropBanner(unitId: "YOUR_UNIT_ID")

광고 로드

배너를 화면에 추가한 후 load() 메서드를 호출하여 광고를 요청합니다.

banner?.load()

배너가 화면에 보이는 시점에 load()를 호출하세요. 화면에 보이지 않는 상태에서 로드하면 노출이 정확하게 측정되지 않을 수 있습니다.

Context ID 설정

문맥 타겟팅을 위해 Context ID를 설정할 수 있습니다.

banner?.contextId = "article_123"

SwiftUI 구현

SwiftUI 환경에서는 AdropBannerRepresented를 사용하여 배너 광고를 구현합니다.

기본 구현

import SwiftUI
import AdropAds

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()

            Text("메인 콘텐츠")

            Spacer()

            // 배너 광고
            AdropBannerRepresented(unitId: "YOUR_UNIT_ID")
                .frame(width: 320, height: 100)
        }
    }
}

델리게이트 처리

델리게이트를 통해 광고 이벤트를 처리할 수 있습니다.

import SwiftUI
import AdropAds

struct ContentView: View {
    @StateObject private var bannerDelegate = BannerDelegate()

    var body: some View {
        VStack {
            Spacer()

            if bannerDelegate.isLoaded {
                Text("광고 로드 완료")
            }

            AdropBannerRepresented(
                unitId: "YOUR_UNIT_ID",
                delegate: bannerDelegate
            )
            .frame(width: 320, height: 100)
        }
    }
}

// 델리게이트 구현
class BannerDelegate: NSObject, ObservableObject, AdropBannerDelegate {
    @Published var isLoaded = false

    func onAdReceived(_ banner: AdropBanner) {
        print("배너 광고 수신 성공")
        isLoaded = true
    }

    func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
        print("배너 광고 수신 실패: \(errorCode)")
        isLoaded = false
    }

    func onAdImpression(_ banner: AdropBanner) {
        print("배너 광고 노출")
    }

    func onAdClicked(_ banner: AdropBanner) {
        print("배너 광고 클릭")
    }
}

Context ID 설정

AdropBannerRepresented(
    unitId: "YOUR_UNIT_ID",
    contextId: "article_123"
)
.frame(width: 320, height: 100)

Objective-C 구현

Objective-C 환경에서 배너 광고를 구현하는 방법입니다.

기본 구현

@import AdropAds;

@interface ViewController () <AdropBannerDelegate>
@property (nonatomic, strong) AdropBanner *banner;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 1. 배너 인스턴스 생성
    self.banner = [[AdropBanner alloc] initWithUnitId:@"YOUR_UNIT_ID"];

    // 2. 델리게이트 설정
    self.banner.delegate = self;

    // 3. 뷰 계층에 추가
    [self.view addSubview:self.banner];

    // 4. Auto Layout 설정
    self.banner.translatesAutoresizingMaskIntoConstraints = NO;
    [NSLayoutConstraint activateConstraints:@[
        [self.banner.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
        [self.banner.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
        [self.banner.widthAnchor constraintEqualToConstant:320],
        [self.banner.heightAnchor constraintEqualToConstant:100]
    ]];

    // 5. 광고 로드
    [self.banner load];
}

- (void)dealloc {
    [self.banner removeFromSuperview];
    self.banner = nil;
}

#pragma mark - AdropBannerDelegate

- (void)onAdReceived:(AdropBanner *)banner {
    NSLog(@"배너 광고 수신 성공");
}

- (void)onAdFailedToReceive:(AdropBanner *)banner :(AdropErrorCode)errorCode {
    NSLog(@"배너 광고 수신 실패: %ld", (long)errorCode);
}

- (void)onAdImpression:(AdropBanner *)banner {
    NSLog(@"배너 광고 노출");
}

- (void)onAdClicked:(AdropBanner *)banner {
    NSLog(@"배너 광고 클릭");
}

@end

Context ID 설정

self.banner.contextId = @"article_123";

델리게이트 메서드

AdropBannerDelegate 프로토콜은 광고의 생명주기 이벤트를 처리합니다.

onAdReceived (필수)

광고 수신이 성공했을 때 호출됩니다.

func onAdReceived(_ banner: AdropBanner) {
    print("배너 광고 수신 성공")
    // 광고 로딩 인디케이터 숨김 등의 처리
}

onAdFailedToReceive (필수)

광고 수신이 실패했을 때 호출됩니다.

func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
    print("배너 광고 수신 실패: \(errorCode)")
    // 에러 처리 및 대체 콘텐츠 표시
}

errorCode

AdropErrorCode

에러 유형을 나타내는 코드. 자세한 내용은 레퍼런스를 참고하세요.

onAdImpression (선택)

광고가 화면에 노출되었을 때 호출됩니다.

func onAdImpression(_ banner: AdropBanner) {
    print("배너 광고 노출")
    // 노출 분석 로깅 등의 처리
}

onAdClicked (선택)

사용자가 광고를 클릭했을 때 호출됩니다.

func onAdClicked(_ banner: AdropBanner) {
    print("배너 광고 클릭")
    // 클릭 분석 로깅 등의 처리
}

광고 크기

배너 광고는 유닛에 설정한 크기에 맞춰 뷰의 크기를 지정해야 합니다.

일반적인 배너 크기

크기	용도
320 x 50	소형 배너
16:9 비율	동영상 배너

UIKit

bannerView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    bannerView.widthAnchor.constraint(equalToConstant: 320),
    bannerView.heightAnchor.constraint(equalToConstant: 100)
])

SwiftUI

AdropBannerRepresented(unitId: "YOUR_UNIT_ID")
    .frame(width: 320, height: 100)

베스트 프랙티스

1. 메모리 관리

뷰 컨트롤러가 해제될 때 배너를 함께 제거하세요.

deinit {
    banner?.removeFromSuperview()
    banner = nil
}

2. 화면 가시성

배너가 화면에 보일 때 광고를 로드하세요.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    banner?.load()
}

3. 재사용

같은 배너 인스턴스를 재사용하려면 load()를 다시 호출하세요.

func refreshAd() {
    banner?.load()
}

4. 에러 처리

광고 로드 실패 시 적절한 에러 처리를 구현하세요.

func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
    switch errorCode {
    case .networkError:
        print("네트워크 오류: 연결을 확인하세요")
    case .noFill:
        print("노출 가능한 광고 없음")
    default:
        print("광고 로드 실패: \(errorCode)")
    }
}

테스트 유닛 ID

개발 및 테스트 시 아래의 테스트 유닛 ID를 사용하세요.

광고 유형	테스트 유닛 ID	크기
배너 (320x50)	`PUBLIC_TEST_UNIT_ID_320_50`	320 x 50
배너 (320x100)	`PUBLIC_TEST_UNIT_ID_320_100`	320 x 100
캐러셀 배너	`PUBLIC_TEST_UNIT_ID_CAROUSEL`	가변
배너 비디오 (16:9)	`PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_16_9`	16:9 비율
배너 비디오 (9:16)	`PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_9_16`	9:16 비율

사용 예시

let banner = AdropBanner(unitId: AdropUnitId.PUBLIC_TEST_UNIT_ID_320_100)

전체 예제

UIKit 예제

import UIKit
import AdropAds

class BannerViewController: UIViewController {
    private var banner: AdropBanner?
    private let activityIndicator = UIActivityIndicatorView(style: .medium)

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupBanner()
        setupActivityIndicator()
    }

    private func setupBanner() {
        banner = AdropBanner(unitId: "YOUR_UNIT_ID")
        banner?.delegate = self

        if let bannerView = banner {
            view.addSubview(bannerView)
            bannerView.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
                bannerView.widthAnchor.constraint(equalToConstant: 320),
                bannerView.heightAnchor.constraint(equalToConstant: 100)
            ])
        }

        banner?.load()
    }

    private func setupActivityIndicator() {
        view.addSubview(activityIndicator)
        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            activityIndicator.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            activityIndicator.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -60)
        ])
        activityIndicator.startAnimating()
    }

    deinit {
        banner?.removeFromSuperview()
        banner = nil
    }
}

// MARK: - AdropBannerDelegate
extension BannerViewController: AdropBannerDelegate {
    func onAdReceived(_ banner: AdropBanner) {
        print("✅ 배너 광고 수신 성공")
        activityIndicator.stopAnimating()
    }

    func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
        print("❌ 배너 광고 수신 실패: \(errorCode)")
        activityIndicator.stopAnimating()

        // 에러에 따른 처리
        switch errorCode {
        case .networkError:
            showAlert(message: "네트워크 연결을 확인하세요")
        case .noFill:
            print("노출 가능한 광고가 없습니다")
        default:
            showAlert(message: "광고를 불러올 수 없습니다")
        }
    }

    func onAdImpression(_ banner: AdropBanner) {
        print("👁️ 배너 광고 노출")
    }

    func onAdClicked(_ banner: AdropBanner) {
        print("👆 배너 광고 클릭")
    }

    private func showAlert(message: String) {
        let alert = UIAlertController(title: "알림", message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "확인", style: .default))
        present(alert, animated: true)
    }
}

SwiftUI 예제

import SwiftUI
import AdropAds

struct BannerView: View {
    @StateObject private var bannerDelegate = BannerAdDelegate()

    var body: some View {
        VStack(spacing: 20) {
            Text("배너 광고 예제")
                .font(.title)
                .padding()

            Spacer()

            // 광고 상태 표시
            if bannerDelegate.isLoading {
                ProgressView("광고 로딩 중...")
            } else if bannerDelegate.isLoaded {
                Text("광고 로드 완료")
                    .foregroundColor(.green)
            }

            // 배너 광고
            AdropBannerRepresented(
                unitId: "YOUR_UNIT_ID",
                delegate: bannerDelegate
            )
            .frame(width: 320, height: 100)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
            .padding()
        }
    }
}

class BannerAdDelegate: NSObject, ObservableObject, AdropBannerDelegate {
    @Published var isLoading = true
    @Published var isLoaded = false
    @Published var errorMessage: String?

    func onAdReceived(_ banner: AdropBanner) {
        print("✅ 배너 광고 수신 성공")
        DispatchQueue.main.async {
            self.isLoading = false
            self.isLoaded = true
            self.errorMessage = nil
        }
    }

    func onAdFailedToReceive(_ banner: AdropBanner, _ errorCode: AdropErrorCode) {
        print("❌ 배너 광고 수신 실패: \(errorCode)")
        DispatchQueue.main.async {
            self.isLoading = false
            self.isLoaded = false
            self.errorMessage = "광고를 불러올 수 없습니다: \(errorCode)"
        }
    }

    func onAdImpression(_ banner: AdropBanner) {
        print("👁️ 배너 광고 노출")
    }

    func onAdClicked(_ banner: AdropBanner) {
        print("👆 배너 광고 클릭")
    }
}

// Preview
struct BannerView_Previews: PreviewProvider {
    static var previews: some View {
        BannerView()
    }
}

다음 단계

네이티브 광고

UI에 맞게 커스터마이징 가능한 네이티브 광고 구현하기

전면 광고

화면 전체를 덮는 전면 광고 구현하기

타겟팅 설정

사용자 속성 및 문맥 타겟팅 설정하기

레퍼런스

클래스, 델리게이트, 에러 코드 참고하기

SDK 가이드

AI

Android

iOS

React Native

Flutter

Web

REST API

​개요

​주요 특징

​UIKit 구현

​기본 구현

​AdropBanner 초기화

​광고 로드

​Context ID 설정

​SwiftUI 구현

​기본 구현

​델리게이트 처리

​Context ID 설정

​Objective-C 구현

​기본 구현

​Context ID 설정

​델리게이트 메서드

​onAdReceived (필수)

​onAdFailedToReceive (필수)

​onAdImpression (선택)

​onAdClicked (선택)

​광고 크기

​일반적인 배너 크기

​UIKit

​SwiftUI

​베스트 프랙티스

​1. 메모리 관리

​2. 화면 가시성

​3. 재사용

​4. 에러 처리

​테스트 유닛 ID

​사용 예시

​전체 예제

​UIKit 예제

​SwiftUI 예제

​다음 단계

네이티브 광고

전면 광고

타겟팅 설정

레퍼런스

개요

주요 특징

UIKit 구현

기본 구현

AdropBanner 초기화

광고 로드

Context ID 설정

SwiftUI 구현

기본 구현

델리게이트 처리

Context ID 설정

Objective-C 구현

기본 구현

Context ID 설정

델리게이트 메서드

onAdReceived (필수)

onAdFailedToReceive (필수)

onAdImpression (선택)

onAdClicked (선택)

광고 크기

일반적인 배너 크기

UIKit

SwiftUI

베스트 프랙티스

1. 메모리 관리

2. 화면 가시성

3. 재사용

4. 에러 처리

테스트 유닛 ID

사용 예시

전체 예제

UIKit 예제

SwiftUI 예제

다음 단계