네이티브 광고

네이티브 광고 포맷 소개

광고 뷰를 광고 수익화 SDK가 구현해주는 타 광고 포맷와 달리 네이티브 광고 포맷는 구성 요소들을 전달받아 앱에서 직접 광고 뷰를 구현합니다.
UI/UX 기반으로 레이아웃을 직접 구현하므로써 위화감을 적게 만들 수 있다는 것이 가장 큰 특징입니다. 단, 유저가 광고가 아닌 컨텐츠로써 착각하는 경우를 방지하기 위해 광고 표시와 함께 최소한의 차별성은 부여해야합니다.

네이티브 광고 필수 요소 4가지네이티브 광고는 앱 UI에 맞게 자유롭게 디자인할 수 있지만, 아래의 4가지 필수 요소는 반드시 포함해야 합니다. 이는 사용자가 광고임을 명확히 인지하도록 하고, 광고주가 기대하는 최소한의 광고 효과를 보장하기 위한 광고 정책입니다.

광고 표기 : 사용자가 광고임을 명확히 인지할 수 있도록 광고 영역에 “AD”, “광고” 등의 표기를 추가해 주세요.
AdChoices 아이콘 : AdChoices 아이콘은 사용자가 광고를 식별하고 제어할 수 있도록 제공되는 아이콘으로, 일반적으로 ’ⓘ’ 모양으로 표시됩니다. 해당 아이콘은 DARO SDK에서 자동으로 삽입되므로 별도 구현은 필요하지 않습니다. 광고 뷰의 4개 모서리(좌상단/우상단/우하단/좌하단) 중 한 곳에 배치되며, 기본 위치는 우하단입니다. preferredAdChoicesPosition 옵션으로 원하는 모서리를 선택할 수 있으니 (자세한 내용은 아래 AdChoices 표시 위치 섹션 참고), 해당 위치가 다른 UI 요소와 겹치거나 가려지지 않도록 광고 뷰를 구성해 주세요. 광고 디맨드에 따라 아이콘의 형태나 동작이 다를 수 있습니다.
광고 제목 (타이틀) : 광고의 제목을 표시해야 합니다.
클릭 유도 문안(CTA) : “설치”, “열기”, “다운로드” 등의 CTA(Call to Action) 버튼을 반드시 포함해 주세요. 버튼의 크기나 형태는 자유롭게 구성할 수 있으며, 상황에 따라 텍스트 필드로 대체 가능합니다. 광고 디맨드에서 CTA 문구를 제공하므로, 특정 문구를 고정할 필요는 없습니다.

네이티브 팩토리 등록

아래 레이아웃은 AD 라벨을 포함하는 예제입니다. 실제 광고 내용과 글꼴 크기에 맞춰 광고 컨테이너 높이를 조정하고, 네 모서리의 AdChoices와 AD 라벨·버튼이 겹치거나 잘리지 않는지 기기에서 확인하세요. AD 라벨은 광고 에셋과 별개로 앱이 항상 표시합니다. Flutter에서 네이티브 광고를 사용하려면 네이티브 플랫폼(iOS/Android)에서 네이티브 광고 팩토리를 등록해야 합니다. factoryId는 네이티브 플랫폼에서 등록한 팩토리의 식별자입니다.

Android
iOS

광고 레이아웃 XML 생성

android/app/src/main/res/layout/ 에 네이티브 광고 레이아웃 파일을 생성합니다.ad_badge는 앱이 작성하는 XML 예제의 View ID이며 SDK 고정 리소스나 Dart 위젯 속성이 아닙니다. 이 XML에서 색상·크기·위치를 바꿀 수 있지만 AD 라벨은 계속 보이게 하고 AdChoices와 겹치지 않도록 배치하세요.

