내가 경험한 Ionic Framework (2+)

0.

이전에 작성했던 포스트는 angular.js (angular1) 를 기반으로 짜여진 Ionic 1에 관한 내용이었다. 그 뒤로 앱을 개발할 일이 전혀 없을 줄 알았는데, 최근에 백엔드 서버, 프론트 어드민, 그리고 아이오닉 안드로이드를 개발할 일이 다시금 생기면서 Ionic with Angular (a.k.a. angular2+) 에 대해 포스팅 해보려 한다.

Screenshot from 2018-03-23 17-24-00.png
색상이 조금 바뀌고 1.2.4 => 3.9.2로 업데이트 됐다.

1.

역시 Ionic1에서의 컨셉과 비슷하다. TypeScript를 기반으로 하는 Angular를 쓴다는 차이점만이 있을 뿐, 나머지는 전작과 비슷하다. Cordova 기반의 웹앱을 Angular로 짜기 좋게, 여러가지 UI 컴포넌트들이 각 플랫폼 스타일별로 잘 짜여져있다. ReactNative니, NativeScript니 몇 가지 들어봤지만 선택하지 않은 이유도 꽤 명확하다.

ReactNative는 각 플랫폼의 네이티브에 대한 이해가 있어야했고,1 NativeScript는 개념 이해하는게 귀찮아서(?) 읽어보지도 않았고, 프론트엔드 메이저리그 삼대장인 angular.js과 React, Vue를 모두 써봤지만 (TS로 새로 쓰여진) Angular에 대한 경험이 없었기 때문에 겸사겸사 호기심도 있었다. (그리고 블로그 방문 유입이 가장 많은 포스트가 Ionic이라약간 Ionic 2+에 대한 포스팅도 해보고 싶었다..)


2.

결론부터 말해서, Angular에 이미 익숙한 사람이 프로토타이핑에서 끝낼 정도로 진행해보는 것이 아니라면 프로덕션 레벨에서는 쓰지 않는 것을 추천 한다.

Ionic에 관한 질문들을 검색하다 보면, 처음에는 잘 돌아가는 것 처럼 보이지만, 숨어있는 온갖 그지(?)같은 점이 당신의 시간을 빼앗으며, 그것에 대한 제대로 된 답변을 전혀 찾을 수 없다. That is the reason nobody uses Ionic. 이라며 까는 글을 본 기억이 있다. 2 나 또한 비슷한 생각이며, 내가 경험한 븅1신 같은 상황들은 다음과 같다.

  1. Ionic의 router는 reduxmobx와 같은 State management library와 통합되는 라이브러리가 하나도 없어서, 어떤 action의 결과로 라우팅이 일어나야 할 때 그 처리가 매우 기형적으로 짜여질 수 밖에 없으며,
  2. 그 마저도 원하는대로 동작하지 않는다. setRoot()로 네비게이션 스택이 비워진 뒤에 push()를 호출하다가 뒤로가기 위해 pop()을 호출하면 네비게이션 스택이 비워진 경우에는 pop을 호출할 수 없다며 아이오닉이 죽어버린다.  setRoot의 처리가 비정상적인 것 같다.
  3. ion-datetime은 Date 객체가 저장되는 것도 아니고, 스트링으로 값이 떨어지는데, 그 값이 Timezone 처리를 알아먹지도 못한다. ion-datetime에서 입력 받은 값을 서버에 넣을 때, 그리고 또는 날짜값을 서버로부터 받아와 ion-datetime에 setValue해줄 때 9시간을 더해주거나 빼는 전처리가 필요했다.

1번은 window 객체에 전역적으로 함수를 추가해서 해결했다. 정말 쓰고 싶지 않은 방식이었지만 별다른 방법이 없었다. Angular의 StaticInjector를 이용하여 NavController 객체를 받아오는 방법과 비교해봤을 때 2번을 해결하기 위해서도 전역 함수가 필요했기에 전역함수 쪽으로 낙찰. 쓰레기는 한 곳에

2번은 window 객체에 전역적으로 함수를 선언한다는 점에서는 1번과 유사하지만, jQuery같은 방식으로 해결했다. 현재 화면에 표시되는 <- 뒤로가기 버튼을 찾아내서, 그것을 (programmatically) 클릭했다.

3번은 다행히 백엔드 서버의 언어가 JavaScript였기 때문에 동일한 Datetime library, moment.js를 사용하여 그나마 깔끔하게 해결했다.


3.

그 외에도 당신이 Ionic을 피해야하는 크고 작은 이유는 아직 남아있다.

