파파비의 블로그

플러터, flutter) 앱 퍼블리싱하기(앱이름 설정, 아이콘, 스플래시이미지, 앱 빌드) 본문

개발/flutter

플러터, flutter) 앱 퍼블리싱하기(앱이름 설정, 아이콘, 스플래시이미지, 앱 빌드)

N. Dave 2020. 6. 24. 12:22
반응형

퍼블리싱 하는 순서를 나타낸다.

1) 일단 코드짜고, 테스트하고 최적화까지 완료

2) 앱 이름 설정 & 식별자 설정

3) 써드파티 API 설정 확인

4) 아이콘 & 스플래쉬 이미지 설정

5) 올리기

 

1)은 생략하고 2)부터 보자

 

2) 앱 이름 설정 & 식별자 설정

일단 앱의 이름이나 식별자 등을 설정하기 위해선 요기, AndroidManifest.xml에 가서

Metadata를 좀 손봐야 한다.

 

 

그 중에서 어플리케이션 tag에,

 

1) label 부분은 사용자에게 보여지는 앱 이름이다. 앱을 깔고나서 바탕화면쪽에서 반영되는 이름이다.

 - 그래서 예쁘게 지어야 한다!

 

2) 그 위에 name은 그냥 내부적인 앱 식별자이므로 딱히 고칠필요는 없다.

 (참고로 얘는 패키지이름하고는 다른 개념이다!!)

- 패키지 이름은 그 위에 있다. 저기는 아시다 시피 전세계적으로 유일한 이름을 가져야하기 저렇게 도메인 컨셉으로 이름이 지어진다

- 만약 여기를 '수정' 한다면, 다른 곳들도 고쳐야한다. (build.gradle, MainActivity.java, AndroidManifest(그냥 & 디버그)).. 이렇게 4개정도가 생각나는데 더 바꿔야할 수도 있다. 그래서 처음부터 패키지 이름을 잘 짓는게 중요하다.

(이렇게 이름 짓는것은 ios의 경우 xcode에서 설정하면 됨)

 

3) Permissions(허가들, 중요**)

AndriodManifest는 2개로 나뉘어져있다.

- Debug모드에 하나가 더 숨겨져있다. 여기는 우리가 디버그 모드로 앱을 빌드할 때만 밑에있는 AndroidManifest랑 합쳐진다. Debug모드가 아니라면 합쳐지지 않는다. 

 

- Debug의 AndroidManifest파일을 확인해보자

인터넷 permission 하나가 존재한다

- hot reload나 hot restart를 하기 위해선 백단에서 인터넷연결이 필요하다. 그래서 이렇게 인터넷허가를 해두었다.

- 문제는 개발모드가 아니라면, 여기 부분은 합쳐지지 않는다. 따라서 본래 AndroidManifest파일에는 인터넷 허가가 없기 때문에 만약 인터넷이 필요한 앱이라면 문제가 생길 것이다.

- 따라서, 저기 인터넷 허가 부분을 복사해서, 본래 AndroidManifest파일에 넣어주어야 한다.

 

이렇게 본래 부분에 넣었다. 허가는 application tag 밖, manifest 태스 안쪽에 넣어야 한다.

 

 

3) 써드파티 API 설정 확인

- API를 활용한다면, 해당 키의 설정들을 조절할 수 있으면 해두거나, 보안 규칙들을 다시 한번 점검해서 혹시 문제되는 사항은 없는지 확인한다.

- Google API의 경우는 위에 처럼, 안드로이드 앱들에게만 요청을 받을 수 있도록 설정하는 등의 다양한 제한 조건들을 걸 수 있다.

- 파이어베이스의 경우 규칙들이 제대로 설정되어 있는지 다시한번 최종점검을 하도록 한다.

 

4) 아이콘 & 스플래쉬 이미지 설정

- 아이콘을 넣는 방법은 엔젤라 강의에도 나와있는데, 거기에는 직접 넣는 것이고,

여기에서는 패키지를 통해 넣는 방법을 알아보겠다.

 

시작에 앞서 일단 아이콘을 넣기 위해선 다양한 사이즈의 이미지들이 필요하다.

엔젤라의 경우 하나의 이미지를 활용해서 어떤 인터넷 사이트에 들어가서 다양한 버전으로 된 것들을 만들어주는 서비스(무료)를 이용해서 파일들을 직접 만들어서 프로젝트에 올렸고,

이번 경우에는 패키지를 활용해서 이미지 하나만 넣으면 패키지가 알아서 하도록하는 경우이다.

 

패키지는 여기,

https://pub.dev/packages/flutter_launcher_icons

 

