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

네이티브 템플릿

네이티브 광고를 사용하면 광고를 맞춤설정하여 더 나은 사용자 경험을 제공할 수 있습니다. 사용자 환경이 개선될수록 사용자 참여도가 높아지고 전체 수익이 향상될 수 있습니다.

네이티브 광고를 최대한 활용하려면 광고 레이아웃의 스타일을 앱의 자연스러운 연장처럼 표현하는 것이 중요합니다. Google에서는 개발자가 쉽게 시작할 수 있도록 네이티브 템플릿을 만들었습니다.

네이티브 템플릿은 네이티브 광고를 위한 코드 완성형 보기로, 빠른 구현과 손쉬운 수정을 위해 설계되었습니다. 네이티브 템플릿을 사용하면 첫 번째 네이티브 광고를 몇 분 만에 구현할 수 있으며, 코드를 많이 사용하지 않고도 디자인과 분위기를 빠르게 맞춤설정할 수 있습니다. 이러한 템플릿은 뉴스 피드에 사용되는 TableView, 대화상자 또는 앱의 다른 부분 등 원하는 위치에 배치할 수 있습니다.

이 가이드에서는 iOS 앱에서 네이티브 템플릿을 다운로드, 포함 및 사용하는 방법을 설명합니다. 네이티브 광고를 로드하기 위해 SDK를 이미 성공적으로 사용했다고 가정합니다.

템플릿 크기

템플릿 크기는 소형과 중형, 두 가지가 있습니다. 각 템플릿은 클래스로 표시됩니다. 클래스는 GADTSmallTemplateView와 GADTMediumTemplateView입니다. 두 클래스 모두 GADTTemplateView를 확장합니다. 두 템플릿 모두 고정된 가로세로 비율이 있으며 addHorizontalConstraintsToSuperviewWidth를 호출하는 경우에만 상위 뷰의 너비를 채우도록 조정됩니다. addHorizontalConstraintsToSuperviewWidth를 호출하지 않으면 각 템플릿은 기본 크기로 렌더링됩니다.

GADTSmallTemplateView

작은 템플릿은 UICollectionView 또는 UITableView 셀에 적합합니다. 예를 들어 인피드 광고에 사용하거나 얇은 직사각형 광고 뷰가 필요한 모든 곳에 사용할 수 있습니다. 이 템플릿의 기본 크기는 높이 91포인트, 너비 355포인트입니다.

GADTMediumTemplateView

중간 템플릿은 1/2~3/4페이지 보기로 되어 있습니다. 이는 방문 페이지 또는 스플래시 페이지에 유용하지만 UITableViews에 포함될 수도 있습니다. 이 템플릿의 기본 크기는 높이 370포인트, 너비 355포인트입니다.

Google의 모든 템플릿은 자동 레이아웃을 지원하므로 게재위치를 자유롭게 실험해 보세요. 물론 요구사항에 맞게 소스 코드와 xib 파일을 변경할 수도 있습니다.

네이티브 광고 템플릿 설치하기

네이티브 템플릿을 설치하려면 zip 파일을 다운로드하여 Xcode 프로젝트로 드래그하기만 하면 됩니다. 필요한 경우 항목 복사를 선택했는지 확인합니다.

네이티브 광고 템플릿 사용

프로젝트에 폴더를 추가하고 파일에 관련 클래스를 포함했으면 다음 레시피에 따라 템플릿을 사용합니다. 글꼴 및 스타일 속성을 변경하는 유일한 방법은 스타일 사전을 사용하는 것입니다. 현재 xib 자체에 설정된 모든 스타일이 재정의됩니다.

Objective-C

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

스타일 사전 키

템플릿을 맞춤설정하는 가장 빠른 방법은 다음 키로 사전을 만드는 것입니다.

Objective-C

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

FAQ

템플릿 객체를 인스턴스화하려고 할 때 예외가 발생하는 이유는 무엇인가요?: xib 파일에서 뷰의 크기를 변경했지만 서브클래스의 'setup' 메서드에서 생성된 프레임의 크기를 변경하지 않은 경우 이 문제가 발생할 수 있습니다.
이 템플릿을 추가로 맞춤설정하려면 어떻게 해야 하나요?: 이 템플릿은 iOS 개발에서 사용할 수 있는 다른 xib 및 맞춤 뷰 클래스와 같이 연결된 뷰 객체가 있는 xib입니다. 네이티브 광고를 처음부터 만들려면 네이티브 광고 고급형 가이드를 참고하세요.
xib에서 스타일을 설정해도 스타일이 업데이트되지 않는 이유는 무엇인가요?: 현재 모든 xib 스타일은 GADTTemplateView.m의 기본 스타일 사전으로 재정의됩니다.

참여

Google에서는 네이티브 광고를 신속하게 개발할 수 있도록 네이티브 템플릿을 만들었습니다. 새로운 템플릿이나 기능이 추가될 수 있도록 GitHub 저장소에 참여해 주세요. pull 요청을 보내 주시면 검토하겠습니다.