React Native vs Flutter

크로스 플랫폼 프레임워크의 양대 산맥, React Native와 Flutter의 차이점과 장단점을 분석해 보려고 한다.

1. React Native

 

React Native는 페이스북(현 메타)에서 개발한 크로스 플랫폼 프레임워크이다. 페이스북이 React 라이브러리를 기반으로 개발했고, 컴포넌트의 라이프사이클은 같지만 React와 달리 HTML은 쓰지 않는다. HTML 대신 React Native가 자체 제공하는 컴포넌트를 쓴다.

1-1. 장점

1. 주 사용 언어: JS, TS

React Native는 React처럼 주 언어로 JavaScript와 TypeScript를 쓴다. 그래서 웹 개발자는 다른 개발 분야에 비해 상대적으로 접근하기가 쉽다.

2. 커뮤니티가 가장 크다

현재 시장에 나와 있는 크로스 플랫폼 프레임워크 중 가장 선두 주자이기 때문에, 크로스 플랫폼 커뮤니티 중에서는 React Native가 압도적으로 크다. 커뮤니티 규모가 큰 만큼 에러가 생겼을 때 관련 정보를 쉽게 얻을 수 있다.

관련 내용을 정정합니다!!!
Stack Overflow 스택 사용률, 토스 SLASH 영상 등을 참고한 결과, 2019년 이후 Flutter의 사용률이 React Native를 앞선 것으로 확인되었습니다.

3. 운영체제 순정 UI를 쓰기 쉽다

React Native는 안드로이드, iOS 등 운영체제의 네이티브 코드로 작성한 브릿지 모듈로 운영체제와 통신하는 방식으로 동작한다. 운영체제와 직접 통신하기 때문에 각 운영체제의 순정 UI를 쓰기 쉽다.

4. 이미 출시한 앱을 원격으로 업데이트할 수 있다

따로 포스트로 올린 내용이지만, React Native는 CodePush라는 시스템을 쓸 수 있다. 이 점이 React Native와 Flutter를 비교할 때 가장 대표적인 장점이다. → React Native CodePush 연결 방법

 

CodePush는 마이크로소프트의 Visual Studio App Center에서 운영하는 원격 업데이트 서비스이다. 이걸 쓰면 구글 플레이나 앱스토어에 이미 출시된 앱의 수정 사항을 원격으로 업로드할 수 있다. (단, JS/TS로 작성된 코드만 업로드할 수 있다.)

1-2. 단점

1. 웹 개발자에게 진입 장벽이 낮다고 말하기는 애매하다

React Native가 React를 기반으로 만들어져서 라이프사이클이나 쓸 수 있는 Hook이 거의 비슷한 건 사실이지만, 그렇다고 웹 개발자에게 React Native의 진입 장벽이 낮다고 말할 수는 없다.

 

React는 웹이고, React Native는 모바일이다. 웹과 모바일은 환경이 완전히 다르다. 웹 개발자가 React Native 개발을 시도하면, 웹에서는 거의 신경 쓸 일이 없는 부분까지 많이 검토해야 할 수 있다.

 

또 React Native는 엄연히 모바일이기 때문에, 안드로이드와 iOS에 대한 기초 지식이 있어야 앞으로 생길 이슈에 효과적으로 대응할 수 있다.

2. 오픈소스 패키지를 쓰는 데 위험 부담이 따른다

React Native는 React와 마찬가지로 거의 대부분을 오픈소스 패키지에 의존할 수밖에 없다. Firebase, 웹뷰, 차트 등 React Native가 자체적으로 구현할 수 없는 기능은 전적으로 오픈소스 패키지에 의존할 수밖에 없다. 쓰려는 패키지가 많은 개발자에게 검증된 패키지가 아니라면 앱 기능에 문제가 생길 수 있다. 당장 문제가 생기지 않더라도, 내 경험상 언젠가는 반드시 생긴다.

3. 일부 UI를 그리기가 매우 어렵다

React Native에서는 대표적으로 그림자, 애니메이션 등을 구현하기가 매우 어렵다. 내 경험상 특히 안드로이드에서 그런 어려움이 많다. 그래서 이런 것들을 개발하려면 오픈소스 UI 컴포넌트 라이브러리 사용을 고려해 봐야 한다.

