오늘은 앱 크로스 플랫폼에서 현재 가장 많이 사용되는 React Native와 구글의 야심작인 Flutter를 비교해보는 시간을 갖도록 해보겠습니다.
왜 크로스 플랫폼 앱을 개발할까요?
기업의 규모가 굉장히 크고 많은 엔지니어들을 고용할 수 있다면 네이티브 앱 개발을 진행하는 것도 좋은 방법입니다. 각 OS 별 고유의 기능들을 모두 활용하며 크로스 플랫폼 개발에서 생기는 추가적 버그 및 기술적 문제를 최소화할 수 있기 때문입니다. 하지만 기업이 작을수록 많은 엔지니어를 고용하기는 힘들고 특정 OS를 사용하는 고객 그룹을 모두 포기할 수는 없기 때문에 스타트업의 경우 소스코드는 하나로 관리하고 두 개의 OS에 모두 배포할 수 있는 크로스 플랫폼 프레임워크를 많이 사용합니다. 현재 대표적으로 Facebook이 개발을 주도하는 React Native와 Google이 개발을 주도하는 Flutter가 양대 산맥을 이루고 있습니다.
언어비교
React Native는 Javascript를 언어로 사용합니다. React를 개발한 Facebook이 React의 인기를 모바일에서도 이어가기 위해 2015년도에 React Native를 출시하였습니다. React 계열의 Javascript는 JSX로 일반적인 JQuery나 Vanilla JS와는 코드 구조적으로 살짝 다른 면이 있지만 일반적으로 프론트엔드 자바스크립트를 조금만이라도 만져봤다면 쉽게 React 계열로 넘어올 수 있을 정도로 진입장벽이 높은 편은 아닙니다. 이 뜻은 나중에 앱이 매출을 내고 성장하기 시작했을 때 개발 인력을 조금 더 쉽게 찾을 수 있다는 큰 장점이 있다는 걸 의미합니다. 특히나 React와 React Native의 경우 언어적 차이점은 거의 없다고 봐도 무방하기 때문에 React 개발자를 채용해도 빠른 시일 내에 충분히 React Native 작업을 수행할 수 있습니다.
Flutter는 특히나 한국에선 조금 생소한 언어인 Dart 언어를 사용합니다. Dart 언어는 구글에서 Javascript를 대체하겠다고 내놓은 야심작이지만 Flutter가 출시되기 전까지 철저히 외면받고 최악의 언어 중 하나로 꼽히던 적도 있었습니다. Dart는 Javascript와 비교했을 때 그나마 static typing이라는 장점이 있어서 사용하는 마니아층이 조금 있었으나 그마저도 Typescript의 출시와 함께 장점이 사라져버렸습니다. 처음 Flutter가 출시되었을 때 언어 빼고 다 완벽하다는 말도 있었지만 베타 때부터 써온 경험으론 사용하는 데는 큰 어려움이 없습니다. 특히 React를 사용해봤고 OOP 언어를 하나 사용해봤다면 금방 습득할 수 있습니다. 다만 Flutter의 특성상 프론트엔드 개발자들이 많이 사용하게 되는데 프론트엔드만 사용하던 분들에겐 생소한 부분이 충분히 많이 있을 수 있습니다. 결과적으로 성장 및 도약을 해야 하는 시기에 개발자 수급에 문제가 생길 수도 있습니다.
외부 패키지 비교
React Native는 React와 라이브러리 호환성이 상당히 좋습니다. 여기서 오는 장점은 정말 수도 없이 많습니다. React가 2013년도에 출시한 만큼 상당히 성숙한 라이브러리 생태계가 잘 조성되어 있는데 2년 뒤에 출시된 React Native가 React에서 조성된 수많은 패키지들을 대부분 호환해서 사용할 수 있다는 건 정말 큰 장점입니다. 이미 React에서 사용하시는 좋아하는 패키지가 있다면 그대로 React Native에 끌어다 써도 될 가능성이 상당히 높습니다. 특히나 일반적인 RESTful API를 사용하지 않으시고 GraphQL을 사용하시는 경우 GraphQL 패키지 중 최강자인 Apollo GraphQL 패키지를 사용할 수 있기 때문에 해당되시는 경우 정말 큰 장점이라고 볼 수 있습니다.
Flutter는 현재 2019년 11월 기준으로 이제 공식 출시가 1년이 되어가는 프레임워크입니다. 결과적으로 당연하게도 React Native만큼 큰 패키지 생태계를 조성하지 못하고있고 Flutter팀 내부에서 개발하는 공식 패키지들도 아직 0.x 버전들로 성숙하지 못한 형태입니다. 물론 구글팀이 선두에 있는만큼 빠르게 업데이트가 진행되고 있긴 하지만 아직은 패키지들 버전만 보고도 상사에게 쓰지말란 소리를 들을 수도 있는 단계입니다. 이부분은 어떤 앱을 만드냐에 따라 다르지만 앱의 방향성을 정확히 하고 제작하려는 앱에 꼭 필요한 패키지들이 완성도가 얼마나 높은지 사전조사를 충분히 하신뒤에 Flutter를 사용하시는게 좋을 것 같습니다.
State Management
React가 엄청난 인기를 누리며 State Management라는 단어가 여기저기서 들리기 시작했습니다. 더이상 전통적인 방식대로 페이지별로 State Management를 하지 않고 글로벌하게 관리하는 패키지들이 인기를 끌기 시작했습니다. React에서 빠르게 인기몰이를 한 State Management 라이브러리는 단연코 Redux라고 할 수 있고 요즘은 비슷한 성격의 라이브러리들이 같이 인기를 끌고있습니다. 위에서 설명드렸다시피 만일 React에서 좋아하시는 State Managemnt 라이브러리가 있다면 그대로 React Native에서 사용 가능할 가능성이 높습니다. 난이도 측면에서 봤을때는 처음 React 계열의 State Management를 접한다면 처음보는 형태에 이해하는데 시간이 어느정도 걸릴 수 있지만 한번 이해하고나면 관리하기 쉬운편에 속한다는 장점이 있습니다.
Flutter 팀에서 공식적으로 추천하는 State Management는 BloC 패턴입니다. Stream을 활용해서 State Management를 하는 건데 Stream을 사용해보신 경험이 많이 없는 분들은 상당한 어려움을 겪으실 수도 있습니다. 앱이 복잡하지 않을 때는 한 형태의 BloC 패턴을 계속 사용하면 되는데 나중에 Stream 끼리 합치고, 연결하고, 여러 결괏값을 동시에 받는 등 복잡한 오퍼레이션을 하실 경우 상당히 코드가 난잡해질 가능성이 있습니다. 이런 단점이 있음에도 잘 다룰 수 있게만 된다면 서버와 실시간 통신을 직접 할 수도 있고 Optimistic Response를 설계하는데도 더욱 간단한 면이 많이 있습니다.
개발프로세스 비교
사실 이 부분이 가장 중요하다고 생각합니다. 겉으로 보기에는 React Native가 장점이 굉장히 많아 보이지만 실제로 개발을 시작하면 오히려 그 장점들이 모두 의미 없을 정도로 개발 프로세스가 안 좋은 편이라고 생각합니다. 저도 세 개의 앱을 React Native로 제작을 해봤는데 말만 크로스 플랫폼이지 개발 프로세스는 크로스 플랫폼으로 느껴지지 않습니다. React Native는 Android와 iOS 컴포넌트들을 끌어다 쓰는 bridge 역할을 하는데 이 부분에서 한 컴포넌트를 화면에 띄웠을 때 Android에서 상당히 다르게 보이거나 iOS에서 보지 못한 버그가 Android에서는 존재하는 등 굉장히 크리티컬한 문제들이 생기는 경우가 많습니다. 한때는 iOS에서 한글이 정상적으로 입력되지 않던 버그도 있었는데 이제 해결이 되었는지 모르겠습니다. 싱글 코드 베이스는 맞지만 실제로는 iOS와 Android 각각 코드를 다르게 작동하는 조건문이 상당히 많아진다는 단점이 있고 그런 만큼 플랫폼별 디버깅을 하는 시간이 늘어납니다. 사실 이 부분은 Flutter가 나타나기 전엔 어느 정도 견뎌야 하는 부분이라고 생각하고 있었는데 Flutter가 나온 뒤로는 상당히 불편한 부분으로 느껴졌습니다.
Flutter의 가장 큰 장점은 여기에 있습니다. Flutter는 React Native와 다르게 직접 화면에 컴포넌트를 그려버립니다. 결과적으로 OS별로 제공되는 컴포넌트들을 활용할 필요가 없어서 OS별 문제가 거의 없고 일관성 있게 작동됩니다. React Native에서 OS별 차이때문에 생기는 버그들이 워낙 많기때문에 Flutter의 이런부분이 어떻게보면 지극히 정상적임에도 굉장힌 장점으로 받아들여지게 됩니다. 더 나아가 React Native에 비해 Flutter에서 기본으로 제공해주는 컴포넌트들이 훨씬 더 많고 만일 색다른 컴포넌트가 필요하다면 직접 컴포넌트를 그리고 애니메이션을 제작하는것도 가능하기때문에 Flutter가 이 부분에선 상당한 장점을 갖고있다고 볼 수 있습니다.
결론
React Native와 Flutter 모두 상당한 완성도를 자랑하는 크로스플랫폼 개발 프레임워크입니다. 각각 Facebook과 Google이 개발을 주도하고 있어 완성도와 업데이트의 속도는 빠른 편입니다. 이 글에서 두 프레임워크의 언어의 차이, 외부 패키지 완성도 및 갯수의 차이, 상태관리의 차이 그리고 개발 프로세스의 차이에 대해 표면적인 분석을 해봤습니다. 결과적으로는 React에 익숙한 개발자들이 많거나 빠른 성장을 위해 개발자 수급이 빨라야 한다면 React Native를 사용하고, 좋은 개발프로세스를 즐기며 프레임워크와 함께 성장할 자신이 있다면 Flutter를 사용하면 좋을 것 같다는게 저의 주관적인 생각입니다.
P.S 개발 커뮤니티들을 보면 Flutter를 플루터라고 발음하시는 분들이 계시는데 플러터로 발음하는 게 맞습니다.
Flutter 언어 강의
Flutter 에서 사용하는 Dart 언어 강의를 아래 채널에서 진행중입니다. 많은 관심 부탁드립니다!