sample_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="480dp">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="12dp"
        app:cardElevation="4dp"
        app:cardBackgroundColor="#1E1E1E">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="24dp">

            <TextView
                android:id="@+id/ad_badge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="AD"
                android:textColor="#FFFFFF"
                android:background="#333333"
                android:padding="4dp"
                android:layout_marginBottom="8dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="12dp">

                <ImageView
                    android:id="@+id/ad_app_icon"
                    android:layout_width="56dp"
                    android:layout_height="56dp"
                    android:scaleType="centerCrop" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginStart="12dp"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/ad_headline"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="16sp"
                        android:textStyle="bold"
                        android:maxLines="2"
                        android:ellipsize="end" />

                    <TextView
                        android:id="@+id/ad_advertiser"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="13sp"
                        android:layout_marginTop="4dp" />
                </LinearLayout>
            </LinearLayout>

            <FrameLayout
                android:id="@+id/ad_media"
                android:layout_width="match_parent"
                android:layout_height="180dp" />

            <TextView
                android:id="@+id/ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:textSize="14sp"
                android:maxLines="2"
                android:ellipsize="end" />

            <Button
                android:id="@+id/ad_call_to_action"
                android:layout_width="match_parent"
                android:layout_height="44dp"
                android:layout_marginTop="12dp"
                android:textSize="16sp"
                android:textStyle="bold" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</FrameLayout>

DaroNativeAdFactory 구현

DaroNativeAdFactory 인터페이스를 구현하는 클래스를 생성합니다.

SampleNativeAdFactory.kt

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import so.daro.flutter.native.DaroNativeAdFactory
import droom.daro.core.model.DaroNativeAdBinder
import droom.daro.core.model.DaroNativeAdChoicePlacement

class SampleNativeAdFactory(private val context: Context) : DaroNativeAdFactory {

    override fun createNativeAdView(): View {
        return LayoutInflater.from(context).inflate(R.layout.sample_native_ad, null)
    }

    override fun createAdBinder(
        view: View,
        adChoicePlacement: DaroNativeAdChoicePlacement,
    ): DaroNativeAdBinder {
        return DaroNativeAdBinder.Builder(view)
            .setTitleViewId(R.id.ad_headline)
            .setBodyTextViewId(R.id.ad_body)
            .setIconViewId(R.id.ad_app_icon)
            .setMediaViewGroupId(R.id.ad_media)
            .setCallToActionViewId(R.id.ad_call_to_action)
            .setAdChoicePlacement(adChoicePlacement)
            .build()
    }
}

MainActivity에서 팩토리 등록

MainActivity의 configureFlutterEngine에서 팩토리를 등록합니다.

MainActivity.kt

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import so.daro.flutter.DaroFlutterPlugin

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        DaroFlutterPlugin.registerNativeAdFactory(
            flutterEngine,
            "sample_native_ad",
            SampleNativeAdFactory(this)
        )
    }
}

DaroNativeAdFactory 구현

DaroNativeAdFactory 프로토콜을 구현하는 팩토리 클래스와 DaroAdNativeView를 상속받는 커스텀 뷰를 생성합니다.

SampleNativeAdFactory.swift

import UIKit
import daro_flutter
import Daro

class SampleNativeAdFactory: NSObject, DaroNativeAdFactory {
    func createNativeAdView(
        unit: DaroAdUnit,
        preferredAdChoicesPosition: DaroAdChoicesPosition
    ) -> DaroAdNativeView {
        return SampleNativeAdContentView(
            unit: unit,
            preferredAdChoicesPosition: preferredAdChoicesPosition
        )
    }
}

final class SampleNativeAdContentView: DaroAdNativeView {
    init(unit: DaroAdUnit, preferredAdChoicesPosition: DaroAdChoicesPosition) {
        super.init(
            unit: unit,
            autoLoad: false,
            preferredAdChoicesPosition: preferredAdChoicesPosition
        )
        setupUI()
    }

    @available(*, unavailable)
    public required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // UI 요소 정의
    let iconImageView: UIImageView = {
        let view = UIImageView()
        view.contentMode = .scaleAspectFill
        view.layer.cornerRadius = 8
        view.clipsToBounds = true
        return view
    }()

