Skip to content

Native Ad Layout Setting Guide [KOR]

Jump to bottom
MarkusOhADOP edited this page Oct 19, 2023 · 11 revisions

Native Ad Layout Setting Guide

BidmadSDK 네이티브 광고는 레이아웃 구성을 위해 다음 요소를 제공합니다.

  • mediaViewCustom : 수신한 광고 이미지 및 미디어
  • iconViewCustom : 광고 아이콘
  • bodyViewCustom : 바디 (자세한 설명) 노출을 위한 텍스트
  • HeadlineViewCustom: 제목 노출을 위한 텍스트
  • callToActionViewCustom : 버튼 동작을 수행하기 위한 버튼

다음 가이드에서는 XIB를 설정하고 XIB 파일을 BIDMADNativeAdView에 연결하는 방법을 소개합니다.

  1. Xcode 탭에서 New → File 을 선택합니다

    Image1

  2. iOS → User Interface → Empty 를 선택합니다

    Image2

  3. 원하는 파일 이름을 지정하고 "create" 버튼을 클릭하십시오.

    Image3

  4. 다음과 같이 뷰 구조를 설정하십시오:

    AdditionalImage1

  5. "Inspector Area"의 "Identity Inspector"에서 상위 뷰 내부의 뷰의 사용자 정의 클래스를 "BIDMADNativeAdViewContainer"로 설정하십시오.

    AdditionalImage2

  6. 다음과 같이 뷰 Constraints를 설정하십시오:

    AdditionalImage3

  7. "Inspector Area"의 "Identity Inspector"에서 상위 뷰 내부의 뷰의 사용자 정의 클래스를 "BIDMADNativeAdView"로 설정하십시오.

    AdditionalImage4

  8. 다음과 같이 뷰 Constraints를 설정하십시오:

    AdditionalImage5

  9. 설정된 View를 기반으로 UI를 구성합니다.

    Image6

  10. "네비게이션 영역"에서 설정된 UI가 포함된 XIB 파일을 마우스 오른쪽 버튼으로 클릭한 다음 "Open As" 및 "Source Code"를 클릭합니다.

    Image7

  11. XIB 파일 소스 코드에서 사용자 정의 클래스로 "BIDMADNativeAdView" 값이 있는 보기를 찾으십시오.

    Image8

  12. BIDMADNativeAdView 클래스에 해당하는 코드 블록에 아래 connections 코드 블록을 복사하여 붙여넣습니다.

    Image9

    connections 코드 블록 (복사 붙여넣기 하십시오)

    <connections>
    <!--IBOutlet Settings-->
    
</connections>

  13. connections 코드 블록 내부 "IBOutlet Settings" 아래 사용하시는 네이티브 광고 UI 요소들에 따라 아래 코드를 복사 붙여넣기 하세요.
    예를 들어, "headlineViewCustom" (타이틀) 뷰를 사용하시고 싶다면, 아래 항목 중 property 값이 "headlineViewCustom" 인 코드 라인을 복사해 붙여넣으시면 됩니다.

    예시 GIF (애니메이션 실행이 되지 않을 경우, 아래 GIF 를 새탭에서 열어 확인 가능합니다)
    Image10

    connections 코드 블록 내부에 배치해야할 코드 라인

    <outlet property="bodyViewCustom" destination="<#bodyViewID#>" id="ADV-VW-CT2"/>
<outlet property="callToActionViewCustom" destination="<#callToActionViewID#>" id="ADV-VW-CT3"/>
<outlet property="headlineViewCustom" destination="<#headlineViewID#>" id="ADV-VW-CT4"/>
<outlet property="iconViewCustom" destination="<#iconViewID#>" id="ADV-VW-CT5"/>
<outlet property="mediaViewCustom" destination="<#mediaViewID#>" id="ADV-VW-CT6"/>

  14. 그런 다음 View ID를 검색하여 "destination=" 오른쪽 회색 상자에 붙여넣습니다. View ID는 아래 이미지와 같이 "id=" 값을 통해 식별할 수 있습니다.

    Image11

  15. "CMD + S"를 눌러 저장하면 Native 광고를 위한 XIB 디자인이 완료됩니다.

Clone this wiki locally