> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/sdk/ios/ios-2.x.x/layout/adpopcornssp-layout/undefined-1.md).

# 템플릿 사용

iOS 환경에서 네이티브 광고 레이아웃을 템플릿을 사용하여 구현할 경우 가이드입니다.

## 1. 스토리보드에 UI View 생성

스토리보드에 UIView 생성 후 Custom Class을 AdPopcornSSPNativeAd로 설정합니다. 

<mark style="color:red;">`AdPopcornSSPNativeAd`</mark> View 안에 사용하고자 하는 UI component를 아래 샘플과 같이 추가합니다.

<figure><img src="https://50533756-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqmkw7pJLtjFGD5fwChbN%2Fuploads%2Fgl652S11Do6WLp36MMsk%2Fimage.png?alt=media&amp;token=e41273b2-5ba6-4d64-9464-a7c5ad684a3b" alt=""><figcaption><p>AdPopcornSSPNativeAd View</p></figcaption></figure>

## 2. 실제 광고 영역 추가

AdPopcornSSPNativeAd 영역 안에 실제 광고 영역 추가합니다.

{% hint style="info" %}
AdPopcornSSP의 경우 v2.4.6 버전부터 직접 설정 이외에 템플릿 기능도 추가되었습니다.

이에 직접 설정 혹은 템플릿 사용 방식 중 하나를 선택해 사용하시기 바랍니다. 단, 템플릿 설정 시, 애드팝콘 사업팀(<mark style="color:blue;"><monetize@adpopcorn.com></mark>)에 사용 문의를 먼저 해주시기 바랍니다.
{% endhint %}

템플릿 사용 시에는 직접 생성과 다르게 title, description, icon, main image, cta ui component를 생성할 필요 없이 apSSPNativeAdView까지만 생성해서 영역을 설정해 주시면 됩니다.

<figure><img src="https://50533756-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqmkw7pJLtjFGD5fwChbN%2Fuploads%2FBIsSx5vvfyx2UnA6zyOP%2Fimage.png?alt=media&amp;token=8294bce5-8402-4a5c-beb0-7731cdc424ee" alt=""><figcaption></figcaption></figure>

## 3. View controller 연결

1번, 2번 과정에서 생성한 UI component를 view controller에 outlet 연결합니다.

<figure><img src="https://50533756-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqmkw7pJLtjFGD5fwChbN%2Fuploads%2FyVKD1xcRkcnS4dJcovVg%2Fimage.png?alt=media&amp;token=24085ddc-657b-45dd-a29a-d6f24021dce7" alt=""><figcaption></figcaption></figure>

## 4. UI view를 SDK 에 전달

storyboard에서 생성한 Outlet 연결한 UI view를 <mark style="color:red;">`APSSPNativeAdRenderer`</mark>를 사용하여 sdk에 전달합니다.

storyboard에서 생성한 ui view를 APSSPNativeAdRenderer를 사용하여 sdk에 전달한다. 단, title, description, icon, main image, cta를 설정해 줄 필요 없이 최상위 view 전달과 useTemplate 값을 YES로 설정해 주시면 됩니다.

{% tabs %}
{% tab title="Objective-C" %}

```objectivec
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    APSSPNativeAdRenderer *apSSPNativeAdRenderer = [[APSSPNativeAdRenderer alloc] init];
    apSSPNativeAdRenderer.apSSPNativeAdView = _apSSPNativeAdView;
    apSSPNativeAdRenderer.useTemplate = YES;
    [_adPopcornSSPNativeAd setApSSPRenderer:apSSPNativeAdRenderer superView:_apSSPNativeAdView];
}
```

{% endtab %}

{% tab title="Swift" %}

```swift
override func viewDidLoad() 
{
    super.viewDidLoad()
    apSSPNativeAdRenderer = APSSPNativeAdRenderer.init()
    apSSPNativeAdRenderer.apSSPNativeAdView = apSSPNativeAdView
    apSSPNativeAdRenderer.useTemplate = true
    adPopcornSSPNativeAd.setApSSPRenderer(apSSPNativeAdRenderer, superView: apSSPNativeAdView)
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
실제 구현 내용은 샘플 프로젝트를 통해 확인하시면 좀 더 쉽게 확인이 가능합니다.&#x20;

([샘플 프로젝트 내 NativeAdViewController.m 참고](/ssp-sdk/sdk/ios/ios-3.1.0+/undefined-13.md))
{% endhint %}