메인 콘텐츠로 건너뛰기

​
개요

네이티브 광고는 앱의 UI에 자연스럽게 통합되는 광고 포맷입니다. 광고 요소(제목, 이미지, 설명 등)를 앱 디자인에 맞게 자유롭게 커스터마이징할 수 있습니다.

​
주요 특징

  • 앱 UI와 완벽하게 통합 가능한 커스텀 디자인
  • 광고 요소 개별 접근 및 배치
  • 광고주 프로필 정보 표시 옵션
  • 추가 커스텀 필드 지원

​
구현 방법

네이티브 광고 구현은 다음 단계로 진행됩니다:
  1. 광고 로드
  2. 커스텀 뷰 생성
  3. 뷰 바인딩
  4. 델리게이트 처리

​
1. 광고 로드

AdropNativeAd 인스턴스를 생성하고 광고를 로드합니다. 
import AdropAds

class MyViewController: UIViewController {
    private var nativeAd: AdropNativeAd?

    override func viewDidLoad() {
        super.viewDidLoad()

        // 네이티브 광고 생성
        nativeAd = AdropNativeAd(unitId: "YOUR_NATIVE_UNIT_ID")
        nativeAd?.delegate = self

        // 광고 로드
        nativeAd?.load()
    }
}

​
Context ID 설정

문맥 타겟팅을 위해 Context ID를 설정할 수 있습니다. 
nativeAd?.contextId = "article_123"
개발 중에는 테스트 유닛 ID를 사용하세요. 테스트 유닛 ID 섹션을 참고하세요.

​
2. 커스텀 뷰 생성

스토리보드 또는 코드로 네이티브 광고 뷰를 구성합니다.

​
UIKit (Storyboard/XIB)

스토리보드에서 AdropNativeAdView를 생성하고 광고 요소를 IBOutlet으로 연결합니다. 
import AdropAds

class NativeAdViewCell: UITableViewCell {
    @IBOutlet weak var nativeAdView: AdropNativeAdView!
    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var headlineLabel: UILabel!
    @IBOutlet weak var bodyLabel: UILabel!
    @IBOutlet weak var mediaView: UIView!
    @IBOutlet weak var callToActionButton: UIButton!

    // 광고주 프로필 (선택사항)
    @IBOutlet weak var advertiserLogoImageView: UIImageView!
    @IBOutlet weak var advertiserNameLabel: UILabel!

    func configure(with ad: AdropNativeAd) {
        // 뷰 바인딩 (다음 섹션 참고)
    }
}

​
UIKit (코드)

import AdropAds

class NativeAdView: UIView {
    let nativeAdView = AdropNativeAdView()
    let iconImageView = UIImageView()
    let headlineLabel = UILabel()
    let bodyLabel = UILabel()
    let mediaView = UIView()
    let callToActionButton = UIButton()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    private func setupViews() {
        addSubview(nativeAdView)
        nativeAdView.addSubview(iconImageView)
        nativeAdView.addSubview(headlineLabel)
        nativeAdView.addSubview(bodyLabel)
        nativeAdView.addSubview(mediaView)
        nativeAdView.addSubview(callToActionButton)

        // Auto Layout 설정
        // ...
    }
}

​
3. 뷰 바인딩

AdropNativeAdView에 광고 요소를 바인딩하여 광고 데이터를 표시합니다. 
func configure(with ad: AdropNativeAd) {
    // 각 요소를 AdropNativeAdView에 바인딩
    nativeAdView.setIconView(iconImageView)
    nativeAdView.setHeadLineView(headlineLabel)
    nativeAdView.setBodyView(bodyLabel)
    nativeAdView.setMediaView(mediaView)
    nativeAdView.setCallToActionView(callToActionButton)

    // 광고주 프로필 (선택사항)
    if let advertiserLogoView = advertiserLogoImageView,
       let advertiserNameView = advertiserNameLabel {
        nativeAdView.setAdvertiserLogoView(advertiserLogoView)
        nativeAdView.setAdvertiserNameView(advertiserNameView)
    }

    // 광고 데이터 설정 (자동으로 바인딩된 뷰에 표시됨)
    nativeAdView.setNativeAd(ad)
}

