앱개발 종합반 5주차 정리 (구글 애드몹 설정, 배포하기)

애드몹(AdMob) 설정

• 앱 내에 구글 배너광고를 쉽게 붙일 수 있도록 도와줌
• 수익 현황 알려줌
• 일정 수익 이상이 되면 환전 가능

애드몹 광고 종류

1. 배너 : 앱 레이아웃 일부를 차지하는 광고
2. 전면 : 전체 페이지 광고 형식
3. 리워드 : 광고를 본 사용자에게 리워드 제공
4. 네이티브 고급 광고 : 맞춤설정 광고 (커스터마이징)

애드몹 설치하기

• Expo에서 구글 애드몹을 지원해준다.

expo install expo-ads-admob

• app.json 파일에 다음과 같이 추가한다.

"ios": {
      "supportsTablet": true,
      "buildNumber": "1.0.0",
      "bundleIdentifier": "com.myhoneytip.yewon",
      "config": {
        "googleMobileAdsAppId": ""
      }
  },
"android": {
      "package": "com.myhoneytip.yewon",
      "versionCode": 1,
      "config": {
        "googleMobileAdsAppId": ""
      }
  }

• googleMobileAdsAppId에 대해서는 자신이 애드몹에 추가한 앱 ID를 입력한다.
• 안드로이드, iOS 모두 앱을 추가해야함

가로 배너 생성

• 광고 단위 만들기 - 배너 선택

• 광고 단위 이름 입력

• MainPage.js에 다음 코드를 추가한다.

import {Platform} from 'react-native';
import {
  setTestDeviceIDAsync,
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded
} from 'expo-ads-admob';

<View>
{Platform.OS === 'ios' ? (
	<AdMobBanner
		bannerSize="fullBanner"
		servePersonalizedAds={true}
		adUnitID="iOS 광고 단위 아이디"
		style={styles.banner}
	/>
) : (
	<AdMobBanner
		bannerSize="fullBanner"
		servePersonalizedAds={true}
		adUnitID="Android 광고 단위 아이디"
		style={styles.banner}
	/>
)}
</View>

• bannerSize : 배너 크기 조정
• servePersonalizedAds : 사용자 맞춤 광고 제공 여부
• adUnitID : 광고 단위 아이디
• style을 이용하여 스타일 적용 가능

전면 배너 생성

• Card.js

import {
  setTestDeviceIDAsync,
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded
} from 'expo-ads-admob';

export default function Card({content,navigation}){

    useEffect(()=>{
        Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("광고 단위 ID") : AdMobInterstitial.setAdUnitID("광고 단위 ID")

        AdMobInterstitial.addEventListener("interstitialDidLoad", () =>
            console.log("interstitialDidLoad")
        );
        AdMobInterstitial.addEventListener("interstitialDidFailToLoad", () =>
            console.log("interstitialDidFailToLoad")
        );
        AdMobInterstitial.addEventListener("interstitialDidOpen", () =>
            console.log("interstitialDidOpen")
        );
        AdMobInterstitial.addEventListener("interstitialDidClose", () => {
              //광고가 끝나면 다음 코드 줄이 실행!
            console.log("interstitialDidClose")
            navigation.navigate('DetailPage',{idx:content.idx})
        });
    },[])
    const goDetail = async () =>{

      await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
      await AdMobInterstitial.showAdAsync();
    }

    return(
        <TouchableOpacity style={styles.card} onPress={()=>{goDetail()}}>
            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
            </View>
        </TouchableOpacity>
    )
}

---

앱을 배포하기 위해 필요한 것들

1. 앱 로고
2. 스플래시 스크린
3. 앱 마켓에 올릴 설명 이미지
4. 앱 버전 관리, 안드로이드, iOS 인증서 관리 등

스플래시 스크린

• assets 폴더 안에 있는 splash.png 이미지 수정

로고 준비

• assets 폴더 안에 있는 icon.png 이미지 수정

최종 앱 파일 생성

app.json

• version / ios - buildNumber / android - versionCode → 매번 다르게

expo build:android

• apk / app-bundle 중 apk 선택
• Generate new keystore 선택
• 구글 플레이스토어 콘솔 : https://developer.android.com/distribute/console?hl=ko

permission 코드

"permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]

 

---

내가 제작한 앱에 광고를 넣는 방법과 최종적으로 구글 플레이스토어에 배포하는 방법을 배웠다.

 

광고는 구글 애드몹(Admob) 서비스를 이용하여 앱 메인 화면 하단에 배너 광고를 넣고,

각 꿀팁을 클릭해서 상세 페이지로 넘어가기 전에 전면 광고가 나오도록 했다.

 

애드몹 신청 과정이 꽤나 길긴 했으나, 한번 승인받은 이후에

광고 단위를 새롭게 만드는 방법이나 그것을 앱에 적용하는 방법은 어렵지 않았다.

 

구글 플레이스토어에 배포하기 위해 apk 파일을 만들고 등록하는 과정도 직접 따라해봤기 때문에

추후에 나만의 앱을 제작한다면 이번 수업으로 배운 구글 광고 추가와 배포하는 방법을 적용하면 될 것 같다!

 

 

앱 안에서 나오는 배너 광고와 전면 광고의 모습이다