[RN] React Native 환경에서 구글 애드몹(Google Admob) 이해하고 활용하기 -1 : 가입에서 간단 연결까지

해당 글에서는 React Native 환경에서 구글 애드몹을 연동하여 광고를 출력하는 방법에 대해 알아봅니다.

1) 구글 애드몹(Google Admob)

---

💡 구글 애드몹(Google Admob)

- 모바일 앱 수익화를 위한 구글의 광고 플랫폼입니다. 개발자들이 자신의 앱에 광고를 게재하고 수익을 창출할 수 있도록 도와주는 서비스입니다.

특징	설명
다양한 광고 형식	배너, 전면, 리워드 광고 등 여러 형태 지원
높은 성과	우수한 광고 채우기율(Fill Rate)과 수익률(eCPM) 제공
분석 도구	상세한 분석 도구와 리포트를 통한 성과 모니터링
글로벌 네트워크	전 세계적인 광고주 네트워크 보유
간편한 사용	손쉬운 구현과 관리 가능

 

1. 광고 유형

---

https://developers.google.com/admob/ios/quick-start?hl=ko#select_an_ad_format

 

광고 유형	설명
배너	앱 레이아웃의 일부를 차지하는 직사각형 광고가 게재됩니다. 이 광고는 일정 기간 후 자동으로 새로고침됩니다. 즉 사용자가 앱에서 같은 화면에 머물러 있어도 정기적으로 새 광고가 게재됩니다. 또한 가장 구현하기 간단한 광고 형식이기도 합니다.
전면	앱에서 페이지 전체를 채우는 광고입니다. 게임 앱의 레벨 완료 후와 같이 앱 인터페이스에서 자연스럽게 멈추거나 전환하는 시점에 전면 광고를 게재하세요.
보상형 전면 광고(베타)	자연스러운 앱 전환 시 자동으로 게재되는 광고를 통해 코인이나 추가 생명 아이템 등의 리워드를 제공할 수 있는 새로운 보상형 광고 형식입니다. 보상형 광고와 달리 사용자는 수신 동의하지 않고도 보상형 전면 광고를 볼 수 있습니다. 보상형 전면 광고에는 보상형 광고에 표시되는 수신 동의 메시지 대신 리워드를 공지하고 사용자가 원할 경우 수신 해제할 수 있는 시작 화면이 필요합니다.
리워드	사용자가 게임을 하거나 설문조사에 참여하거나 동영상을 시청하면 코인, 추가 생명, 포인트와 같은 인앱 리워드를 제공합니다. 광고 단위별로 보상을 다르게 설정할 수 있고 사용자가 받게 될 보상 가치와 항목을 지정할 수 있습니다.
네이티브 고급	광고 제목, 클릭 유도 문구와 같은 애셋이 앱에 표시되는 방식을 맞춤설정할 수 있는 광고입니다. 광고에 직접 스타일을 지정하여 사용자 환경을 더욱 풍부하게 만드는 자연스럽고 방해가 되지 않는 광고를 표시할 수 있습니다.
앱 열기	사용자가 앱을 열거나 앱으로 다시 전환할 때 표시되는 광고 형식입니다. 광고가 로드 화면을 오버레이합니다.

시작하기  |  iOS  |  Google for Developers

 
 

2) 구글 애드몹 가입

---

 

1. 공식사이트에 접속하여 ‘가입’ 버튼을 누르고 가입을 수행합니다.

---

https://admob.google.com/intl/ko/home/get-started/

Google AdMob 가입 방법

 
 

2. 해당 정보를 선택하고 ‘AdMob 시작하기’ 버튼을 누릅니다

---

 
 

3. 본인 인증을 위한 인증코드를 전송합니다.

---

 
 

4. ‘계속해서 AdMob 사용’ 버튼을 누릅니다

---

 
 

5. 최종 가입이 완료되고, ‘문제 해결’ 버튼을 누릅니다.

---

 
 

6. ‘결제 계정 추가’ 버튼을 누릅니다.

---

 
 

7. 지급정보를 입력하면 최종 완료됩니다.

---

💡 지급정보를 입력하면 최종 완료됩니다.

- Google Adsense 승인받았을 때 당시에 사용했던 주소 정보 형태로 구성하였습니다.

고객 정보	분류	예시
도/시	도/시를 선택합니다	경기도
시/군/구	시/군/구를 선택합니다	성남시
주소	주소를 선택합니다	분당구
주소 입력란 1	도로명 주소를 입력합니다.	서현로 588
주소 입력란 2	상세 주소를 입력합니다.	xxxx동 xxxxx호
이름	이름을 입력합니다	홍길동
우편번호	주소에 따르는 우편번호를 입력합니다.
전화번호	전화번호를 입력합니다

 
 

