5주차 앱 배포하기

2021.11.04 - [앱개발] - 5주차-앱에 광고달기

 

• [배포하기] 배포를 위한 체크리스트
  • Expo의 배포 과정
    ✅Expo는 개발 뿐만 아니라 배포, 그리고 수정 재배포 까지 앱 개발 전체를 도와주는 고마운 툴입니다.
    
    지금까지 개발할 때도 Expo의 도움을 받아 쉽게 쉽게 유용한 기능들을 적용했는데요!
    배포에선 어떻게 도움을 받고, 실제 그 배포 과정은 어떠한지 한번 살펴보겠습니다
    
    
  • 앱 마켓 둘러보기
    앱을 배포하기 위해서는 필요한 것들이 있습니다.(내가 직접해야함 'ㅅ')
    
    1) 앱 로고
    2) 스플래시 스크린(앱 시작 초기 화면)
    3) 앱 마켓에 올릴 설명 이미지
    
    이렇게 직접 준비해야하는 것들과
    
    Expo의 도움을 빌려 쉽게 준비 가능한
    앱 버전 관리, 안드로이드, iOS 인증서 관리 등이 있습니다.
    

    

    
    
  • 배포를 위한 시작
    👀자, 그럼 배포를 위한 순서를 정해보고 작업을 진행해보겠습니다.
    
    1) 로고 제작
    2) 스플래시 스크린 제작
• [배포하기] 스플래시 스크린
  • 로고&스플래시 스크린 준비
    

    

    
    
  • 온라인 포토샵
    튜텨님도 포토샵의 포도 모르는 사람인데,
    온라인 포토샵 툴의 힘을 빌려서 많은 일들을 해내고 있습니다.
    온라인 포토샵
    👉 저는 포토샵의 포도 모르는 사람인데, 온라인 포토샵 툴의 힘을 빌려서 많은 일들을 해내고 있습니다.
    이 사이트에 들어가보면, 쉽게 이미지 작업을 할 수 있는데요! 왼쪽 버튼을 눌러 작업을 시작하겠습니다
    

    

  • [실습 ✍️] 스플래시 스크린
    Expo가 앱을 생성해주면서 기본 스플래시 이미지를 제공해주고 있습니다.
    assets 폴더에 있는데요! 다음 이미지 입니다. splash.png 파일을 VSCode에서 더블 클릭하여 확인해보세요.
    

    

    
    👉 위 이미지는 앱이 열릴때 첫 준비 화면정도로 뜨고 있는데요!
    심리테스트 앱의 스플래시 이미지로 쓰기엔 너무 부족해보입니다.
    그럼 이 이미지를 온라인 포토샵에서 열어주세요
    
    

    

    
    👉 그럼 우린 무료 이미지 사이트나 여러분들이 원하는 이미지를 여기에 복사 붙여넣기를 해서 조정을 해봅니다. 저는 unsplash 라는 무료 이미지 사이트에서 적당한 사진을 캡쳐해, 복사 붙여넣기를 할거에요
    
    
    

    

    

    

  • //여기서 조정할 거 봐쥬세요 app.json { "expo": { "name": "sparta-myhoneytip-gun", "slug": "sparta-myhoneytip-gun", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, ```​

• [배포하기] 로고 준비
  • [실습 ✍️] 로고
    
    💡 🤩 어디서도 들을 수 없는 배포 꿀팁!
    로고 또한 엑스포에서 제공해주고 있습니다!
    
    

    

    이 또한 온라인 포토샵을 통해 수정해보겠습니다.
    온라인 포토샵에서 신규 생성으로 새 프로젝트를 연다음, assets 폴더의 icon.png 파일을 열어주세요

    

    주어진 icon.png 사이즈에 맞게 사진을 맞춰주세요. 그리고 icon.png 이름으로 또 저장!
    

    

    
    👉 Expo 클라이언트 앱을 완전히 끈다음, expo start도 다시 해줘서 앱을 열면!
    Expo 클라이언트 앱 리스트 화면 부분에서 로고가 적용된 걸 확인 할 수 있습니다
    

    

    
    
    가끔 시뮬레이터( 컴퓨터에서 안드로이드 또는 iOS 휴대폰 가상 시뮬레이터를 연경우)에서 반영이 안되는 경우도 있는데,
    시간이 지나면 보여지더라구요!
    
    이건 Expo 버그중 하나인가봐요 😂
    
    
• [배포하기] 배포 준비 : 최종 앱 파일 생성 및 개발자 가입
  로고도 준비되었고 스플래시 이미지도 준비되었습니다.
  그럼 이제 진짜 배포할 차례 입니다.
  
  비교적 승인 기간이 짧고, 개발자 라이센스 비용이 저렴한 안드로이드 배포를 먼저 진행하도록 하겠습니다!
  (구글 개발자 라이센스 3만원, 애플 10만원./..네??????)
  
  진행 순서는 다음과 같습니다
    1) Expo를 통한 최종 앱 파일 생성
    2) 구글 플레이 개발자 라이센스 가입 및 구입
    3) 구글 플레이 스토어에 앱 배포
  
  끝!
  
  
• [배포하기] 배포 준비 : 최종 앱 파일 생성 및 개발자 가입
  
  👉이제 Expo를 통해 배포를 해봅시다!
  Expo가 여러분들이 만든 앱을 배포 할 수 있게 최종 앱 파일을 만들어줄 땐, 
  app.json에 담긴 정보를 기초로 해서 최종 앱 파일을 생성해줍니다.
  
  안드로이드에선 이 최종 앱 파일을 AAB(App Bundle) 파일이라 부르고
  iOS에서 최종 앱 파일은 IPA 파일이라 부릅니다.
  
  그럼 app.json 파일을 같이 한번 살펴보고 최종 앱 파일을 만들어보도록 하겠습니다.
  
  

  

  
  

  

  
  

  

   👉 최종 앱 파일을 생성할 때 안드로이드, iOS 공통적인 앱 정보를 설정할 수 있지만,
        공식 문서에 따르면, 안드로이드,iOS 따로 설정을 줄 수 있습니다.
        예컨대, 안드로이드와 iOS 각각 다른 로고를 설정할 수도 있고, 스플래시 스크린 이미지도 설정할 수 있습니다. 
   👉 app.json 공식문서
   
  [실습] 최종 파일 생성
  

  

  
  ✅안드로이드 앱 빌드(생성) 명령어 및 확인 = 'expo build:android -t app-bundle'
  

  

  
  
  
• [배포하기] 안드로이드 & iOS(자료참고) 배포
  
  • [실습 ✍️] 구글 플레이 스토어에 최종 앱 배포
    

    

    
    

    

    
    

    

    
    
• [마무리] 끝 & 작품 제출하기
  출시완료!