Ionic Vs. React Native, 어떤 프레임워크가 크로스 플랫폼 모바일 앱 개발에 좋을까

Ionic Vs. React Native, 어떤 프레임워크가 크로스 플랫폼 모바일 앱 개발에 좋을까

AngularJS를 기반으로 한 Ionic1과 Angular를 기반으로 하는 Ionic2+를 모두 프로젝트에 적용해본 입장에서 최근 React Native를 선호하는 현상에 대해 이 두 프레임워크를 비교해보아야 겠다는 생각이 들어 자료 조사를 시작했습니다. 이 둘의 역사보다는 현재 이 시점에서 만약 두 프레임워크 중 하나를 선택한다면 각각이 가지는 장점과 단점이 무엇인지에 중점을 두었어요.

우선 참고한 레퍼런스를 보시면 아시겠지만 Ionic과 React Native를 비교하는 글들이 적지는 않은만큼 이 주제에 대한 논의가 꽤 되었다는 것을 알 수 있습니다. 일반적인 얘기를 포함해서 Ionic 포럼에서 말하는 내용과 React Native 개발자의 의견까지 종합했고, React Native보다는 Ionic 개발에 익숙한 저의 관점에서는 어떤 생각이 드는지 정리해보았습니다.

Ionic 개요

Ionic은 하이브리드 모바일 앱 개발에 사용되는 오픈소스, 크로스플랫폼 프레임워크 입니다. HTML5 언어를 기반으로 하고, Cordova나 PhonGap을 사용해서 iOS 또는 Android 하드웨어 기능에 접근할 수 있습니다. React Native에 비해 특징적인 점은 첫째, 모바일 기기뿐만 아니라 웹, PWA에도 동일한 코드를 적용가능하다는 점이고, 둘째, 모바일 기기의 WebView 위에서 동작한다는 점입니다.

Ionic의 장점

리액트 네이티브는 앱에서만 동작가능하지만 Ionic은 앱 뿐만 아니라 프로그레시브 웹앱에도 적용 가능하고, 한번 작성한 코드는 별다른 수정없이도 iOS, Android로 빌드 가능합니다. React Native가 각각의 모바일 기기의 플랫폼에 맞게 코드를 수정해야하는 것과는 차이가 있으며 그래서 빠른 개발이 가능합니다.

Ionic의 단점

하이브리드 앱의 치명적인 단점중 하나인 성능에서의 이슈가 있습니다. 최신 모바일 기기들의 성능이 워낙 좋아져서 왠만한 기능은 무리없이 동작한다 해도 하드웨어 기능을 많이 사용하거나 고품질의 애니메이션, 트랜젝션을 적용할 때 네이티브 앱과 비교해 성능상 차이를 느끼게 됩니다.

그리고 제가 경험했을 때에는 Ionic의 철학이기도 하고 장점에서 언급을 한 "write once, run everywhere" 가 완전하지는 않았습니다. 특히 하드웨어 기능을 사용할 때 Cordova 플러그인을 사용하는데 iOS, Android 용 플러그인이 따로 존재하고 어떤 기능의 경우 특정 플랫폼을 지원하지 않거나 잘 동작하지 않는 경우가 있는데 포럼에서도 이 문제를 빠르게 해결하고 있지는 못하는 것 같습니다. 말하자면 하드웨어 기능을 네이티브 앱만큼 쓰는데 한계가 있다는 것이죠. Cordova 플러그인을 수정할 수도 있지만 그러려면 Cordova의 아키텍처와 결국 Android 언어 및 API를 알아야 합니다.

종합적으로 말하면 Ionic은 프로토타이핑이나 빠른 개발이 필요한 경우 또는 작은 예산으로 많은 앱 요구사항을 가지고 있는경우, 그리고 앱 성능이 중요하지 않을 때 좋은 선택이다.

Ionic is a good choice for prototyping, or projects which have fast development needs, or if you have many app requirements with lower budgets, and whose app performance ratings aren’t paramount.

React Native 개요