    let titleLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 16, weight: .bold)
        label.numberOfLines = 2
        return label
    }()

    let advertiserLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 13)
        label.numberOfLines = 1
        return label
    }()

    let bodyLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 14)
        label.numberOfLines = 2
        return label
    }()

    let mediaContentView = UIView()

    let callToActionButton: UIButton = {
        let button = UIButton()
        button.titleLabel?.font = .systemFont(ofSize: 16, weight: .bold)
        button.backgroundColor = .systemBlue
        button.layer.cornerRadius = 8
        return button
    }()

    let adBadgeLabel: UILabel = {
        let label = UILabel()
        label.text = "AD"
        label.font = .systemFont(ofSize: 12, weight: .bold)
        label.textColor = .label
        return label
    }()

    private func setupUI() {
        let stack = UIStackView(arrangedSubviews: [
            adBadgeLabel, iconImageView, titleLabel, advertiserLabel,
            bodyLabel, mediaContentView, callToActionButton
        ])
        stack.axis = .vertical
        stack.alignment = .fill
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        addSubview(stack)
        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: topAnchor, constant: 24),
            stack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24),
            stack.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24),
            stack.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor, constant: -24),
            iconImageView.heightAnchor.constraint(equalToConstant: 48),
            mediaContentView.heightAnchor.constraint(equalToConstant: 120),
            callToActionButton.heightAnchor.constraint(equalToConstant: 44)
        ])

        // Daro SDK에 뷰 바인딩
        bindViews(
            titleLabel: titleLabel,
            advertiserLabel: advertiserLabel,
            bodyLabel: bodyLabel,
            iconImageView: iconImageView,
            mediaContentView: mediaContentView,
            callToActionButton: callToActionButton
        )
    }
}

AppDelegate에서 팩토리 등록

AppDelegate의 application(_:didFinishLaunchingWithOptions:)에서 팩토리를 등록합니다.

AppDelegate.swift

import Flutter
import UIKit
import daro_flutter

@main
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)

        DaroFlutterPlugin.registerNativeAdFactory(
            self,
            factoryId: "sample_native_ad",
            nativeAdFactory: SampleNativeAdFactory()
        )

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Flutter의 DaroNativeAd에 전달하는 factoryId는 네이티브 플랫폼에서 등록한 팩토리 ID와 정확히 일치해야 합니다.

네이티브 광고 구현하기

네이티브 광고는 Ad 객체 생성 → 로드 → 위젯 배치 → 해제의 단계로 구현합니다.

import 'package:daro_flutter/daro_flutter.dart';

1. Ad 객체 생성

DaroNativeAd 객체를 생성하고 콜백을 설정합니다.

final nativeAd = DaroNativeAd(
  adUnitId: 'YOUR_AD_UNIT_ID',
  factoryId: 'YOUR_FACTORY_ID',
  onAdLoaded: (adInfo) {
    print('Native ad loaded: ${adInfo.adUnitId}');
    setState(() {
      _isAdLoaded = true;
    });
  },
  onAdFailedToLoad: (error) {
    print('Native ad failed to load: ${error.message}');
    nativeAd.dispose();
  },
  onAdClicked: (adInfo) {
    print('Native ad clicked');
  },
  onAdImpression: (adInfo) {
    print('Native ad impression');
  },
);

2. 광고 로드

nativeAd.load();

3. 위젯 배치

onAdLoaded 콜백이 호출된 후 DaroNativeAdWidget을 위젯 트리에 배치합니다.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // ... 다른 위젯들
      if (_isAdLoaded)
        DaroNativeAdWidget(ad: nativeAd),
    ],
  );
}

ad.load()를 호출하기 전에 DaroNativeAdWidget을 위젯 트리에 배치하면 FlutterError가 발생합니다. 반드시 onAdLoaded 콜백 후에 위젯을 배치하세요.

4. 리소스 해제

페이지를 벗어나거나 광고가 더 이상 필요하지 않을 때 dispose()를 호출하여 리소스를 정리합니다.

@override
void dispose() {
  nativeAd.dispose();
  super.dispose();
}

콜백 설명

콜백	설명
`onAdLoaded`	광고가 성공적으로 로드되었을 때 호출됩니다
`onAdFailedToLoad`	광고 로드에 실패했을 때 호출됩니다
`onAdClicked`	사용자가 광고를 클릭했을 때 호출됩니다
`onAdImpression`	광고 노출이 기록되었을 때 호출됩니다

AdChoices 표시 위치

DaroNativeAd 의 preferredAdChoicesPosition 옵션으로 광고 뷰 내에서 AdChoices 아이콘이 렌더되는 모서리를 지정할 수 있습니다. 지정하지 않으면 우하단(bottomRight)이 사용됩니다. iOS / Android 양 플랫폼에서 동일하게 지원됩니다 (daro_flutter 1.0.3+).

