개요

Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크 안드로이드와 IOS를 동시에 개발이 가능하다. React-Native도 마찬가지로 크로스 플랫폼

사용언어

Dart

장점

통합 개발 환경 지원

Flutter는 다양한 Editor(Android Studio, VS Code 등등)를 사용하여 빌드가 가능 Android Studio는 Flutter Inspector와 Flutter Outline이라는 개발 도구를 추가적으로 지원 VS code에서는 간단하게 Extension 으로 Flutter를 설치하여 Flutter를 사용할 수 있음

성능 문제 해결

기존 React Native 혹은 Hybrid App의 경우 네이티브 브릿지를 통한 통신이 불가피. 하지만 Flutter는 직접 컴파일되서 Render를 직접 하기때문에 성능이 빠름 애니메이션 속도가 60프레임은 가뿐히 넘어서는 것이 기존 크로스 플랫폼시장의 주류였던 React Native와 Flutter를 비교하는 많은 글들에서 Flutter를 내세우는 부분

머티리얼 디자인과 쿠퍼티노

Flutter는 Androd와 iOS의 대표 디자인 가이드를 기본적으로 제공 구글의 머티리얼 디자인(Material Design)의 홈페이지에는 이미 Flutter가 포함되어 있고 가이드만 제공하는 것 뿐만아니라 Flutter 프로젝트에 바로 추가하여 사용할 수 있는 패키지도 제공 안드로이드와 iOS에서 같은 머티리얼 디자인을 사용하더라도 플랫폼에 따라 다르게 출력되는 부분을 각각 디자인 가이드에 맞게 화면을 그림 iOS앱을 개발하는 경우 iOS특유의 디자인 시스템인 쿠퍼티노(Cupertino) 위젯을 제공합니다. 그렇기에 선택의 폭이 정해져 있기 때문에 어떤 UI 라이브러리를 사용할 것인지 고민 할 필요가 없지만 이건 장점이자 단점이 될수도 있음

Dart를 사용하지만 Native 코드도 사용

앞서 Dart를 사용한다고 했지만 결국엔 크로스 플랫폼이기에 해당 OS에 최적화된 앱을 만들려면 Native 코드를 사용할수밖에 없고 Dart와 섞어서 사용함 즉, Dart만 사용하는것이 아니라 Android면 Kotlin, iOS면 Swift도 사용합니다. 이는 기존의 Native 코드를 사용한 개발자라면 장점.

단점

Flutter의 경우 Github 이슈란에 가보면 엄청난 이슈가 올라와 있는 것이 눈에 보임 물론 이는 Flutter 자체가 이슈 항목에 아무나 이슈제의가 가능하도록 했기 때문에 그런점도 있음

Native API를 Dart에서 직접 호출 불가

특별히 심하게 문제가 되진 않지만 외부 플러그인을 써야

Code Pushing

코드를 고치려면 새 버전을 배포해야 함 React Native, Cordova, Ionic 에선 이미 지원 중. https://github.com/flutter/flutter/issues/14330

Air BNB Lotti 사용 불가

Flutter는 지원하지 않음 Android, iOS, React-Native만 지원 로티는 어플리케이션에 Fancy 한 에니메이션을 넣어주는 라이브러리 https://airbnb.design/lottie/

웨어러블 디바이스앱에 약함

https://pub.dev/packages/wear 위 플러그인이 있지만 Native 마냥 쉽게 되지 않음

C/C++ 라이브러리 호출이 안됨

NDK C/C++ 라이브러리 호출이 Dart에서 안됨 외부 플러그인을 써야하고, 원하는 플러그인이 없다면 만들어야 하는데 이는 보통일이 아님

지원되는 플러그인이 부족하다.

아직 플러그인들은 부족한 편. 어플을 생성할 때, Webview, Map 등 플러그인은 필요 하지만 Flutter의 이러한 플러그인들은 전부 0.4, 0.3 등등 1.0을 넘는 버전을 보기가 힘듬. 따라서 지속적으로 업데이트가 되고있고, 업데이트가 될때마다 다시 붙이고 테스트해보는 것은 어마어마하게 번거로운 일이 될 것

아직까진 국내에 개발관련 자료가 많이 없다.

Android, iOS Native는 나온지 오래되서 자료가 많다보니 문제해결이 쉬움, 국내엔 아직까진 자료가 많다고 할수가 없어 이슈 상황 발생시 자료 찾기가 어려움

React와 비교

외부 패키지 비교

React Native

React Native는 React와 라이브러리 호환성이 상당히 좋음 React는 2013년도에 출시, 2년 뒤에 출시된 React Native가 React에서 조성된 수많은 패키지들을 대부분 호환해서 사용할 수 있음. 특히나 일반적인 RESTful API를 사용하지 않고 GraphQL을 사용하시는 경우 GraphQL 패키지 중 최강자인 Apollo GraphQL 패키지를 사용할 수 있음

Flutter

2019년 출시 React Native만큼 큰 패키지 생태계를 조성하지 못하고있고 Flutter팀 내부에서 개발하는 공식 패키지들도 아직 0.x 버전들로 성숙하지 못한 형태 어떤 앱을 만드냐에 따라 다르지만 앱의 방향성을 정확히 하고 제작하려는 앱에 꼭 필요한 패키지들이 완성도가 얼마나 높은지 사전조사 필요

State Management

React Native

React 계열의 State Management를 접한다면 처음보는 형태에 이해하는데 시간이 어느정도 걸릴 수 있지만 한번 이해하고나면 관리하기 쉬운편에 속한다는 장점이 있음

Flutter

Flutter 팀에서 공식적으로 추천하는 State Management는 BloC 패턴 Stream을 활용해서 State Management를 하는 건데 Stream 사용경험이 없는 사람들은 상당한 어려움을 겪으실 수도 있음 앱이 복잡하지 않을 때는 한 형태의 BloC 패턴을 계속 사용하면 되는데 나중에 Stream 끼리 합치고, 연결하고, 여러 결과값을 동시에 받는 등 복잡한 오퍼레이션을  경우 상당히 코드가 난잡해 질 가능성이 있음 이런 단점이 있음에도 잘 다룰 수 있게만 된다면 서버와 실시간 통신을 직접 할 수도 있고 Optimistic Response를 설계하는데도 더욱 간단한 면이 많이 있음

개발프로세스 비교

React Native

React Native는 Android와 iOS 컴포넌트들을 끌어다 쓰는 bridge 역할 이 부분에서 한 컴포넌트를 화면에 띄웠을 때 Android에서 상당히 다르게 보이거나 iOS에서 보지 못한 버그가 Android에서는 존재하는 등 굉장히 크리티컬한 문제들이 생기는 경우가 많음

Flutter

Flutter는 React Native와 다르게 직접 화면에 컴포넌트를 그림 결과적으로 OS별로 제공되는 컴포넌트들을 활용할 필요가 없어서 OS별 문제가 거의 없고 일관성 있게 작동

결론

React Native와 Flutter 모두 상당한 완성도를 자랑하는 크로스플랫폼 개발 프레임워크 React에 익숙한 개발자들이 많거나 빠른 성장을 위해 개발자 수급이 빨라야 한다면 React Native를 사용 좋은 개발프로세스를 즐기며 프레임워크와 함께 성장할 자신이 있다면 Flutter를 사용

참고

• https://velog.io/@jojo_devstory/Flutter%EB%9E%80-Flutter%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
• https://blog.codefactory.ai/flutter/flutter-vs-react-native-what-to-learn/