8. 하루 정도의 시간이 지나면 아래와 같이 계정에 대한 승인을 받을 수 있었습니다.

---

 
 

3) 구글 애드몹 플랫폼 별 앱 생성

---

💡 구글 애드몹 플랫폼 별 앱 생성

- 계정 승인이 되지 않아도 테스트로 해볼수 있기에 플랫폼을 선택하고 앱에 대한 코드를 받아봅니다.

 

1. 구글 애드몹 내에 앱 > ‘앱 추가’를 선택합니다

---

 
 

2. 새 앱 설정 화면에서 플랫폼을 선택하고 앱 스토어 등록여부를 선택하고 ‘계속’ 버튼을 누릅니다.

---

 
 

3. 앱 이름을 입력하고 ‘앱 추가’ 버튼을 누릅니다

---

 
 
 

4. 아래와 같이 추가됨이 확인되고 ‘완료’ 버튼을 누릅니다

---

 
 

5. 앱 환경이 생성되고 앱 개요 > ‘광고 단위 추가’ 버튼을 누릅니다

---

 
 

6. ‘배너’를 선택하고 간단히 테스트 해보겠습니다

---

 
 

7. 광고 단위 이름을 입력하고 ‘광고 단위 만들기’ 버튼을 누릅니다

---

 
 
 

8. 앱 ID가 발급이 되었으며, ‘완료’ 버튼을 누릅니다. 그리고 1번의 내용을 통해서 앱을 출력할 수 있기에 복사를 해두어서 보관해 두겠습니다.

---

 
 

9. 아래와 같이 추가됨을 확인하였습니다

---

 
 

4) 설정 방법

---

💡 설정 방법

- 아래와 같은 환경에서 이를 적용하였습니다. 해당 부분에서 중요한 사항은 Xcode는 16 이상 버전을 사용하고 iOS 18 버전 이상을 사용해야 한다는 점입니다.

분류	라이브러리	버전
툴	Xcode	Version 16.0 (16A242d)
라이브러리	typescript	5.8.2
라이브러리	java	17
라이브러리	node	22.14.0
라이브러리	react-native	0.76.7
라이브러리	react	18.3.1

 

1. 라이브러리 설치

---

 

$ npm install react-native-google-mobile-ads
# 또는
$ yarn add react-native-google-mobile-ads

react-native-google-mobile-ads

 

React Native Google Mobile Ads

 

2. [공통] app.json

---

💡 [공통] app.json

- 각 앱 ID는 플랫폼별로 고유하며, AdMob 콘솔의 앱 설정에서 확인할 수 있습니다. 테스트 시에는 테스트용 ID를 사용하고, 실제 배포 시에는 반드시 실제 발급받은 ID를 사용해야 합니다

설정	설명	예시
android_app_id	안드로이드 앱의 AdMob 앱 ID로, Google AdMob 콘솔에서 발급받아 사용합니다	ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy
ios_app_id	iOS 앱의 AdMob 앱 ID로, Google AdMob 콘솔에서 발급받아 사용합니다	ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy
user_tracking_usage_description	사용자 추적 사용에 대한 설명을 정의하는 설정입니다
sk_ad_network_items	앱 추적 투명성을 위해서 설정하며iOS 광고 네트워크 식별자 목록을 정의하는 설정입니다

💡 아래와 같이 설정과정이 나와 있습니다.

React Native Google Mobile Ads

{
  "name": "ThreeHundredAppTemplate",
  "displayName": "ThreeHundredAppTemplate",
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  },
  "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you.",
  "sk_ad_network_items": [
    "cstr6suwn9.skadnetwork",
    "4fzdc2evr5.skadnetwork",
    "4pfyvq9l8r.skadnetwork",
    "2fnua5tdw4.skadnetwork",
    "ydx93a7ass.skadnetwork",
    "5a6flpkh64.skadnetwork",
    "p78axxw29g.skadnetwork",
    "v72qych5uu.skadnetwork",
    "ludvb6z3bs.skadnetwork",
    "cp8zw746q7.skadnetwork",
    "c6k4g5qg8m.skadnetwork",
    "s39g8k73mm.skadnetwork",
    "3qy4746246.skadnetwork",
    "3sh42y64q3.skadnetwork",
    "f38h382jlk.skadnetwork",
    "hs6bdukanm.skadnetwork",
    "prcb7njmu6.skadnetwork",
    "v4nxqhlyqp.skadnetwork",
    "wzmmz9fp6w.skadnetwork",
    "yclnxrl5pm.skadnetwork",
    "t38b2kh725.skadnetwork",
    "7ug5zh24hu.skadnetwork",
    "9rd848q2bz.skadnetwork",
    "y5ghdn5j9k.skadnetwork",
    "n6fk4nfna4.skadnetwork",
    "v9wttpbfk9.skadnetwork",
    "n38lu8286q.skadnetwork",
    "47vhws6wlr.skadnetwork",
    "kbd757ywx3.skadnetwork",
    "9t245vhmpl.skadnetwork",
    "a2p9lx4jpn.skadnetwork",
    "22mmun2rn5.skadnetwork",
    "4468km3ulz.skadnetwork",
    "2u9pt9hc89.skadnetwork",
    "8s468mfl3y.skadnetwork",
    "av6w8kgt66.skadnetwork",
    "klf5c3l5u5.skadnetwork",
    "ppxm28t8ap.skadnetwork",
    "424m5254lk.skadnetwork",
    "ecpz2srf59.skadnetwork",
    "uw77j35x4d.skadnetwork",
    "mlmmfzh3r3.skadnetwork",
    "578prtvx9j.skadnetwork",
    "4dzt52r2t5.skadnetwork",
    "gta9lk7p23.skadnetwork",
    "e5fvkxwrpn.skadnetwork",
    "8c4e2ghe7u.skadnetwork",
    "zq492l623r.skadnetwork",
    "3rd42ekr43.skadnetwork",
    "3qcr597p9d.skadnetwork"
  ]
}

 
 

