9회차 세부 과정 목차
각자 개인적인 앱을 저번시간 숙제로 만들었다면, 이번시간에는 그 앱을 패킹하고 배포하는 과정을 해보겠습니다.
배포는 앱패킹 -> 스토어에 배포 -> 앱심사 의 과정으로 이루어집니다.
스토어 배포의 경우 안드로이드 , IOS 모두 개발자 계정이 있어야하고
안드로이드는 구글개발자 29달러 - 한번만결재
IOS는 애플개발자 99달러 - 1년단위
입니다. 애플이 참 비싸죠. 1년에 99달러씩이나 내야되고 안내면 기존의 앱을 다운받은사람들은 사용을 할수 있지만 스토어에 비활성으로 되어 더이상 다운로드가 안됩니다. 그리고 더이상 앱 업데이트도 못하죠.
게다가 앱패킹 을 할때 안드로이드는 개발자 계정이 없는 상태에서도 패킹을할수있지만 , 애플은 패킹조차 개발자계정이 있어야합니다.
(사실 패킹을 할수잇는데(아카이브는 가능) 그걸 까볼수가 없습니다)
그러니 개발중에선 에뮬레이터에서 돌려보다가 배포를할때는 앱을완전히 다만든 상태에서 개발자 등록을 하는게 비용적으로 유리하겠죠?
패킹과 배포과정은 앱 개발자 등록이 모두 완료되어있다는 가정하에 진행됩니다.
안드로이드 , IOS 앱 개발자 등록은 따로 준비하지 않았으며 개발자 등록방법에 대한 글은 많기도 하고 쉽기도 해서 생략하도록 하겠습니다.
(IOS같은경우 앱개발자로 등록하기까진 쉬운데, 그이후에 앱을 위한 키발급 과정이 좀 복잡하니 이부분은 좀있다 순서되면 같이해봅시다.)
그러면 차근 차근 해보도록 하겠습니다.
1.안드로이드 앱 패킹
1. 앱 이름 변경
2. 런쳐아이콘 설정
3. 스플레시 이미지 설정
4. 앱 key 만들기 - gui로 만들어보기
5. 앱 key 만들기 - 명령어로 만들어보기
6. key.properties 파일 만들기
7. app 수준의 build.gradle 설정
8. apk ,aab 패킹
1. 앱 이름 변경
앱 이름 변경하는건 간단합니다. 앱을깔았을때 사용자에게 보이는 앱이름을 설정하는겁니다.
앱 이름 변경하는건 간단합니
android -> app -> src -> main -> AndroidManifest.xml 파일로 들어간뒤
android:label 부분을 원하는 이름으로 변경해줍니다.
그뒤 메인함수 종료를 해줍니다.( 상단에 플레이-Run main dart , 번개표시 -hot reload , 빨간사각형 Stop main.dart)
상단에있는 빨간 네모버튼이요. 그리고 다시 실행해주면 앱이름이 지정한걸로 바뀐것을 볼수있습니다.
2. 런쳐아이콘 설정
런쳐아이콘이란 그냥 앱깔면 보이는 그 아이콘을 말하는겁니다. 지금은 기본으로 flutter 로고가 들어가 있지요.
런쳐아이콘은 디바이스의 사이즈에 맞게 이미지 사이즈 변경해서 하나하나 넣어줘야하는데 그냥 그걸 한방에 해주는 라이브러리를 사용합시다.
flutter_launcher_icons 라는걸 설정해줍니다.
그리고 아래에 런쳐아이콘 설정을 해줍니다.
그리고 원하는 사진을 한장 준비해주세요.
(저는 그냥 인터넷에서 사과사진 하나 받아왔습니다.)
터미널에 flutter pub run flutter_launcher_icons 라고 쳐준뒤
메인함수 종료하고 다시 켜주세요.
그러면 저렇게 앱아이콘이 변경된걸 볼수있습니다.
그리고 안드로이드와 IOS 폴더를까보면 저렇게 많은 이미지가 자동생성되어 들어가있는것을 볼수있습니다.
3. 스플레시 이미지 설정
스플레시 이미지는 앱의 메인함수가 실행되고 첫 화면이 나올때까지의 이미지를 설정하는것입니다.
아무것도 설정해두지 않은경우 그냥 하얀 화면이 나오게되는데, 그러면 사용자들 입장에서는 앱구동이 좀 느리게 느껴질수도있습니다. 그래서 이때 사용하는 이미지를 설정할건데요,
안드로이드의 경우 최신에 나온건 자동으로 스플레시 이미지가 생기는데, 하얀바탕에 가온데 런쳐아이콘의 모양이 나오도록 되어있습니다. 요걸한번 바꿔보겠습니다.
flutter_native_splash 라는 라이브러리를 설치해줍니다.
그리고 스플레시 이미지 설정을해주세요.
(저는 그냥 촌스러운 파란 배경에 대충 나팔이미지 썼습니다.)
에뮬레이터의 왼쪽이 안드로이드11이고 , 오른쪽이 12인데요
안드로이드 12부터는 스플레시 이미지가 좀 다르게 적용됩니다.
이미지가 원안에 잘려서 나오는 형태가 되죠.
대충 설명을 보면, 스플레시이미지에 사용할 아이콘의 배경이 없는경우 이미지의 크기를 1152,1152 픽셀에 맞추고,
지름 768 픽셀 안에 맞추라고 하네요.
아이콘의 배경이 있는경우 960,960 에 맞추고 640픽셀 지름의 원안에 들어오게 해야한답니다.
그래서 대충 그림판이나 피그마 같은거 이용해서 저 사이즈에 맞는 이미지를 준비해줍니다.
android_12 에 맞는 이미지를 다시 설정해주고 명령어 다시친뒤 보면 저렇게 잘 나오는걸 볼수있습니다.
4. 앱 key 만들기 - gui로 만들어보기
앱을 배포하기 위해서는 앱이 자기꺼라는걸 알리는 서명이 필요합니다. 그걸 키 에 담아 앱을 패킹하는데요,
키에는 업로드 키와, 배포키가 있습니다.
APK 의 경우 업로드키가 곧 배포키가됩니다.
AAB 의 경우 우리가 만든건 업로드 키가 되고 , 구글 플레이 스토어에 업로드할때 사용됩니다. 플레이스토어에서는 배포키를 자기네들이 만든뒤 앱에 담습니다.
(여기서 APK는 전통적인 앱 패킹 방식인데 , 이건 모든 디바이스에 대비한 리소스가 다 담겨있는 앱설치파일입니다. 그래서 용량이 큽니다.
AAB 는 구글에서 APK의 용량적 단점을 보안하여 만든 어떤 새로운 앱설치파일 방식인데, 우리가 앱을 ABB형태로 담아 플레이스토어에 올리면, 사용자가 앱을 다운받을때 그 사용자의 단말기에 맞춰 맞춤형 APK를 만들어 다운로드 받도록 해줍니다. 약 15퍼센트 정도 용량이 적다고 하네요.)
apk든 aab든 어쨋든 키가 필요하니 만들어봅시다.
key는 keytool 이라는 기능을 이용해서 만드는데 flutter말고 일반 android를 켜서 gui방식으로 하는방법이 있고, 명령어를 쳐서 하는방법이 있습니다.
보통 간편하게 명령어를 쳐서 만드는데 , 이 명령어는 flutter의 dart의 명령어가 아니고 , java의 명령어 입니다.
터미널에서 java명령어를 사용하려면 자바가 설치된 경로까지 간뒤에 명령어를 입력해야 작동합니다.
또는 환경변수에서 java 경로를 설정해줬으면 어디서든 가능합니다.
윈도우와 맥의 명령어가 쪼끔 달라서 인터넷에서 찾아볼때 해깔릴수있다는점도 있습니다.
보통 명령어칠때 이런것때문에 얼타는 경우도 많고, 설치 경로에 대한 이해나 요런것들이 사실 개발자에겐 아무것도 아니지만 처음하는사람에게는 이상해서 얼탈수도 있으니, gui를 사용해서 만들어 보고, 명령어를 쳐서도 만들어 보겠습니다.
flutter가 적용된 안드로이드 스튜디오에서는 키 만드는 GUI방식의 어떤것이 없습니다.
그래서 일반 기본 안드로이드 자바나 코틀린기반으로 코딩작성하는 프로젝트를 안드로이드 스튜디오로 열어야합니다.
그냥 안드로이드 스튜디오 키고 아무 프로젝트나 flutter말고 일반으로 만들어서 해도되긴하는데, 그냥 일반안드로이 스튜디오만 띄우면 되는것이기 때문에, 저는 현재 프로젝트의 안드로이드 부분을 열었습니다.
화면에서 보이는것처럼 android 부분을 마우스 오른쪽해서 아래로 보면 Open Android module in Android Studio 라는게 보이는데 그걸 클릭해주면 됩니다. 그럼 오른쪽에 안드로이드스튜디오가 하나 새로 뜨는걸 볼수있습니다.
그러면 그 새롭게 연 안드로이드 스튜디오가 활성화된 상태에서 build -> Generate Signed Build/ Apk... 이걸눌러줍니다.
이건 앱 패킹을 gui로 하는건데 우리의 지금 당장의 목적은 앱패킹이 아니라 키를 만드는것이기 때문에
aab든 apk든 상관이 없이 그냥 아무거나 선택하고 next를 누릅니다.
그리고 key store path 적으라는 부분에 create new 가 나옵니다. 그걸누르면 키를 생성할수있도록 패널이 나타납니다.
여기에 적당한걸 넣은뒤 키를 생성하면 됩니다.
키스토어는 뭐고 키는 뭐냐?
하나의 키스토어 안에 여러개의 키가 들어갈수 있습니다.
필통과 연필의 관계라고 할까요?
근데 보통 키스토어 1개에 키1개로 합니다.
키스토어를 만들었을때 어따가 저장할거냐 가 key store path 부분인데 대충 저는 바탕화면에다가 저장하고, 나중에 옴기던지 하겠습니다.
바탕화면에 sarankey.jks 라는 이름으로 만든다고 해두고 , 대충 비번설정하였습니다.
아래 키부분에는 그 키스토어에 들어가는 키를 만드는건데 , 그 키의 별칭으로 sarankey라고 하고 , 대충 비번적고 , 몇년간쓸꺼냐에 대충 25년적었습니다. 그리고 Certificate는 별로중요하진않는데 한개는 적어야대서 그냥 이름하나 적어주고 대충 만들었습니다.
그러면 바탕화면에 보이죠.
그럼 gui로 만들어봤으니 지워주시고, 이번엔 명령어로 만들어봅시다.
5. 앱 key 만들기 - 명령어로 만들어보기
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \
-keysize 2048 -validity 10000 -alias upload
flutter 공식 홈페이지에 나와있는 화면입니다.
맥이나 리눅스는 위에명령어 치고,
윈도우는 아래 명령어 쳐서 만들어라 라고 되어있습니다.
그래서 무슨뜻인가 살펴보면, 저기 맥 부분을 예로들면
대충 알아야 할부분은 3개입니다. 나머지는 똑같이 치시고 저 3개만 각자 상황에 맞게 하면됩니다.
저는 이렇게 했습니다.
경로는 ~/desktop 이고 ( ~이거는 기본경로로 해당 맥의 자기 컴퓨터(자기이름) 입니다.)
키스토어 이름은 sarankey2.jks
validity는 그대로 10000
별칭 alias 는 sarankey2 라고 했습니다.
저렇게 명령어를 치면 비번치라고나오고 , 기타 정보입력하라고 나옵니다.
( 비번칠때 화면에 아무것도 안뜨는데 원래 비번같은거 칠때는 화면에 표시안되니까 당황하지마세요.)
맨 아래에 확인하는부분에 yes 라고하면 키가 생성됩니다.
어쨋든 이렇게 키를 생성해봤는데, 명령어로 하는게 간편하긴한데 이해가 어렵다면 그냥 GUI 방식으로 해도됩니다. 편안대로하시길
6. key.properties 파일 만들기
android 폴더 내부에 key.properties라는 파일을 만듭니다.
storePassword=<password-from-previous-step>
keyPassword=<password-from-previous-step>
keyAlias=upload
storeFile=<keystore-file-location>
이 4가지를 각자가 지정한대로 잘 적어주면 됩니다.
storeFile은 생성했던 keystore의 위치를 지정해주는데 저는 그냥 바탕화면에다가 저장해두겠습니다.
그냥 하는거니까 저위치에 해뒀지. 각자 안잃어버릴만한 위치에 저장해두세요.
프로젝트 내부에 keystore를 저장할거면 그 파일위치를 상대경로로 지정해도됩니다.
대충 바탕화면에 저장했던 파일의 위치를 알아내려면, 파일에 오른쪽마우스 클릭해서 정보가져오기누르면 위치가 한글로 나오는데,
저걸 복사해서 메모장이나 어디 붙여넣기하면 영어로 경로 나옵니다.
7. app 수준의 build.gradle 설정
android -> app -> build.gradle
앱수준의 build.gradle에 몇가지 적어줘야합니다.
저 위치에
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}요렇게 적어주세요.
아래부분에 signingConfigs 부분을 적어줍니다.
그아래 buildTypes 부분에 debug 대신 release 라고 적어줍니다.
8. apk ,aab 패킹
먼저 apk 로 패킹해보겠습니다.
상단의 build -> Flutter -> Build APK 를 눌러줍니다. (명령어로 쳐도되는데 친절하게 gui기능있으니 그냥 gui로 하면좋습니다)
빌드했더니 좀 기다리니 완성이 되네요.
27초 걸렸고 build/app/outputs/flutter-apk(apk)/app-release.apk 의 경로에 21.6메가바이트로 잘 됫다고 나오네요
aab 로 빌드해보니 9.2초가 걸렸고 저 경로에 21.7메가 바이트로 됬다~ 라고 나옵니다.
apk와 aab 둘다 패킹이 완성됬네요. 이제이걸 구글개발자 등록하고 올려라 하는곳에 올리면 됩니다.
그런데 이상한점이 aab가 용량이 좀더 크네요?
그것은 aab용량 자체는 큰데, 이게 구글플레이스토어에 올라가고, 실제로 사용자가 다운받을때는 저거보다 약 15퍼 정도 용량 줄어듭니다.
그럼 이렇게 안드로이드 패킹이 완성되었습니다.
2.IOS 앱 패킹
IOS 앱패킹은 아카이브라고 합니다.
아카이브를 하면 어떤 파일이 만들어지는데
앱에필요한 몇가지 파일들이랑 , ipa 파일이 만들어집니다.
IOS는 ipa가 apk 라고 보면되겠습니다.
먼저 xcode로 프로젝트를 엽니다.
ios 부분에서 Open ios module in Xcode 를 눌러주세요.
TARGETS 부분에 Runner라고 있을겁니다. 그걸 선택해주세요.
General 부분에서 지원하는 디바이스를 선택해주시고
버전이랑 빌드버전은 자동으로 되잇을텐데 확인해줍니다.
개발자 등록하고 각 과정을 다끝낸상태라면
Team 에서 해당 해당 팀을 골라줍니다.
디바이스 고르는데서 Any ios Device를 선택해주세요.
상단의 Project -> Archive 를 눌러줍니다.
아카이브를 누르면 아카이브가 바로 시작됩니다. 시간이 좀 걸리는데요, 아마 이거하면서 많은 에러가 나올것입니다.
너무 여러 사례가 있기때문에 그건 오류날때마다 검색해서 이유를 찾아 해결해야하는 부분이 있습니다.
어쨌든 아카이브가 완료가 되면 요렇게 아카이브가 하나 완성됩니다.
이걸 distribute App 을 통해 ios 배포를 하게됩니다.
혹시나 저 화면을 껐는데 다시켜고 싶은경우
Window -> Organizer 를 누르시면 다시 저 화면이 나타납니다.
여기까지 IOS 앱 패킹 완료입니다.
애플 개발자 키 발급받기
3.3
내용
4. 4
내용
5.5
내용
6.6
내용
7.7
내용
8.8
내용
9.9
내용
10.10
내용
11.11
내용
12.12
내용
13.13
내용
14.14
내용
15.15
내용
16.16
내용
17.17
내용
18.18
내용
19.19
내용
20.20
내용
'코딩생초보를 위한 플러터 빠르게 한바퀴' 카테고리의 다른 글
| 0.OT and Install (0) | 2023.11.04 |
|---|---|
| 8.firebase2-auth,storage (0) | 2023.10.21 |
| 7.firebase1-firestore (0) | 2023.09.02 |
| 6.network (0) | 2023.08.22 |
| 5.state management (0) | 2023.08.11 |
