플러터(Flutter)와 리액트(React) 중 어떤 플랫폼이 좋을까?

 

 

 

 

 

 

 

 

모바일 앱의 인기가 많아지면서 모바일 크로스 플랫폼 프레임워크가 인기를 얻고 있다. 그 중 제일 인기있는 리액트 네이티브 (React Native) 와 플러터 (Flutter) Flutter에 대해 정리해보려고 한다.

 

최근 몇 년 동안 많은 기업들이 네이티브 앱 개발에서 크로스 플랫폼 앱 개발로 많이 전환하고 있다. 그 이유는 시간과 비용을 절감할 수 있다는 큰 장점 때문이다. 그로 인해 크로스 플랫폼 모바일 개발 속도가 꾸준히 증가하고 있다.

---

네이티브앱

Android와 iOS 각 모바일 OS 기반의 API로 개발하는 앱을 말한다. 

Android 앱의 경우 Java와 Kotlin 및 Google Android SDK를 사용하고, iOS 앱의 경우 Swift와 Objective-C 및 Apple iOS SDK를 사용한다.

 

장점

각 운영체제에 최적화 되어있는 프로그래밍 언어를 사용하여 개발하므로 속도가 빠르고 안정적이며, 다양한 퍼포먼스를 구현할 수 있어 사용자 경험의 질을 높이는데 유리하다는 점이다. 또, 각 모바일 운영체제에서 제공하는 기능 (블뤁투스, 위치 기반 서비스, 앱 결제, NFC 등)과 디바이스 전체에 액세스 할 수 있고, 주소록이나 캘린더 등 고유 정보도 활용할 수 있다.

 

또, 이러한 여러 운영체제 기능을 활용할 뿐만 아니라 높은 사양의 그래픽과 동적 효과도 구현할 수 있고 증강현실이라는 신기술을 도입시킨 앱도 증가하고 있다. 

 

단점

Android와 iOS의 호환이 불가능하다는 점이다. 이로 인해 특정 앱을 개발하게 되면 Android 앱과 iOS 앱을 각각 따로 개발해야하므로 시간과 비용이 배로 소요된다. 유지 보수 또한 그렇다.

320x100

---

크로스 플랫폼 앱

네이티브 앱의 단점을 보완하고자 등장했다. 하나의 프로그래밍 언어와 프레임워크로 Android와 iOS에서 사용할 수 있도록 개발한 앱이다. 한 번의 개발로 두가지 플랫폼을 대응하므로 내부 로직과 UI / UX 디자인이 동일하다.

 

장점

한 가지 코드로 두가지 플랫폼 앱을 개발할 수 있으므로 네이티브 앱에 비해 시간과 비용을 반으로 줄일 수 있다.

 

단점

기존 네이티브 앱이 갖고 있는 동적인 퍼포먼스를 전부 구현할 수 없다. 또, 네이티브 앱에 비해 성능이 떨어져 느린 경우도 있고 아직 라이브러리가 다양하지 않아 기능 구현에도 한계가 있다. Android와 iOS 운영체제에 새로운 기능이 추가되면 네이티브 앱은 즉시 수정 및 업데이트가 가능하지만 크로스 플랫폼 앱은 지연이 발생할 수 있다.

---

왜 크로스 플랫폼 앱을 개발할까?

대기업처럼 규모가 크고 엔지니어들이 많은 기업이라면 네이티브 앱 개발을 진행하는 것이 좋을 수 있겠지만, 규모도 작고 많은 엔지니어들을 고용하기 힘든 기업들의 경우 소스코드는 하나로 관리할 수 있고 두가지 플랫폼에 모두 배포할 수 있다는 점 때문에 크로스 플랫폼 프레임워크를 많이 사용하여 크로스 플랫폼 앱 개발을 한다.

 

직접 구글 트랜드에 들어가 크로스 플랫폼 프레임워크의 관심도를 비교해봤다.

2018년 초에는 Flutter가 제일 낮은 관심을 가졌으나, 현재 제일 많은 관심을 받고 있는 것으로 보인다. 물론, 이 그래프를 온전히 믿을 수는 없을 것이다. 나는 이 중에서 제일 높은 두 가지, 플러터와 리액트 네이티브를 정리해보려고 한다.

---

플러터란? Flutter란?

Google에서 개발한 크로스 플랫폼 UI 프레임워크이다. 2017년 5월에 처음 출시된 후로 현재까지도 꾸준하게 많이 사용되고 있고 Dart언어가 Flutter를 실행하는 데 사용된다.

 

