수익형 앱만들기
<앱에서 수익을 낼 수 있는 방법>
- 앱 마켓에 유료앱 배포 수익 모델
- 앱 내 배너 광고 수익 모델
- 앱 콘텐츠 판매 수익 모델: 인 앱 결제
- 구독 수익 모델
- 앱 개발 용역 수익 모델
- 외부 브랜드 광고 수익 모델
앱 개발 초보자가 가장 쉽게 수익 구조를 앱에 연결 할 수 있는 방법은
<앱 내 배너 광고 수익 모델>
- 배너 클릭
- 배너 광고 시청
- 배너 광고 사용자 참여
3가지 방법으로 수익이 발생 할 수 있다 .
구글광고, 애드몹 적용
<애드몹 (AdMob)>
앱 내에 구글 배너광고를 쉽게 붙여줄 수 있게 도와주고
수익 현황을 관리 할 수 있다
구글(Google)에서 제공하는 서비스의 일환이며 애드몹에 가입하고 사용 방법에 따라
앱에 설정하는 절차는 연동할 수 있다
애드몹에서 이용 할 수 있는 광고는 총 4가지로
배너,전면,리워드,네이티브 고급 광고 가 있다
<애드몹 가입>
애드몹에 가입 하기 위해 파이어베이스 또는 구글 계정이 필요하다 가입 신청을 하고 3일 정도 후 가입 승인이 됨
<애드몹 앱 생성>
광고를 붙이려면 애드몹에 개발하고 있는 앱을 알려줘야하는데
개발중 이라면 아직 배포하지는 않았기 때문에
등록 하려는 앱을 앱스토어에 게시 하였냐는 질문이 나오면 아니오를 눌러주면 된다 (배포 후 정보 변경 가능 !)
<개발중인 앱에 애드몹 사용 준비하기>
2022년 상반기 부터, expo에서 더이상 디폴트 기능으로써 google admob을 사용할 수 없게 되었다고 한다
expo에 새로 생긴 배포 방식인 EAS 기능을 이용해 구글 애드몹을 설정할 수 있다 expo build -> eas build
- eas 도구 설치
npm install -g eas-cli- 네이티브 (순수 ios,android)설정을 수정할 수 있는 기능 설치
npx expo install expo-build-properties- eas로그인 아이디는 expo계정 아이디와 동일
eas login- 앱을 eas 빌드 방식에 맞춰서 진행 하겠다는 명령어 실행
Window 노트북 사용자는 반드시 선택창에서 android 로 선택
eas build:configure아래와 같은 문항이 나온다면 y!!!!!!
Would you like to automatically create an EAS project for @glenncy/tip-example? › (Y/n)- app.json에 다음 plgin 사용 코드 삽입
( "web"밑으로 )
"plugins": [
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
]
]<테스트 기기 설정 및 애드몹 광고 설정>
본격적으로 코드단 들어가기전 자신의 기기를 테스트 기기로 설정 해야하는데 설정 방법은 애드몹에서도 자세히 알려주고 구글링으로 쉽게 찾을 수 있다.
구글 애드몹에, 코드 단 설정시에 테스트로 사용할 기기가 테스트로 등록되어 있지 않으면,
구글 애드몹 자체에서 밴을 먹을 수 있는 불상사가 일어납니다.
- RN 용 구글 애드몹 라이브러리 설치
yarn add react-native-google-mobile-ads- 애드몹 가입 및 프로젝트 생성 단계에서 확인이 가능했던, ios, android 앱 아이디를 app.json에 설정
(위에서 삽입했던 plgin 사용 코드 밑으로 삽입)
// <project-root>/app.json
{
"expo": {
// ...
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
}
}<꿀팁 앱이 실행되면, 구글 애드몹 사용할 준비하기 코드 작성>
import React, { useEffect } from 'react';
//이제 모든 페이지 컴포넌트들이 끼워져있는 책갈피를 메인에 둘예정이므로
//컴포넌트를 더이상 불러오지 않아도 됩니다.
// import MainPage from './pages/MainPage';
// import DetailPage from './pages/DetailPage';
import { StatusBar } from 'expo-status-bar';
//메인에 세팅할 네비게이션 도구들을 가져옵니다.
import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator'
import mobileAds from 'react-native-google-mobile-ads';
export default function App() {
console.disableYellowBox = true;
useEffect(()=>{
//구글 애드몹은 실제 빌드된 앱에서만 가능하기 때문에! 조건부 처리!
if(!__DEV__){
mobileAds()
.initialize()
.then(adapterStatuses => {
// Initialization complete!
});
}
},[])
return (
<NavigationContainer>
<StatusBar style="black" />
<StackNavigator/>
</NavigationContainer>);
}<앱 하단 가로 배너 광고 생성 및 적용>
적용 순서
- 애드몹 가로 배너 광고 단위 설정
- 앱 상에 적용
적용 할 앱을 선택한 후 광고 단위 추가 버튼을 클릭
배너 생성시 마다 어디에 쓸 배너 광고인지 구분 하는 것이 배너별 추적 분석이 용이 함.
배너 생성 후 나오는 코드값은 앱 상에서 배너를 적용할 때 필요합니다
첫 번째 키 값은 app.json에 이미 설정 되어있는 상태이고
두 번째 키값은 MainPage.js, 즉 실제 가로 배너를 설치하는 곳에 적어 주면 됨
(iOS도 동일)
const adUnitId = __DEV__ ?
TestIds.BANNER : '여기에 두번째 키값';
왜 광고 코드마다 DEV로 iF문 부기 처리를 하였을까 ?
구글 애드몹 코드가 있을 경우, 일반적으로 로컬 에서 expo start로 실행시켰을 경우 광고가 나오지 않음 앱도 실행되지 않음
구글 애드몹은 실제 빌드된 앱 에서만 작동하게 변경되었기 때문
하여 개발중 구글 애드몹 광고를 붙일 때에는
광고는 잠시 꺼두고, 실제 앱을 빌드 할 경우 즉, DEV 모드가 아닐 경우에만 동작하게 하자”라는 코드를 심어 주는 것
eas prebuliid
npx expo prebuildWhat would you like your Android package name to be?
Enter
What would you like your iOS bundle identifier to be?
Enter
처음 할때에는 뭘.. 많이 설치함
eas build 하기 ⇒ 앱 파일 만들기
eas.json
{
"cli": {
"version": ">= 2.4.1"
},
"build": {
"development": {
"distribution": "internal",
"android": {
"buildType": "apk"
}
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}다음 커맨드 라인을 실행
eas build -p android --profile development명령어를 실행하면 다음 순서대로 진행합니다. android > Y > Y
꽤 오랜시간이 흐를수있음.. 완료가 되면 빌드한 앱 파일을 설치할 수 있게 주소와 QR코드를 생성 해줌
주소를 따라 들어가서 install하기 버튼을 눌러 apk 파일을 다운받고 설치 후 실행
앱내에 가로 배너가 설정된걸 볼수있음
앱을 플레이 스토어에 올렸는데 애드몹 광고가 정상적으로 나오지 않을때
- 구글 애드몹의 앱 아이디를 app.json을 제대로 넣지 않은경우
- 광고 단위, 즉 예컨대 가로 배너 광고 단위를 생성하고 받은 광고 단위 키값을 제대로 넣지 않은 경우
- 구글 애드몹 심사가 아직 진행중인경우
심사가 아직 덜된 이유가 가장 확률이 높음.
전면 배너 광고
배포하기
내가 개발한 앱의 로고를 제작하고 배포를 진행 하는 순서는
1) Expo EAS를 통한 최종 앱 파일 생성
2) 구글 플레이 개발자 라이센스 가입 및 구입
3) 구글 플레이 스토어에 앱 배포
Expo를 통해 배포
Expo가 내가 만든 앱을 배포 할 수 있게 최종 앱 파일을 만들어줄 땐, app.json에 담긴 정보를 기초로 해서 최종 앱 파일을 생성
안드로이드 최종 앱 파일AAB
iOS 최종 앱 파일 IPA
앱 배포 과정에서 BACKGROUND LOCATION 문제
expo-location 도구를 설치했을 때 백그라운드 위치기반 기능이 자동적으로 돌아가게 됨 이걸 제거해 줘야한다고 한다
"permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]app.json 코드에서 android 설정 부분에 위 코드를 넣어줘야 함.
slug
Expo 명령어로 배포/업로드를 진행하면 인터넷 주소를 하나 줍니다.
expo.io/@project-owner/myAppName
slug는 myAppName 부분의 이름을 결정
version
빌드할 때 항상 version을 변경해줘야 Expo가 앱을 새로운 버전으로 다시 빌드하는 구나 인지 함
iOS - buildNumber
iOS 앱 스토어에 앱을 배포하고 수정 후 재 배포 할 때 이 빌드 넘버를 바꿔야 앱 스토에서 수정 사항을 인식. 동일하면 오류가 발생
iOS - bundleIdentifier
앱 스토에서 인식하는 배포한 앱의 도로명 주소 같은 느낌의 정보
android - versionCode
iOS - buildNumber 와 동일
android - package
iOS - bundleIdentifier 와 동일
안드로이드용 App Bundle 파일 생성 및 Expo 서버로 업로드를 진행
npx expo prebuild
eas build -p android --profile productionJDK에러
앱을 배포할 모든 준비가 끝이 나면 구글 플레이 개발자 라이센서를 구입해 줘야한다 구글 플레이 스토어에 접속 후 가입 구입 해주면 된다
그후 App Bundle 파일 준비를 해주고 구글 플레이 콘솔 앱 배포를 해주면 된다
끝
와 스파르타 코딩 클럽 왕초보 앱개발 종합반 5주차 까지 끝났습니다 ,
처음에 시작 할때 내가 어느 수준 까지 갈 수 있을까 제로베이스 인 내가
얼마나 알차게 채울 수 있을까 싶었는데요 갠적인 생각으로
제로 베이스인 제가 약 10% 정도 채워졌나 ? 싶어요 ㅋㅋㅋㅋㅋ
당연한거였어요 ㅋㅋㅋㅋ 입문인거죠 입문 정말 기초만 알고 가자 이런게 아니였을까요?
개인차가 있겠죠... 더 잘하시는 분들도 많으실거에요 .. 저는 기초만 채워갑니다
그래도 이제 저에게 남은건 코딩이라는 개념과 이해 그리고 앱개발 강의 평생소장, 강의자료 정도가 남았는데 은근 배부르네요 ㅋㅋㅋㅋ 5주차 과정을 끝내면서 직즉 했어야 할 웹개발 과 재미있을거같아 관심이 가는 겜개발 을 추가로 듣고 싶어서 너무 고민이였어요 ㅜㅜ
이걸 한다고 뭐가 더 될거같기 보단 또 기초만 알아가지 않을까 내가 지금 기초만 찔끔찔끔 알아가서 뭐하나 싶고 ㅋㅋㅋㅋ 앞으로 조금 더 고민을 해보겟지만 듣게 된다면 웹개발을 더 들어보게 되지 않을까 싶습니다
스파르타 코딩클럽은 정말 괜찮은거 같아요 일단 너무 믓찌고 친절하신 튜터님들 매 회차 너무 감사했습니다 복 받으실거에요 하하
그리고 보기좋게 정리된 강의 자료도 너무 좋았구요
스파르타 코딩클럽 덕분에 시작된 벨로그도 한주차 한주차 강의 자료를 보며 개발일지를 적어나갈때마다 머릿속이 같이 정리가 되는느낌 ! 이해하지 못했던 부분을 개발일지를 적어가면서 많이 이해하게 되었어요 좋은 경험 이었습니다
다음에도 또 다른 강의를 들어보고싶은 마음은 너무 진심이에요
돈이 아깝지 않습니다 정말
끝이 나긴 나네요 뭔가 시원섭섭한 ㅋㅋㅋ 아쉽네요 정말 ㅋㅋㅋㅋ 수고 많았다 나자신 진짜 ㅋㅋㅋ 아직도 나는 참담한 새싹이지만 그래도 이젠 코딩의 ㅋ은 알아가는거같네 ㅋㅋㅋ
휴 레벨0에서 1정도는 된거같으니 됐어!!
앱개발 개발일지 이제 정말 저엉말 ㅜㅜ 안녕~
자라나라 새싹새싹