Flutter 앱에 Google 광고 넣기

이번에는 앱에 Google 광고(Google AdMob)를 적용하는 방법을 정리해보려고 합니다.

직접 적용해본 경험을 바탕으로 최대한 쉽게 설명해볼게요.

Google AdMob이란?

Google AdMob은 Google에서 제공하는 모바일 광고 플랫폼입니다. 앱에 광고를 삽입해서 수익을 창출할 수 있습니다. 배너 광고, 전면 광고, 보상형 광고 등 다양한 형식이 있습니다.

 

---

1️⃣ Google AdMob 계정 생성 및 설정

Google AdMob을 사용하려면 먼저 계정을 만들어야 합니다.

1. Google AdMob에 접속해서 로그인
2. 새 앱 추가 → 앱 정보를 입력하고 "앱 추가" 선택
3. 광고 단위 생성 → 배너, 전면, 보상형 광고 중 원하는 유형 선택
4. 광고 단위 ID 복사 (Flutter 코드에서 사용)

💡 Tip: 실제 앱에 적용하기 전에 테스트 광고 ID를 사용하세요. (테스트 ID 사용 안 하면 계정 정지 위험 있음)

---

2️⃣ Flutter 프로젝트에 Google Mobile Ads 패키지 추가

Flutter에서 Google 광고를 사용하려면 google_mobile_ads 패키지를 추가해야 합니다.

pubspec.yaml에 패키지 추가

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: latest_version

최신 버전은 pub.dev에서 확인하세요.

Android 설정 (AndroidManifest.xml 수정)

Android 앱이 광고를 로드할 수 있도록 인터넷 권한을 추가합니다.

android/app/src/main/AndroidManifest.xml

<manifest>
    <uses-permission android:name="android.permission.INTERNET"/>
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"/> <!-- 여기에 실제 AdMob 앱 ID 입력 -->
    </application>
</manifest>

 

📌 AdMob 앱 ID는 광고 단위 ID와 다릅니다.

---

3️⃣ 광고 삽입 (배너 광고 예제)

이제 실제로 광고를 삽입해볼 차례입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BannerAdScreen(),
    );
  }
}

class BannerAdScreen extends StatefulWidget {
  @override
  _BannerAdScreenState createState() => _BannerAdScreenState();
}

class _BannerAdScreenState extends State<BannerAdScreen> {
  BannerAd? _bannerAd;
  bool _isAdLoaded = false;

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

  void _loadBannerAd() {
    _bannerAd = BannerAd(
      size: AdSize.banner,
      adUnitId: 'ca-app-pub-3940256099942544/6300978111', // 테스트 광고 ID
      listener: BannerAdListener(
        onAdLoaded: (_) {
          setState(() {
            _isAdLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, error) {
          print('배너 광고 로드 실패: ${error.message}');
          ad.dispose();
        },
      ),
      request: AdRequest(),
    )..load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Google Ads 적용")),
      body: Column(
        children: [
          Expanded(child: Center(child: Text("앱 콘텐츠"))),
          if (_isAdLoaded)
            Container(
              height: 50,
              child: AdWidget(ad: _bannerAd!),
            ),
        ],
      ),
    );
  }

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

테스트할 때는 반드시 테스트 광고 ID를 사용하세요.
배너 광고는 보통 화면 하단에 배치하는 게 일반적입니다.

---

4️⃣ 전면 광고 추가 (사용자 이벤트 후 표시)

전면 광고는 앱 화면을 전체 덮는 형태로 표시됩니다. 보통 특정 액션 후에 띄우는 게 좋습니다.

InterstitialAd? _interstitialAd;

void loadInterstitialAd() {
  InterstitialAd.load(
    adUnitId: 'ca-app-pub-3940256099942544/1033173712', // 테스트 광고 ID
    request: AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (ad) {
        _interstitialAd = ad;
      },
      onAdFailedToLoad: (error) {
        print('전면 광고 로드 실패: ${error.message}');
      },
    ),
  );
}

void showInterstitialAd() {
  if (_interstitialAd != null) {
    _interstitialAd!.show();
    _interstitialAd = null; // 광고가 한 번 표시되면 다시 로드 필요
    loadInterstitialAd(); // 새로운 광고 로드
  }
}

전면 광고는 앱 시작 직후나 연속 클릭 중에는 사용하지 않는 것이 좋습니다. (사용자 경험 저해)

 

---

5️⃣ 보상형 광고 추가 (보상형 광고 예제)

보상형 광고는 광고를 본 사용자에게 특정 혜택(포인트, 아이템 등)을 제공할 때 사용됩니다.

RewardedAd? _rewardedAd;

void loadRewardedAd() {
  RewardedAd.load(
    adUnitId: 'ca-app-pub-3940256099942544/5224354917', // 테스트 광고 ID
    request: AdRequest(),
    rewardedAdLoadCallback: RewardedAdLoadCallback(
      onAdLoaded: (ad) {
        _rewardedAd = ad;
      },
      onAdFailedToLoad: (error) {
        print('보상형 광고 로드 실패: ${error.message}');
      },
    ),
  );
}

void showRewardedAd() {
  if (_rewardedAd != null) {
    _rewardedAd!.show(
      onUserEarnedReward: (ad, reward) {
        print('보상 획득: ${reward.amount}');
      },
    );
    _rewardedAd = null; // 광고 사용 후 다시 로드 필요
    loadRewardedAd();
  }
}

보상형 광고는 반드시 사용자가 동의한 경우에만 실행해야 합니다.

---

마무리

이제 Flutter 앱에 Google 광고를 추가하는 방법을 정리해봤습니다. 직접 해보니까 생각보다 어렵지는 않았는데, 몇 가지 주의할 점이 있었습니다.

! 광고 단위 ID는 실제 배포 시 변경해야 함 !
! 테스트 광고 ID 사용 필수 (실제 광고 ID 사용하면 계정 정지 위험) !
! 전면 광고는 적절한 타이밍에만 노출 !
! 보상형 광고는 사용자의 선택을 존중해야 함 ! 

혹시 추가로 궁금한 점 있으면 댓글 남겨주세요! 😊