*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요😆
이 포스트는 Shubham Suresh Lad와 Munikiran Narpareddi가 썼습니다.
많은 기업이 고객에게 최고의 가치를 제공하기 위해 앱을 개발하고자 합니다. 안타깝게도 안드로이드와 iOS 용 네이티브 앱을 만드는 것은 코드베이스의 분리를 유지해야 하기 때문에 힘들고 시간이 많이 걸립니다. 이를 극복하기 위해서 크로스 플랫폼 개발이 도움이 될 것입니다.
크로스 플랫폼 앱은 여러 플랫폼에 동일한 코드를 사용할 수 있기 때문에 개발 속도가 더 빠릅니다. 그러나 효율적인 크로스 플랫폼 개발은 각각의 다른 프레임워크에 다른 기능과 이점을 제공 합니다.
이 포스트에서는 두 가지 가장 유명한 크로스 플랫폼 모바일 앱 개발 프레임워크 ‘플로터 VS 리액트 네이티브’를 비교하겠습니다.
플러터 VS 리액트 네이티브
대중성
크로스 플랫폼 앱 갭라 테크놀로지에 대한 인기는 날로 높아지고 있으며, 이 분야에서는 React-Native와 Flutter가 절대적으로 우세합니다.
React-Native는 2015년 출시됐고, Flutter는 2018년도에 출시되었기 때문에 React Native의 커뮤니티는 Flutter 보다 크고, React Native는 개발과 커뮤니티 서포트 면에서 Flutter보다 발달되었지만, Flutter 2.0의 출시로 Flutter의 인기가 엄청나게 상승할 것을 예상할 수 있습니다.
구글 트렌드에 이 둘을 찾아보면 Flutter의 인기가 나날이 높아지고 있음을 알 수 있습니다.
학습 곡선
어떤 기술이 더 배우기 쉽다고 생각하시나요?
React Native는 몇 년 전부터 사용해 온 JSX, 즉 javascript를 기반으로 사용하고 있으며, 개발자 대부분이 javascript에 익숙하여 React Native에 매우 쉽게 적용시킬 수 있습니다. 또한 이를 통해 대다수의 리액트 개발자는 모바일 애플리케이션 개발을 즉시 시작할 수 있습니다.
하지만 Flutter의 경우 시장에서는 낯선 다트언어를 사용하고 있고 대부분의 개발자들은 이 언어를 전혀 모르기 때문에 먼저 이 언어를 익힌 후 Flutter에 대해서도 배워야 함으로 먼저 학습 능력을 키워야 할 수도 있습니다.
퍼포먼스
이제 퍼포먼스에 대해 이야기해봅시다.
Flutter가 Google에서 개발한 다른 프레임워크를 사용하는 경우, 그 다음으로는 Skia 그래픽 라이브러리와 C/C++ 엔진을 사용할 것입니다. C/C++ 엔진을 보면 결과를 유추해 볼 수 있는데요, 이는 네이티브 플랫폼과 프레임워크 자체와의 커뮤니케이션 그리고 변환경로가 요구되지 않기 때문에 프레임워크가 더욱 빠르게 퍼포먼스 할 수 있도록 합니다. C/C++ 엔진은 낮은 레벨의 프로그래밍 언어로 간주되고, 컴필레이션 중 머신 코드에 가까운 C/C++ 엔진을 갖추면 Flutter High 퍼포먼스가 향상되고 원활해지며 속도가 향상됩니다.
반면, React-Native 아키텍처는 JS Bridge로 알려진 Javascript 실행환경을 기반으로 하며 Facebook에서 개발한 FLUX 아키텍처를 사용합니다. JS Bridge는 JavaScript 모듈과 네이티브 플랫폼 간의 커뮤니케이션을 만들고 런타임 동안 코드를 네이티브 코드로 컴파일합니다. 이 프로세스에는 성능에 영향을 미치는 CPU 활용과 메모리가 더 많이 필요합니다.
하지만 리액트 커뮤니티와 페이스북은 React Native의 퍼포먼스를 보완시키기 위해 노력하고 있으며 현재도 React Native 커뮤니티에 의해 진행 중인 많은 최적화된 작업이 있습니다.
최근 페이스북은 모바일 앱 안드로이드에서 React Native 퍼포먼스 향상을 위해 새로운 Javascript 엔진 ‘Hermes’를 출시했습니다. 앱의 렌더링 시간을 최적화하고 메모리와 CPU를 적게 사용하며 앱의 크기를 더 작게 만듭니다. 이것에 대해서는 다른 포스트에서 말씀 드리겠습니다.
플러터 VS 리액트 네이티브
커뮤니티 서포트
앞서 이야기했듯이, React Native 프레임워크는 페이스북에 의해 2015년도에 출시되었습니다. Flutter 보다 더 성장하였고, React Naitve를 위한 커뮤니티도 매우 규모가 커졌으며 React Native 커뮤니티의 기여 또한 엄청납니다. 커뮤니티에서 개발한 모든 NPM 패키지를 찾아 볼 수 있을 겁니다. 만약 당신이 어디선가 막혔다면, 그에 대한 솔루션은 커뮤니티에서는 이미 제시했을 가능성이 높습니다.
그러나 Flutter는 구글에서 2018년에 출시되어 당연히 Flutter 주변 커뮤니티는 React Native 보다 작고, 아직 React Native 만큼 성장하지 않아 일반적으로는 기성 패키지를 찾아 볼 수 없습니다. 하지만 Flutter 2.0이 출시됨에 따라 향후 트렌드가 Flutter로 기울면서 React Native 보다 일부 퍼포먼스와 크로스 플랫폼 혜택을 더 많이 제공하여 개발자들이 Flutter를 점점 더 선호하게 될 것으로 보여집니다.
크로스 플랫폼
앱스토어와 구글플레이에 앱을 출시하는 것은 싱글 코드베이스를 가진 모든 기업이 바라는 일입니다. Flutter와 React Native는 시장의 두 선수입니다.
크로스 플랫폼 앱 개발은 일반적으로 몇 가지 경우에 사용됩니다.
· 단기간에 앱을 개발하고자 하는 경우
· 네이티브 앱 개발에 약간의 제한이 있는 경우
· 비즈니스 필요 요건이 시장에 다이내믹하게 적응할 경우
Flutter 코드는 Javascript로 컴파일 될 수 있고, 그렇게 안드로이드, iOS, 웹과 같은 코드베이스를 가질 수 있습니다. React Native는 실제 iOS 렌더링과 안드로이드 애플리케이션을 작성하는데 사용되는 프레임워크입니다.
최근 출시한 Flutter 2.0은 동일한 코드베이스를 사용해 다음 5개의 운영 시스템에 대한 네이티브 앱을 구축할 수 있습니다. iOS, Android, Windows, macOS 그리고 Linux 뿐만 아니라 Chrome, Firefox, Safari 및 Edge와 같은 최신 브라우저에서 실행되는 웹 앱도 가능합니다. 또한 Flutter는 자동차, TV, 스마트 가전제품에 장착이 가능합니다.
테스팅
테스트는 최소한의 시간과 노력으로 코드의 원활한 기능을 유지하는데 매우 중요합니다.
React Native는 UI 레벨 테스트와 인터그레이션 테스트에 대한 공식적인 지원이 없으며, RN 앱을 테스트하는데 사용할 수 있는 몇 가지 유닛 레벨 테스트 프레임워크만 있어 개발자는 아피움이나 디톡스 같은 제 3자의 도구를 사용해야 합니다. 게다가 iOS 앱을 앱스토어에 배치하기 위한 자동화된 단계를 제공하지 않습니다. 대신, React Native는 개발자들에게 애플 스토어에서 Xcode를 통해 앱을 배치하는 수동 프로세스를 제안합니다.
반대로 Flutter는 자동 테스트를 위한 뛰어난 서포트를 제공합니다. 유닛, 위젯 그리고 인터그레이션 레벨에서 앱을 테스트할 수 있는 테스트 기능을 제공합니다. 이는 세부사항이 적힌 공식적 자료를 가지고 있으며, 플레이스토어와 앱스토어에 안드로이드와 iOS 앱을 개발하고 출시할 수 있는 자료도 제공합니다. 배치 프로세스에 대해 공식 문서화된 것도 있습니다.
애플리케이션 사이즈
앱의 사이즈는 사용자에게 달렸고, 프레임워크의 선택은 앱의 사이즈에 큰 영향을 미칠 수 있습니다.
보통 React Native App의 크기는 7MB이지만 Native dependency를 추가하면 최대 13.4MB까지 증가합니다. 모든 네이티브 및 외부 라이브러리에 대해 분할 빌드를 자동으로 생성하여 앱 크기를 줄일 수 있습니다.
뿐만 아니라 헤르메스 엔진을 사용하면 크기를 더 줄일 수 있습니다.
반면 Flutter의 보통 헬로월드 앱의 크기는 7.5MB이며, Flutter를 이용하면 앱의 크기는 다트의 가상 머신과 C/C++ 엔진의 영향을 받지만, Flutter에서는 -split-debug-info와 같은 특수 태그를 사용하면 코드의 크기를 줄이는 데 도움이 됩니다.
플러터 VS 리액트 네이티브
누가 사용하나요?
React Native
· 페이스북 – 간편한 네비게이션 기능을 갖춘 서포트적이고 슈퍼차지된 모바일 UI를 개발했습니다.
· 월마트 – 네이티브 기능과 동일한 앱 내에 자연스러운 애니메이션을 제작하여 사용자 경험을 개선합니다.
· 블룸버그 – 액세스를 간소화 시키고, 코드 자동 새로 고침 기능을 통해 사용자 콘텐츠를 개인화 시켰습니다.
· 인스타그램 -네비게이션 인프라 구축없이 웹 뷰 형태로 푸시 알림을 구현했습니다.
· 사운드클라우드 – iOS, Android의 업데이트와 패치 버전 간의 시간차를 모두 메웠습니다.
· 윅스 – 구성 가능한 네비게이션과 스크린 옵션 개발에서 스피드와 민첩성을 습득하였습니다.
Flutter
· 구글 광고 – iOS 및 Android에서 이동식 사용자 경험을 제공하기 위해 레버리지된 다트 패키지, Firebase AdMob 플러그인 및 Flutter의 스테틱 유틸리티 클래스를 활용했습니다.
· Tencent – 5명 미만의 개발자와 멀티 플랫폼 서포트를 통해 사용자와 디바이스 경험 사이의 연결 및 공유되는 디바이스 경험을 구축했습니다.
· 알리바바 – 높은 FPS와 싱글 코드베이스를 가진 모든 애플리케이션을 위해 싱글 탭 네비게이션 경험을 구축했습니다.
·eBay – Flutter와 Firebase를 통합하여 이베이 모터스의 autoML을 개발함으로써 레버리지 콤플렉스와 커스터마이즈 엣지 파워드 AI 기능을 활용합니다.
· BMW – 운영을 위해 Flutter bloc을 사용하여 하이 퍼포먼스 사용자 인터페이스를 개발했습니다.
· Reflectly – React Native에서 Flutter로 마이그레이션 하고 StreamBuilder 위젯으로 고급 데이터 이벤트를 생성하여 데이터 동기화를 개선했습니다.
누가 이를 사용하고 있나요? 여기서부터 참조하세요.
플러터 VS 리액트 네이티브 결론
React Native는 단순한 크로스 플랫폼 애플리케이션을 구축하는 데 유용하며 Flutter는 MVP 애플리케이션을 만드는 데 탁월합니다.
이러한 크로스 플랫폼 기술의 특성은 필요한 타임 투 마켓을 단축시킬 수 있다는 것입니다. 또한 이의 제 3자 라이브러리는 애플리케이션을 더욱 효율적으로 구축할 수 있게 해줍니다.
다음과 같은 경우 React Native를 선택하세요.
· 교차 플랫폼 모듈을 사용하여 현재 애플리케이션을 확장하고자 하는 경우
· 경량 네이티브 애플리케이션을 개발해야 하는 경우
· 비동기 빌드와 응답성 UI를 갖춘 애플리케이션을 만들려는 경우
· 프로젝트에 투자할 충분한 시간이 있는 경우
다음과 같은 경우 Flutter를 선택하세요.
· 당신의 아이디어가 완전한 네이티브 기능을 필요로 하지 않는 경우
· 예산과 배송 일정이 빠듯한 경우
· 코드를 더 빨리 작성해 시장에 바로 내놓고 싶은 경우
· 60 FPS ~ 120 FPS 퍼포먼스를 달성하려는 경우
· 위젯과 약간의 테스트를 통해 UI를 커스터마이즈 하려는 경우
국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?
