이 페이지는 Cloud Translation API를 통해 번역되었습니다.

배너 광고

배너 광고는 기기 화면의 상단이나 하단에 있는 앱의 레이아웃 안쪽에 게재됩니다. 사용자가 앱과 상호작용하는 동안 화면에 계속 표시되며 일정 시간이 지나면 자동으로 새로고침할 수 있습니다. 모바일 광고를 처음 시작하는 경우 이 형식부터 이용해 보시기 바랍니다. 우수사례

이 가이드에서는AdMob 의 배너 광고를 iOS 앱에 통합하는 방법을 설명합니다. 코드 스니펫과 안내 외에도 배너 크기 조정에 대한 정보와 추가 리소스 링크가 포함되어 있습니다.

기본 요건

시작 가이드를 모두 읽어보세요.

항상 테스트 광고로 테스트

앱을 제작하고 테스트할 때는 운영 중인 실제 광고 대신 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

테스트 광고를 로드하는 가장 쉬운 방법은 iOS 배너의 전용 테스트 광고 단위 ID를 사용하는 것입니다. ca-app-pub-3940256099942544/2934735716

이 ID는 모든 요청에 대해 테스트 광고를 반환하도록 특별히 구성되었으며, 코딩, 테스트 및 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 앱을 게시하기 전에 이 ID를 자체 광고 단위 ID로 바꿔야 합니다.

모바일 광고 SDK의 테스트 광고가 작동하는 방식을 자세히 알아보려면 테스트 광고를 참고하세요.

GADBannerView만들기

배너 광고는 GADBannerView 객체에 표시되므로 배너 광고를 통합하는 첫 번째 단계는 보기 계층 구조에 GADBannerView를 포함하는 것입니다. 이 작업은 일반적으로 인터페이스 생성 도구를 사용하거나 프로그래매틱 방식으로 진행됩니다.

인터페이스 생성 도구

일반적인 뷰와 마찬가지로 GADBannerView를 스토리보드 또는 xib 파일에 추가할 수 있습니다. 이 방법을 사용할 때는 표시하려는 광고 크기에 맞게 너비와 높이 제약조건을 추가해야 합니다. 예를 들어 배너 (320x50)를 표시할 때 320포인트의 너비 제약 조건과 50포인트의 높이 제약 조건을 사용합니다.

프로그래매틱 방식

GADBannerView은 직접 인스턴스화할 수도 있습니다. 다음은 화면 안전 영역의 하단 중앙에 정렬되고 배너 크기가 320x50인 GADBannerView를 만드는 방법의 예입니다.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

Objective-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeBottom
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

이 경우에는 제공된 광고 크기로 인해 배너에 고유한 콘텐츠 크기가 지정되므로 조회 크기 또는 높이 제약 조건이 적용되지 않습니다.

상수로 정의된 표준 크기를 사용하지 않으려면 GADAdSizeFromCGSize를 사용하여 맞춤 크기를 설정하면 됩니다. 자세한 내용은 배너 크기 섹션을 참고하세요.

속성 GADBannerView 구성

광고를 로드하고 표시하려면 GADBannerView에 속성을 설정해야 합니다.

rootViewController - 이 뷰 컨트롤러는 광고를 클릭할 때 오버레이를 표시하는 데 사용됩니다. 일반적으로 GADBannerView를 포함하는 뷰 컨트롤러로 설정해야 합니다.
adUnitID: GADBannerView가 광고를 로드하는 광고 단위 ID입니다.

다음은 UIViewController의 viewDidLoad 메서드에서 필수 속성 2개를 설정하는 방법을 보여주는 코드 예시입니다.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

광고 로드

GADBannerView가 제자리에 있고 속성이 구성되면 광고를 로드할 차례입니다. GADRequest 객체에서 loadRequest:를 호출하면 됩니다.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

GADRequest 객체는 단일 광고 요청을 나타내며 타겟팅 정보와 같은 속성을 포함합니다.

광고 이벤트

GADBannerViewDelegate를 사용하면 광고가 닫히거나 사용자가 앱을 종료하는 것과 같은 수명 주기 이벤트를 수신할 수 있습니다.

배너 이벤트 등록

