배너 광고

배너 광고는 앱의 레이아웃 안에 표시되는 직사각형 이미지 또는 텍스트 광고입니다. 사용자가 앱과 상호작용하는 동안 화면에 머무르며 특정 시간이 지나면 자동으로 새로고침할 수 있습니다. 모바일 광고를 처음 시작하는 경우 이 형식부터 이용해 보시기 바랍니다.

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

기본 요건

Google 모바일 광고 SDK를 단독으로 또는 Firebase의 일부로 가져옵니다.

항상 테스트 광고로 테스트

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

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

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

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

GADBannerView 만들기

배너 광고는 GADBannerView 객체에 표시되므로, 배너 광고를 통합하려면 먼저 GADBannerView를 보기 계층구조에 넣어야 합니다. 일반적으로 인터페이스 생성 도구나 프로그래매틱 방식을 이용하면 됩니다.

인터페이스 생성 도구

GADBannerView를 일반적인 보기처럼 스토리보드 또는 xib 파일에 추가할 수 있습니다. 이 방법을 사용하는 경우 표시하려는 광고의 크기에 맞춰 폭과 높이의 최대값을 설정해야 합니다. 예를 들어 320x50 크기의 배너 광고를 게재하려면 폭 제한으로 320, 높이 제한으로 50을 설정하세요.

프로그래매틱 방식

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

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: kGADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: bottomLayoutGuide,
                          attribute: .top,
                          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:kGADAdSizeBanner];

  [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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              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 메소드에서 두 개의 필수 속성을 설정하는 방법에 대한 예입니다.

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

배너 이벤트에 등록

배너 광고 이벤트에 등록하려면 delegate의 GADBannerView 속성을 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

/// Tells the delegate an ad request loaded an ad.
func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("adViewDidReceiveAd")
}

/// Tells the delegate an ad request failed.
func adView(_ bannerView: GADBannerView,
    didFailToReceiveAdWithError error: GADRequestError) {
  print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
func adViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("adViewWillPresentScreen")
}

/// Tells the delegate that the full-screen view will be dismissed.
func adViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("adViewWillDismissScreen")
}

/// Tells the delegate that the full-screen view has been dismissed.
func adViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("adViewDidDismissScreen")
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
  print("adViewWillLeaveApplication")
}

Objective-C

/// Tells the delegate an ad request loaded an ad.
- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  NSLog(@"adViewDidReceiveAd");
}

/// Tells the delegate an ad request failed.
- (void)adView:(GADBannerView *)adView
    didFailToReceiveAdWithError:(GADRequestError *)error {
  NSLog(@"adView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
- (void)adViewWillPresentScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillPresentScreen");
}

/// Tells the delegate that the full-screen view will be dismissed.
- (void)adViewWillDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillDismissScreen");
}

/// Tells the delegate that the full-screen view has been dismissed.
- (void)adViewDidDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewDidDismissScreen");
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
- (void)adViewWillLeaveApplication:(GADBannerView *)adView {
  NSLog(@"adViewWillLeaveApplication");
}

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

Swift Objective-C

사용 사례

다음은 이러한 광고 이벤트 메소드의 몇 가지 사용 사례입니다.

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

광고가 수신될 때까지 GADBannerView를 보기 계층구조에 추가하지 않는 것이 좋습니다. 이렇게 하려면 adViewDidReceiveAd: 이벤트를 수신하세요.

Swift

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

Objective-C

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

배너 광고 애니메이션

다음 예와 같이 반환된 배너 광고에 adViewDidReceiveAd: 이벤트를 사용하여 애니메이션 효과를 줄 수도 있습니다.

Swift

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

Objective-C

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

앱 일시중지 및 재개

GADBannerViewDelegate 프로토콜에는 클릭으로 인해 오버레이가 표시되거나 닫히는 시점 또는 외부 브라우저가 호출되는 시점을 알리는 메소드가 있습니다. 이러한 이벤트가 광고로 인한 것인지를 추적하려면 GADBannerViewDelegate 메소드에 등록하세요.

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

GADBannerViewDelegate 메소드	iOS 메소드
`adViewWillPresentScreen:`	UIViewController의 `viewWillDisappear:`
`adViewWillDismissScreen:`	UIViewController의 `viewWillAppear:`
`adViewDidDismissScreen:`	UIViewController의 `viewDidAppear:`
`adViewWillLeaveApplication:`	UIApplicationDelegate의 `applicationDidEnterBackground:`

배너 크기

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

