[React Native] 스파르타 앱개발 종합반 5주차

**expo 종료 명령어 Ctrl D

 

2. [수익형 앱] 앱에서 수익을 내는 방법

유료앱, 광고배너, 앱 내 컨텐츠 결제, 구독 수익, 앱 개발 용역으로 일하기, 외부 브랜드 광고 수익..

 

3. [구글광고] 애드몹(AdMob) - 설정

- 광고종류 : 배너, 전면, 리워드, 네이티브 고급 광고(커스텀)

 

애드몹

https://apps.admob.com/

AdMob

- 애드몹에 회원가입 후 앱 생성(ReactNative는 ios와 android각각 하나씩 두 개 생성.)

 

애드몹을 reactinative에서 잘 활용할 수 있도록 expo 에서 지원해 줌

https://docs.expo.dev/versions/latest/sdk/admob/

Admob - Expo Documentation

 

활용에 필요한 도구를 설치하자

expo install expo-ads-admob

 

app.json 파일의 android와 ios 부분에 아래 코드 추가

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

 

 

4. [구글광고] 애드몹(AdMob) - 가로 배너 생성

구글 애드몹 사용 설명 공식문서

https://docs.expo.dev/versions/latest/sdk/admob/

Admob - Expo Documentation

 

애드몹에서 등록한 android, ios 앱의 앱ID를

앱 > 앱 선택 후 앱 설정 에서 복사해서 

app.json의 android와 ios의 

googleMobileAdsAppId 부분에 각각 넣어줌

 

 

- 광고단위(어떤 광고를 만들건지)를 만들자각각의 앱에서 광고 단위 메뉴에서 만듦형태는 배너 선택.이름은 아무거나. 나는 "가로배너"로 함완료 후 나오는 키 값을 활용할 것임

 

<AdMobBanner>

컴포넌트로 배너를 넣고

해당 속성의 adUnitID 값에 위에서 생성한 광고단위의 id값을 os에 따라 다르게 넣은 컴포넌트를 반환하도록 함

예시

{Platform.OS === 'ios' ? (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="ios앱id"
                  style={styles.banner}
                />
            ) : (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="android앱id"
                  style={styles.banner}
                />
            )}

servePersonalizedAds={true}

라고 값을 주면 사용자와 관련된 광고를 노출시켜줌

 

<<<AdMobBanner부분에서 발생한 오류를 해결하지 못해서 일단 가로배너 전면배너 부분 4,5강 넘어감

 

6. [배포하기] 배포를 위한 체크리스트

Expo의 배포과정

앱 로고, 스플래시 스크린, 앱 마켓에 올릴 설명 이미지

 

7. 스플래시

스플래시 스크린에 쓸 이미지를온라인 포토샵을 이용해 쉽게 만들어보자

 

온라인 포토샵https://pixlr.com/kr/x/

사진 에디터 : Pixlr.com - 온라인 무료 사진 편집 툴

 

여기서 이미지열기를 누르고

내 프로젝트 폴더의 assets폴더에 있는 splash.png 이미지를 불러온다

그 위에 원하는 이미지로 덮어씌운다

그리고 저장 시 png로 저장하고, assets폴더에 이름도 splash그대로 저장해서 기존의 splash파일이

덮어씌워지도록 한다.

크기나 규격을 크게 신경쓰지 않고 빠르게 만들 수 있다는 장점이 있다.

스플래시 적용 끝

 

8. 로고

온라인 포토샵에서 

icon.png도 스플래시와 같은 방법으로 만들어서 덮어씌워준다.

 

참고로 스플래시와 로고 등은 expo 앱을 껐다가 QR코드를 다시 찍어서 한 번 재 빌딩 해주어야 제대로 적용된다.

 

** 스플래시 파일과 로고 파일의 경로는 app.json 파일에 적혀있다.

 

 

9. 최종 앱 파일 생성 밎 개발자 가입

** 2021년 8월부터 구글 플레이의 배포 방식이 바뀌었습니다. 그 이전에 작성한 내용입니다.  **

 

안드로이드 구글 플래이 스토어에 앱을 배포해보자

 

과정

1. Expo를 통한 최종 앱 파일(apk) 생성 -> 지금은 플스에 apk가 아니라 다른 걸 제출하는 걸로 바뀌었다고 함

2. 구글 플레이 개발자 라이센스 가입 및 구입

3. 구글 플레이 스토어에 앱 배포

 

플레이스토어 개발자 라이센스 등록 3만원

ios는 10만원..^^

 

- app.json : 앱의 총 설명서와 같은 파일. 앱 배포 전에 체크해 주어야 함.

name 은 이름

slug 도 name과 똑같이

version은 버전 - 마켓에 올릴 때 업데이트 하려면 이 버전코드가 바뀌어야 함. android의 versionCode와 ios의 buildNumber도 동일.

icon은 로고 파일

splash는 스플래시 파일

 

bundleIdentifier 를 기입해주어야 함