3. [iOS] Info.plist

---

💡 [iOS] Info.plist

- 다음과 같은 내용이 필수 설정이 되어야 한다고 합니다.
- GADApplicationIdentifier: AdMob 앱 ID를 설정하는 키입니다
- SKAdNetworkItems: iOS 14+ 버전에서 광고 추적을 위한 광고 네트워크 식별자 목록입니다
- NSUserTrackingUsageDescription: 사용자 추적 권한 요청 시 표시될 메시지를 설정합니다

 

💡 아래의 글을 참고하였습니다.

시작하기  |  iOS  |  Google for Developers

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-1556459651102810~7856317011</string>
<key>SKAdNetworkItems</key>
<array>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4fzdc2evr5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>2fnua5tdw4.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ydx93a7ass.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>p78axxw29g.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>v72qych5uu.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ludvb6z3bs.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cp8zw746q7.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3sh42y64q3.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>c6k4g5qg8m.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>s39g8k73mm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3qy4746246.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>hs6bdukanm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>mlmmfzh3r3.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>v4nxqhlyqp.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>wzmmz9fp6w.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>su67r6k2v3.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>yclnxrl5pm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>7ug5zh24hu.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>gta9lk7p23.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>vutu7akeur.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>y5ghdn5j9k.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>v9wttpbfk9.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>n38lu8286q.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>47vhws6wlr.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>kbd757ywx3.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>9t245vhmpl.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>a2p9lx4jpn.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>22mmun2rn5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4468km3ulz.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>2u9pt9hc89.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>8s468mfl3y.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ppxm28t8ap.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>uw77j35x4d.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>pwa73g5rt2.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>578prtvx9j.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4dzt52r2t5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>tl55sbb4fm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>e5fvkxwrpn.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>8c4e2ghe7u.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3rd42ekr43.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3qcr597p9d.skadnetwork</string>
    </dict>
</array>

 
 

5) 소스코드 적용 및 결과 화면

---

 

1. 배너 화면 구성

---

💡 배너 화면 구성

- 배너 화면의 경우는 기존 애플리케이션에 통합할 수 있는 부분 광고입니다.
- Interstitial 및 Rewarded 광고와 달리 배너는 애플리케이션의 제한된 영역만 차지하고 해당 영역 내에 광고를 표시합니다.
- 이를 통해 방해가 되는 작업 없이 광고를 통합할 수 있습니다.
- React Native 앱에서 Google AdMob 배너 광고를 구현하는 컴포넌트입니다

- 개발 환경(DEV)에서는 테스트 ID를, 프로덕션 환경에서는 실제 AdMob ID를 사용합니다. iOS와 Android 플랫폼에 따라 .env 환경파일에서 가져오도록 구성하였습니다.
- iOS의 경우는 iOS의 경우 foreground로 돌아올 때 배너를 다시 로드하는 로직이 포함되어 있습니다.

import React, { useRef } from 'react';
import { Dimensions, Platform, StyleSheet, View } from 'react-native';
import { BannerAd, BannerAdSize, TestIds, useForeground } from 'react-native-google-mobile-ads';
import { GOOGLE_ADMOV_ANDROID_BANNER, GOOGLE_ADMOV_IOS_BANNER } from '@env';
type AdUnitIdType = string;

const AD_UNIT_ID: AdUnitIdType = Platform.select({
	ios: __DEV__ ? TestIds.BANNER : GOOGLE_ADMOV_IOS_BANNER!,
	android: __DEV__ ? TestIds.BANNER : GOOGLE_ADMOV_ANDROID_BANNER!,
}) as AdUnitIdType;

