2021 년에 크로스 플랫폼 모바일 앱을 구축하고 싶다면 두 가지 최선의 선택은 Flutter와 React Native입니다.
두 프레임 워크 모두 하나의 코드베이스에서 인기가 높아지고 빠른 개발, 네이티브에 가까운 성능 및 부드러운 UI를 약속합니다. 2021 년에 가장 적합한 프레임 워크와 차이점에 대해 알아봅시다.
먼저 두 프레임 워크에 대해 간략하게 소개하겠습니다. 그런 다음 React Native와 Flutter를 직접 비교해 보겠습니다. 이 가이드를 마치면 다음 프로젝트를 위해 선택할 크로스 플랫폼 프레임 워크를 확실히 이해할 수있을 것입니다.
Flutter
Flutter 는 크로스 플랫폼 앱 개발 프레임 워크입니다. Flutter를 사용하면 단 하나의 코드베이스로 iOS, Android, macOS, Windows 및 웹용 앱을 개발할 수 있습니다.
Flutter는 2018 년에 Google에서 만들었습니다. 그러나 Flutter는 다양한 개발자 및 기타 회사 커뮤니티에서 유지 관리하는 오픈 소스 프로젝트입니다.
Flutter로 만든 인기 앱?
어린 프레임 워크 임에도 불구하고 상당수의 회사에서 Flutter로 대규모 앱을 구축했습니다.
Google은 Google 어시스턴트, Google Ads, 대형 게임 애플리케이션 인 Stadia 와 같은 다양한 애플리케이션에서 Flutter를 사용하고 있습니다.
그러나 다른 회사들도이 프레임 워크를 채택하여 큰 성공을 거두었습니다. Alibaba, Tencent, Baidu 및 ByteDance (TikTok 앱의 제작자)와 같은 중국 기술 대기업은 적어도 일부 애플리케이션에 Flutter를 채택했습니다.
BMW, eBay, Philips, Sonos 및 Groupon은 다양한 모바일 앱에서도 Flutter를 사용했습니다. 그들 중 다수는 빠른 개발 속도와 뛰어난 성능을보고합니다.
BMW는 Flutter로 iOS 및 Android 앱을 구축하고 있습니다.
내가 가장 좋아하는 Flutter 앱의 예 중 하나는 일기 앱인 Reflectly 입니다. Flutter로 무엇을 할 수 있는지 보여주는 다양한 사용자 정의 인터페이스와 애니메이션을 사용합니다. Reflectly 앱 개발자는 React Native에서 Flutter로 전환 한 이유에 대한 기사 도 작성했습니다 .
위의 모든 예제는 모바일 애플리케이션에 Flutter를 사용했습니다. 데스크톱 및 웹 지원은 최근 Flutter에 추가 된 기능이므로 아직 널리 사용되지 않습니다.
Flutter 쇼케이스 사이트 에서 Flutter를 사용하여 업데이트 된 앱 목록을 찾을 수 있습니다 .
React Native
React Native는 사용자 인터페이스를 구축하기위한 크로스 플랫폼 모바일 프레임 워크입니다. React 프레임 워크와 Javascript의 기능을 활용하여 iOS 및 Android 앱을 개발합니다.
Facebook은 2015 년에 React Native를 만들었습니다. 회사는 두 가지 주요 모바일 플랫폼에서 개발 노력의 일부를 공유 할 방법을 찾고있었습니다.
오늘날 페이스 북은 여전히 프레임 워크를 유지하고 개발하는 데 적극적입니다. 그러나 React Native는 오픈 소스이며 대규모 개발자 및 회사 커뮤니티가 기여하고 있습니다.
React Native로 만든 인기 앱?
당연히 많은 Facebook 모바일 앱이 적어도 부분적으로 React Native로 만들어집니다. React Native를 실제로 경험하기 전에 Facebook, Messenger 또는 Instagram을 사용한 경우.
다른 회사의 다른 많은 인기 앱이 React Native를 사용하기 시작했습니다. Wix, Shopify, Discord Tesla 및 Uber Eats는 모두 일부 모바일 애플리케이션에서 React Native를 사용하고 있습니다.
Shopify 의 Shop 앱 은 널리 사랑 받고 잘 구현 된 React Native 애플리케이션의 가장 최근 사례 중 하나입니다.
프로그래밍 언어의 차이
1. Flutter
최신 Dart 프로그래밍 언어를 사용합니다. 과거에 C 스타일 언어를 사용한 적이 있다면 Dart는 친숙 할 것입니다. Dart는 객체 지향적이지만 기능적 언어로 사용할 수 있도록 많은 기능이 포함되어 있습니다.
2. React Native
좋은 오래된 Javascript를 사용합니다.
Dart & Javascript
자바 스크립트에 대한 배경 지식이 있다면 두 언어간에 많은 유사점이 있음을 알 수 있습니다. 예를 들어, Dart는 비동기 코드에 Promises (Futures라고 함)를 사용하고 async / await 구문을 지원합니다.
두 언어를 나란히 살펴보면 Dart 제작자가 Javascript에서 영감을 얻었음을 알 수 있습니다. 그러나 Dart는 Javascript의 많은 약한 영역을 개선합니다.
Dart는 동적 자바 스크립트에 비해 정적으로 입력됩니다. 최근 Typescript (자바 스크립트에 유형을 추가)의 부상은 많은 개발자가 유형이 지정된 코드가 없어서 피할 수있는 실수에 지 쳤음을 증명합니다.
Dart 버전 2.0부터 언어도 null-safe 입니다. 즉, 변수를 정의 할 때 null 값을 허용해야하는지 여부를 명시 적으로 지정해야합니다. 제 경험상이 기능은 엄청난 것입니다.
null또는 변수와 관련된 Javascript 오류를 얼마나 자주 받았 undefined습니까? 모든 종류의 버그가 단순히 사라집니다.Dart & Typescript
Typescript를 사용하여 일부 Dart 기능을 React Native 프로젝트로 가져올 수 있습니다. 이 접근 방식을 사용하면 코드베이스가 버그에 덜 걸리고 새로운 개발자가 더 쉽게 읽을 수 있으므로이 방법을 적극 권장합니다. 그러나 Typescript는 Javascript의 모든 문제를 해결할 수 없습니다. Dart는 언어 기능을 나란히 비교하기 만하면 승리 할 수 있습니다.
Javascript (확장하면 Typescript)는 Dart보다 큰 이점이 있습니다. 세계에서 가장 인기있는 언어 중 하나입니다. Javascript는 웹, NodeJS의 백엔드 애플리케이션, 심지어 사물 인터넷에도 널리 사용됩니다. 이것은 Javascript 주변에 훨씬 더 큰 커뮤니티가 있음을 의미합니다.
자바 스크립트를 위해 더 많은 개발자를 고용 할 수 있습니다. 이것은 프로젝트에 Flutter 또는 React Native를 선택할 때 핵심 요소가 될 수 있습니다.
일자리를 찾는 개발자라면 어떤 프레임 워크를 배워야합니까? 현재 React Native에 사용할 수있는 작업이 더 있습니다. 또한 시장에 많은 일자리가있는 웹용 ReactJS를 배우게됩니다. Flutter에 사용할 수있는 일자리는 적지 만 수요는 빠르게 증가하는 것 같습니다.
요약하자면 Dart는 유형 및 널 안전성과 같은 프로그래밍 언어로서 훌륭한 기능을 가지고 있습니다. 그러나 Javascript는 훨씬 더 인기가 있으며 더 큰 생태계를 가지고 있습니다.
Dart에는 하나의 트럼프 카드가있어 크로스 플랫폼 앱 개발에 매우 적합합니다. 이것이 우리가 다음에 살펴볼 것입니다.
성능 및 사용자 경험의 차이
Flutter와 React Native가 사용자의 성능과 경험에서 어떻게 다른지 진정으로 이해하려면 작동 방식에 더 가까이 다가 가야합니다.
1. React Native
React Native는 Javascript 생태계와 React 핵심 라이브러리를 활용합니다. 이것은 작성하는 코드의 대부분이 Javascript로 작성되었음을 의미합니다.
모바일 장치는 기본적으로 Javascript를 처리하지 않습니다. 그렇다면 Javascript 코드는 어떻게 모바일 애플리케이션으로 변환됩니까? React Native는 자바 스크립트로 작성된 코드와 네이티브 코드간에 메시지를 전달하는 네이티브 브리지를 사용합니다.
React Native 주변의 팀은 Bridge 의 성능을 최적화하는 데 많은 시간을 보냈지 만 근본적으로 병목 현상이 남아 있습니다. 이것이 React Native Reanimated와 같은 일부 React Native 라이브러리가 복잡한 아키텍처 설정을 사용하여 더 나은 프레임 속도를 달성하는 이유입니다.
단점
React Native의 핵심 아키텍처는 네이티브 성능을 최적화하기 어렵게 만듭니다.
React Native에서 사용하는 구성 요소 (예 : 텍스트 입력 또는 버튼)는 여전히 기본 구성 요소입니다. Javascript 인터페이스를 통해 제어 하기 만하면 됩니다.
앱을 선택한 플랫폼 (iOS 또는 Android)의 디자인에 최대한 가깝게 만들고 싶다면 좋은 소식입니다. React Native 앱은 현재 플랫폼의 디자인을 잘 채택하고 기본적으로 작성된 앱과 매우 유사합니다.
그러나 오늘날 대부분의 회사는 모든 장치에서 일관된 경험을 얻고 자합니다. 그들은 앱이 색상, 글꼴, 양식 언어와 같은 일관된 브랜딩을 갖기를 원합니다. React Native에서는 앱이 iOS에서 작동하고 멋지게 보인다고해서 Android에서도 똑같이 보일 것이라는 의미는 아닙니다!
2. Flutter
Flutter는 크로스 플랫폼 애플리케이션을 만드는 데 근본적으로 다른 접근 방식을 사용합니다. Flutter는 자바 스크립트 (웹에서 Flutter에 사용됨)와 기계 코드로 컴파일되는 Dart를 사용합니다. 즉, Flutter 애플리케이션이 컴파일되면 빠른 성능을 얻을 수 있습니다.
Flutter는 화면에 기본 구성 요소를 렌더링하지 않습니다. 인터페이스와 애니메이션을 처음부터 칠하는 Skia라는 렌더링 엔진을 사용합니다. 이를 통해 UI를 완벽하게 제어 할 수 있습니다. 완전히 사용자 지정 양식과 애니메이션을 구현할 수 있습니다. Flutter는 또한 Android (머티리얼 디자인 위젯) 및 iOS (Cupertino 위젯이라고 함) 용 기본 구성 요소를 구현합니다.
그러나 실제 구성 요소에 얼마나 가깝게 보이는지에 속지 마십시오. Flutter의 다른 것과 마찬가지로 처음부터 화면에 그려집니다.
단점
단점은 Flutter 팀이 프레임 워크의 모든 인터페이스 구성 요소를 구현해야한다는 것입니다. 새로운 구성 요소는 잠시 후에 만 프레임 워크에 적용됩니다.
앱을 Flutter의 기본 디자인 사양처럼 보이게 만들 수는 있지만이 작업에 적합한 도구는 아닐 것입니다. 많은 분기 논리를 작성하지만 여전히 원하는 결과를 얻지 못할 수 있습니다.
두 플랫폼에서 일관된 디자인을 원한다면 Flutter가 정말 빛납니다. 대부분의 경우 앱은 iOS, Android 및 기타 플랫폼에서 동일하게 보입니다.
웹에서 Flutter 및 React Native
지금까지 모바일 애플리케이션을 살펴 보았습니다. 기본 모바일 애플리케이션과 웹에서 일관된 경험을 원하면 어떻게해야합니까?
웹 사이트에 훌륭한 SEO가 필요한 경우 아래 옵션 중 어느 것도 만족하지 않을 것입니다. 공개적으로 사용할 수 있도록 페이지를 최적화하려면 웹 경험을 별도로 구축하는 것이 가장 좋습니다.
그러나 웹 사이트가 인증 뒤에 보호되거나 SEO에 대해별로 신경 쓰지 않는다면 Flutter와 React Native Web을 모두 고려할 수 있습니다.
React Native
React Native Web 은 원래 웹 프레임 워크 인 ReactJS와 다릅니다. React Native Web을 사용하면 웹에 대한 약간의 조정만으로 모바일 코드베이스를 활용할 수 있습니다. Twitter 는 웹 사이트 경험을 위해 React Native Web을 사용해 왔으며 큰 성공을 거두었습니다.
React Native Web은 상당히 성숙해졌으며 인기있는 React Native 개발 프레임 워크 Expo 에도 포함되어 있습니다. 이 시점에서 React Native의 대부분의 코드를 안전하게 재사용하고 웹에서 사용할 수 있습니다!
Flutter
Flutter는 3 월에 Flutter 2 최신 버전에서 공식적으로 웹 지원을 추가했습니다. 이는 웹용 Flutter가 프로덕션에서 안정적으로 사용할 수 있음을 의미합니다.
Flutter에서 웹 앱이 어떻게 보일 수 있는지에 대한 매우 유망한 첫 번째 예는 Rive 앱 입니다. Rive는 웹 및 데스크톱 플랫폼에서 Flutter와 함께 작동하도록 애니메이션 도구를 재 구축했습니다. 결과는 인상적입니다.
앞서 언급 한 Dart는 명시 적 컴파일 대상으로서 Javascript로, 깔끔하고 성능이 뛰어난 웹 애플리케이션을 생성 할 수 있습니다.
그러나 Flutter 애플리케이션은 일반적인 Html 구조와 비슷하지 않습니다. Flutter는 웹 캔버스 를 활용 하여 UI를 사용자 지정합니다. 이것은 검색 엔진 지원이 열악하고 아마도 결코 훌륭하지 않을 것임을 의미합니다.
그러나 예상치 못한 이점이있을 수 있습니다. 웹은 특정 유형의 복잡한 데이터 기반 앱을 위해 구축 된 적이 없습니다. 예를 들어 Google은 최근에 네이티브 Html
input또는 textarea요소 대신 웹 캔버스를 사용하여 문서 앱을 구현했습니다 . 협업 편집기는 기존의 웹 도구 상자로는 구축하기 어려운 것들 중 하나입니다.웹 표준을 따르는 공개적으로 액세스 할 수있는 웹 사이트를 구축하려는 경우 가장 좋은 방법은 웹에 대해 별도의 코드베이스를 사용하는 것입니다. 이미지를로드하고 SEO를 개선하기 위해 많은 최적화와 함께 제공되는 NextJS와 같은 프레임 워크를 사용할 수 있습니다.
React Native를 사용하고 코드베이스를 잘 구성했다면 대부분의 애플리케이션 로직과 상태를 재사용 할 수도 있습니다. 인터페이스 구성 요소 레이어를 교체하기 만하면됩니다.
Flutter를 사용하는 경우 Dart가 아닌 다른 언어로 별도의 코드베이스를 유지해야합니다.
따라서 React Native 또는 Flutter를 선택하기 전에 프로젝트와 웹 애플리케이션의 실제 요구 사항에 대해 신중하게 생각하십시오.
데스크톱의 Flutter 및 React Native
React Native와 Flutter 프로젝트는 모두 데스크톱 앱으로 컴파일 할 수 있습니다.
React Native 에서 가장 유망한 라이브러리 는 Microsoft에서 개발했습니다 (누가 생각했을까요?). 이것은 React (더 광범위하게는 Javascript) 세계에서 일반적인 패턴입니다. 프레임 워크를 확장하려면 종종 추가 라이브러리를 설치해야합니다.
macOS 및 Windows 용 React Native는 아직 초기 단계이며 아직 버전 1.0을 출시하지 않았습니다. 그러나 React 생태계에서 고성능 데스크톱 앱을 개발할 것을 약속하며 React Native를 선택할 때 훌륭한 대안이 될 수 있습니다.
Flutter는 지난 몇 년 동안 데스크톱 지원을 위해 작업 해 왔으며 안정적인 채널에서 릴리스했습니다. 아직 사용할 수있는 참조 앱은 많지 않지만 프레임 워크는 처음부터 모든 플랫폼을 지원하도록 구축되었으므로 현재 기본 데스크톱 앱에 더 적합한 선택입니다.
크로스 플랫폼 앱에 사용시 러닝커브
이전에 작업 한 내용에 따라 다릅니다. Javascript에 대한 경험이 있습니까? React Native는 가장 쉽게 선택할 수 있습니다. 그러나 Dart는 Javascript와 유사합니다. Dart의 기초를 배우고 Flutter 앱을 작성하는 데 오래 걸리지 않습니다.
두 프레임 워크 모두 Youtube, Udemy, Medium 및 기타 위치에서 시작하고 특정 주제에 대한 도움말을 찾을 수있는 끝없는 콘텐츠를 제공합니다. Dart와 Flutter의 문서는 처음부터 훌륭합니다. 언어와 틀을 간결하게 표현합니다.
Flutter
Flutter는 젊지 만 번성하는 생태계를 가지고 있으며 선택한 플랫폼에서 거의 모든 인터페이스를 만들 수있는 잘 설계된 기반을 가지고 있습니다.
- 부드러운 애니메이션
- 모든 플랫폼에서 비슷하게 보입니다.
- 데스크톱에서 훌륭한 네이티브 경험이 필요합니다.
- SEO 또는 의미 론적 Html이 필요하지 않습니다.
React Native
React Native는 매일 사용하는 대규모 애플리케이션에서 사용됩니다. 전투 테스트를 거쳤으며 광범위한 개발자 커뮤니티와 패키지 생태계가 있습니다.
- 대상 플랫폼의 디자인 언어에 맞게 조정
- 주로 모바일에서 출시됨
- ReactJS 웹 앱으로 개발
- 웹 엔지니어 팀에 의해 개발
