적응형 배너

적응형 배너는 광고 크기를 기기별로 최적화하여 실적을 극대화하는 차세대 반응형 광고입니다. 고정된 높이만 지원하는 스마트 배너를 개선한 적응형 배너를 사용하면 개발자가 광고 폭을 지정하고 이를 통해 최적의 광고 크기를 결정할 수 있습니다.

최적의 광고 크기를 선택하기 위해 적응형 배너는 고정된 높이 대신 고정된 가로 세로 비율을 사용합니다. 따라서 배너 광고가 모든 기기에서 좀 더 일관성 있는 화면 크기를 차지하도록 게재되며 실적을 개선할 수 있는 기회의 폭이 넓어집니다.

적응형 배너로 작업할 때는 지정된 기기 및 너비에 대해 항상 일정한 크기가 반환된다는 점을 기억하세요. 특정 기기에서 레이아웃을 테스트한 후에는 광고 크기가 변경되지 않을 수 있습니다. 그러나 해당 배너 소재의 크기는 기기마다 달라질 수 있습니다. 따라서 광고 높이 변화를 감안하여 앱 레이아웃을 설정하는 것이 좋습니다. 드문 경우이지만 전체 적응형 크기 광고가 매칭되지 않을 수 있으며 이때는 표준 크기의 광고 소재가 대신 이 슬롯의 중앙에 배치됩니다.

적응형 배너를 사용하는 경우

적응형 배너는 업계 표준 320x50 배너 크기 및 스마트 배너 형식을 대체할 수 있도록 설계되었습니다.

이러한 배너 크기는 일반적으로 화면 상단이나 하단에 고정되는 앵커 광고 배너로 사용됩니다. 적응형 배너를 앵커 광고 배너로 사용할 때의 가로 세로 비율은 표준 320x50 광고와 비슷합니다(아래 스크린샷 참고).

적응형 배너는 사용 가능한 화면 크기를 더 효과적으로 사용합니다. 또한 스마트 배너와 비교하자면 다음과 같은 이유 때문에 적응형 배너를 사용하는 것이 더 좋습니다.

  • 전체 화면 너비가 아닌 제공된 너비를 사용하여 안전 영역을 고려할 수 있도록 지원합니다.

  • 한 가지 높이만 사용하지 않고 기기에 맞게 높이를 최적화하므로 다양한 크기의 기기에 큰 문제 없이 광고를 게재할 수 있습니다.

구현 관련 참고사항

앱에 적응형 배너를 구현하는 경우 다음 사항에 유의하세요.

  • 최신 버전의 Google 모바일 광고 SDK를 사용 중인지 확인하세요. 미디에이션의 경우 최신 버전의 미디에이션 어댑터를 사용하세요.
  • 적응형 배너 크기는 가능한 너비를 모두 사용할 때 가장 효과적으로 작동합니다. 대부분의 경우 사용 중인 기기 화면의 전체 너비가 사용 가능한 전체 너비입니다. 이때, 해당 안전 영역을 고려해야 합니다.

  • Google 모바일 광고 SDK는 GADAdSize에서 지정된 너비에 최적화된 광고 높이를 반환합니다.

  • 적응형 배너의 광고 크기를 표시하는 방법에는 가로 모드, 세로 모드, 광고 게재 시의 기기 방향 등 세 가지가 있습니다. 자세한 내용은 아래 전체 API 문서를 참고하세요.

  • 지정된 기기에서 지정된 너비에 대해 반환되는 크기는 항상 동일하므로 특정 기기에서 레이아웃을 테스트한 후에는 광고 크기가 변하지 않습니다.

  • 앵커 광고 배너의 높이는 기기 높이의 15%를 초과할 수 없으며, 50포인트 이상이어야 합니다.

빠른 시작

