Flutter & ReactNative를
처음 접해보고
한 잉여 공돌이의 신 문물을 통한 프로젝트 후기
근래 다양한 IT 테크 제품들을 접해볼 기회가 많았고 그러다 보니 자연스럽게 이와 관련된 이야기를 많이 했었습니다. 아직까지 여러 제품들이 남아있는데 시간적으로 여유가 많으니까 조금 나중에 이야기해보도록 하고 오랜만에 한 번 개발 관련된 이야기를 해보고자 합니다.
여러모로 정말 오랜만에 개발 관련된 이야기를 하는 것 같은데.. 여러모로 조금 두서가 없을지도 모르겠다는 생각도 많이 들고 어디서부터 풀어나갈지 여러모로 고민이 많이 됩니다. 뭐.. 그래도 이미 적기로 마음먹은 이상 차근차근 풀어나가 보도록 하겠습니다.
시작
최근 간단한 웹 앱 제작 프로젝트를 하게 되었습니다. 제가 담당하게 된 것은 별 다른 것은 없고.. 특정 주소를 띄워주는 웹뷰와 이를 컨트롤할 수 있는 버튼 몇 가지, 그리고 FCM(Firebase Cloud Messaging)을 통해서 푸시 알림을 받아서 알림 창에 띄워주는 정도입니다.
만들어야 되는 것들을 보면.. 정말 별 것 없고 어느 정도 기초 지식만 있더라도 금방 만들 수 있는 것들입니다. 문제는 이걸 그동안 틈틈이 공부하면서 가끔 이것저것 만들어보고 있던 안드로이드 OS만 만들면 되는 것이 아니라.. iOS까지 만들어야 된다는 점이었고, 서브 단말기로 아이폰을 사용하고는 있지만.. 주로 사용하는 PC 환경이 Windows 또는 Ubuntu(Linux) 환경이다 보니까 Objective-C나 Swfit 관련해서는 레퍼런스 문서 이외에는 전혀 접해볼 일이 없었습니다.
즉, iOS 앱을 만들기 위해서 새롭게 공부할 필요성이 있는 상황이었고, 저에게 주어진 시간은 그렇게까지 많지 않았습니다. 더군다나 당장 주변에는 iOS를 개발하기 위해 필수적인 환경인 Mac OS를 사용하는 하드웨어는 일절 없습니다. 결국 Mac OS를 사용하는 하드웨어를 구하거나 가상 머신을 통해서 개발을 해야 되는 상황이란 것이지요.
일단, 죽이 되든 밥이 되든 한 번 부딪혀 보자 하고 빠르게 안드로이드 OS 용 앱 제작을 끝마치고 가상 머신에 Mac OS를 설치하고 XCode를 실행시켰습니다. 그러나 제 업무용 노트북의 시스템 자원이 안 그래도 부족하다 보니까 가상 머신은 갑갑해서 사용할 수 없는 수준이었고, 결국 이건 아니다 싶어서 Mac OS를 사용하는 하드웨어를 따로 구하기로 하고 그동안 안드로이드와 iOS 공통적으로 사용할 수 있는 개발 프레임워크를 통해서 최소 뷰를 띄우고 컨트롤할 수 있는 버튼까지 구현은 해놓은 것으로 프로젝트 진행을 변경했습니다.
이후 안드로이드 OS와 iOS에서 공통적으로 사용할 수 있는 개발 프레임워크들을 하나하나 알아보게 되었고 가장 먼저 리액트 네이티브(React Native : RN, 이하 RN)를 다루어보게 되었습니다.
첫 구현은 리액트 네이티브
(React Native : RN)
RN는 페이스북에서 사용자 인터페이스를 보다 편하게 만들기 위해서 만든 자바스크립트 라이브러리, 리액트(React)를 바탕으로 안드로이드와 iOS 그리고 웹 및 UWP 앱을 개발할 수 있는 오픈소스 앱 개발 프레임워크입니다.
대표적으로 페이스북, 인스타그램, 디스코드, 테슬라, 우버 등의 앱이 RN을 통해서 개발이 되어있습니다.
제가 RN을 가장 먼저 선택한 이유는 정말 심플합니다. 언어의 기본 베이스가 다른 것도 아니고 자바스크립트입니다. 그동안 제가 개인적으로 진행한 프로젝트 대다수가 Node.JS로 되어있다 보니까 자연스럽게 자바스크립트를 사용하는 데 있어서는 큰 부담이 없었고 충분히 빠른 시간 안에 익히고 개발을 끝마칠 수 있을 것 같다는 판단이 들었습니다. 그리고 이 판단은 정확하게 맞아떨어져서 불과 하루, 이틀 사이에 FCM을 제외하고는 구현해야 될 것을 구현 끝마치고 디버깅까지 끝마쳤습니다.
그동안 리액트를 직접적으로 다루어본 적은 없지만, 어느 정도 자바스크립트 문법에 익숙해져 있다 보니까 여러모로 빠르게 진입할 수 있었고, 핫 리로드와 라이브 리로드를 통해서 수정사항들이 바로바로 반영되어서 시간 단축이 정말 많이 되었습니다.
거기에 앞서 개발되어있는 라이브러리들도 정말 많이 있을뿐더러.. 먼저 접하신 분들께서 Stack Overflow나 블로그 등에 문제 상황 시 해결할 방법들을 잘 풀어서 기재해두신 덕분에 편하게 이슈들을 해결하고 넘어갈 수 있었고요.
그리고 구현을 진행하는 도중에 친척으로부터 맥북프로를 빌릴 수 있었고, Mac OS에 RN 개발 환경을 구성한 뒤에 그동안 만들어둔 코드 그대로 가져가서 iOS 용으로 빌드해보니 문제 하나 없이 깔끔하게 돌아갔습니다. 여러모로 상당히 괜찮다고 생각했었고 빠르게 끝마치고 쉴 수 있겠다는 판단이 들어섰습니다.
다만, FCM을 통한 푸시를 구현하기 전까지 말이지요. FCM을 통한 푸시 알림을 구현한다고 여러 참고 자료들을 보면서 하나 둘 그대로 따라 했음에도 불구하고 무엇이 문제인지 모르겠지만, Firebase Console에서 앱이 정상적으로 인증이 되지 않았습니다.
만약, 빌드 과정에서 오류가 있었다면 모르겠지만.. 워링 조차 없었습니다. 그리고 분명히 따라한 참고 자료들의 샘플 결과를 보았을 때도 문제없이 되는 것을 확인했었고요. 이를 해결하기 위해서 약 2주 가까이를 계속 찾고 고민해보았지만 도저히 답이 나오지 않았고.. 더 이상의 지연은 안 되겠다는 판단이 들어서 다른 프레임워크로 테스트 삼아 구현해보기로 했습니다.
테스트 삼아 시작한 플러터
(Flutter)
플러터는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. 안드로이드 OS와 iOS를 지원하고 있으며, 가장 큰 장점이라고 하면 기존 인터페이스를 모두 버리고 자체적으로 인터페이스를 렌더링 하기 때문에 iOS에서 Material 디자인이나 Ripple 디자인을 볼 수 있고, Android에서 Cupertino 디자인을 볼 수 있으며, 네이티브 급 성능을 제공해주고 있습니다.
사용하고 있는 언어는 구글에서 웹 프런트엔드 구현을 목적으로 개발한 Dart를 사용하고 있으며, 보다 많은 개발자들이 접근할 수 있도록 RN, Xamarin 등 다른 플랫폼과 개발 차이를 비교해주는 문서가 공식적으로 제공되고 있습니다. 그러나.. 실질적으로 여러 커뮤니티 및 서비스에 올라와있는 플러터 관련 문서를 보면 RN과 대비해서는 아직까지 많은 분들이 접근하고 있는 것 같지는 않습니다.
제가 플러터를 테스트 삼아 구현하기로 마음먹은 이유는 정말 심플합니다. Firebase가 어디에서 운용하고 있는 서비스인가요? 예전에는 독자적인 회사였지만 지금은 구글이 인수해서 운용하고 있는 서비스입니다. 즉, 이러나저러나 구글이 하고 있는 것이기 때문에 상대적으로 FCM을 통한 푸시 알림 구현하는데 정말 편할 것이라 생각했고, RN에서 이리저리 푸시 알림이 안 되는 이슈를 해결하기 위해 고민한 2주가 정말 아까울 정도로 손쉽게 구현했습니다. (아.. 아까운 내 2주..)
이후 나머지 구현해야 될 것들을 구현하기 시작했고.. Dart를 전혀 알지도 못했지만 레퍼런스 문서 조금 살펴보고 참고 자료들을 이것저것 보는 것으로 RN으로 구현할 때와 마찬가지로 하루 만에 구현을 다하고 둘째 날부터 디버깅에 들어갔는데..
뭐라고 해야 될까요? 플러터의 가장 큰 문제점을 이야기하자면 아직까지 공식 플러그인들의 아직 1.0.0을 넘긴 것이 몇 개 없을 정도로 버전이 너무 낮다 보니까.. 지원해주고 있는 것들도 분명하게 한계가 있고, 자바나 RN으로 개발할 때와 비교해보면 이슈 하나를 해결하는데 생각했던 것보다 시간이 오래 걸렸습니다.
특히, 웹뷰 플러그인(webview_flutter). 분명히 공식 플러그인인데.. 서드파티로 나와있는 다른 웹뷰 플러그인과 비교해서 성능이 너무 떨어집니다. 정확하게는 제공되고 있는 기능상의 차이가 너무나도 큽니다. 웹 페이지 불러와서 몇 가지 동작하는 데 있어서 해결 안 되는 이슈가 몇 가지 있었는데.. 플러그인을 서드파티로 바꾸는 것으로 바로 해결된 것이 한 둘이 아니었습니다. 차후에 분명히 바뀌어서 개선되어있을 여지가 있지만.. 제가 이야기하는 현시점에서는 웹뷰에 있어서는 공식 플러그인보다 서드파티 플러그인 사용하시는 것을 적극적으로 권장합니다.
플러터와 RN를 비교했을 때
너는 어느 쪽이 더 나았는가?
플러터와 RN, 이 두 가지 개발 프레임워크를 비교했을 때 어느 쪽이 더 나았는가를 이야기한다면.. 둘 다 기본적인 구성과 형태는 언어의 차이가 있을 뿐 비슷하다고 생각합니다. 개발 환경도 둘 다 Visual Studio Code에서 바로바로 실행하면서 할 수 있고요.
RN이 플러터보다 출시된 지 더 오래되어있다 보니까, 이미 사용해서 만들어진 결과물들이 많이 나와있고 여러모로 참고해서 볼 수 있는 자료들이 많이 있습니다. 이에 따라서 구현에서도 그렇고 이슈 해결에서도 정말 빠르게 해결하고 넘어갈 수 있습니다.
한편으로 푸시 알림 문제가 없었다면 제가 플러터를 건들 일이 계속 없지 않았을까 생각되기도 합니다.
플러터 같은 경우 분명히 좋은 개발 프레임워크임은 분명합니다. 특히 인터페이스 구현에 있어서는 자체 랜더링으로 OS 상관없이 완전히 동일한 테마의 인터페이스를 제공해줄 수 있다는 점은 정말 큰 메리트입니다. 하지만.. 아직까지 공식 플러그인의 버전이 낮다 보니까 한계가 분명하게 있고, 이슈 해결에 있어서도 상대적으로 접근하고 계신 분들이 적다 보니까 너무 틀어 막히게 되어 타인의 도움이 필요로 할 때 상대적으로 힘들었습니다.
시간이 지나고 나면 또 상황이 달라질 가능성이 매우 높지만.. 지금 현시점에 있어서는 플러터보다는 RN이 더 낫다고 봅니다.
마치며..
간단한 웹 앱 제작 프로젝트를 통해서 플러터와 리액트 네이티브를 다루어보고 느낀 점을 바탕으로 조금 두서없긴 하지만 후기를 이야기해보았습니다. 큰 도움은 되지 못하겠지만.. 조금이나마 어떤 개발 프레임워크를 다루어 보는 게 좋을까 고민하시는 분들께 도움이 되었으면 좋겠습니다.
아직까지 프로젝트가 완전히 끝난 것은 아니고 남아있는 일정과 구현해야 될 것들이 조금 있다 보니까 차후에는 또 생각이 바뀔지도 모르겠지만, 그건 그때 가서 다시 이야기하는 것으로 하고.. 이만 글을 마칩니다.
감사합니다.