포인트 단위의 크기(폭x높이)	설명	지원 대상	AdSize 상수
320x50	배너	휴대전화 및 태블릿	`kGADAdSizeBanner`
320x100	대형 배너	휴대전화 및 태블릿	`kGADAdSizeLargeBanner`
300x250	IAB 중간 직사각형	휴대전화 및 태블릿	`kGADAdSizeMediumRectangle`
468 x 60	IAB 전체 크기 배너	태블릿	`kGADAdSizeFullBanner`
728x90	IAB 리더보드	태블릿	`kGADAdSizeLeaderboard`
화면 폭 x 32\|50\|90	스마트 배너	휴대전화 및 태블릿	`kGADAdSizeSmartBannerPortrait` `kGADAdSizeSmartBannerLandscape`

맞춤 광고 크기

맞춤 배너 크기를 지정하려면 다음과 같이 GADAdSizeFromCGSize를 사용하여 원하는 크기를 설정하세요.

Swift

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

Objective-C

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

스마트 배너

스마트 배너는 다양한 기기에서 화면 크기와 방향에 관계없이 화면 폭에 꽉 차는 배너 광고를 렌더링하는 광고 단위입니다. 스마트 배너를 이용하면 사용 중인 기기의 방향에서 기기의 너비를 감지하여 그 크기에 맞춰 광고를 만들 수 있습니다.

일반적으로 iPhone에 표시되는 스마트 배너는 세로 50 dp, 가로 32 dp입니다. iPads의 경우 세로와 가로 모두 높이가 90 포인트입니다.

이미지 광고가 할당된 전체 공간을 차지할 만큼 크지 않은 경우에는 이미지가 중앙에 맞춰지고 양쪽 공간이 채워집니다.

스마트 배너를 사용하려면 광고 크기로 kGADAdSizeSmartBannerPortrait(세로 방향) 또는 kGADAdSizeSmartBannerLandscape(가로 방향)를 지정하세요.

Swift

let bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)

Objective-C

GADBannerView *bannerView = [[GADBannerView alloc]
      initWithAdSize:kGADAdSizeSmartBannerPortrait];

iOS 11에 안전 영역이 추가되어서 안전 영역의 가장자리에 맞게 전체 폭 배너의 가장자리에도 제한 조건을 추가해야 합니다. 다음은 이를 처리하는 방법을 보여주는 코드 스니펫입니다.

Swift

func addBannerViewToView(_ bannerView: GADBannerView) {
  bannerView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(bannerView)
  if #available(iOS 11.0, *) {
    // In iOS 11, we need to constrain the view to the safe area.
    positionBannerViewFullWidthAtBottomOfSafeArea(bannerView)
  }
  else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    positionBannerViewFullWidthAtBottomOfView(bannerView)
  }
}

// MARK: - view positioning
@available (iOS 11, *)
func positionBannerViewFullWidthAtBottomOfSafeArea(_ bannerView: UIView) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
    guide.leftAnchor.constraint(equalTo: bannerView.leftAnchor),
    guide.rightAnchor.constraint(equalTo: bannerView.rightAnchor),
    guide.bottomAnchor.constraint(equalTo: bannerView.bottomAnchor)
  ])
}

func positionBannerViewFullWidthAtBottomOfView(_ bannerView: UIView) {
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .leading,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .leading,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .trailing,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .trailing,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .bottom,
                                        relatedBy: .equal,
                                        toItem: bottomLayoutGuide,
                                        attribute: .top,
                                        multiplier: 1,
                                        constant: 0))
}

Objective-C

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  if (@available(ios 11.0, *)) {
    // In iOS 11, we need to constrain the view to the safe area.
    [self positionBannerViewFullWidthAtBottomOfSafeArea:bannerView];
  } else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    [self positionBannerViewFullWidthAtBottomOfView:bannerView];
  }
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;

  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]
  ]];
}

- (void)positionBannerViewFullWidthAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeLeading
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeLeading
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeTrailing
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeTrailing
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

추가 리소스

GitHub의 샘플

배너 광고의 예: Swift | Objective-C
고급 기능 데모: Swift | Objective-C
GitHub의 배너 UITableView 예시: Swift | Objective-C

모바일 광고 관련 동영상 가이드

다음 단계

AdMob UI에서 나만의 배너 광고 단위를 아직 만들지 않은 분은 만들어 보세요. 그런 다음 코드에서 새로 만든 앱 ID와 광고 단위 ID를 사용하세요. 이때 테스트 광고를 이용해 기기를 구성해야 합니다.
광고 타겟팅 및 배너 광고 가이드에 대해 자세히 알아보세요.
다음과 같은 다른 광고 형식을 사용해 보세요.

기본 요건

항상 테스트 광고로 테스트

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

스마트 배너

Swift

Objective-C

Swift

Objective-C

추가 리소스

GitHub의 샘플

모바일 광고 관련 동영상 가이드

다음 단계

다음에 대한 의견 보내기...