*이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요😆
기업은 고객에게 최고의 가치를 제공할 수 있는 앱을 개발하고 싶어 합니다. 하지만 안드로이드와 iOS 용으로 네이티브 앱을 따로 만드는 것은 별도의 코드베이스1를 관리가 필요하며 힘들고 많은 시간이 소모되는 일입니다. 이러한 여러움을 해결하기 위해 등장한 것이 크로스플랫폼(Cross-platform) 입니다.
크로스플랫폼 앱은 하나의 코드로 여러 플랫폼에서 동작하기 때문에 훨씬 빠르게 앱을 개발할 수 있습니다. 그러나 이러한 크로스플랫폼이 하나만 있는 것은 아니며, 각자가 서로 다른 기능과 장점을 가지고 있습니다.
본 글에서는 가장 널리 사용되는 두 가지 모바일 앱 개발 크로스플랫폼 프레임워크인 리액트 네이티브(React Native)와 플러터(Flutter)의 차이에 대해 알아보겠습니다.
인기
크로스플랫폼 앱 개발 기술에 대한 인기는 나날이 높아지고 있으며, 리액트 네이티브와 플러터가 가장 영향력 있는 프레임워크입니다.
리액트 네이티브는 2015년에 출시되었고 플러터는 2018년에 출시되었습니다. 따라서 리액트 네이티브가 플러터보다 큰 커뮤니티를 가지고 있고 더 성숙한 개발 언어이며 든든한 커뮤니티 지원을 받을 수 있습니다. 하지만 플러터 2.0의 출시와 함께, 플러터의 약진이 기대되고 있습니다.
아래 구글 트렌드를 보면 플러터의 인기가 나날이 높아지고 있다는 것을 확인할 수 있습니다.
여기에서 최신 Google 트렌드를 볼 수 있습니다.
러닝 커브
어떤 기술이 더 배우기 쉽다고 생각하시나요?
리액트 네이티브는 대부분의 개발자에게 익숙한 자바스크립트 기반의 JSC를 수년째 사용하고 있기 때문에 매우 쉽게 익힐 수 있습니다. 대부분의 리액트 개발자는 역시 별다른 학습 없이 모바일 애플리케이션 개발을 시작할 수 있습니다.
하지만 플러터는 대부분의 개발자에게 생소한 다트(Dart) 언어를 사용하기 때문에 플러터를 익히기 위해서는 이 언어를 배워야 한다는 진입장벽이 있습니다.
성능
성능에 대해 한번 비교해 보도록 하겠습니다.
플러터는 구글에서 개발한 다트 프레임워크를 사용하고 있으며, 이 언어는 skia2 그래픽 라이브러리와 C/C++ 엔진을 사용합니다. C/C++ 엔진을 사용한다는 점에서부터 이미 그 차이를 예상할 수 있습니다. 이러한 언어적 특성으로 인해 네이티브 플랫폼과 프레임워크 사이에 추가적인 커뮤니케이션과 변환이 필요하지 않으며 더 빠른 성능을 보장합니다. C/C++ 로우레벨(low-level) 언어3로 분류되며 컴파일 시 기계 코드에 더 가깝기 때문에 플러터는 보다 빠르고 부드럽게 동작합니다.
반면 리액트 네이티브 아키텍처는 JS Bridge로 불리는 자바스크립트 런타임 환견을 기반으로 하며 페이스북에서 개발한 FLUX 아키텍처를 사용합니다. JS Bridge는 자바스크립트 모듈과 네이티브 플랫폼 간의 커뮤니케이션을 생성하고 런타임 중에 코드를 네이티브 코드로 컴파일합니다. 이 때문에 성능에 영향을 주는 CPU와 메모리의 사용량이 더 높습니다.
하지만 리액트 커뮤니티와 페이스북은 리액트 네이티브의 성능을 향상시키기 위해 열심히 노력하고 있으며, 리액트 네이티브 커뮤니티에서 많은 성능 최적화 작업이 진행중 입니다.
페이스북은 최근 안드로이드에서 리액트 네이티브 모바일 앱의 성능을 개선하기 위해 헤르메스(Hermes)라는 새로운 자바스크립트 엔진을 발표했습니다. 앱의 렌더링 시간을 최적화하고 메모리와 CPU를 덜 사용하며 앱 크기 또한 작아집니다. 이에 대해서는 다른 글에서 다루도록 하겠습니다.
커뮤니티 지원
앞서 언급했듯이 리액트 네이티브는 페이스북이 2015년에 출시했으며 플러터보다 훨씬 성숙한 프레임워크입니다. 그동안 리액트 네이티브 커뮤니티는 크게 성장했고 리액트 네이티브의 성공에 지대한 공헌을 했습니다. 커뮤니티에서 개발한 모든 npm4 패키지를 쉽게 찾아 사용할 수 있습니다. 만약 어딘가에 문제가 있다면 커뮤니티에 이미 그 해답이 있는 경우가 대부분입니다.
플러터의 경우 구글이 2018년에 출시한 프레임워크로 커뮤니티의 규모가 네이티브에 비해 작습니다. 아직 리액트 네이티브의 성숙도에는 미치지 못함, 종종 pub5에서 원하는 패키지를 찾지 못할 수도 있습니다. 그러나 플러터 2.0이 출시된다면 점유율이 증가하며 이러한 상황은 바뀔 수 있습니다. 점점 더 많은 개발자가 리액트 네이티브보다 좋은 성능과 플랫폼 호환성을 갖춘 플러터를 선택하고 있습니다.
크로스 플랫폼
모든 기업과 개발자는 단일 코드베이스에서 앱스토어와 구글 플레이 모두에서 동작하는 앱을 만들고 싶어합니다. 플러터와 리액트 네이티브는 이러한 시장을 양분하고 있습니다.
다음과 같은 경우 크로스플랫폼 개발을 채택합니다.
· 단기간에 앱을 개발하고 싶을 경우
· 네이티브 앱의 제약사항을 극복하기 위해
· 시장에 변화에 맞춰 빠르게 앱을 수정해야 할 때
플러터 코드는 자바스크립트로 컴파일 할 수 있습니다. 따라서 하나의 코드베이스를 안드로이드, iOS, 웹에서 동일하게 사용할 수 있습니다. 리액트 네이티브는 iOS와 안드로이드 애플리케이션에서 네이티브 방식으로 렌더링되는 실제 코드를 작성할 수 있는 프레임워크입니다.
최근 출시된 플러터 2.0 에서는, 동일한 코드베이스를 사용하여 iOS, 안드로이드, 윈도우, macOS, 리눅스의 5가지 운영 체제에서 동작하는 네이티브 앱을 개발할 수 있습니다. 또한, 크롬, 파이어폭스, 사파리, 엣지와 같은 대부분의 최신 브라우저에서 실행되는 웹 앱을 만들 수 있습니다. 심지어 자동차, TV, 스마트 가전 제품에도 플러터 앱을 탑재할 수 있습니다.
테스트
테스트는 최소한의 시간과 노력으로 코드의 원활한 동작을 보장하기 위해 매우 중요합니다.
리액트 네이티브는 통합 및 UI 수준의 테스트에 대한 공식 지원이 없스빈다. RN 앱을 테스트하는 데 사용할 수 있는 유닛 테스트 수준의 프레임워크는 몇 개가 전부입니다. 개발자는 Appium 또는 Detox와 같은 써드파티 도구를 사용해야 합니다. 또한 iOS 앱을 앱스토어에 자동으로 배포할 수 없습니다. 이 때문에, 리액트 네이티브에서는 Xcode를 통해 앱스토어에 수동으로 앱을 배포해야 합니다.
반면, 플러터는 탁월한 테스트 자동화를 지원합니다. 앱에 대한 유닛, 위젯, 통합 테스트를 수행할 수 있는 기능을 제공하며 이에 대해 상세한 공식 문서를 제공합니다. 또한 플레이 스토어와 앱 스토어에서 안드로이드와 iOS 용 앱을 빌드하고 출시하기 위한 문서도 제공합니다. 뿐만 아니라 배포 프로세스에 대해서도 훌륭한 공식 문서를 제공합니다.
애플리케이션 크기
프레임워크의 선택은 앱의 크기에 큰 영향을 미치며, 앱의 크기는 사용자에게 민감한 부분입니다.
간단한 리액트 네이티브 앱의 크기는 7MB이지만 기본적인 디펜던시(dependency)가 추가되면 최대 13.4MB까지 증가합니다. 코드 스플리팅(Code Splitting)을 사용하면 네이티브와 외부 라이브러리를 나누어 빌드하기 때문에 앱 크기를 줄일 수 있습니다. 여기에 헤르메스 엔진을 사용하면 크기를 더 줄이는 것이 가능합니다.
반면, 플러터에서 만든 간단한 Hello World 앱의 크기는 7.5MB입니다. 플러터 앱의 크기는 다트 가상머신과 C/C++ 엔진의 영향을 받습니다. 그러나 플러터에서도 -split-debug-info 와 같은 특정 태그를 사용하면 코드 크기를 줄일 수 있습니다.
적용 사례
리액트 네이티브
· 페이스북 – 심플한 네비게이션을 갖춘 강력하고 사용자 친화적인 모바일 UI를 개발했습니다.
· 월마트 – 네이티브와 동일한 부드러움을 자랑하는 인앱 애니메이션을 구현해 사용자 경험을 개선했습니다.
· 블룸버그 – 자동 코드 리프레시 기능을 통해 유기적이고 사용하기 쉬운 개인화 콘텐츠를 제공합니다.
· 인스타그램 – 별도의 네비게이션을 개발하지 않고 WebView 형태로 푸시 알림을 구현했습니다.
· 사운드클라우드(SoundCloud) – iOS와 안드로이드에 동시 배포가 가능해지며 빠른 업데이트와 패치가 가능해졌습니다.
· 윅스(Wix) – 수정 가능한 네비게이션과 스크린 옵션 개발에 적용하여 빠른 개발과 민첩성을 확보했습니다.
플러터
· 구글 애즈 – iOS와 안드로이드에 일관된 사용자 경험을 제공하기 위해 다트 패키지, 파이어베이스 애드몹(Firebase AdMob) 플러그인, 플러터의 스태틱 유틸리티 클래스를 사용했습니다.
· 텐센트 – 5명 미만의 개발자가 다중 플랫폼에서 지원을 사용자 간에 연결되고 공유되는 사용자 경험을 구축했습니다.
· 알리바바 – 단일 코드베이스로 모든 애플리케이션에서 높은 FPS를 제공하는 단일 탭 네비게이션 경험을 구축했습니다.
· 이베이 – 플러터와 파이어베이스(Firebase)를 통합하여 eBay Motors을 위한 autoML을 개발했으며, 이를 통해 자사에 특화된 복잡하고 강력한 최신 AI 기능을 누리고 있습니다.
· BMW – 앱 관리에 flutter_bloc을 사용하여 고성능 사용자 인터페이스를 개발했습니다.
· 리플렉틀리(Reflectly) – 리액트 네이티브에서 플러터로 마이그레이션 했으며, StreamBuilder 위젯을 통해 고품질 데이터 이벤트를 생성함으로써 데이터 동기화를 개선했습니다.
위 사용 사례는 여기에는 참고했습니다.
결론
리액트 네이티브는 간단한 크로스플랫폼 애플리케이션을 만드는 데 적합하고, Flutter는 MVP 애플리케이션을 만드는 데 탁월합니다.
크로스플랫폼은 빠른 개발과 시장 출시가 가능하게 만들어줍니다. 또한, 써드파티 라이브러리를 활용하여 더욱 효율적으로 앱을 개발할 수 있습니다.
아래에 해당된다면 리액트 네이티브를 선택하세요.
· 크로스플랫폼 모듈을 통해 현재 애플리케이션을 확장하고 싶습니다.
· 아주 가벼운 네이티브 애플리케이션을 개발하는 것이 목표입니다.
· 비동기 빌드와 반응형 UI로 애플리케이션을 만들고 싶습니다.
· 프로젝트에 투자할 시간이 충분합니다.
아래에 해당된다면 리액트 플러터를 선택하세요.
· 개발하려는 앱이 네이티브의 모든 기능을 필요로 하지 않는 경우
· 예산과 납기 일정이 촉박합니다.
· 더 빨리 개발하여 빠르게 시장에 출시하고 싶습니다.
· 60FPS ~ 120FPS의 성능이 필요합니다.
· 위젯과 약간의 테스트만으로도 커스텀 UI를 만들고 싶습니다.
1 특정 소프트웨어 시스템, 응용 소프트웨어, 소프트웨어 구성 요소를 빌드하기 위해 사용되는 소스 코드의 전체 집합
2 윈도우 GDI 라이브러리 같이 UI 그래픽에 이용할 수 있는 2D 기반 오픈소스 라이브러리
3 사람이 이해하기 어렵고 기계 언어에 더 가까운 언어, 일반적으로 개발 난이도는 높지만 좋은 성능을 보여준다.
4 Node.js에서 사용할 수 있는 모듈들을 패키지화화여 모아둔 저장소로 쉬운 다운로드와 설치를 제공한다.
5 다트에서 사용할 수 있는 패키지를 쉽게 다운로드하고 설치할 수 있도록 제공하는 도구
출처: https://medium.com/quoality/flutter-vs-react-native-in-2021-d3265e57f8dc
국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?