React Native는 모바일 앱 개발을 가능하게 하는 자바스크립트 라이브러리입니다. Ionic과 다른 특징은 우선 자바스크립트로 작성을 한다고 해서 '웹앱'이 아니라는 점입니다. 실제 네이티브 앱을 구현하는 것과 다름없기 때문에 네이티브 앱에 가까운 룩앤필을 제공하고, 필요할 때 네이티브 코드를 혼용해서 쓸 수도 있습니다. 그리고, React Native의 목적은 가능한한 네이티브에 가깝게 만드는 것이기 때문에 플랫폼의 특정 코드는 각각 따로 개발되어야 하는 것도 Ionic과 차별적이죠.

React Native의 장점

React Native는 Ionic처럼 WebView 위에서 동작하는 것이 아니라 네이티브 코드로 컴파일 되기 때문에 Ionic과 비교했을 때 성능상 이점을 지닙니다. 그리고 리액트 네이티브를 이용해 개발된 앱은 최신 OS 플랫폼에서 지원되기 때문에 더 선호되는 경향이 있고, 커뮤니티 지원이 Ionic에 비해서 더 활발한 것으로 보입니다. (깃헙 커밋수나 컨트리뷰터 수를 본다면)

또한 더 엄격한 디자인 패턴과 패러다임을 따르기 때문에 큰 프로젝트에서 유지하는 것이 더 쉽다고 합니다. 따라서 더 안정적이며 네이티브앱같은 느낌을 느낄 수 있습니다.

React Native의 단점

레퍼런스에서 참고를 한 바에 의하면 HTML 코드를 네이티브 코드로 변환하는데 버그가 있을 수 있다고 합니다. 문제를 해결하려면 Object C나 Swift를 알아야 한다는 점이 있고, iOS를 위해 만들어져서 안드로이드를 위한 컴포넌트는 작업이 더 필요할 수도 있다고 했습니다. 아직 제대로 보지 못했지만 아무래도 iOS, Android 따로 구현해야 하는 코드의 범위가 넓다면 구현에 드는 비용 (시간)도 더 있을 듯하구요.

종합적으로 말하면 React Native는 성능이 중요하고 예산이 높은 앱에 적합하다.

+ 2019.12.09

React Native를 사용해 간단한 앱을 만들어보면서 겪은 경험을 확인하고 싶으시면 React Native 개발부터 배포까지 를 참고해보세요.

러닝 커브에 대해

레퍼런스에서 대부분 (모두는 아니었고) React Native가 Ionic에 비해 러닝커브가 높다는 의견이 있었습니다. React Native를 선택한 개발자의 글을 제외하곤요.. 그 분의 의견은 컴포넌트 재사용성이 높고 모듈화하기 쉬운점을 포함해 배우는 속도가 빠르다는 의견이었습니다. Ionic이 대체적으로 배우기 쉽다고 하지만 Angular와 TypeScript에 대한 이해, Cordova 적용까지 아직 두 프레임워크의 명확한 어려움의 정도를 파악하지 못했으며 Ionic도 React Native도 누군가에게는 쉽고 누군가에게는 어려울 수 있다는 생각이 들었습니다.

결론

여러 글들을 참조하면서 각각의 장점이 확실한 부분도 있긴하지만 아주 명확하게 장점, 단점이 확 나뉘지 않고 왈가왈부되는 면도 보았습니다. 러닝커브나 커뮤니티의 활성화 정도도 React Native를 해보다 다시 Ionic으로 돌아왔다는 사람, React Native 커뮤니티가 잘되어 있어서 좋다는 사람 등 의견이 분분해 애매한 상태에서 결론을 지어야 할 것 같습니다.

저는 Ionic이 어떤 프레임워크인지는 경험을 해보았으니 React Native로 간단한 프로젝트를 한번 해볼까 합니다. Ionic 개발을 하면서 실제로 성능상 한계를 경험했기 때문에 React Native로 구현 했을 때 어떤 성과가 있을지 궁금한 부분도 있고, 러닝커브나 플랫폼에 얼마나 의존적인지도 궁금하네요. 인사이트가 있다면 다시 글을 올려보도록 하겠습니다.

참고문헌

https://dzone.com/articles/ionic-vs-react-native-which-framework-is-better-fo

https://medium.com/swlh/react-native-vs-ionic-2-comparison-50aba900be6c

https://codeburst.io/react-native-vs-ionic-explained-a-step-by-step-evaluation-23975999887