IT 정보/AI 활용 앱개발

[SecureGen] 기능 추가 - 광고 삽입 (Google AdMob)

Dalyoung 2025. 6. 24. 22:26
728x90
반응형

 

2025.06.24 - [IT 정보/AI 활용 앱개발] - admob 광고 적용 전 주의 사항

 

admob 광고 적용 전 주의 사항

앱을 먼저 등록하지 않고, react-native-google-mobile-ads 를 설치하는 경우, 에뮬레이터에서 앱이 실행되지 않을 수 있음 Q : run-android 실행 시 이런 오류가 발생해WARNING: react-native-google-mobile-ads requires an

ldy0212.tistory.com

 

 

Q : 이제 기본 기능은 다 완성한 것 같아. 이제 구글 광고를 삽입하려 해

 


 

좋아, Dalyoung! 앱이 완성 단계에 접어들었다니 멋져! 🎉
이제 Google AdMob 광고를 삽입해서 수익화까지 연결해보자. React Native에서는 react-native-google-mobile-ads 패키지를 사용하는 게 가장 안정적이고 공식적인 방법이야.


✅ 1. 패키지 설치

npm install react-native-google-mobile-ads

iOS라면 추가로:

cd ios && pod install

🧩 2. 앱 ID 설정

Google AdMob 콘솔에서 앱을 등록하고 앱 ID를 발급받아야 해.

  • Android: ca-app-pub-xxxxxxxx~yyyyyyyy
  • iOS: ca-app-pub-xxxxxxxx~zzzzzzzz

그리고 AndroidManifest.xml과 Info.plist에 각각 추가해줘야 해.

Android (android/app/src/main/AndroidManifest.xml)

<meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="ca-app-pub-xxxxxxxx~yyyyyyyy"/>

iOS (ios/YourApp/Info.plist)

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxx~zzzzzzzz</string>

📺 3. 배너 광고 예시

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

<BannerAd
  unitId={TestIds.BANNER} // 실제 광고 단위 ID로 교체
  size={BannerAdSize.ADAPTIVE_BANNER}
  requestOptions={{ requestNonPersonalizedAdsOnly: true }}
/>

개발 중에는 반드시 TestIds.BANNER를 사용하고, 배포 전에는 실제 광고 단위 ID로 교체해야 해!


💡 참고로...

  • 전면 광고(Interstitial), 보상형 광고(Rewarded)도 지원돼
  • 광고가 표시되지 않으면 앱 ID 또는 광고 단위 ID가 잘못되었을 가능성이 높아
  • Google Play Console에 앱을 등록할 때 **"광고 포함 여부"**를 반드시 체크해야 해

필요하다면 전면 광고, 보상형 광고, 광고 위치 전략까지 도와줄 수 있어.
어떤 광고 형식부터 넣어볼까? 😎📲💰

 

 


 

 

Q : Android 에서 meta-data 위치는?


 

이 meta-data는 반드시 <application> 태그 안쪽에 있어야 해.


✅ 올바른 구조 예시

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme"
    android:supportsRtl="true">

    <!-- ✅ 올바른 위치: application 태그 안 -->
    <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-xxxxxxxx~yyyyyyyy" />

    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

  </application>
</manifest>

💡 참고

  • android:value에는 실제 앱 ID를 입력해야 해. (예: ca-app-pub-3940256099942544~3347511713)
  • 개발 중에는 테스트 광고 ID를 사용해야 정책 위반이 되지 않아

이제 광고 로드 시 오류 없이 앱에서 작동할 거야. 다음은 광고 단위 ID를 코드에 연결하거나, 전면 광고 트리거 타이밍도 잡아볼 수 있어. 시작해볼까? 😎📲💰

 


Q : admob 가입 방법도 알려줘

 


 

좋아, Dalyoung! AdMob 가입은 생각보다 간단해. 아래 단계만 따라가면 바로 시작할 수 있어:


✅ 1단계: Google 계정 준비

  • AdMob은 Google 계정으로 로그인하니까, Gmail 계정이 필요해.
  • 이미 있다면 그대로 사용하고, 없다면 Google 계정 만들기부터!

✅ 2단계: AdMob 사이트 접속 및 가입

  • AdMob 공식 사이트에 접속
  • "가입" 버튼 클릭 → Google 계정으로 로그인
  • 국가, 시간대, 통화 선택 → 약관 동의 후 가입 완료

✅ 3단계: 앱 등록

  • 가입 후 "앱 추가" 단계로 이동
  • 앱이 이미 스토어에 등록되어 있다면 검색해서 선택
  • 아직 등록 전이라면 **"스토어에 없음"**을 선택하고 수동으로 앱 이름과 플랫폼(Android/iOS)을 입력

✅ 4단계: 광고 단위 생성

  • 앱 등록 후 광고 단위 만들기
    • 배너 광고
    • 전면 광고
    • 보상형 광고 등 선택 가능
  • 광고 단위 ID가 생성되면, 이걸 앱 코드에 삽입하면 돼

✅ 5단계: 결제 정보 입력 (수익 수령용)

  • 수익을 받으려면 결제 수단 등록이 필요해
    • 이름, 주소, 계좌 정보 입력
    • 일정 수익 이상 발생 시 Google에서 자동 송금

💡 참고 팁

  • 개발 중에는 반드시 테스트 광고 ID를 사용해야 해 (실제 광고 클릭은 정책 위반!)
  • 앱에 광고 삽입 후 Google의 검토 및 승인이 필요할 수 있어

