Flutter 앱에서 구글 모바일 광고 구현하기: 시작부터 배너 광고까지

Flutter는 모바일 앱을 쉽게 개발할 수 있도록 도와주는 강력한 프레임워크로, Google의 모바일 광고 플랫폼인 AdMob을 통해 앱을 수익화할 수 있습니다. 이번 포스트에서는 Flutter 앱에 Google 모바일 광고(google_mobile_ads)를 적용하는 방법을 단계별로 안내하겠습니다.

참고. Add ads to your mobile Flutter app or game

Flutter에서 Google 모바일 광고(AdMob) 시작하기

1. AdMob 앱 ID 생성

먼저, AdMob 계정을 설정하고 Android 및 iOS용 앱 ID를 생성해야 합니다. AdMob 계정 설정 과정에서 결제 정보를 입력하고 계약을 체결하는 절차가 있으므로 시간이 조금 걸릴 수 있습니다. 앱 ID는 ca-app-pub-1234567890123456~1234567890 형태로 제공됩니다.

2. 플랫폼별 설정 (Android 및 iOS)

Android 설정

• AndroidManifest.xml 파일에 AdMob 앱 ID를 추가합니다.
• <meta-data> 태그를 사용하여 android:name 요소에 com.google.android.gms.ads.APPLICATION_ID 값을 지정하고, android:value에 앱 ID를 입력합니다.

iOS 설정

• iOS 앱의 Info.plist 파일에 AdMob 앱 ID를 추가합니다.
• <GADApplicationIdentifier> 태그에 앱 ID를 <string> 형태로 입력합니다.

3. google_mobile_ads 플러그인 추가

Flutter 프로젝트에 google_mobile_ads 플러그인을 추가하려면 터미널에서 아래 명령어를 실행합니다:

flutter pub add google_mobile_ads

4. 모바일 광고 SDK 초기화

광고를 로드하기 전에 SDK 초기화가 필요합니다. 앱 시작 시 아래와 같이 MobileAds.instance.initialize() 메서드를 호출합니다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize();
  runApp(MyApp());
}

5. 배너 광고 로드 및 구현

배너 광고를 로드하려면 BannerAd 인스턴스를 생성한 후 load() 메서드를 호출합니다.

void _loadAd() {
  final bannerAd = BannerAd(
    size: AdSize.banner,
    adUnitId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (ad) => setState(() => _bannerAd = ad as BannerAd),
      onAdFailedToLoad: (ad, error) {
        ad.dispose();
      },
    ),
  );
  bannerAd.load();
}

6. 배너 광고 표시

배너 광고를 표시하려면 AdWidget을 사용하여 광고를 렌더링합니다. SafeArea와 SizedBox로 감싸 광고가 안정적으로 표시되도록 설정할 수 있습니다.

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: SizedBox(
      width: _bannerAd.size.width.toDouble(),
      height: _bannerAd.size.height.toDouble(),
      child: AdWidget(ad: _bannerAd),
    ),
  );
}

7. 광고 구성 및 기타 설정

실제 광고를 사용하려면 AdMob에서 광고 단위를 생성하고 해당 ID를 BannerAd의 생성자에 추가합니다. AdMob에서는 배너 광고 외에도 전면 광고, 보상형 광고 등 다양한 광고 형식을 제공합니다.

Flutter 앱에서 Google 모바일 광고의 주요 포인트

• 앱 초기화 시 SDK를 먼저 로드: 앱이 시작할 때 MobileAds.instance.initialize()를 호출하여 AdMob SDK가 준비될 수 있도록 합니다.
• 광고 형식 다양화: 필요에 따라 전면 광고나 보상형 광고 등 다양한 형식을 추가해 수익성을 높일 수 있습니다.
• 안정적인 광고 구현을 위한 dispose() 호출: 광고가 더 이상 필요하지 않으면 반드시 dispose() 메서드를 호출하여 리소스를 해제합니다.

---

마무리 및 결론

Flutter 앱에서 Google 모바일 광고를 사용하는 것은 앱 수익화를 위한 효과적인 방법입니다. 초기 설정과 SDK 초기화, 광고 로드 및 표시 방법을 숙지하여 다양한 광고를 효과적으로 앱에 통합하고, 앱 사용자들에게 원활한 경험을 제공할 수 있습니다.

 

import 'dart:io';

import 'package:flutter/widgets.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class MyBannerAdWidget extends StatefulWidget {
  /// The requested size of the banner. Defaults to [AdSize.banner].
  final AdSize adSize;

  /// The AdMob ad unit to show.
  ///
  /// TODO: replace this test ad unit with your own ad unit
  final String adUnitId = Platform.isAndroid
      // Use this ad unit on Android...
      ? 'ca-app-pub-3940256099942544/6300978111'
      // ... or this one on iOS.
      : 'ca-app-pub-3940256099942544/2934735716';

  MyBannerAdWidget({
    super.key,
    this.adSize = AdSize.banner,
  });

  @override
  State<MyBannerAdWidget> createState() => _MyBannerAdWidgetState();
}

class _MyBannerAdWidgetState extends State<MyBannerAdWidget> {
  /// The banner ad to show. This is `null` until the ad is actually loaded.
  BannerAd? _bannerAd;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: widget.adSize.width.toDouble(),
        height: widget.adSize.height.toDouble(),
        child: _bannerAd == null
            // Nothing to render yet.
            ? SizedBox()
            // The actual ad.
            : AdWidget(ad: _bannerAd!),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _loadAd();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  /// Loads a banner ad.
  void _loadAd() {
    final bannerAd = BannerAd(
      size: widget.adSize,
      adUnitId: widget.adUnitId,
      request: const AdRequest(),
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          if (!mounted) {
            ad.dispose();
            return;
          }
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, error) {
          debugPrint('BannerAd failed to load: $error');
          ad.dispose();
        },
      ),
    );

    // Start loading.
    bannerAd.load();
  }
}