멀티 플랫폼(React Native vs Flutter) 비교

본 글은 전력연구원 연수생으로 일하며 제가 직접 찾아낸 정보를 기억할 겸 공유할 겸 저장하는 글입니다.

왜 멀티 플랫폼(크로스 플랫폼) 앱을 개발할까?

• 기업의 규모가 굉장히 크고 개발자를 많이 고용할 수 있다면 각각의 전용 툴을 통해 앱개발을 진행하는 것도 좋은 방법입니다. (ex/안드로이드-안드로이드 스튜디오, IOS-swift) 각 OS별 기능들을 모두 활용할 수 있으면서 크로스 플랫폼 개발에서 발생하는 버그를 최소화할 수 있기 때문입니다. 하지만 기업이 작거나 개발자를 많이 고용할 수 없는 기업에서 특정 OS를 사용하는 고객층을 포기할 수 없다면 소스코드 하나로 여러 플랫폼에 배포할 수 있는 크로스 플랫폼을 많이 사용합니다. 크로스 플랫폼의 대표적인 것으로는 Facebook에서 개발을 주도하는 React Native와 Google에서 개발을 주도하는 Flutter입니다.

React란 무엇인가?

• 우리가 보는 웹 화면 (ui) 를 만드는게 html과 css, 그리고 JavaScript입니다. 하지만 이 세개로만 화면을 구현하는게 생각보다 어려운 일입니다. React는 UI 요소 구현을  좀 더 편하게 할 수 있도록 돕기 위해 만들어진 JavaScript 라이브러리여서, 프론트엔드를 한다고 하면 보통 React를 많이 사용합니다. React 와 React.js 의 차이는 사실 똑같은 React인데 뒤에 그냥 자바스크립트임을 뜻하는 .js를 붙이고 떼고인 것 뿐입니다. 이처럼 React가 웹 화면 개발에 사용된다면, React Native는 휴대폰 어플리케이션 개발에 사용됩니다.

 

각 프레임워크의 정의 및 사용 언어

React Native

• React Native는 Javascript를 언어로 사용합니다. React 계열의 Javascript는 JSX로 일반적인 JQuery나 Vanilla JS와는 코드 구조적으로 다른 부분이 있지만 일반적으로 프론트앤드 자바스크립트를 개발한 경험이 있다면 쉽게 React 계열로 넘어올 수 있는 만큼 진입장벽이 높지 않다고 합니다.

Flutter

• Flutter는 한국에선 많이 생소한 Dart언어를 사용합니다. Dart언어는 구글에서 Javascript를 대체하겠다고 내놓은 야심작이지만 Flutter가 출시되기 전까지 외면받았던 언어입니다. Dart는 Javascript와 비교했을 때 그나마 static typing이라는 장점이 있어서 사용하는 마니아층이 조금 있었으나 그마저도 Typescript의 출시로 인해 장점이 사라져버렸습니다. 또한 Flutter의 특성상 프론트앤드 개발자들이 많이 사용하게 되는데 프론트앤드만 사용하던 개발자들에게는 생소한 부분이 많을 수 있습니다.

 

라이브러리 비교

React Native

• React Native는 React와 라이브러리 호환성이 좋습니다. React가 2013년에 출시한 만큼 꽤 완성도 있는 라이브러리 생태계가 조성되어 있는데 2년 뒤에 출시된 React Native가 React의 많은 패키지를 호환할 수 있는 것은 큰 장점입니다.

Flutter

• Flutter는 공식 출시가 1년정도 되어가는 프레임워크입니다. 당연하게도 React Native만큼의 많은 패키지를 보유하지 않았습니다. 이 부분은 어떤 앱을 만드냐에 따라 다르지만 앱의 방향성을 정확히 하고 제작하려는 앱에 꼭 필요한 패키지들이 얼마나 완성도가 높은지 사전조사를 충분히 하고 Flutter를 사용해야 할 것 같습니다.

 

개발프로세스 비교

React Native

• 지금까지의 React Native는 장점이 많아보이지만 실제로 개발을 시작해보면 많은 장점들이 의미없어질 정도로 개발 프로세스가 좋지 않다고 합니다. React Native는 Android와 iOS 컴포넌트들을 끌어다 쓰는 bridge 역할을 하는데 이 부분에서 한 컴포넌트를 화면에 띄웠을 때 Android에서 상당히 다르게 보이거나 iOS에서 보지 못한 버그가 Android에서는 존재하는 등 굉장히 크리티컬한 문제들이 생기는 경우가 많습니다. 싱글 코드 베이스는 맞지만 실제로는 iOS와 Android 각각 코드를 다르게 작동하는 조건문이 상당히 많아진다는 단점이 있고 그런 만큼 플랫폼별 디버깅을 하는 시간이 늘어납니다.