interface AdmobBannerAdProps {
	paramMarginTop?: number;
	paramMarginBottom?: number;
}
/**
 * [공통] 배너 광고
 * @returns
 */
const AdmobBannerAd: React.FC<AdmobBannerAdProps> = ({ paramMarginTop = 0, paramMarginBottom = 20 }) => {
	const bannerRef = useRef<BannerAd | null>(null);

	const screenWidth = Dimensions.get('window').width;

	/**
	 * 플랫폼 iOS에 대해서만 이를 적용합니다.
	 * - 앱이 "suspended state"(백그라운드 상태)에 있을 때 WKWebView가 종료될 수 있음
	 * - 이로 인해 앱이 포그라운드로 돌아올 때 배너 광고가 비어있을 수 있음
	 * - 이 문제를 해결하기 위해 앱이 포그라운드로 돌아올 때 수동으로 새로운 광고를 요청하는 것이 권장됨
	 */
	useForeground(() => {
		if (Platform.OS === 'ios') {
			bannerRef.current?.load();
		}
	});

	// 태블릿 기준 너비 600 이상
	const getBannerSize = () => {
		if (screenWidth >= 600) return BannerAdSize.FULL_BANNER; // 468x60
		if (screenWidth >= 480) return BannerAdSize.LARGE_BANNER; // 320x100
		return BannerAdSize.BANNER; // 320x50
	};

	return (
		<View style={[styles.container, { marginTop: paramMarginTop, marginBottom: paramMarginBottom }]}>
			<BannerAd
				ref={bannerRef}
				unitId={AD_UNIT_ID}
				size={getBannerSize()} // 환경에 따라 유동적인 변경
			/>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		alignItems: 'center',
	},
});

export default AdmobBannerAd;

 

React Native Google Mobile Ads

 

2. 화면에 적용

---

 💡 화면에 적용

- ScrollView 아래에 AdmobBanner를 호출하여 노출이 되도록 적용하였습니다.

import React from "react";
import { Paths } from "@/navigation/conf/Paths";
import { useNavigation } from "@react-navigation/native";
import { useEffect } from "react";
import { Text, View, ScrollView, StyleSheet, TouchableOpacity, Linking } from "react-native";
import AdmobBanner from "./common/AdmobBanner";
// import AdmobBanner from "./common/AdmobBanner";

const Home = () => {
    const navigation = useNavigation();
    useEffect(() => {
        console.log("Home");
    }, []);

    const movePageHandler = (() => {
        return {
            notification: () => {
                //@ts-ignore
                navigation.navigate(Paths.FN_NOTIFICATION);
            },
        };
    })();

    return (
        <ScrollView style={styles.container}>
            <AdmobBanner />
            <View style={styles.section}>
                <Text style={styles.title}>템플릿</Text>
                <Text style={styles.description}>
                    해당 템플릿에서는 다양한 기능을 담고 있습니다.
                </Text>
            </View>

            <View style={styles.section}>
                <TouchableOpacity onPress={movePageHandler.notification}>
                    <Text style={styles.title}>알람 기능 : NotificationScreen.tsx</Text>
                    <Text style={styles.description}>
                        1. 즉시 알림: 사용자가 버튼을 누르면 바로 알림이 전송됩니다. {"\\n"}
                        2. 매일 알림: 사용자가 설정한 시간에 매일 알림을 받을 수 있습니다. {"\\n"}
                        3. 주간 알림: 사용자가 선택한 요일과 시간에 매주 알림을 받을 수 있습니다. {"\\n"}
                    </Text>
                </TouchableOpacity>
            </View>
            <View style={styles.section}></View>
            <View style={styles.section}></View>
        </ScrollView>
    );
};
export default Home;

/**
 * 스타일을 관리합니다.
 */
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#ffffff",
        padding: 20,
    },
    section: {
        marginBottom: 30,
        backgroundColor: "#f8f9fa",
        padding: 15,
        borderRadius: 10,
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
    },
    title: {
        fontSize: 22,
        fontWeight: "bold",
        color: "#1a73e8",
        marginBottom: 15,
    },
    description: {
        fontSize: 16,
        lineHeight: 24,
        color: "#333",
        marginBottom: 10,
    },
    purchaseButton: {
        backgroundColor: "#1a73e8",
        padding: 15,
        borderRadius: 8,
        alignItems: "center",
        marginTop: 10,
    },
    buttonText: {
        color: "#ffffff",
        fontSize: 16,
        fontWeight: "bold",
    },
});

 
 

3. 결과 확인

---

💡 결과 확인

- 아래와 같이 고정된 상태의 배너가 출력이 됨을 확인하였습니다.