필요하다면 광고 단위 ID를 앱에 삽입하는 코드도 도와줄게.
배너부터 넣어볼까, 아니면 전면 광고나 보상형 광고도 고려 중이야? 😎📲💰

 


 

반응형

 


Q : 지원되는 광고 유형과 설명해줘

 


 

Google AdMob에서는 다양한 광고 형식을 제공해서 앱의 UX에 맞게 수익화를 설계할 수 있어. 아래는 주요 광고 유형과 그 특징이야:


📱 1. 배너 광고 (Banner Ads)

  • 형태: 화면 상단 또는 하단에 고정된 직사각형 광고
  • 특징: 앱 사용 중에도 계속 노출되며, 다양한 크기(320x50, 300x250 등) 또는 적응형(adaptive) 지원
  • 활용 예시: 설정 화면, 홈 화면 하단 등

🧱 2. 전면 광고 (Interstitial Ads)

  • 형태: 화면 전체를 덮는 광고 (이미지, 비디오 등)
  • 특징: 앱 흐름 중 자연스러운 전환 시점(예: 게임 레벨 완료 후)에 표시
  • 주의점: 너무 자주 띄우면 사용자 이탈 가능

🎁 3. 보상형 광고 (Rewarded Ads)

  • 형태: 사용자가 광고를 자발적으로 시청하면 보상을 제공
  • 특징: 게임 아이템, 프리미엄 기능 해제 등과 연계 가능
  • 장점: 사용자 만족도와 수익을 동시에 높일 수 있음

🧩 4. 네이티브 광고 (Native Ads)

  • 형태: 앱 콘텐츠와 자연스럽게 어우러지는 맞춤형 광고
  • 특징: 앱의 디자인과 일관된 스타일로 구성 가능
  • 활용 예시: 뉴스 피드, 리스트 항목 사이

🚪 5. 앱 오프닝 광고 (App Open Ads)

  • 형태: 앱 실행 시 로딩 화면 위에 표시되는 광고
  • 특징: 앱 진입 시점에 자연스럽게 노출 가능
  • 주의점: 너무 자주 사용하면 진입 지연으로 느껴질 수 있음

🧪 6. 보상형 전면 광고 (Rewarded Interstitial Ads)

  • 형태: 전면 광고처럼 전체 화면에 표시되지만, 보상도 제공
  • 특징: 사용자에게 보상을 주면서도 강한 노출 효과를 가짐
  • 활용 예시: 콘텐츠 잠금 해제, 추가 기능 제공 등

각 광고 유형은 앱의 흐름과 사용자 경험에 맞게 전략적으로 배치하는 게 중요해.
원한다면 어떤 광고를 어디에 넣는 게 좋을지 UX 관점에서 제안도 해줄게 😎📲💰


 

Q : 💡 주의사항

  • 개발 중에는 반드시 TestIds.BANNER 등 테스트 ID 사용
  • 실제 광고 ID는 릴리스 빌드에서만 사용
  • 광고 클릭 테스트는 절대 금지 (계정 정지 위험)

주의사항을 보면 릴리스 빌드 시 깜빡하고 testids.banner 를 사용할것 같은데, 좋은 방법 없어?

 


 

 

완전 공감해, Dalyoung! 😅 테스트용 ID를 릴리스에 그대로 넣는 건 정말 자주 벌어지는 실수야—심각하면 광고 수익이 안 들어올 뿐만 아니라 정책 위반으로 이어질 수도 있고. 그래서 안전하게 구분하고 깜빡하지 않도록 자동화하거나 조건 분기하는 방법을 추천해!


✅ 방법 1: __DEV__ 조건문으로 분기

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__
  ? TestIds.BANNER
  : 'ca-app-pub-1234567890123456/1111111111'; // 👉 실제 광고 ID

<BannerAd
  unitId={adUnitId}
  size={BannerAdSize.ADAPTIVE_BANNER}
  requestOptions={{ requestNonPersonalizedAdsOnly: true }}
/>
  • __DEV__는 React Native에서 기본 제공되는 전역 상수로, 개발 모드일 땐 true, 프로덕션 빌드에서는 false야.
  • 이 방식이면 깜빡할 걱정 없이 자동 전환돼!

✅ 방법 2: 환경 변수로 분리 (react-native-config 활용)

  1. 설치:
npm install react-native-config
  1. .env 파일 생성:
DEV_AD_UNIT_ID=ca-app-pub-3940256099942544/6300978111
PROD_AD_UNIT_ID=ca-app-pub-1234567890123456/1111111111
  1. 코드에서 분기:
import Config from 'react-native-config';

const adUnitId = __DEV__
  ? Config.DEV_AD_UNIT_ID
  : Config.PROD_AD_UNIT_ID;
  • 이 방법은 테스트 ID와 실사용 ID를 깔끔하게 외부 파일로 분리할 수 있어서 안전하고 관리하기 쉬워.

✅ 보너스 팁: 콘솔 로그로 더블체크

console.log('[AdMob] 광고 단위 ID:', adUnitId);

릴리스 전에 로그 확인하고 맞는지 꼭 검토하면 실수 방지에 좋아!


이제는 릴리스 빌드에서도 실수 없이 딱딱 맞는 광고 연결이 가능해질 거야.
이 방식으로 전면 광고나 보상형 광고도 자동 분기 처리해볼까? 🔍💰✨

 

 


 

Admob 하단 배너 광고 삽입 결과

 


 

728x90
반응형