IONIC resources 이미지 자동화

IONIC resources 이미지 자동화

앱을 처음 띄우면 나오는 스플래시와 아이콘 이미지를 만들자.

ionic에서는 하나의 이미지 파일로 디바이스 해상도별 파일로 자동 생성해 주는 기능이 있다.

Splash screen Template PSD

Splash screen을 만들수 있는 PSD 템플릿 파일이다.

이전에 ionic.io 사이트에서 제공했던 파일인데 지금은 그 페이지가 어디갔는지 모르겠다.

그래서 https://github.com/milkcan/Ionic-Splash-Template 이곳에서 다운 받았고 

이 포스팅에도 등록해놓았다. - (splash.psd)

이걸 이용하여 포토샵으로 작업을 한 뒤 이후의 작업 순서를 적겠다.

Splash screen plugin 설치

http://ionicframework.com/docs/native/splash-screen/

https://github.com/apache/cordova-plugin-splashscreen

이 두 곳에서 확인이 가능하다.

$ ionic cordova plugin add cordova-plugin-splashscreen
$ npm install --save @ionic-native/splash-screen

resources cli 실행

splash.psd로 스크린 디자인을 마쳤다면, 

프로젝트 디렉토리 내에 /resources 에 splash.png라는 이름으로 저장을 한다.

icon의 경우는 최소 사이즈가 192x192 이어야 하고 둥근 코너가 아닌 정사각형으로 된 icon.png 파일로 저장한다.

resources 전체(아이콘/스플래시) 이미지 만들기

$ ionic cordova resources

resources 아이콘만 이미지 만들기

$ ionic cordova resources --icon

resources 스플래시스크린만 이미지 만들기

$ ionic cordova resources --splash

위의 CLI를 실행하면 ionic의 아이디와 비밀번호를 입력해야 한다.

정상적으로 실행이 되었다면 /platforms 의 OS별 각 해상도에 맞게 파일이 생성되어 들어가 있는 모습을 확인 할 수 있다.

1. ionic2에서 ionic3로 업데이트를 했는데 안드로이드 릴리즈 APK로 설치 후 실행 시 스플래시스크린이미지가 안나왔다.

   그래서 플랫폼 자체를 지웠다가 다시 설치 & 빌드 & 릴리즈 했더니 정상동작 하였다.

2. ionic3로 되면서 CLI로 실행하는 모든 구문이 변경되었다.

   $ ionic plugin add "플러그인이름" -> $ ionic cordova plugin add "플러그인이름"