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

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 = "/6499/example/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 = @"/6499/example/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 = "/6499/example/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 = @"/6499/example/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가 업데이트될 예정입니다. 이 변경사항을 사용할 수 있게 되면 출시 노트와 이 문서 페이지가 업데이트됩니다.