​
바인딩 메서드

메서드설명필수
setIconView(_:)아이콘 이미지 뷰 설정선택
setHeadLineView(_:)제목 레이블 설정선택
setBodyView(_:)설명 레이블 설정선택
setMediaView(_:)메인 이미지/비디오 뷰 설정선택
setCallToActionView(_:)CTA 버튼 설정선택
setAdvertiserLogoView(_:)광고주 로고 이미지 뷰 설정선택
setAdvertiserNameView(_:)광고주 이름 레이블 설정선택
setNativeAd(_:)광고 데이터 설정필수
광고주 프로필을 표시하려면 애드컨트롤 콘솔에서 해당 광고 유닛의 광고주 프로필 표시를 활성화해야 합니다.

​
4. 델리게이트 처리

AdropNativeAdDelegate를 구현하여 광고 이벤트를 처리합니다. 
extension MyViewController: AdropNativeAdDelegate {
    // 광고 수신 성공
    func onAdReceived(_ nativeAd: AdropNativeAd) {
        print("네이티브 광고 수신 성공")

        // 광고 데이터에 접근
        if let headline = nativeAd.headline {
            print("제목: \(headline)")
        }

        if let body = nativeAd.body {
            print("설명: \(body)")
        }

        if let cta = nativeAd.callToAction {
            print("CTA: \(cta)")
        }

        // 뷰에 광고 바인딩
        configureNativeAdView(with: nativeAd)
    }

    // 광고 수신 실패
    func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
        print("네이티브 광고 수신 실패: \(errorCode)")
    }

    // 광고 클릭 (선택사항)
    func onAdClicked(_ nativeAd: AdropNativeAd) {
        print("네이티브 광고 클릭")
    }

    // 광고 노출 (선택사항)
    func onAdImpression(_ nativeAd: AdropNativeAd) {
        print("네이티브 광고 노출")
    }
}

​
델리게이트 메서드

메서드필수설명
onAdReceived(_:)필수광고 로드 성공 시 호출
onAdFailedToReceive(_:_:)필수광고 로드 실패 시 호출
onAdClicked(_:)선택사용자가 광고를 클릭했을 때 호출
onAdImpression(_:)선택광고가 노출되었을 때 호출

​
광고 속성

AdropNativeAd 객체를 통해 광고 데이터에 접근할 수 있습니다.

​
기본 속성

// 광고 수신 성공 시
func onAdReceived(_ nativeAd: AdropNativeAd) {
    // 제목
    if let headline = nativeAd.headline {
        print("제목: \(headline)")
    }

    // 설명
    if let body = nativeAd.body {
        print("설명: \(body)")
    }

    // CTA 버튼 텍스트
    if let callToAction = nativeAd.callToAction {
        print("CTA: \(callToAction)")
    }

    // 메인 이미지/비디오
    if let asset = nativeAd.asset {
        print("미디어 URL: \(asset)")
    }
}

​
광고주 프로필

// 광고주 정보
if let profile = nativeAd.profile {
    if let logo = profile.displayLogo {
        print("광고주 로고: \(logo)")
    }

    if let name = profile.displayName {
        print("광고주 이름: \(name)")
    }
}

​
커스텀 필드

애드컨트롤 콘솔에서 설정한 추가 텍스트 항목에 접근할 수 있습니다. 
// 추가 텍스트 항목
if let extra = nativeAd.extra {
    // 예: 가격 정보
    if let price = extra["price"] {
        print("가격: \(price)")
    }

    // 예: 할인율
    if let discount = extra["discount"] {
        print("할인율: \(discount)")
    }

    // 예: 평점
    if let rating = extra["rating"] {
        print("평점: \(rating)")
    }
}
extra 필드는 애드컨트롤 콘솔의 광고 유닛 설정에서 정의한 추가 텍스트 항목 ID를 키로 사용합니다.

​
속성 목록