간단한 적응형 앵커 배너를 구현하려면 아래 단계를 따르세요.

  1. GADBannerView 객체를 만들고 광고 단위 ID를 설정합니다.

  2. 적응형 배너 광고 크기를 가져옵니다. 가져오는 크기는 적응형 배너를 요청하는 데 사용됩니다. 적응형 광고 크기를 가져오려면 다음을 확인하세요.

    1. 사용 중인 기기의 너비를 가져오세요. 화면의 전체 너비를 사용하지 않으려는 경우에는 너비를 직접 설정하세요.
    2. GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) 처럼 광고 크기 클래스에 적절한 정적 메서드를 사용하여 선택한 방향에 맞는 적응형 GADAdSize 객체를 가져와야 합니다.
    3. 배너 광고 보기에서 광고 크기를 설정해야 합니다. 이때 GADBannerView에서 adSize 속성을 설정하세요.

    전체 예가 아래에 나와 있습니다.

  3. 광고 요청 객체를 만들고, 준비된 광고 보기의 loadRequest 메서드를 이용해 배너를 로드해야 합니다(일반 배너 요청과 동일).

샘플 코드

다음은 안전 영역 및 뷰 방향을 고려하여 모든 iOS 버전에서 적응형 배너를 로드하고 새로고침하는 뷰 컨트롤러의 예입니다.

Swift

    class ViewController: UIViewController {

      @IBOutlet weak var bannerView: GADBannerView!

      override func viewDidLoad() {
        super.viewDidLoad()

        // Step 1 - Create GADBannerView (in code or interface builder) and set the
        // ad unit ID on it.
        bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
        bannerView.rootViewController = self
      }

      override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // Note loadBannerAd is called in viewDidAppear as this is the first time that
        // the safe area is known. If safe area is not a concern (e.g., your app is
        // locked in portrait mode), the banner can be loaded in viewWillAppear.
        loadBannerAd()
      }

      override func viewWillTransition(to size: CGSize,
                              with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to:size, with:coordinator)
        coordinator.animate(alongsideTransition: { _ in
          self.loadBannerAd()
        })
      }

      func loadBannerAd() {
        // Step 2 - Determine the view width to use for the ad width.
        let frame = { () -> CGRect in
          // Here safe area is taken into account, hence the view frame is used
          // after the view has been laid out.
          if #available(iOS 11.0, *) {
            return view.frame.inset(by: view.safeAreaInsets)
          } else {
            return view.frame
          }
        }()
        let viewWidth = frame.size.width

        // Step 3 - Get Adaptive GADAdSize and set the ad view.
        // Here the current interface orientation is used. If the ad is being preloaded
        // for a future orientation change or different orientation, the function for the
        // relevant orientation should be used.
        bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

        // Step 4 - Create an ad request and load the adaptive banner ad.
        bannerView.load(GADRequest())
      }
    }
    

Objective-C

    @implementation ViewController

    - (void)viewDidLoad {
      [super viewDidLoad];

      // Step 1 - Create GADBannerView (in code or interface builder) and set the
      // ad unit ID on it.
      self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
      self.bannerView.rootViewController = self;
    }

    - (void)viewDidAppear:(BOOL)animated {
      [super viewDidAppear:animated];
      // Note loadBannerAd is called in viewDidAppear as this is the first time that
      // the safe area is known. If safe area is not a concern (e.g., your app is
      // locked in portrait mode), the banner can be loaded in viewWillAppear.
      [self loadBannerAd];
    }

    - (void)viewWillTransitionToSize:(CGSize)size
        withTransitionCoordinator:(id)coordinator {
      [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
      [coordinator animateAlongsideTransition:^(id
          _Nonnull context) {
            [self loadBannerAd];
      } completion:nil];
    }

    - (void)loadBannerAd {
      // Step 2 - Determine the view width to use for the ad width.
      CGRect frame = self.view.frame;
      // Here safe area is taken into account, hence the view frame is used after
      // the view has been laid out.
      if (@available(iOS 11.0, *)) {
        frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
      }
      CGFloat viewWidth = frame.size.width;

      // Step 3 - Get Adaptive GADAdSize and set the ad view.
      // Here the current interface orientation is used. If the ad is being
      // preloaded for a future orientation change or different orientation, the
      // function for the relevant orientation should be used.
      self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

      // Step 4 - Create an ad request and load the adaptive banner ad.
      GADRequest *request = [GADRequest request];
      [self.bannerView loadRequest:request];
    }

    @end
    

여기에서 GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) 함수는 현재 인터페이스 방향에 대한 앵커 광고 위치의 배너 크기를 가져오는 데 사용됩니다. 앵커 광고 배너를 지정된 방향으로 미리 로드하려면 GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width)GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width)의 관련 함수를 사용하세요.