앱마켓에 이 앱에 대한 고유한 주소를 알려준다.

같은 이름의 앱이 있더라도 이걸로 구분함.

ex) com.myapp.jh

이 값도 동일한 사람이 있을 수 있지만 이걸 그대로 쓰는 건 아니고 이걸 기반으로 한 키를 마켓이 생성해줌.

 

 

- 최종 앱 파일 만들기

 

cmd 터미널 창에 명령어 입력

expo build:android

apk 선택

앱에 대한 키를 만들어 줄 건데 네가 이미 갖고있는 키가 있어? -> 없다. Generate new keystore 선택

생성이 끝나면 url주소가 하나 나온다. 들어가보면

내가 방금 만든 앱에 대한 소개 페이지가 expo 사이트에 만들어져있음.

expo 대시보드(가입했던 사이트) 로 가보면 내가 만든 앱 목록도 뜸.

expo 대시보드

https://expo.dev/

Expo

Qeued가 끝나고(오래 걸림) Finish면 완료.

Android 버튼을 누르고 하단의 다운로드아이콘 버튼을 누르면 앱 파일(apk)을 다운 받을 수 있음.

 

 

 

- 구글 플레이 스토어 개발자 라이센스 가입하기

 

구글 플레이 스토어 개발자 사이트 : 구글 플레이 콘솔

https://play.google.com/console/developers

Google Play Console | Google Play Console

 

해외결제가 가능한 카드로 등록 비용 결제하기

개발자 이름, 이메일, 전화번호 등 모두 나중에 수정 가능하니 고심하지 않아도 됨.

개발자 계정 id는 추후에 구글 측에 자신이 배포한 앱과 관련해 문의할 때 쓰임

정보들을 입력하고 결제하면 된다.

 

10. [배포하기] 안드로이드 배포

 

- 새 앱 등록

로고, 안내 페이지 등을 정해진 사이즈와 확장자에 맞게 넣으면 됨

스크린샷도 넣어야 하는데 앱의 실행화면을 스크린샷으로 찍어서 미리 준비하면 편함.

스크린샷은 가로 세로 320x640 이면 원만히 통과.

그래픽 이미지 : 가로세로 1024x500 인 이미지를 넣으면 됨. 간편하게 만들려면 스크린샷을 이어 붙여서 하나의 이미지로 만듦. 크기만 맞으면 됨.

하단의 임시저장 버튼 누름

 

카테고리와 어플리케이션 유형을 내 앱에 맞게 골라서 선택

 

- 태그

앱 마켓에 사람들이 검색을 할 때에 어떤 검색어에 걸리게 할 건지 태그를 관리해야함!

5개 선택.

 

- apk업로드

아까 다운받은 apk파일 준비

개발자 콘솔 화면에서 앱 버전 > 관리 > 새 버전 출시하기

Google에서 앱 서명 키를 관리 및 보호하도록 허용(권장) : 권장사항이므로 체크함

apk파일 업로드

이 버전의 새로운 기능을 적으면 마켓 설명란 중 업데이트 사항에 들어감

 

이제 다음으로 넘어가면 오류라고 뜰 것

2020년 4월 이후로 개인정보 처리방침과 앱 내 검사가 좀 더 강화되어서

개인정보 처리방침과 앱의 컨텐츠 등급 등등을 더 작성하고 설정해야 배포가 가능함. 그것 때문에 오류가 뜬 것.

 

- 앱 콘텐츠

개발자 콘솔 화면에서 앱 콘텐츠 메뉴

여기에 내 앱의 개인정보 처리방침이 적혀있는 사이트 주소를 넣으면 되는데, 

임시방편으로 스파르타 코딩클럽 사이트 주소를 넣어도 통과가 거의 됨^^

나중에 진짜 앱을 배포할 때에는 제대로 된 주소를 넣을 것

 

앱에 광고 있는지 체크하고

앱 액세스 권한 체크하고

저장

 

대상연령

만 5세 이하까지 내려가게 되면 제출해야할 것들이 더 생김

13세 이상만 체크해도 무리x

 

- 컨텐츠 등급

개발자 콘솔 화면에서 컨텐츠 등급 메뉴

예를 누를 게 별로 없지만 확인해보고 체크

 

유료/무료 앱 인지

앱 사용 가능 국가 선택 가능

 

마케팅 동의 안함 : 체크하면 애드몹에 내 앱이 광고되지 않음

콘템츠 가이드라인, 미국 수출 법규 모두 체크함

 

- 진짜 출시. 프로덕션 출시 탭

개발자 콘솔 화면에서 앱 버전 메뉴

프로덕션 출시 시작 클릭!!

확인 클릭!

 

그럼 심사가 시작됨! 심사가 끝나면 출시됨. 그 전엔 게시 보류중 상태.

 

끝

 

---

2021년 8월부터 바뀐 구글플레이의 새로운 배포방식에 대해서도 기록할 예정