Flutter

• Flutter의 가장 큰 장점은 이것입니다. Flutter는 React Native와 다르게 직접 화면에 컴포넌트를 그려버립니다. 결과적으로 OS별로 제공되는 컴포넌트들을 활용할 필요가 없어서 OS별 문제가 거의 없고 일관성 있게 작동됩니다. 더 나아가 React Native에 비해 Flutter에서 기본으로 제공해주는 컴포넌트들이 훨씬 더 많고 만일 색다른 컴포넌트가 필요하다면 직접 컴포넌트를 그리고 애니메이션을 제작하는 것도 가능하기 때문에 Flutter가 이 부분에선 상당한 장점을 가지고 있습니다.

 

 

 

 

출처 : 크로스플랫폼 앱

[REACT NATIVE VS FLUTTER] 크로스플랫폼 앱 개발, 어떤 프레임워크를 사용해야 하나?

 

React Native 에서 obd모듈 API를 지원하는가

https://github.com/JetBridge-io/react-native-obd2

JetBridge-io/react-native-obd2

React Native 에서 지원하는 API인 것으로 확인됩니다.

현재까지 찾아본 바로는 멀티플랫폼은 안드로이드와 다른 각자의 언어로 개발해야합니다. React Native를 사용한다면 자바스크립트를 Flutter를 사용한다면 Dart를 사용해야하므로 자바로 개발한 소스 코드는 호환되지 않을 것 같습니다. 멀티 플랫폼으로 다시 처음부터 개발하는 것이 아니라면 안드로이드와 iOS 따로 관리해야할 것 같습니다.

 

기존 소스(안드로이드 네이티브 앱)를 활용할 수 있는 방법 1 (J2OBJC 툴 사용)

 

https://github.com/google/j2objc/commits/master

구글에서 2012년에 발표한 자바 코드를 iOS 개발 언어인 Objective-C로 변환해주는 패키지입니다. 21.3.25까지 github에 commit이 있는거로 봐선 꾸준히 관리하고 있는것 같습니다.

 

J2ObjC를 이용해 자바 소스코드를 iOS용 오브젝트-C로 변환하고자 하는 개발자는 애플 OS X 10.7(라이온) 이상이 설치된 맥 컴퓨터와 맥용 개발 도구 모음 X코드(Xcode) 버전 4 이상, 자바 개발도구(JDK) 버전 1.6, 자바 소스코드 관리 프로그램 '아파치 메이븐'이 설치돼 있어야 합니다.

 

하지만 Objective-C를 쓰는 곳이 많지 않아 지금 시점에 굳이 쓸 이유는 없어보입니다.

 

기존 소스를 활용할 수 있는 방법 2 (JAVA -> Kotlin -> iOS)

 

안드로이드 개발 언어는 크게 JAVA와 Kotlin이 있습니다. 이 둘간의 변환은 안드로이드 스튜디오에서 쉽게 변환할 수 있습니다.

• Find Action(Ctrl Shift A)을 통해서 Convert Java File to Kotlin File 을 실행한다.
• OK를 누르면 즉시 kotlin으로 변환해준다. 파일 확장자도 kt로 변한다. 파일 여러개, 혹은 폴더를 통째로 변환할 수 있다. 즉, 패키지를 통째로 한 번에 변환시킬 수 있다. 단, 일부 코드는 직접 맞춰주어야 한다. 예를 들면 Nullable한 변수와 그렇지 않은 변수의 Type mismatch 등이다.

하지만 변환 후 오류가 생길 수 있으며 그 오류를 해결하기 위해 시간을 소비해야 합니다. 실제로 많은 글들이 일부 변수가 의도치 않게 선언부분이 수정되거나 삭제되는 일을 겪었다고 합니다.

코틀린으로 수정을 완료하면 코틀린으로 iOS 개발하기 와 같은 사이트를 참고하여 Kotlin으로 iOS를 개발할 수 있다고 합니다. 자동은 아니지만 처음부터 개발하는 것보다 어느정도 로직을 갖춘 후 개발하는 것이기 때문에 시간이 절약될 것으로 생각됩니다.

 

위의 두 방법 외에는 기존 안드로이드 소스를 활용할 수 있는 방법이 보이지 않습니다. 다른 방법은 React Native같은 하이브리드 앱을 개발하는 것으로 기존의 안드로이드 앱을 매몰 처리하는 것입니다.