4. 프로젝트의 React Native 버전 업데이트가 매우매우 어렵다

프로젝트를 만들 때 설정된 React Native 버전을 업데이트하는 게 매우매우 어려워서 사실상 불가능에 가깝다. 버전만 올리면 새 버전과 호환이 맞지 않기 때문에 마이그레이션에 많은 시간을 들여야 한다. 이게 React Native의 가장 대표적인 단점이다.

React Native CLI로 마이그레이션하는 방법도 있다고는 하지만, 내 생각에는 CLI도 믿을 수 없다.

 

특히 개인이 아닌 회사 단위로 진행하는 프로젝트라면 위험 부담이 너무 크기 때문에 절대로 시도하면 안 된다. 회사 프로젝트에서 앱 전면 개편 같은 상황이라면 프로젝트를 아예 새로 만드는 게 좋다.

 

(개발자로서 정말정말 냉정하게 생각해 봐도) 기존 프로젝트를 업데이트해서 마이그레이션하는 것보다, 프로젝트를 아예 처음부터 다시 만드는 게 훨씬 쉽다.

 

이 부분은 매우매우 중요하고, React Native 개발자로서 내가 장담할 수 있다. 이걸 시도하려는 사람이 있다면 절대 시도하지 말 것!!!

2. Flutter

 

Flutter는 구글에서 개발한 크로스 플랫폼 프레임워크이다. React Native에 비하면 확실한 후발 주자이지만, 요즘 시장에서 Flutter의 영향력이 조금씩 커지고 있고 출시 이후 구글도 매년 구글 I/O에서 Flutter를 비중 있게 다루고 있어서, 이 시장에서 Flutter의 발전 가능성이 주목받고 있다.

 

다만 Flutter는 메인 언어로 Dart를 쓰기 때문에, Flutter를 배우려면 Dart의 기본 개념을 먼저 익혀야 한다.

2-1. 장점

1. 웬만한 UI는 자체 제공한다

React Native는 오픈소스 라이브러리에 거의 전적으로 의존할 수밖에 없는 구조인데, 반대로 Flutter는 많이 쓸 만한 UI 기능을 Flutter 팀이 직접 개발해 공식적으로 유지보수해 주고 있다. 즉, Flutter가 공식 제공하는 UI는 구글이 직접 관리한다는 뜻이다.

2. UI 동작 성능이 뛰어나다

React Native는 브릿지 모듈로 운영체제와 직접 통신하는 방식이라고 이야기했다. 반대로 Flutter는 UI와 관련해서 운영체제와 직접 통신하지 않는다. Flutter 프레임워크는 UI의 최소 단위인 Widget과 애니메이션, 제스처 등을 포함하고 있고, 이런 UI를 모두 C/C++로 작성한 Flutter 엔진이 그린다. 운영체제는 이 Flutter 엔진을 실행하는 역할만 맡는다.

 

즉, Flutter로 만든 앱은 픽셀 하나하나의 UI를 운영체제가 아니라 Flutter가 모두 그리는 원리이다. 그래서 React Native에서 쉽게 그릴 수 없는 UI를 쉽게 그릴 수 있고, 두 운영체제 간 사이드 이펙트가 적으며, 동작 성능이 월등히 뛰어나다.

3. 앱 자체 성능도 월등히 뛰어나다

Flutter는 React Native와 달리 각 운영체제의 네이티브 코드로 컴파일할 수 있기 때문에 빌드 성능 면에서 React Native와 비교가 안 된다. 그래서 요즘은 대기업들도 Flutter를 눈여겨보는 추세이며, 최근에는 구글 페이 앱도 Flutter로 전면 재개발했고, 새 구글 페이 앱은 기존 앱보다 코드 줄 수가 35%가량 줄었다고 알려져 있다.

4. 프레임워크와 언어의 개발사가 같다