배너 광고 이벤트에 등록하려면 GADBannerView의 delegate 속성을 GADBannerViewDelegate 프로토콜을 구현하는 객체로 설정하세요. 일반적으로 배너 광고를 구현하는 클래스가 대리자 클래스 역할을 하며, 이 경우 delegate 속성을 self로 설정할 수 있습니다.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

배너 이벤트 구현

GADBannerViewDelegate의 각 메서드는 선택사항으로 표시되어 있으므로 필요한 메서드만 구현하면 됩니다. 이 예에서는 각 메서드를 구현하고 콘솔에 메시지를 기록합니다.

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewDidDismissScreen")
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

iOS API 데모 앱의 배너 대리자 메서드 구현은 광고 대리자 예를 참고하세요.

Swift Objective-C

사용 사례

다음은 이러한 광고 이벤트 메서드의 사용 사례입니다.

광고가 수신된 후 보기 계층구조에 배너 추가

광고가 수신될 때까지 보기 계층 구조에 GADBannerView를 추가할 때 지연이 발생할 수 있습니다. 다음과 같이 bannerViewDidReceiveAd: 이벤트를 수신 대기하면 됩니다.

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

배너 광고에 애니메이션 효과 추가

다음 예와 같이 배너 광고가 반환되면 bannerViewDidReceiveAd: 이벤트를 사용하여 애니메이션을 적용할 수도 있습니다.

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

앱 일시중지 및 재개

GADBannerViewDelegate 프로토콜에는 클릭으로 인해 오버레이가 표시되거나 닫히는 시점과 같은 이벤트를 알리는 메서드가 있습니다. 이러한 이벤트가 광고로 인한 것인지 추적하려면 이러한 GADBannerViewDelegate 메서드에 등록하세요.

광고 클릭에서 오는 호출뿐 아니라 모든 유형의 오버레이 표시나 외부 브라우저 호출을 포착하려면 앱이 UIViewController 또는 UIApplication에 상응하는 메서드를 수신 대기하는 것이 좋습니다. 다음 표에는 GADBannerViewDelegate 메서드와 동시에 호출되는 동일한 iOS 메서드가 나와 있습니다.

GADBannerViewDelegate 메서드	iOS 메서드
`bannerViewWillPresentScreen:`	UIViewController`viewWillDisappear:`
`bannerViewWillDismissScreen:`	UIViewController`viewWillAppear:`
`bannerViewDidDismissScreen:`	UIViewController`viewDidAppear:`

배너 크기

아래 표에는 표준 배너 크기가 나와 있습니다.

포인트 크기 (너비x높이)	설명	가용성	AdSize 상수
320x50	배너	휴대전화 및 태블릿	`GADAdSizeBanner`
320x100	대형 배너	휴대전화 및 태블릿	`GADAdSizeLargeBanner`
300x250	IAB 중간 직사각형	휴대전화 및 태블릿	`GADAdSizeMediumRectangle`
468 x 60	IAB 전체 크기 배너	태블릿	`GADAdSizeFullBanner`
728x90	IAB 리더보드	태블릿	`GADAdSizeLeaderboard`
제공된 폭x적응형 높이	적응형 배너	휴대전화 및 태블릿	N/A

맞춤 광고 크기

맞춤 배너 크기를 정의하려면 아래와 같이 GADAdSizeFromCGSize를 사용하여 원하는 크기를 설정합니다.

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

배너 광고

기본 요건

항상 테스트 광고로 테스트

GADBannerView만들기

인터페이스 생성 도구

프로그래매틱 방식

Swift

Objective-C

속성 GADBannerView 구성

Swift

Objective-C

광고 로드

Swift

Objective-C

광고 이벤트

배너 이벤트 등록

Swift

Objective-C

배너 이벤트 구현

Swift

Objective-C

사용 사례

광고가 수신된 후 보기 계층구조에 배너 추가

Swift

Objective-C

배너 광고에 애니메이션 효과 추가

Swift

Objective-C

앱 일시중지 및 재개

배너 크기

맞춤 광고 크기

Swift

Objective-C

추가 리소스

GitHub의 예

Mobile Ads Garage 동영상 튜토리얼

성공사례

다음 단계