속성타입설명
headlineString?광고 제목
bodyString?광고 설명
callToActionString?CTA 버튼 텍스트
assetString?메인 이미지/비디오 URL
profileAdropProfile?광고주 프로필 정보
extra[String: String]?추가 커스텀 필드

​
완전한 예제

UITableView에서 네이티브 광고를 표시하는 예제입니다. 
import UIKit
import AdropAds

class FeedViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!

    private var nativeAd: AdropNativeAd?
    private var items: [Any] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        // 네이티브 광고 로드
        nativeAd = AdropNativeAd(unitId: "YOUR_NATIVE_UNIT_ID")
        nativeAd?.delegate = self
        nativeAd?.load()

        // 일반 콘텐츠 로드
        loadContent()
    }

    private func loadContent() {
        // 일반 콘텐츠 로드
        items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
        tableView.reloadData()
    }
}

extension FeedViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 3번째 위치에 광고 표시
        if indexPath.row == 2, let ad = nativeAd {
            let cell = tableView.dequeueReusableCell(
                withIdentifier: "NativeAdCell",
                for: indexPath
            ) as! NativeAdCell
            cell.configure(with: ad)
            return cell
        }

        let cell = tableView.dequeueReusableCell(
            withIdentifier: "ContentCell",
            for: indexPath
        )
        cell.textLabel?.text = items[indexPath.row] as? String
        return cell
    }
}

extension FeedViewController: AdropNativeAdDelegate {
    func onAdReceived(_ nativeAd: AdropNativeAd) {
        print("네이티브 광고 수신 성공")
        tableView.reloadData()
    }

    func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
        print("네이티브 광고 수신 실패: \(errorCode)")
    }

    func onAdClicked(_ nativeAd: AdropNativeAd) {
        print("네이티브 광고 클릭")
    }

    func onAdImpression(_ nativeAd: AdropNativeAd) {
        print("네이티브 광고 노출")
    }
}

// 네이티브 광고 셀
class NativeAdCell: UITableViewCell {
    @IBOutlet weak var nativeAdView: AdropNativeAdView!
    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var headlineLabel: UILabel!
    @IBOutlet weak var bodyLabel: UILabel!
    @IBOutlet weak var mediaView: UIView!
    @IBOutlet weak var callToActionButton: UIButton!
    @IBOutlet weak var advertiserLogoImageView: UIImageView!
    @IBOutlet weak var advertiserNameLabel: UILabel!

    func configure(with ad: AdropNativeAd) {
        // 뷰 바인딩
        nativeAdView.setIconView(iconImageView)
        nativeAdView.setHeadLineView(headlineLabel)
        nativeAdView.setBodyView(bodyLabel)
        nativeAdView.setMediaView(mediaView)
        nativeAdView.setCallToActionView(callToActionButton)
        nativeAdView.setAdvertiserLogoView(advertiserLogoImageView)
        nativeAdView.setAdvertiserNameView(advertiserNameLabel)

        // 광고 설정
        nativeAdView.setNativeAd(ad)

        // 커스텀 필드 사용 예시
        if let extra = ad.extra, let price = extra["price"] {
            // 가격 표시 로직
            print("가격: \(price)")
        }
    }
}

​
테스트 유닛 ID

개발 및 테스트 시 다음 테스트 유닛 ID를 사용하세요.
광고 타입테스트 유닛 ID
네이티브 (이미지)PUBLIC_TEST_UNIT_ID_NATIVE
네이티브 비디오 (16:9)PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9
네이티브 비디오 (9:16)PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16
// 테스트 광고 로드
nativeAd = AdropNativeAd(unitId: AdropUnitId.PUBLIC_TEST_UNIT_ID_NATIVE)
실제 배포 시에는 반드시 애드컨트롤 콘솔에서 생성한 실제 유닛 ID를 사용하세요.

​
관련 문서

시작하기

SDK 설치 및 초기화

배너 광고

배너 광고 구현하기

전면 광고

전면 광고 구현하기

보상형 광고

보상형 광고 구현하기