Flutter와 Flutter의 메인 언어인 Dart는 모두 구글의 제품이기 때문에, 두 팀이 서로 협력하면서 기능을 보완할 수 있다. 즉, Flutter 팀에 어떤 기능이 필요한데 Dart가 이를 제공하지 않는다면 Dart 팀이 바로 만들어 줄 수 있다. 다른 프레임워크는 프레임워크와 메인 언어의 개발 주체가 달라서 언어와 VM이 서로 영향을 주는 데 한계가 있었지만, Flutter는 Dart를 같은 구글이 개발했기 때문에 즉각적인 협력이 가능하다. 또 Flutter는 초기에는 그러지 못했지만, 빠른 앱 실행을 위해 AOT(Ahead of Time) 컴파일 방식도 채택할 수 있었다.

2-2. 단점

1. Dart를 따로 먼저 배워야 한다

React Native와 달리 Flutter는 메인 언어로 Dart를 쓰기 때문에, Flutter 개발을 하려면 Dart의 기본 개념을 먼저 학습해야 한다.

2. 진짜 네이티브 앱을 개발할 때와 같은 제어 기능을 가질 수 없다

이 부분은 크로스 플랫폼 프레임워크의 숙명이라, React Native에도 똑같이 있는 단점이다.

3. 다른 앱보다 앱 크기가 크다

Flutter는 UI를 직접 그리는 방식이라, 이 UI를 실행하기 위한 그래픽 엔진 코드까지 함께 패키징해서 빌드해야 하기 때문이다.

4. 운영체제 순정 UI를 쓸 수 없다

앞에서부터 계속 이야기했지만, Flutter는 운영체제와 직접 통신하지 않고 UI를 직접 그리는 방식이라 운영체제의 순정 UI와 기능을 쓸 수 없다. 물론 Flutter 공식 문서를 보면 Material(구글의 디자인 시스템)과 Cupertino(애플의 디자인 시스템)를 쓸 수 있다고 나와 있지만, 그 UI들은 진짜가 아니다. 최대한 비슷하게 만든 가짜에 불과하기 때문에 진짜 운영체제 순정 UI와는 미세하게 느낌이 다를 수 있다.

 

따라서 구글과 애플의 디자인 시스템을 쓰지 않고 나만의 디자인 언어로 커스텀 UI를 가진 앱을 만들고 싶다면 Flutter가 좋은 방법이 될 수 있다. 반대라면 React Native를 쓰는 게 효율적일 수 있다.

3. 차이점 간단 정리

(위에서 정리하지 않은 내용도 있음)

3-1. React Native

1. 커뮤니티 크기가 압도적으로 크다.
2. 운영체제별 순정 UI를 쓴 앱을 만들기 쉽다.
3. 프로젝트 버전을 업데이트하기 매우 어렵다.
4. CodePush로 앱을 원격 업데이트할 수 있다.
5. 범용 개발 언어를 쓴다. → JS/TS

3-2. Flutter

1. 커뮤니티가 상대적으로 작다. (아직은)
2. 자체 디자인 언어를 가진 커스텀 UI 앱을 만들기 쉽다.
3. 프로젝트 버전을 업데이트하기 쉽다. → 큰 사이드 이펙트가 없는 것으로 알고 있음.
4. CodePush를 쓸 수 없다. (현재는 그런 것으로 알고 있음)
5. 전용 개발 언어를 쓴다. → Dart

4. 마지막으로

이렇게 정리했지만, 그래서 React Native와 Flutter 중 어느 게 더 좋고 어느 쪽이 이길 것인가 하는 의문이 들 수 있다. 그 답은 나도 잘 모르겠다. React Native와 Flutter는 각자 장단점이 있고, 그 장단점이 너무 명확해서 뭐가 더 좋다고 말하기 애매하다. 다만 어떤 앱을 개발하고, 어떤 기능을 제공하고, 어떤 UI를 적용할지에 따라 무엇을 쓸지가 갈릴 것이다.

 

나도 그 점을 잘 알고 있기 때문에, 둘 중 하나만 쓸 줄 아는 사람이라면 다른 하나를 한번 시도해 보는 것이 정말 가치 있는 일이 아닐까?

 

이 글은 2024년 3월 28일 velog에 작성했던 글을 티스토리로 옮긴 것입니다.