> 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.md).

# 직접 설정

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

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

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

<figure><img src="/files/iJkHCCto96uG5yhgA5Ik" 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 %}

아래 스크린샷과 같이 native 영역 및 title, description, icon, main image, cta 영역까지 모두 수동으로 설정하여 영역을 지정해 주신 뒤, outlet 연결 진행해 주어야 합니다.

<mark style="color:red;">스크린샷이 없음</mark>

## 3. View controller 연결

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

<figure><img src="/files/aI3DKWyoAfKWAmgmLsz8" alt=""><figcaption></figcaption></figure>

## 4. UI view를 SDK 에 전달

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

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

<pre class="language-objectivec"><code class="lang-objectivec"><strong>- (void)viewDidLoad {
</strong>    [super viewDidLoad];
    // Do any additional setup after loading the view.
    APSSPNativeAdRenderer *apSSPNativeAdRenderer = [[APSSPNativeAdRenderer alloc] init];
    apSSPNativeAdRenderer.apSSPNativeAdView = _apSSPNativeAdView;
    apSSPNativeAdRenderer.titleLabel = _apSSPTitleView;
    apSSPNativeAdRenderer.descLabel = _apSSPDescView;
    apSSPNativeAdRenderer.mainImageView = _apSSPMainImageView;
    apSSPNativeAdRenderer.iconImageView = _apSSPIconImageView;
    apSSPNativeAdRender.ctaLabel = _apSSPCTAView;

    // PrivacyIcon 관련 커스터마이징 옵션
    apSSPNativeAdRenderer.privacyIconVisibility = YES;
    apSSPNativeAdRenderer.privacyIconPosition = 1;
    apSSPNativeAdRenderer.privacyIconWidth = 15;
    apSSPNativeAdRenderer.privacyIconHeight = 15;
    apSSPNativeAdRenderer.privacyIconTopMargin = 2;
    apSSPNativeAdRenderer.privacyIconLeftMargin = 2;
    apSSPNativeAdRenderer.privacyIconBottomtMargin = 2;
    apSSPNativeAdRenderer.privacyIconRightMargin = 2;
    [_adPopcornSSPNativeAd setApSSPRenderer:apSSPNativeAdRenderer superView:_apSSPNativeAdView];
}
</code></pre>

{% endtab %}

{% tab title="Swift" %}

<pre class="language-swift"><code class="lang-swift"><strong>override func viewDidLoad() 
</strong>{
    super.viewDidLoad()
    apSSPNativeAdRenderer = APSSPNativeAdRenderer.init()        
    apSSPNativeAdRenderer.apSSPNativeAdView = apSSPNativeAdView
    apSSPNativeAdRenderer.titleLabel = apSSPTitleView
    apSSPNativeAdRenderer.descLabel = apSSPDescView
    apSSPNativeAdRenderer.mainImageView = apSSPMainImageView
    apSSPNativeAdRenderer.iconImageView = apSSPIconImageView
    
    // PrivacyIcon 관련 커스터마이징 옵션
    apSSPNativeAdRenderer.privacyIconPosition  = 1
    apSSPNativeAdRenderer.privacyIconTopMargin = 2
    apSSPNativeAdRenderer.privacyIconLeftMargin = 2
    apSSPNativeAdRenderer.privacyIconBottomtMargin = 2
    apSSPNativeAdRenderer.privacyIconRightMargin = 2
        
    adPopcornSSPNativeAd.setApSSPRenderer(apSSPNativeAdRenderer, superView: apSSPNativeAdView)
}
</code></pre>

{% endtab %}
{% endtabs %}

<mark style="color:red;">`APSSPNativeAdRenderer`</mark>를 생성한 뒤, 애드팝콘 SSP 네이티브 광고에서 지원하는 title, desc, mainImageView, iconImageView를 전달합니다.

단, 이 때 이 <mark style="color:red;">4개의 component들은 하나의 UIView 영역 안에 포함</mark>되어 있어야 하며, 해당 superview는 apSSPNativeAdView에 반드시 전달해 주어야 합니다.

APSSPNativeAdRenderer에 각 component를 세팅 후, <mark style="color:red;">`setApSSPRenderer:superView:`</mark> API를 통해 renderer와 apSSPNativeAdView를 sdk 최종적으로 전달합니다.

{% hint style="info" %}
privacyIcon 관련 커스터마이징은 원할 경우 사용 가능하며, 위에 샘플 코드에 설정된 값이 default 값 입니다.<br>

privacyIconPosition 은 아래와 같이 설정 가능합니다.

* TOP\_LEFT = 0
* TOP\_RIGHT = 1 // 기본 값
* BOTTOM\_LEFT = 2
* BOTTOM\_RIGHT = 3
  {% endhint %}