이 페이지는 Cloud Translation API를 통해 번역되었습니다.

배너

배너 광고는 앱 레이아웃 안에서 기기 화면의 상단이나 하단에 게재됩니다. 사용자가 앱과 상호작용하는 동안 화면에 머무르며 일정 시간이 지나면 자동으로 새로고침할 수 있습니다.

이 가이드에서는 AdMob의 배너 광고를 Flutter 앱에 통합하는 방법을 설명합니다. 코드 스니펫과 안내 외에도 배너 크기 조정에 관한 정보도 포함되어 있습니다.

항상 테스트 광고로 테스트

앱을 제작하고 테스트할 때는 운영 중인 실제 광고 대신 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

테스트 광고를 로드하는 가장 쉬운 방법은 배너 광고 전용 테스트 광고 단위 ID를 사용하는 것입니다.

Android

ca-app-pub-3940256099942544/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

테스트 광고 단위는 모든 요청에 대해 테스트 광고를 반환하도록 구성되며, 코딩, 테스트, 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 앱을 게시하기 전에 이 ID를 자체 광고 단위 ID로 바꿔야 합니다.

광고 로드

다음 예에서는 배너 광고를 인스턴스화합니다.

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

배너 크기

아래 표에는 표준 배너 크기가 나와 있습니다.

크기(dp(WxH))	설명	AdSize 상수
320x50	표준 배너	`banner`
320x100	대형 배너	`largeBanner`
320x250까지 확장 가능	중형 직사각형	`mediumRectangle`
468 x 60	원본 크기 배너	`fullBanner`
728x90	리더보드	`leaderboard`
제공된 너비x조정 가능한 높이	적응형 배너	N/A

맞춤 배너 크기를 지정하려면 원하는 AdSize를 설정하세요.

final AdSize adSize = AdSize(300, 50);

배너 광고 이벤트

BannerAdListener를 사용하면 광고 로드와 같은 수명 주기 이벤트를 수신할 수 있습니다. 이 예에서는 각 메서드를 구현하고 콘솔에 메시지를 기록합니다.

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

배너 광고 표시

BannerAd를 위젯으로 표시하려면 load()를 호출한 후 지원되는 광고로 AdWidget를 인스턴스화해야 합니다. load()를 호출하기 전에 위젯을 만들 수 있지만 위젯 트리에 추가하기 전에 load()를 호출해야 합니다.

AdWidget는 Flutter의 위젯 클래스에서 상속되며 다른 위젯처럼 사용할 수 있습니다. iOS에서는 지정된 너비와 높이로 위젯에 위젯을 배치해야 합니다. 그렇지 않으면 광고가 게재되지 않을 수 있습니다. BannerAd는 광고와 일치하는 크기의 컨테이너에 배치할 수 있습니다.

...
if (_bannerAd != null) {
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  )
}
...

더 이상 액세스할 필요가 없는 광고는 폐기해야 합니다. dispose()를 호출하는 시점의 권장사항은 위젯 트리에서 또는 BannerAdListener.onAdFailedToLoad() 콜백에서 AdWidget를 삭제한 후입니다.

이제 완료됐습니다. 이제 앱에서 배너 광고를 게재할 수 있습니다.

Android 9 이하의 스크롤 제한

Google에서는 Android 9 이하를 실행하는 일부 오래되거나 덜 강력한 기기에서 스크롤 보기 내에 인라인 배너 광고를 표시할 때 최적의 성능을 발휘하지 못할 수 있음을 알고 있습니다. 이러한 유형의 배너는 Android 10 이상에서만 사용하는 것이 좋습니다. 앵커 배너와 같은 고정 위치 배너는 영향을 받지 않으며 모든 Android API 수준에서 최적의 성능으로 사용할 수 있습니다.

GitHub의 전체 예

배너