Google에서 Javascript를 대체하겠다고 내놓은 Dart언어는 Flutter가 나오기 전까지 그저 외면받았다. Javascript와 비교했을 때 static typing이라는 장점이 하나 있었지만, 그마저도 Typescript 등자과 함께 사라져버렸다. 

 

하지만 2018년 Flutter가 출시된 이후, 많은 사랑을 받고 현재도 빠르게 성장하고 있다. Flutter는 보다 기능적이고 네이티브 앱과 유사한 성능을 구현할 수 있다. 특히 미리 만들어진 위젯 라이브러리를 사용하여 빠르게 개발할 수 있다는 점에서 개발 비용을 줄이면서 속도를 높이고 싶어하는 스타트업에게 많은 선택을 받고 있다.

 

Flutter는 UI 요소와 위젯의 폭 넓은 선택이 가능하고, 애니메이션을 빠르게 사용자 지정할 수 있는 고성능 렌더링 엔진도 지원한다. 또, 네이티브 앱은 개발 또는 수정 후 테스트 시 빌드 시간이 오래 걸려 불편한 점이 있는데 Flutter는 이런 불편함을 해결해줄 수 있는 기능인 핫 리로드를 장점으로 내세우고 있다.

 

핫 리로드 (Hot Reload)

앱이 실행되고 있는 상태를 유지하며 변경 사항을 적용시켜주는 기능으로, 변경 사항을 즉각적으로 확인할 수 있어 빠른 확인과 피드백이 가능하도록 만들어준다.

 

---

나는 현재 플러터로 Android, iOS 두가지 플랫폼 앱을 개발 후 스토어 출시까지 마쳤다. 개발하는데 훨씬 시간이 줄긴 했지만 외부 API를 사용하는 데 있어서 많이 벅차고 힘든 점이 많았고, 어쩔 수 없이 네이티브로 개발을 해야 하는 부분도 있었다.

 

하지만, Flutter의 성능은 기대한 것 보다 훨씬 좋았고, UI 부분에서는 네이티브 앱과 구분하기 어려울 정도의 성능을 보였다. 동작도 부드럽고 사용성이 좋아 만족도가 높았다.

 

https://cording-cossk3.tistory.com/80

[Flutter] flutter 윈도우 설치

https://cording-cossk3.tistory.com/101

[Flutter] IOS 앱 구동 (1)

---

리액트 네이티브란? React Native란?

React와 라이브러리 호환성이 좋은 React Native는 2015년 페이스북에 의해 공개된 Javascript로 개발이 가능한 오픈소스 모바일 프레임워크이다. React가 2013년도에 출시되어 현재 상당히 성숙한 라이브러리 생태계가 잘 조성되어 있는데 2년 후인 2015년에 출시된 React Native가 React에서 조성된 수많은 패키지들을 대부분 호환해서 사용할 수 있다는 점이 제일 큰 장점이다. 또, GraphQL 패키지 중 Apollo GraphQL 패키지를 사용할 수 있다.

 

React Native의 앱 개발 방법은 대상 플랫폼 표준 렌더링 API를 사용한다는 점이다. Javascript, HTML, CSS를 사용하여 모바일 앱을 만드는 기존 방법들은 Webview를 이용하여 렌더링을 하는데, 이와 같은 방식의 앱은 실행 시 성능이 떨어진다는 단점이 있다. 그에 반해 React Native는 우리가 작성한 Markup을 플랫폼에 따라 그에 상응하는 진짜 Native Element로 전환한다. 또, React는 메인 UI Thread와 분리되어 실행되기 때문에 앱의 빠른 성능을 유지할 수 있는 장점이 있다.

 

다른 장점은 코드 재사용과 지식 공유이다. React Native를 사용하면 모바일 앱을 개발하는 데 필요한 리소스를 상당이 줄일 수 있다. 지식 공유는 물론 작성한 코드 또한 상당 부분을 공유할 수 있기도 하다.

---

Flutter와 React Native 중 어떤 프레임워크가 좋을까?

모든 상황을 고려하지 않고 Flutter가 최고다, React Native가 더 좋다 라는 식의 접근은 부적절하다고 생각이 든다. 애니메이션 성능은 어떻고 CPU 사용량은 어떻고 등.. 어떤 환경에 어떤 프레임워크가 좋을 지는 각 프레임워크의 강점과 장점들을 살펴보고 내가 개발하고자 하는 프로젝트의 특징은 어떠한지 연관지어 생각해야 한다.