네이티브 광고를 사용하면 개인 맞춤 광고를 활용하여 더 나은 사용자 환경을
제공할 수 있고, 사용자 환경을 개선하면 사용자 참여가 늘어나 전반적인 수익을
개선할 수 있습니다.
네이티브 광고를 최대한 활용하려면 광고 레이아웃을 앱의 일부인 것처럼
만드는 것이 중요합니다. Google에서는 게시자가 네이티브 광고를 쉽게 시작할 수 있도록
돕기 위해 네이티브 템플릿을 만들었습니다.
네이티브 템플릿은 네이티브 광고용 코드 완성형 보기로, 빠르게 구현하고 손쉽게 수정할 수 있도록
고안되었습니다. 네이티브 템플릿을 사용하면 처음 만드는
네이티브 광고도 몇 분 만에 구현할 수 있고, 많은 코드 없이도 디자인과 스타일을
빠르게 맞춤설정할 수 있습니다. 이러한 템플릿을 뉴스 피드에 사용되는 TableView,
대화상자, 앱의 다른 부분 등 원하는 위치에 어디든지
배치할 수 있습니다.
이 가이드에서는 iOS 앱에서 네이티브 템플릿을 다운로드, 설치, 사용하는
방법을 설명하며, 네이티브 광고를 로드하기 위해 SDK를 사용하고 있다는 것을 전제로 합니다.
템플릿 크기
템플릿은 작은 크기 및 중간 크기로 제공됩니다. 각
템플릿은 GADTSmallTemplateView 및 GADTMediumTemplateView 클래스로
표현됩니다. 두 클래스 모두 GADTTemplateView를 확장합니다. 두 템플릿
모두 고정된 가로세로 비율이 있으며, addHorizontalConstraintsToSuperviewWidth를 호출하는 경우에만
상위 보기의 너비를 채우도록 조정됩니다.
addHorizontalConstraintsToSuperviewWidth를 호출하지 않으면 각 템플릿은
기본 크기로 렌더링됩니다.
GADTSmallTemplateView
작은 템플릿은 UICollectionView 또는 UITableView 셀에 적합합니다. 예를
들어 인피드 광고에 사용하거나 얇은 직사각형 광고 보기가 필요한 어디서나
사용할 수 있습니다. 이 템플릿의 기본 크기는
높이 91포인트, 너비 355포인트입니다.
GADTMediumTemplateView
중간 템플릿은 ½~¾ 페이지 보기에 적합합니다. 중간 템플릿은 방문 페이지
또는 스플래시 페이지에 유용하지만 UITableViews에 포함될 수도 있습니다. 이 템플릿의
기본 크기는 높이 370포인트, 너비 355포인트입니다.
모든 템플릿은 자동 레이아웃을 지원하므로 게재위치를 다양하게
실험해 보세요. 물론 요구사항에 맞게 소스 코드와 xib 파일을
변경할 수도 있습니다.
네이티브 광고 템플릿 설치하기
네이티브 템플릿을 설치하려면 zip 파일을 다운로드하여 Xcode 프로젝트로
드래그하면 됩니다. 필요한 경우 항목 복사를 선택했는지 확인합니다.
네이티브 광고 템플릿 사용하기
프로젝트에 폴더를 추가하고 관련 클래스를 파일에 포함한 후
이 방법에 따라 템플릿을 사용하세요. 글꼴 및 스타일 속성을 변경할 수 있는
유일한 방법은 스타일 사전을 사용하는 것으로,
현재 xib 자체에 설정된 스타일을 모두 재정의합니다.
Objective-C
///Step1:Importthetemplatesthatyouneed.#import "NativeTemplates/GADTSmallTemplateView.h"#import "NativeTemplates/GADTTemplateView.h"...//STEP2:Initializeyourtemplateviewobject.GADTSmallTemplateView*templateView=[[NSBundlemainBundle]loadNibNamed:@"GADTSmallTemplateView"owner:niloptions:nil].firstObject;//STEP3:TemplateviewsarejustGADNativeAdViews._nativeAdView=templateView;nativeAd.delegate=self;//STEP4:Addyourtemplateasasubviewofwhicheverviewyou'd like.//ThismustbedonebeforecallingaddHorizontalConstraintsToSuperviewWidth.//Pleasenote:OurtemplateobjectsaresubclassesofGADNativeAdViewso//youcaninsertthemintowhatevertypeofviewyou’dlike,anddon’tneedto//createyourown.[self.viewaddSubview:templateView];//STEP5(Optional):Createyourstylesdictionary.Setyourstylesdictionary//onthetemplateproperty.Adefaultdictionaryiscreatedforyouifyoudo//notsetthis.Note-templatesdonotcurrentlyrespectstylechangesinthe//xib.NSString*myBlueColor=@"#5C84F0";NSDictionary*styles=@{GADTNativeTemplateStyleKeyCallToActionFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeyCallToActionFontColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyCallToActionBackgroundColor:[GADTTemplateViewcolorFromHexString:myBlueColor],GADTNativeTemplateStyleKeySecondaryFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeySecondaryFontColor:UIColor.grayColor,GADTNativeTemplateStyleKeySecondaryBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyPrimaryFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeyPrimaryFontColor:UIColor.blackColor,GADTNativeTemplateStyleKeyPrimaryBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyTertiaryFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeyTertiaryFontColor:UIColor.grayColor,GADTNativeTemplateStyleKeyTertiaryBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyMainBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyCornerRadius:[NSNumbernumberWithFloat:7.0],};templateView.styles=styles;//STEP6:Settheadforyourtemplatetorender.templateView.nativeAd=nativeAd;//STEP7(Optional):Ifyou'd like your template view to span the width of your//superviewcallthismethod.[templateViewaddHorizontalConstraintsToSuperviewWidth];[templateViewaddVerticalCenterConstraintToSuperview];
스타일 사전 키
템플릿을 맞춤설정하는 가장 빠른 방법은 다음 키를 사용하여
사전을 만드는 것입니다.
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에 스타일을 설정해도 내 스타일이 업데이트되지 않는 이유는 무엇인가요?
현재 Google에서는 모든 xib 스타일을 GADTTemplateView.m의 기본 스타일 사전으로 재정의하고 있습니다.
참여하기
Google에서는 사용자가 네이티브 광고를 신속하게 개발할 수 있도록 돕기 위해 네이티브 템플릿을 만들었습니다.
새로운 템플릿이나 추가 기능이 필요하면 언제든지 GitHub 저장소에 참여해 주세요. pull 요청을 보내 주시면 Google에서 검토한 후
알려 드립니다.
[null,null,["최종 업데이트: 2025-09-02(UTC)"],[[["\u003cp\u003eNative Templates offer pre-built layouts for native ads, enabling quick implementation and customization for a better user experience within iOS apps.\u003c/p\u003e\n"],["\u003cp\u003eTwo template sizes, small and medium, are available, designed for various ad placements like in-feed ads or landing pages, and can be easily integrated using provided code snippets.\u003c/p\u003e\n"],["\u003cp\u003eTemplates can be further personalized by adjusting font, color, and background styles using a styles dictionary with specific keys for different ad elements.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize the templates, developers need to download the provided zip file, add it to their Xcode project, and follow the step-by-step instructions for implementation and customization.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can explore the GitHub repository to contribute new templates or features, enhancing the Native Templates offering for iOS native ads.\u003c/p\u003e\n"]]],["Native Templates are pre-designed, customizable views for native ads in iOS apps, available for download from GitHub. Two sizes, small (`GADTSmallTemplateView`) and medium (`GADTMediumTemplateView`), are provided, with default and scalable dimensions. To use, download the templates, import them into your project, initialize a template view object, set it as a subview, optionally define a styles dictionary for font and color customization, assign the native ad, and add constraints for width scaling. Style settings in the xib are overridden.\n"],null,["Select platform: [Android](/admob/android/native/templates \"View this page for the Android platform docs.\") [iOS](/admob/ios/native/templates \"View this page for the iOS platform docs.\") [Flutter](/admob/flutter/native/templates \"View this page for the Flutter platform docs.\")\n\n\u003cbr /\u003e\n\n[Download Native Templates](//github.com/googleads/googleads-mobile-ios-native-templates)\n| **Key Point:** Before continuing, know how to [load a native\n| ad](/admob/ios/native#load-ad). Learn more about native ads in our [Native Ads\n| Playbook](//admob.google.com/home/resources/native-ads-playbook/).\n\n\nUsing native ads you can customize your ads resulting in a better user\nexperience. Better user experiences can increase engagement and improve your\noverall yield.\n\nIn order to get the most out of native ads, it's important to style your ad\nlayouts so that they feel like a natural extension of your app. To help you get\nstarted, we've created Native Templates.\n\nNative Templates are code-complete views for your native ads, designed for fast\nimplementation and easy modification. With Native Templates, you can implement\nyour first native ad in just a few minutes, and you can quickly customize the\nlook and feel without a lot of code. You can place these templates anywhere you\nwant, such as in a TableView used in a news feed, in a dialog, or anywhere else\nin your app.\n| **Note:** If you're interested in designing your own native layouts from scratch, return to the [Native Advanced](/admob/ios/native/advanced) documentation instead.\n\nThis guide will show you how to download, include, and use Native Templates in\nyour iOS apps. It assumes you've already successfully used the SDK to load a\nnative ad.\n\nTemplate sizes\n\nThere are two template sizes: small and medium. Each template is represented\nby a class. The classes are `GADTSmallTemplateView` and\n`GADTMediumTemplateView`. Both classes extend `GADTTemplateView`. Both\ntemplates have a fixed aspect ratio, which will scale to fill the width of\ntheir parent views only if you call `addHorizontalConstraintsToSuperviewWidth`.\nIf you don't call `addHorizontalConstraintsToSuperviewWidth`, each template\nwill render its default size.\n\nGADTSmallTemplateView\n\nThe small template is ideal for `UICollectionView` or `UITableView` cells. For\ninstance you could use it for in-feed ads, or anywhere you need a thin\nrectangular ad view. The default size of this template is 91 points high by 355\npoints wide.\n\nGADTMediumTemplateView\n\nThe medium template is meant to be a 1/2 to 3/4-page view. This is good for\nlanding or splash pages, but can also be included in `UITableViews`. The\ndefault size of this template is 370 points high by 355 points wide.\n\nAll of our templates support autolayout, so feel free to experiment with\nplacement. Of course, you can also change the source code and xib files to\nsuit your requirements.\n\nInstalling the native ad templates\n\nTo install the Native Templates, simply download the zip and drag it into your\nXcode project. Make sure you check **Copy items if needed**.\n\nUsing the native ad templates\n\nOnce you've added the folder to your project and included the relevant class in\nyour file, follow this recipe to use a template. Note that the only way\nto change font and style properties is using the styles dictionary---we\ncurrently override any style set in the xib itself.\n\nObjective-C \n\n```python\n/// Step 1: Import the templates that you need.\n#import \"NativeTemplates/GADTSmallTemplateView.h\"\n#import \"NativeTemplates/GADTTemplateView.h\"\n...\n\n// STEP 2: Initialize your template view object.\nGADTSmallTemplateView *templateView =\n [[NSBundle mainBundle] loadNibNamed:@\"GADTSmallTemplateView\" owner:nil options:nil]\n .firstObject;\n\n// STEP 3: Template views are just GADNativeAdViews.\n_nativeAdView = templateView;\nnativeAd.delegate = self;\n\n// STEP 4: Add your template as a subview of whichever view you'd like.\n// This must be done before calling addHorizontalConstraintsToSuperviewWidth.\n// Please note: Our template objects are subclasses of GADNativeAdView so\n// you can insert them into whatever type of view you'd like, and don't need to\n// create your own.\n[self.view addSubview:templateView];\n\n// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary\n// on the template property. A default dictionary is created for you if you do\n// not set this. Note - templates do not currently respect style changes in the\n// xib.\n\nNSString *myBlueColor = @\"#5C84F0\";\nNSDictionary *styles = @{\n GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyCallToActionBackgroundColor :\n [GADTTemplateView colorFromHexString:myBlueColor],\n GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,\n GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,\n GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,\n GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],\n};\n\ntemplateView.styles = styles;\n\n// STEP 6: Set the ad for your template to render.\ntemplateView.nativeAd = nativeAd;\n\n// STEP 7 (Optional): If you'd like your template view to span the width of your\n// superview call this method.\n[templateView addHorizontalConstraintsToSuperviewWidth];\n[templateView addVerticalCenterConstraintToSuperview];\n```\n\nStyle dictionary keys\n\nThe fastest way to customize your templates is to make a dictionary with the\nfollowing keys:\n\nObjective-C \n\n```scilab\n/// Call to action font. Expects a UIFont.\nGADTNativeTemplateStyleKeyCallToActionFont\n\n/// Call to action font color. Expects a UIColor.\nGADTNativeTemplateStyleKeyCallToActionFontColor;\n\n/// Call to action background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyCallToActionBackgroundColor;\n\n/// The font, font color and background color for the first row of text in the\n/// template.\n\n/// All templates have a primary text area which is populated by the native ad's\n/// headline.\n\n/// Primary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeyPrimaryFont;\n\n/// Primary text font color. Expects a UIFont.\nGADTNativeTemplateStyleKeyPrimaryFontColor;\n\n/// Primary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyPrimaryBackgroundColor;\n\n/// The font, font color and background color for the second row of text in the\n/// template.\n\n/// All templates have a secondary text area which is populated either by the\n/// body of the ad, or by the rating of the app.\n\n/// Secondary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeySecondaryFont;\n\n/// Secondary text font color. Expects a UIColor.\nGADTNativeTemplateStyleKeySecondaryFontColor;\n\n/// Secondary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeySecondaryBackgroundColor;\n\n/// The font, font color and background color for the third row of text in the\n/// template. The third row is used to display store name or the default\n/// tertiary text.\n\n/// Tertiary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeyTertiaryFont;\n\n/// Tertiary text font color. Expects a UIColor.\nGADTNativeTemplateStyleKeyTertiaryFontColor;\n\n/// Tertiary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyTertiaryBackgroundColor;\n\n/// The background color for the bulk of the ad. Expects a UIColor.\nGADTNativeTemplateStyleKeyMainBackgroundColor;\n\n/// The corner rounding radius for the icon view and call to action. Expects an\n/// NSNumber.\nGADTNativeTemplateStyleKeyCornerRadius;\n```\n\nFAQs\n\nWhy do I get an exception when I try to instantiate the template object?\n: This can happen if you've changed the size of the view in the xib file but\n haven't changed the size of the frame created in the \"setup\" method of the\n subclass.\n\nHow can I further customize these templates?\n: These templates are just xibs with associated view objects, like any other\n xib and custom view class you may be used to from iOS development.\n If you prefer to build your native ads from scratch, see our\n [Native Advanced guide](/admob/ios/native/advanced).\n\nWhy aren't my styles updating when I set them in the xib?\n: We currently override all xib styles by the default styles dictionary in\n `GADTTemplateView.m`.\n\nContribute\n\nWe've made Native Templates to help you develop native ads quickly.\nWe'd love to see you contribute to our\n[GitHub](//github.com/googleads/googleads-mobile-ios-native-templates)\nrepo to add new templates or features. Send us a pull request and we'll take a\nlook."]]