iPhone X 광고 렌더링

이 가이드에서는 iPhone X에서 광고를 올바르게 렌더링하도록 앱을 코딩하는 방법에 관한 권장사항을 설명합니다.

기본 요건

배너 광고는 둥근 모서리, 센서 하우징, 홈 표시기로 가려지지 않도록 '안전 영역'에 게재해야 합니다. 이 페이지에는 안전 영역의 상단 또는 하단에 배너 광고를 배치하기 위한 조건을 추가하는 방법의 예가 나와 있습니다. iOS 9 이상 및 Xcode 9 이상을 지원하는 환경에서 스토리보드 및 프로그래매틱 제약 조건이 모두 설명됩니다. iOS 및 Xcode의 이전 버전 해결 방법도 설명합니다.

스토리보드/인터페이스 빌더

앱에서 인터페이스 생성 도구를 사용하는 경우 먼저 안전 영역 레이아웃 가이드를 사용 설정했는지 확인하세요. 이렇게 하려면 Xcode 9 이상을 실행하고 iOS 9 이상을 타겟팅해야 합니다.

인터페이스 생성 도구 파일을 열고 뷰 컨트롤러 장면을 클릭합니다. 오른쪽에 인터페이스 생성 도구 문서 옵션이 표시됩니다. 안전 영역 레이아웃 가이드 사용을 선택하고 iOS 9.0 이상을 빌드하고 있는지 확인합니다.

폭과 높이 제한을 이용해 필요한 크기 이내로 배너를 설정하는 것이 좋습니다.

이제 GAMBannerView의 상단 속성을 안전 영역 상단으로 제한하여 안전 영역 상단에 맞게 배너를 표시할 수 있습니다.

마찬가지로 GAMBannerView의 하단 속성을 안전 영역의 하단으로 제한하여 안전 영역의 하단에 맞춰 배너를 표시할 수 있습니다.

이제 아래 스크린샷과 같이 제한 조건이 설정되어 있을 것입니다(크기와 위치는 다를 수 있음).

ViewController

다음은 위의 스토리보드에 구성된 것처럼 GAMBannerView에 배너 광고를 표시하는 데 필요한 최소의 작업을 수행하는 간단한 뷰 컨트롤러 코드 스니펫입니다.

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(GAMRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

안전한 영역의 가장자리에 맞춰 배너 표시

배너를 전체 너비로 좌측 또는 우측 정렬 상태로 표시하려면 배너의 좌측/우측 가장자리를 슈퍼 보기의 좌측/우측 가장자리가 아닌 안전 영역의 좌측/우측 가장자리로 제한하세요.

안전 영역 레이아웃 가이드 사용을 사용 설정한 경우에는 인터페이스 생성 도구에서 기본적으로 보기에 제약 조건이 추가될 때 안전 영역 가장자리가 사용됩니다.

iOS 8 이하 지원

인터페이스 생성 도구를 사용하여 iOS 8 이하를 지원하려면 인터페이스 생성 도구 파일 및 스토리보드에서 안전 영역 레이아웃 가이드 사용을 선택 해제해야 합니다.

이제 안전 영역 상단 대신 상단 레이아웃 가이드 하단에 제약 조건을 추가할 수 있습니다.

또한 안전 영역 하단 대신 하단 레이아웃 가이드 상단에 제약 조건을 추가합니다.

전체 너비 배너 (가로 모드의 안전 영역의 영향을 받음)의 경우 이러한 레이아웃 가이드가 없습니다. 인터페이스 빌더의 안전한 옵션은 여백을 기준으로 왼쪽 및 오른쪽 가장자리 제약 조건을 설정하는 것입니다.

이렇게 하면 배너의 가장자리가 슈퍼 뷰/안전 영역의 가장자리에서 약간 오프셋되어 iPhone X의 가로 모드 방향에서 배너가 가려지지 않습니다. 프로그래매틱 방식으로 원하는 결과를 얻을 수도 있습니다.

프로그래매틱

앱에서 프로그래매틱 방식으로 배너 광고를 만드는 경우 제약 조건을 지정하고 배너 광고를 코드에 배치할 수 있습니다. 다음 예시 (iOS 버전 7.0 이상)에서는 배너를 안전 영역의 하단 중앙에 수평으로 배치하는 방법을 보여줍니다.

Swift

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GAMBannerView(adSize: kGADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(GAMRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToVIew:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

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

@end

위의 기법을 통해 사용된 속성 및 앵커를 수정하여 안전 영역의 상단에 제한 조건을 쉽게 적용할 수 있습니다.

네이티브 광고

앱에서 네이티브 광고를 화면 상단 또는 하단에 배치하면 배너 광고와 동일한 원칙이 네이티브 광고에 적용됩니다. 주요 차이점은 GAMBannerView에 제한 조건을 추가하는 대신 안전 영역 레이아웃 가이드와 관련하여 GADNativeAppInstallAdView 및 GADNativeContentAdView (또는 광고 포함 보기)에 제한 조건을 추가해야 한다는 점입니다. 네이티브 뷰의 경우 더 명시적인 크기 제한을 제공하는 것이 좋습니다.

전면 광고 및 보상형 광고

전면 광고 및 보상형 광고를 비롯한 전체 화면 광고 형식은 Google 모바일 광고 SDK에서 렌더링됩니다. 닫기 버튼과 같은 광고 요소가 올바른 위치에 렌더링되도록 Google 모바일 광고 SDK가 업데이트됩니다. 변경사항이 적용되면 출시 노트와 이 문서 페이지가 업데이트됩니다.