final nativeAd = DaroNativeAd(
  adUnitId: 'YOUR_AD_UNIT_ID',
  factoryId: 'YOUR_FACTORY_ID',
  preferredAdChoicesPosition: DaroAdChoicesPosition.topLeft,
  onAdLoaded: (adInfo) { /* ... */ },
  onAdFailedToLoad: (error) { /* ... */ },
);

지원 값: topLeft, topRight, bottomLeft, bottomRight.

설정 시점 고정preferredAdChoicesPosition 은 DaroNativeAd 객체 생성 시점에 고정되며, 이후 변경할 수 없습니다. 다른 위치로 바꾸려면 광고 객체를 새로 생성해 주세요.

디맨드별 동작 차이 (선호 위치, 보장 아님)preferredAdChoicesPosition 은 “이 위치에 AdChoices 아이콘을 넣어달라”고 디맨드에 요청하는 값입니다. 하지만 실제로 어디에 표시되는지는 각 디맨드가 결정하기 때문에 요청한 위치가 반드시 반영되지는 않습니다.디맨드마다 반응이 다를 수 있습니다.

요청한 위치 그대로 반영하는 디맨드
요청을 무시하고 자체적으로 고정된 위치에 표시하는 디맨드
AdChoices 아이콘 대신 자체 광고 표시(예: 광고 마크) 로 대체하는 디맨드

앱은 광고임을 알리는 AD 라벨과 디맨드가 제공하는 AdChoices 표시를 가리지 않아야 합니다. 위치 옵션만으로 모든 광고 정책 요구사항 충족을 보장하지는 않습니다.따라서 광고 레이아웃을 디자인할 때는 네 모서리 어디에든 AdChoices/광고 마크가 표시될 수 있다고 가정하고, 각 모서리에 충분한 여백을 확보해두는 것을 권장합니다.

LINE 네이티브 광고

LINE 네이티브 광고는 앱의 피드나 리스트에 자연스럽게 삽입되는 소형 네이티브 광고 포맷입니다.
일반 네이티브 광고보다 컴팩트한 형태로, 리스트 아이템 사이에 삽입하기에 적합합니다.
광고 높이는 36dp (Android) / 36pt (iOS) 로 고정됩니다.
스타일을 커스터마이징하여 앱의 UI에 맞게 조정할 수 있습니다.

LINE 네이티브 광고 구현하기

LINE 네이티브 광고도 동일하게 Ad 객체 생성 → 로드 → 위젯 배치 → 해제 패턴을 따릅니다.

1. Ad 객체 생성

final lineNativeAd = DaroLineNativeAd(
  adUnitId: 'YOUR_AD_UNIT_ID',
  onAdLoaded: (adInfo) {
    print('Line native ad loaded: ${adInfo.adUnitId}');
    setState(() {
      _isAdLoaded = true;
    });
  },
  onAdFailedToLoad: (error) {
    print('Line native ad failed to load: ${error.message}');
    lineNativeAd.dispose();
  },
  onAdClicked: (adInfo) {
    print('Line native ad clicked');
  },
  onAdImpression: (adInfo) {
    print('Line native ad impression');
  },
);

2. 광고 로드

lineNativeAd.load();

3. 위젯 배치

if (_isAdLoaded)
  DaroLineNativeAdWidget(ad: lineNativeAd),

ad.load()를 호출하기 전에 DaroLineNativeAdWidget을 위젯 트리에 배치하면 FlutterError가 발생합니다. 반드시 onAdLoaded 콜백 후에 위젯을 배치하세요.

4. 리소스 해제

@override
void dispose() {
  lineNativeAd.dispose();
  super.dispose();
}

콜백 설명

콜백	설명
`onAdLoaded`	광고가 성공적으로 로드되었을 때 호출됩니다
`onAdFailedToLoad`	광고 로드에 실패했을 때 호출됩니다
`onAdClicked`	사용자가 광고를 클릭했을 때 호출됩니다
`onAdImpression`	광고 노출이 기록되었을 때 호출됩니다

스타일 커스터마이징

DaroLineNativeAdStyle을 사용하여 LINE 네이티브 광고의 색상을 커스터마이징할 수 있습니다. 스타일은 DaroLineNativeAd 객체 생성 시 전달합니다.

