앱에서 수익을 낼 수 있는 방법을 다룬다!
마켓에 어떻게 배포하는지 배운다!
수익성을 낼 수 있는 방법
- 앱 마켓에 유료앱 베포 수익 모델
- 앱 내 배너 광고 수익 모델
- 앱 콘텐츠 판매 수익 모델 : 인 앱 결제
- 구독 수익 모델
- 앱 개발 용역 수익 모델
- 외부 브랜드 광고 수익 모델
우리는 <앱 내 배너 광고 수익 모델>을 공부해 본다!
구글 애드몹(AdMob)
expo 에 있는 광고 admob 모듈을 설치해준다
expo install expo-ads-admob
구글 애드몹에 가입하고, 앱에 광고를 달기 위해 앱을 등록한다
등록하면, 내가 올리고 싶은 앱의 ID 키가 발행된다. 그 키를 가지고 app.json 파일에 가서 adroid : { value } 에 가서 자신의 앱의 키 값을 넣는다.
"googleMobileAdsAppId": "키 값 넣기"여기서 tip!
추가한 앱의 ID가 보이지 않는다면, 구글 애드몹 화면의 가장 왼쪽의 메뉴들에서
앱 버튼을 누르고,
모든 앱 보기 버튼을 눌러준다!
그러면 이렇게 등록한 앱들의 ID가 나온다!
가로 배너 설정
애드몹을 설정하는 코드들!
우선 설치한 expo admob에서 필요한 코드들을 import 시킨다.
import { setTestDeviceIDAsync, AdMobBanner, //요거 사용함 AdMobInterstitial, PublisherBanner, AdMobRewarded } from 'expo-ads-admob';
그리고 카드들이 보이는 곳 바로 아래에 ad를 보이게 만들어준다.
이때, 3항 연산자로 Platform이 IOS인지, Adroid인지 확인하여 분리된 광고 를 보여지게 한다.
<View style={styles.cardContainer}> {/* 하나의 카드 영역을 나타내는 View */} { cateState.map((content,i)=>{ return (<Card content={content} key={i} navigation={navigation}/>) }) } {Platform.OS === 'ios' ? ( <AdMobBanner bannerSize="fullBanner" servePersonalizedAds={true} adUnitID="ca-app-pub-3233048070306066/8476925399" style={styles.banner} /> ) : ( <AdMobBanner bannerSize="fullBanner" servePersonalizedAds={true} adUnitID="ca-app-pub-3233048070306066/3033027021" style={styles.banner} /> )} </View>
배너의 사이즈와 위치 등은 개발자 마음대로 설정할 수 있다!
전면배너 설정
전면 배너는 AdMobInterstitial 를 활용한다.
전면 배너를 설정하기 위해서는 사전 설정이 조금 필요하다.
useEffect(()=>{ // Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정 //애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용! //안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다. Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("ca-app-pub-3233048070306066/4844161513") : AdMobInterstitial.setAdUnitID("ca-app-pub-3233048070306066/5948880695") 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}) }); },[])
- interstitialDidLoad : 광고가 로드될 때 사용할 로직, 이벤트 작성하는 함수
- interstitialDidFailToLoad : 광고 로드에 실패했을 때 어떻게 할 건지 이벤트를 작성하는 함수
- interstitialDidOpen : 광고가 오픈되고 나서 뭘 할건지 설정하는 함수
- interstitialDidClose : 광고가 끝난 후 어떻게 할 것인지 설정하는 함수
지금 하고 있는 앱에서는
AdMobInterstitial.addEventListener("interstitialDidClose", () => { } 이 코드를 사용할 건데,
avigation.navigate('DetailPage',{idx:content.idx}) 이렇게 광고 후에 DetailPage로 이동하게 한다.
그럼 이렇게 광고에 관련한 함수들은 작성했는데, 어떻게 광고가 보이게 할 것인가?
위에 코드들은 광고 자체에 관련한 함수였다. 이제는 광고를 보여주는 코드를 작성해야 한다.
const goDetail = async () =>{ await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true}); await AdMobInterstitial.showAdAsync(); }async () => { await } 함수로 세팅한 차례대로 함수가 실행될 수 있게 해준다.
실제 앱 배포해보기!
⠀
앱을 배포하려면 필요한 것들이 있다
1) 앱 로고
2) 스플래시 스크린(앱 시작 초기 화면)
3) 앱 마켓에 올릴 설명 이미지
4) Expo의 도움을 빌려 쉽게 준비 가능한 앱 버전 관리, 안드로이드, iOS 인증서 관리 등
스플래시 스크린
스플래시 스크린은
앱 폴더의 asset 파일 안에 있는 splash.png 파일을 설정하고 싶은 스플래시 사진으로 변경한다.
(꼭 png 파일로 저장하기!!)
내가 설정한 이미지 ↓
로고 설정하기
스플래시 스크린과 사진 만들기와 동일하게 이미지를 만드는데, icon.png 로 저장해 주면 된다.
내가 설정한 아이콘 이미지 ↓
icon이 적용된 모습
app.json 알기
"expo": {
"name": "sparta-myhoneytip-rim",
"slug": "sparta-myhoneytip-rim",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"web": {
"favicon": "./assets/favicon.png"
},
"ios": {
"supportsTablet": true,
"buildNumber": "1.0.0",
"bundleIdentifier": "com.myhoneytip.rim",
"config": {
"googleMobileAdsAppId": "ca-app-pub-3233048070306066~8707384905"
}
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.myhoneytip.rim",
"versionCode": 1,
"config": {
"googleMobileAdsAppId": "ca-app-pub-3233048070306066~2706278875"
}
}
}- name : 앱의 이름을 뜻한다.
- slug : 앱 설명
- version : 앱 버전 (재배포 시 버전을 꼭 변경해야 한다!)
- IOS와 Android 앱 서버 코드도 업데이트 하거나 변경되었을 시 꼭 버전 변경을 해주어야 한다. - icon : 앱의 아이콘 이미지 경로
- splash : 스플래시 이미지 경로
- bundleIdentifier : 이 앱에 대한 고유한 주소를 앱 마켓에 알려 주는 것이다. 이 부분 뒤에는 주소가 들어온다.
- 앱 마켓에 이름이 동일하더라도 고유한 주소 값이 다르기 때문에, 앱 마켓이 구분할 수 있게 된다.
⠀
⠀
⠀
최종 파일 생성하기
안드로이드 - 구글 플레이 스토어와 ios - 앱 스토어에 앱을 올리는 방법이 다르다는 것을 알게 되었다. 또한, 그 방법이 매우 복잡하다는 사실도 알게 되었다.. :(
라이센스도 구매해야 해서 나는 아직 연습하는 학생 신분이라 조금 더 앱 개발에 확신이 생기고, 정말 배포하고 싶은 앱을 개발했을 때 구매하여 배포하고 싶어 직접 배포하지는 않았다.
하.지.만.
내가 만든 앱을 블로글에 남겨보려 한다. (ㅎㅎ)
최종 프로젝트 작품
-
녹화 영상
-
취지&설명
- 이 앱은 일상생활에서 적용해 볼 수 있는 꿀팁들을 담고 있는 앱입니다!- 나만의 꿀팁들을 저장할 수 있고, 또 다른 사람들에게 공유할 수도 있습니다.
(앱개발 종합반에서 함께 만들었습니다. :-) )
-
기술 설명
- expo를 사용하여 앱개발에 도움을 받았습니다.
- 메인 페이지와 메인 페이지에서 보여지는 카드들의 내용을 보여지는 디테일한 페이지와 계속해서 보고 싶은 꿀팁들은 저장하여 꿀팁 페이지에서 볼 수 있게 하였습니다.
- firebase 서버를 연결하여 서버에서 사용자의 기기의 번호를 기준으로 각각 저장할 수 있게 하여 사용자들마다 자신들의 꿀팁들을 저장할 수 있습니다!
-
어려웠던 점 & 극복 방법
- 앱을 개발하면서 어려웠던 점은 매주 작성한 블로그 글에 자세히 적혀 있습니다!!
- 수업 내용과 함께 따라가면서 어려웠던 내용들과 그 내용들을 어떤 방식으로 풀어나갔는지 자세히 작성하였습니다. :-)
-
5주간 앱개발 수업 후기
앱 개발은 정말 코딩 지식이 많은 사람들만 개발할 수 있고, 나는 하기 어려운 개발이라고 생각했었는데, 알려주시는 방법대로 해보니 (물론 내용이 쉬운 건 아니었지만 ㅎㅎ) 생각보다 쉽게 앱을 만들어 볼 수 있었고, 다양한 기능들과 expo, yarn, firebase 등을 배우고 다뤄볼 수 있어서 소중한 경험이 된 것 같습니다.
정말 상세하게 하나하나 다 알려주시고, 코드들도 다 알려주셔서 실습해보는데 정말 도움이 많이 되었던 것 같습니다. 상세하게 알려주셔서 따라가고 이해하기 정말 도움이 많이 되었던 것 같았던 수업이었습니다 :)(안드로이드 스튜디오를 처음에 설치하라고 하셔서 깔았는데,, 언제 사용하는 거죠..?)
