하이브리드 앱 프레임워크 : Ionic, Flutter
2019년 05월 31일

배경

클래스프렙 재직 시절, 기존 플랫폼이 웹밖에 없던 시절 앱을 급하게 만들어야 할 상황이 온적이 있습니다. 기한은 2-3달 남짓에 개발자는 2명인 상황.

이 일정에 안드로이드와 iOS를 모두 구현하는건 불가능하다고 보아 크로스 플랫폼을 리서칭했습니다.

당시 React Native와 Ionic 중에서 고민하게 되었는데 Ionic 같은 경우 기존의 웹 기술을 이용해 wrapping하여 빠른 러닝커브를 확보할 수 있다고 판단하여 Ionic 프레임워크를 더 리서치하게 되었습니다.

Ionic 1 vs Ionic 2

Ionic1 프레임워크는 사실상 AngularJS + Cordova의 조합인데 문제는 이 당시 Angular 출시와 더불어 Ionic2가 맞춰 나오고 있는 상황이었습니다.

문제는 2가 나온지 얼마 안되어 (당시 rc 버전) 바로 프로덕션에 적용하기엔 무리가 있다고 판단, Ionic 1을 선택했습니다. 그 후 클래스프렙 포함 이직 후에도 이 Ionic을 계속 사용하게 되었습니다.

문제는 Cordova Plugin

웹뷰를 wrapping해서 간단한 앱은 만들 수 있지만, native device에 접근하려면 일종의 브릿지가 필요합니다.

Ionic의 기반인 cordova는 js기반의 플러그인들을 이용해 이 둘과 통신하는데, 문제는 이 플러그인이 native(Android, iOS)의 업데이트에 맞춰 같이 업데이트 되야 하는데 따라가지 못할 경우 직접 구현하거나 다른 플러그인을 찾아봐야 한다는 것이었습니다.

업데이트 버전을 찾아도 버전 2에 맞춰저 있어 기존 의 버전 1과는 호환 안되는 케이스가 대다수이다. 특히 cordova 메이저 업데이트를 할 때는 hack 등 우아하지 않은 방법으로 막는 경우가 많았습니다.

새 플랫폼 이동의 필요성 : Flutter

그러던 와중 인터넷에서 React native를 뛰어넘는 플랫폼이 뜨고 있다고 해서 우연히 접하게 되었습니다.

기존의 webview 방식도 아닌, React native도 아닌 완전히 새로운 언어와 플랫폼을 google이 내놓은 것이었습니다.

각 native device OS의 rendering layer까지 직접 접근하여 더 최적화된 퍼포먼스를 확보하는 등 장점이 많아 보였습니다. 그리하여 새로 들어가는 "레드데이즈" 모바일 버전을 이 Flutter로 구현하기로 했습니다.

React Native란 선택지도 있었는데 Flutter를 선택한 이유는 둘 다 처음 배우는 입장에서 상대적으로 러닝커브도 낮아보이고 퍼포먼스가 더 높을 것으로 판단했기 때문입니다.

이슈

하지만 결국 하이브리드 앱을 깊게 개발하다보면 네이티브와의 연결에서 오는 이슈는 피할 수 없습니다. cordova 에서 plugin이던, flutter에서의 package이던, 이건 하이브리드 앱을 개발하다보면 피할 수 없는 이슈이고 UI쪽 개발에선 확실히 생산성과 퍼포먼스의 이득을 얻었다고 생각합니다.

추가 이슈로는 아직 프레임워크가 자리 잡기 전이라 생각보다 라이브러리들이 빈약했습니다

추가 - fastlane을 활용한 배포

기존에 앱을 배포하던 방식은 안드로이드의 경우 apk, iOS의 경우 ipa 파일을 직접 빌드하여 인하우스 내 배포하여 테스트 후, 추후 실 배포시에 google play, app store에 프로덕션 빌드를 올리는 방식이었습니다.

문제는 수동으로 하다보니 버전을 잘못 지정해 빌드한다던가 최종 버전이 무슨 버전인지 혼선이 빚어지는 등 버전 이슈가 있었고, 작업에 시간도 걸리고 이 업무를 할 수 있는 인원도 한정되었습니다.

그리하여 마침 flutter를 도입하면서 fastlane까지 도입하여 이 과정을 자동화 및 정형화하려는 노력을 했습니다. 그리하여 google play, app store 페이지에 접속하여 수동으로 하던 작업 등을 포함하여 일부 과정들을 커맨드라인에서 수행할 수 있게 되었고, 단순히 파일을 배포하는 것이 아닌 각 플랫폼의 테스트 배포(alpha, testflight) 기능과 일관된 버전 관리 기능을 활용하여 정형화된 빌드 결과물을 배포할 수 있게 되었습니다.

일정 문제로 모든 기능을 활용하진 못했지만 다양한 action들이 있어서 추후 도입하면 빌드 자동화에 더 큰 생산성 향상을 가져올 수 있을 것으로 기대합니다.