final lineNativeAd = DaroLineNativeAd(
  adUnitId: 'YOUR_AD_UNIT_ID',
  style: DaroLineNativeAdStyle(
    backgroundColor: Colors.white,
    contentColor: Colors.black,
    adMarkLabelTextColor: Colors.white,
    adMarkLabelBackgroundColor: Colors.grey,
  ),
  onAdLoaded: (adInfo) {
    print('Line native ad loaded');
    setState(() {
      _isAdLoaded = true;
    });
  },
  onAdFailedToLoad: (error) {
    print('Line native ad failed: ${error.message}');
    lineNativeAd.dispose();
  },
);

스타일 속성

속성	타입	설명
`backgroundColor`	`Color?`	광고 전체 배경색
`contentColor`	`Color?`	광고 콘텐츠 텍스트 색상
`adMarkLabelTextColor`	`Color?`	광고 마크 텍스트 색상
`adMarkLabelBackgroundColor`	`Color?`	광고 마크 배경색

에셋 수신 여부로 UI 분기하기

DaroNativeAd와 DaroLineNativeAd의 onNativeAdAssetLoaded 콜백으로 특정 에셋이 없는 경우에 대응할 수 있습니다.
콜백 인자는 Set<NativeAdAssetType>입니다.
아래 코드는 State 클래스에 추가하고, initState()의 super.initState() 이후 initializeNativeAd()를 호출하세요. 기존 로드·위젯 표시 흐름은 유지합니다.

값	의미
`title`	광고 제목
`body`	광고 본문
`icon`	광고 아이콘
`media`	광고 이미지 또는 동영상
`callToAction`	행동 유도 버튼 문구 ( 예: 설치하기 )
`advertiser`	광고주명 ( iOS )

Set<NativeAdAssetType>? assetTypes;
late DaroNativeAd nativeAd;

void initializeNativeAd() {
  nativeAd = DaroNativeAd(
    adUnitId: 'YOUR_AD_UNIT_ID',
    factoryId: 'YOUR_FACTORY_ID',
    onNativeAdAssetLoaded: (received) {
      if (!mounted) return;
      setState(() {
        assetTypes = received;
      });
    },
  );
}

// media 존재 여부에 따른 처리
bool? get hasMedia => assetTypes?.contains(NativeAdAssetType.media);

DARO 2.0 SDK 마이그레이션

다로 시작하기

SDK 통합하기

DARO 사용하기

FAQ

레거시 SDK

네이티브 광고

네이티브 광고 포맷 소개

네이티브 팩토리 등록

네이티브 광고 구현하기

1. Ad 객체 생성

2. 광고 로드

3. 위젯 배치

4. 리소스 해제

콜백 설명

AdChoices 표시 위치

LINE 네이티브 광고

LINE 네이티브 광고 구현하기

1. Ad 객체 생성

2. 광고 로드

3. 위젯 배치

4. 리소스 해제

콜백 설명

스타일 커스터마이징

스타일 속성

에셋 수신 여부로 UI 분기하기

​네이티브 광고 포맷 소개

​네이티브 팩토리 등록

​네이티브 광고 구현하기

​1. Ad 객체 생성

​2. 광고 로드

​3. 위젯 배치

​4. 리소스 해제

​콜백 설명

​AdChoices 표시 위치

​LINE 네이티브 광고

​LINE 네이티브 광고 구현하기

​1. Ad 객체 생성

​2. 광고 로드

​3. 위젯 배치

​4. 리소스 해제

​콜백 설명

​스타일 커스터마이징

​스타일 속성

​에셋 수신 여부로 UI 분기하기

네이티브 광고 포맷 소개

네이티브 팩토리 등록

네이티브 광고 구현하기

1. Ad 객체 생성

2. 광고 로드

3. 위젯 배치

4. 리소스 해제

콜백 설명

AdChoices 표시 위치

LINE 네이티브 광고

LINE 네이티브 광고 구현하기

1. Ad 객체 생성

2. 광고 로드

3. 위젯 배치

4. 리소스 해제

콜백 설명

스타일 커스터마이징

스타일 속성

에셋 수신 여부로 UI 분기하기