Angular의 가파른 러닝커브로 인한 얇아진 유저풀이 결과적으로 Ionic에 대한 유저풀도 얇게 만들었으며, Ionic이 예전처럼 독보적인 Non-native-based Mobile Application Development Framework도 아니게 됐다. MS에서 인수하여 무료로 풀어버린 Xamarin, 앞서 언급한 React Native, 그리고 Angular와 Vue를 이용한 NativeScript등이 Ionic 유저풀을 감소시키는 데에 주요한 원인이 되었다고 생각한다. 이렇게 얇아진 유저풀은 결국 Ionic의 완성도 저하의 근본적인 원인이라 생각하며, 문제해결을 위한 자료도 많이 줄어든 상황이라는 것.

Ionic 자체의 완성도도 떨어지는 느낌에, 새로 익혀야할 것도 꽤나 많다. 미리 만들어진 Ionic UI Component에 눈이 멀어서 이 프레임워크를 선택했고, 프로젝트를 회고해봤을 때 개발기간이 줄어든 것은 맞지만… 생각만큼의 생산성을 발휘하기엔 Angular의 러닝커브와 Ionic의 거지같음이 발목을 잡는다는 얘기이다.

Ionic 자체의 러닝커브는 공식 홈페이지 문서를 2-3시간 훑어보는 것으로 충분했지만, Angular의 러닝커브는 TypeScript를 어느정도 알고 있는 상황을 기준으로 3일 정도 걸렸던 것 같다. 물론-완벽하게 이해하기에는 터무니 없이 부족한 시간이며-Ionic 공식 홈페이지 문서를 이해하는 데에 무리없고 앱 페이지를 만들어 나갈 수 있는 정도가 기준.

중간 이상의 규모의 어플리케이션을 만들기에는 Redux와 같은 State management library가 필수적이라고 생각하는데, Redux와 Ionic의 궁합도 별로다. 3

결정적으로, 개발이 재미없다.

Ionic으로 개발한다는 것은 고난과 체념의 연속이었다. 이런 어려움은 당신이 이미 Angular에 익숙한 사람이라면 상당부분 완화될 수 있다고 생각하며, 프로덕션 레벨로의 생각이 없다면 Ionic을 추천할만하다.


사족.

  • TypeScript는 정말 간단한 토이 프로젝트에나 써봤지만, 이번 기회에 TS로 개발하면서 꽤 많은 매력을 느꼈다. 대부분의 에러를 Compile-time에 잡아낼 수 있다는 것은 개발자에게 주어진 크나큰 축복이다. Vue는 2.6버전 부터 TypeScript에 대한 지원을 본격화한다고 하니 현재 짜여져 있는 불안정한 JS 코드들을 모두 TS로 포팅하고 싶은 마음이 굴뚝같다. 주로 사용하는 에디터가 TypeScript로 짜여진, 그리고 TypeScript의 개발을 주도하고 있는 MS에서 개발하는 VSCode이기 때문인지.. 정말 타입 추론에 있어서 만큼은 황홀한 경험이었다.
  • Redux는 Angular와 그다지 궁합이 좋지 않은 것 같다. Angular는 내부적으로 RxJs의 Observable을 사용하는데, Redux를 붙이느니 Mobx를 붙이는게 더 낫지 않을까 싶다. 특히, Ionic을 프로토타이핑과 중소규모의 애플리케이션에서만 사용할거라면, (대규모 어플리케이션에 적합한) 4 Redux는 더더욱 나쁜 선택이 될 수 밖에 없다.
  • Launcher icon, Splash screen을 커맨드 한 번으로 화면 dpi에 맞춰서 와장창 뽑아주는 부분만큼은 Ionic을 깔 수 없다. 정말 잘 만들어놨다.
  • Ionic Core의 완성도는 언급한 바와 같이 구리구리 하지만, Ionic UI Component의 완성도는 꽤 봐줄만 하다. 시각적으로 엄청 깔끔하게 뽑히진 않았지만, 컴포넌트 사용에 있어서의 직관성이 꽤 준수하다.
  • 퍼포먼스도 괜찮은 편이다. LG G2와 성능상으로 매우 유사한 Nexus 5에서도 버벅임없이 잘 돌아간다. 노인학대 물론, 네이티브 앱보다는 버벅이지만!

  1. 안드로이드만 개발하면 됐지만, 본인이 마지막으로 안드로이드를 개발해본 시점이 4.4 킷캣에서 5.0 롤리팝으로 넘어가던 먼 옛날 얘기라.. 
  2.  20분 가량 검색해봤지만 아이오닉 포럼의 링크를 찾지 못했다. 
  3. 앞서 말한 Ionic의 Router가 말썽이다. 
  4. 본인의 주관적인 의견

2 thoughts on “내가 경험한 Ionic Framework (2+)”

Leave a Reply