flutter_launcher_icons | Dart Package

A package which simplifies the task of updating your Flutter app's launcher icon.

pub.dev

<패키지를 활용한 아이콘 설정 방법>

이 친구는 최종빌드에 들어가는게 아니고, 개발 단계에서만 쓰이기 때문에 

1) 이렇게 dev_dependencies에 넣어야 한다!!

이게 끝이아니다.

 

2) 이렇게 밑에 추가적으로 설정을 넣어주어야 한다.

ios는 안만들거라면, ios: false로 설정해두면 된다.

그런데 이 방법보다 그냥 이미지 변환시켜서 넣는 엔젤라 방법이 더 쉬운 것 같기도...

아무튼 여기 image_path는 옛날 legact 아이콘 방식이고,

적응형은 안드로이드 신 버전 형태이다.

 

더 구체적인 설정들도 있는데 그것은 readme를 확인해보면 된다.

 

자 아무튼 우리는 이 설정 값들을 dev_dependences에 넣었다.

그럼 이것들은 언제 실행이되어서 아이콘을 만들어내는 것일까?

> 그것은 우리 손에 달려있다.

 

flutter pub run flutter_launcher_icons:main

 

3) 위 명령어를 터미널에서 실행시켜주면 바로 아이콘을 만들어서 설정을 해둔다.

 

 

<https://appicon.co/ 엔젤라방법, 직접하는 방법>

두 방법 다 쉽고 간편하니 취향에 맞게 사용하길...

여기 mipmap들이 사용될 아이콘 파일들이다.

패키지를 사용하면 프로젝트 내에 올려둔 이미지를 가지고 패키지가 작업해서 저기를 갈아끼우는 것이고

이번 방법은, 우리가 직접 저 폴더를 갈아끼울 것이다.

 

1) 아이콘이 될 이미지를 선택하고 원하는 설정 값을 누른뒤에 Generate 을 누른다.

 

2) 생성된 폴더를 그대로 갈아끼운다.

- 안드로이드 같은 경우 mipmap들로 형성된 폴더들이 나올텐데

- 저기서 이름이 같은 폴더들을 지우고, 생성된 폴더를 넣으면 된다.

 

- 아이폰의 경우, 

Assets.xcassets 자체를 갈아버린면 된다.

혹시 잘 모르겠으면 엔젤라의 강의를 다시한번 찾아보길! 

 

 

<스플래쉬 이미지 설정하기>

 - 앱이 로딩중일 때 띄우는 화면인데, 우리가 직접 설정할 수 있다.

안드로이드의 경우 drawable 폴더에 있으며, 패키지로 할 경우 drawable로 여러 버전으로 나와서 더 좋은 것 같다.

아무튼 이 파일은 위 캡쳐와 같이 xml 파일이다.

따라서 설정 방법은 인터넷 검색해보면 잘 나온다고 하니, 필요할 때 검색해서 활용하도록 하자 

 

ios는 xcode로도 설정할 수 있고 vs에서도 가능하다.

아까 말한 assets.xcassets에서 Launchimage.png 1,2,3 파일들을 갈아 끼우면 될듯하다.

 

아까 https://appicon.co/ 얘를 쓰면 assets.xcassets를 통채로 갈면된다고 했는데

새로 생성된 폴더에는 launchImage 폴더가 없다.

 

추천하는 방법은 직접 xcode에 가서 저 폴더로 들어가면 

이렇게 직접 설정할 수가 있는데, 1x,2x,3x, 이미지들은 그냥 드래그 드롭으로 설정된 것이다.

 

 

왼쪽에 보면 LaunchScreen.storyboard가 클린된 것을 알 수 있는데 여기를 누르고

왼쪽에서 살짝 오른쪽 부분에 view를 누르면 splash Image에 대해 구체적인 설정들을 할 수가 있다.

특히 지금 보면 이미지와 배경이 안맞는데, 배경을 클릭 한 뒤에 오른쪽 팔렛트같은 부분에서 설정을 따로 줄 수도 있다.

 

이런식으로 되게끔 말이다.

 

 

 

이제 빌드와 관련되어서는,

https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/learn/lecture/15229812#questions

이 강의를 참고하면 된다. 이 강의는 production 빌드를 위해 필요한 사인들의 절차를 보여준다.

 

사실 영상은

https://flutter.dev/docs/deployment/android

 

Build and release an Android app

How to prepare for and release an Android app to the Play store.

flutter.dev

여기 내용을 step-by-step으로 도와주는데, 일단 정식 출시를 앞둔 시점이라면 이 부분을 제대로 정독해서 읽어보길바란다

반응형
Comments