Meteor cordova app에서 splash 시간을 지연하고자 할때

최근 framework7(https://framework7.io/)을 비롯해 UI Framework들이 기존의 하이브리드 웹앱의 한계를 극복하고자 하는 움직임도 있고 cordova 버전도 올라갔고(WKWebview + Crosswalk 지원) 하이브리드 앱 환경이 상당히 개선이 되었다는 반가운 소식을 들어 다시 Meteor를 가지고 하이브리드 앱을 만지고 있다.

Cordova로 앱을 만들다 보면 가장 처음에 직면하는 것은 아무래도 어색한 Splash Screen인데.
https://atmospherejs.com/meteor/launch-screen 를 발견하고 미시적이지만 꽤 프로페셔널한 개선이
어서 소개하고자 한다.

모바일 앱에서 최초 splashScreen은 무의미하고 느린 UI의 일종이라고 생각하지만 subscription등이 오래걸리거나 화면 이미지 로딩등으로 준비가 아직 되지않은 상태를 보여주기 싫다면 의미가 있다고 본다.

가령, 별도로 손을 쓰지 않으면

Splash 노출 -> Splash 소멸 -> 첫화면 (빈목록) -> subscription 끝 -> 첫화면 - 목록 노출

과 같은 단계를 실행할 것이고 빈목록이 보이는 지루한 시간은 사용자에게 완성도가 떨어지는 앱이라는 느낌을 줄 수 있다.

Splash 노출 -> subscription 완료 -> Splash 소멸 -> 첫화면 - 목록 노출

처럼 작동한다면 splash화면을 봐줄만한 이유가 있고 제 역할을 하는 좋은 UI라고 생각한다.
먼저 package를 추가해보자.

meteor add launch-screen

namespace 가 없다! 그렇다. 서드파티가 아니고 공식지원이다!

일단 사용은 무척이나 간편한데

var handle = LaunchScreen.hold();

를 글로벌 scope 에 넣기만 하면 끝.
subscribe를 받아서 subs.ready() 같은 reactive data source를 감시한 뒤 handle.release(); 로 풀어볼까 했는데 그러지 않아도 되더라.

https://github.com/meteor/meteor/tree/devel/packages/launch-screen
구현은 꽤 간단하다. hold를 몇개를 넣어도 release 한방에 Splash를 제거해 주니 간편하다.
cordova-plugin-splashscreen 를 사용한 간단한 구현이니 소스도 한번 보자.

오늘도 이렇게 날로 먹는구나. 헛헛.