Mobile
Flutter와 React Native 비교하기
date
Sep 12, 2024
thumbnail
slug
flutter-vs-react-native
author
status
Public
tags
Flutter
React Native
Mobile
summary
크로스 플랫폼 앱 개발 프레임워크인 Flutter와 React Native. 실제 프로덕션 환경에서 어떤 기술이 더 나을까? 비교해보자
type
Post
category
Mobile
들어가며
React를 학습한 뒤에 모바일 애플리케이션 개발을 위해 React Native(이하 RN)를 배워 보려 했다. 크로스 플랫폼 모바일 개발 프레임워크 중 규모가 클 것이라고 생각했기도 했고, 주위에 사용하고 있는 사람도 많았다. 그런데 실제로 Flutter를 사용하고 있는 회사도 종종 보여서 이 두 기술의 장단점을 비교해보고 선택해보고자 한다.
모바일 애플리케이션의 종류
웹 앱
웹 앱 (Web Application)
웹 기술로 구현하는 앱을 통친하는 용어이다. HTML, CSS, Javascript를 통해 만들어진 앱으로, 브라우저 주소창이 존재하지만 숨길 수 있으며 모바일 기기에 아이콘을 사용할 수 있어 네이티브 앱처럼 보이게 할 수 있다.
웹 앱의 장점
- 네이티브 앱과 달리 설치할 필요 없이 브라우저로 접근할 수 있음
- 구글 플레이스토어나 애플 앱스토어에 배포할 필요가 없어 업데이트가 용이
- 친숙한 웹 개발 기술인 HTML, CSS, Javascript, php, asp 등을 사용할 수 있음
웹 앱의 단점
- 브라우저 API는 사용할 수 있으나 모바일 기기의 하드웨어 장치에 접근할 수 없어 센서, 카메라, 블루투스 등 디바이스 자체 운영체제의 기능 활용 불가
네이티브 앱
네이티브 앱 (Native Application)
네이티브 앱은 안드로이드 또는 아이폰 OS 환경에서 제공하는 언어(Java, Kotlin, Swift)를 기반으로 개발되어 해당 모바일 운영체제에서만 작동되는 앱을 말한다.
네이티브 앱의 장점
- 플랫폼의 모든 기능을 사용할 수 있고 최대치의 성능 활용
- 네이티브 앱이 가질 수 있는 자연스러운 UX를 구현할 수 있다.
- 카메라, GPS, 블루투스 등과 같은 디바이스의 기능을 사용하거나 영상 편집, 게임과 같이 폰 자체 성능을 최대한 사용해야 하는 앱은 네이티브 앱으로 만드는 것이 권장됨
네이티브 앱의 단점
- 각 플랫폼 별로 개발자가 필요 → 소요되는 인력과 시간이 2배
- 앱 배포시 구글 플레이스토어와 애플 앱스토어 심사를 각각 통과해야 함 → 동시에 신규 업데이트를 진행하지 못할 수 있음
크로스 플랫폼 앱
크로스 플랫폼 앱 (Cross Platform Application)
크로스 플랫폼 또는 멀티 플랫폼은 컴퓨터 프로그램, 운영 체제, 컴퓨터 언어, 프로그래밍 언어, 컴퓨터 소프트웨어 등이 여러 종류의 컴퓨터 플랫폼에서 동작할 수 있다는 것을 뜻하는 용어이다. 하나의 앱을 여러 플랫폼(주로 안드로이드와 iOS)에서 모두 작동할 수 있게 만들 수 있다.
크로스 플랫폼 앱을 개발하는 기술
- React Native
- Flutter
- .NET 마우이(구자마린)
크로스 플랫폼 앱의 장점
- 하나의 소스 코드로 구현한 앱이 안드로이드와 iOS에서 똑같이 작동
크로스 플랫폼 앱의 단점
- 네이티브 앱에 비해 성능이 떨어지고, 디바이스 자체 장치에 대한 활용도가 떨어짐
- 앱 배포 시 구글 플레이스토어와 애플 앱스토어 심사를 각각 통과해야 함
하이브리드 앱
하이브리드 앱 (Hybrid Application)
하이브리드 앱은 안드로이드 및 iOS와 같은 여러 모바일 플랫폼에서 다운로드하여 설치할 수 있는 앱으로, 네이티브 앱과 웹 앱의 개발 방식을 모두 사용하는 앱이다. 네이티브 또는 크로스 플랫폼으로 앱을 만들지만, 화면을 일일이 직접 개발하지 않고 브라우저 역할을 하는 웹 뷰(Web View)라는 요소를 만들어 웹 화면을 보여준다.
하이브리드 앱의 장점
- 신규 업데이트 및 배포 시에 웹 배포만으로 서비스를 업데이트 할 수 있어 네이티브에 비해 빠름
- 디바이스 자체 장치인 카메라, 블루투스, 센서 등의 기능은 네이티브 단에서 수행할 수 있음
- 특정 UI를 제외하고 네이티브 앱과 유사한 UI와 UX를 구현할 수 있음
하이브리드 앱의 단점
- 여전히 네이티브 앱을 사용하기에 네이티브 앱 개발 언어를 사용하는 개발자가 필요
React Native와 Flutter 개요
React Native의 이모저모
- 페이스북에서 2015년에 출시되었다.
- JavaScript 기반 프레임워크로 프론트엔드 개발 기술인 React를 기반으로 만들어졌다.
- 프론트엔드 개발자가 익숙한 npm을 통해 iOS, 안드로이드 앱을 동시에 만들 수 있다.
- 런타임 중 JavaScript 브릿지를 생성하고 JavaScript 코드를 네이티브 코드로 변환하는 과정을 거친다.
- 브릿지를 통해 네이티브 UI에 접근하고, Objective-C API로 iOS 컴포넌트를, 자바 API로 안드로이드 컴포넌트를 렌더링할 수 있다.
- Visual Studio Code 등의 코드 에디터를 그대로 사용할 수 있어 새 도구(안드로이드 스튜디오, Xcode)를 익힐 필요가 없다.
Flutter의 이모저모
- 구글에서 2017년에 출시되었다.
- 안드로이드와 iOS 뿐만 아닌 데스크탑(Windows, MacOS), 웹 브라우저에서 작동하는 앱을 구현할 수 있다.
- 사용하는 Dart 언어는 C, JavaSript, Java 등 여러 언어의 특징을 가지고 있어 빠르게 배울 수 있다.
- 별도 브릿지가 필요하지 않고 앱 시작 속도가 비교적 빠르고 최적화 및 성능이 우수하다.
- Dart는 브릿지 없이 앱이 빌드되기 전에 코드를 미리 컴파일하는 AOT(Ahead-of-time) 전략을 사용한다. 컴파일 타임에 Dart 코드를 네이티브 코드로 컴파일하기 때문에 브릿지 없이 각 플랫폼과 직접 통신할 수 있다.
- 자체적 위젯을 Canvas 위에 직접 렌더링하여 여러 플랫폼에서 똑같은 UI 제공이 가능하다.
- 안드로이드 스튜디오, Visual Studio Code, IntelliJ와 같은 여러 개발 환경에서 개발 가능하다.
가장 큰 차이점
Flutter는 모든 컴포넌트를 자체 캔버스(Canvas) 위에 렌더링하지만, React Native는 JavaScript 컴포넌트를 네이티브로 변환하여 렌더링한다. 이 때문에 컴포넌트 업데이트(예를 들어 iOS 16)가 Flutter 앱에는 영향을 미치지 않지만 React Natvie 앱에는 영향을 미친다.
이 점은 어디에 있냐에 따라 좋은 점일 수도, 나쁜 점일 수도 있다. 예를 들어, 컴포넌트가 원하는 대로 정교하게 유지되기를 원한다면 Flutter의 접근 방식이 만족스러울 수 있다. 하지만 최신 네이티브 컴포넌트 디자인을 따라잡기를 원한다면 React Native가 최선의 방법이다. React Native에서는 이 업데이트가 자동으로 이루어진다. 또한 React Native 앱의 컴포넌트가 새로운 iOS 디자인을 따르기 원하지 않는 경우에는 자동 컴포넌트 업데이트 옵션을 끄면 된다.
Flutter에서 최신 기본 컴포넌트를 포함하려면 앱을 일일이 업데이트해야 한다.
무엇이 더 많이 사용되나?
Flutter와 React Native는 2년의 출시 기간 차이가 존재한다. Flutter가 2년 늦게 출시되었다. Flutter 출시 2년 후인 2019년부터 추세를 살펴보자.
2019년에는 React Native가 Flutter를 크게 앞선다.
2021년에도 React Native가 앞서고 있었으나 Flutter가 근소한 차이로 따라잡은 것이 보인다.
2022년부터는 결과가 비등하며 치열한 경쟁이 지속됐다.
2023년 스택 오버 플로우의 설문에 따르면 Flutter가 React Native보다 근소하게 앞서고 있는 것으로 보인다. Flutter의 성장세가 React Native를 앞지른 것이다.
React Native와 Flutter 전격 비교
아래 내용은 Flutter vs. React Native라는 아티클을 번역한 것으로 개인적인 의견이 아님을 알려드립니다.
학습 곡선 (Learning Curve)
우선 요약
- JavaScript를 사용하는 Reat Native보다 Dart를 사용하는 Flutter가 더 배우기 쉽다.
React Native가 Flutter보다 유리한 점은 세계에서 가장 인기있는 프로그래밍 언어 중 하나인 JavaScript를 사용한다는 점이다. 하지만 JavaScript가 가장 쉽고 흥미로운 프로그래밍 언어라는 건 아니다. 목수가 고품질 도구를 선호하는 것처럼 개발자들도 재미있고 편리하게 작업할 수 있는 프로그래밍 언어를 선호한다. 이는 작업을 더욱 즐겁고 효율적으로 만들어준다.
그렇다면 Flutter와 React Natvie 중 어떤 것이 더 배우기 쉬울까?
개발자의 관점에서 보면, Flutter가 React Native보다 배우기 쉽다.
앞서 언급했듯이, JavaScript는 결코 친숙한 프로그래밍 언어가 아니다. 클래스 안에 클래스가 있는 등 여러가지 특이점이 있어 때로는 개발자들이 작동 방식을 이해하는 데 어려움을 겪을 수 있으며,이는 코딩을 불필요하게 복잡하게 만든다.
React Native 프레임워크 자체도 문제는 아니다. 사실 많은 훌륭한 앱들이 React Native를 사용하고 있다. 그러나 몇 가지 미묘한 점에 익숙하지 않으면 개발 환경을 설정하는 데 오랜 시간을 낭비할 수 있다. 반면 Flutter는 React Native보다 개발자 친화적이다. Dart라는 프로그래밍 언어는 JavaScript보다 작업하기 쉽고 이해하기 쉽다. Dart는 네이티브 모바일 앱 개발에 사용되는 프로그래밍 언어와 패러다임 및 사용 면에서 더 가깝다.
이러한 이유로 Flutter 프레임워크는 Stack Overflow 2022 설문에서 “Most Loved Technology — Other Frameworks and Libraries” 카테고리에서 거의 최상위에 올랐다.
커맨드 라인 인터페이스(CLI)
우선 요약
- Flutter는 Flutter Doctor와 Flutter CLI를 사용하여 강력한 개발 환경 설정이 가능하다.
- React Native의 시작 가이드는 경험이 더 필요하다. 그러나 Expo같은 도구로 커버할 수 있다.
Flutter는 Flutter Doctor와 같은 도구가 포함된 커맨드 라인 인터페이스를 제공한다. Flutter Doctor는 선택한 IDE와 iOS 또는 안드로이드 개발 환경을 설정하는 데 도움을 준다. 로컬 머신에 설치된 도구를 검색하고 그 설정을 확인한다. Flutter CLI와 Flutter Doctor를 함께 사용하면 새로운 Flutter 모바일 앱을 위한 환경 준비가 훨씬 원활해진다.
반면, React Native의 설정은 조금 더 경험이 필요하다. React Native의 시작 가이드는 프로젝트를 시작하는 데 필요한 세부 정보와 도움을 많이 제공하지 않는다. 그러나 React Native에는 Expo가 있다. Expo는 React Native 앱을 더 쉽게 구축할 수 있도록 도와주는 도구 세트다.
Expo 클라이언트를 사용하면 앱을 빌드하는 과정에서 모바일 폰에서 직접 앱을 볼 수 있다. (안드로이드 스튜디오나 XCode를 거칠 필요가 없다.) Expo CLI는 개발, 로그, 배포, 이터레이션, 컴파일 등을 위한 도구를 제공하여 새로운 React Native 앱을 만드는 과정을 용이하게 한다.
Flutter와 React Native 성능 비교
우선 요약
- React Native는 JavaScript 브릿지 기반 통신이라는 태생적 한계로 Flutter보다 느리다.
- React Native는 JSI라는 새 브릿지 모듈로 성능을 높였고, Flutter는 Impeller라는 새 그래픽 엔진으로 이전보다 더 뛰어난 성능을 가지게 되었다.
React Native의 아키텍처는 JavaScript와 네이티브 UI 컴포넌트 및 디바이스 전용 요소(블루투스, 센서, 카메라 등) 간의 상호 작용을 가능하게 하는 JavaScript 브릿지를 필요로 한다. 이 브릿지 기반 통신 때문에 React Native는 Flutter보다 다소 느리다. 그럼에도 불구하고 React Native와 Flutter는 숙련된 개발자의 손에 따라 고성능 애플리케이션을 만들어낼 수 있다.
JSI (React Native)
React Native는 이제 JSI(JavaScript Interface)라는 새로운 브릿지 모듈을 도입하여 컴포넌트 간 통신을 더 빠르게 만들었다. JSI는 JavaScript와 네이티브 레이어 간의 더 효율적인 브릿지 역할을 하여 더 빠른 동기화와 매끄러운 성능을 제공한다. 이러한 React Native 아키텍처의 개선은 더 빠른 앱 개발과 더 반응성이 뛰어난 UI에 기여하여 크로스 플랫폼 모바일 앱 개발 시장에서의 입지를 강화했다.
Impeller (Flutter)
Flutter는 브릿지에 의존하지 않는다. 2023년 중반까지 Flutter의 핵심 그래픽 엔진인 Skia가 UI를 네이티브 코드로 컴파일하는 역할을 담당했다. 그 이후 Flutter는 Impeller로 전환했다. Impeller는 Skia와 달리 GPU 사용을 최적화하도록 설계되어 UI 성능과 효율성을 높였다. 이 새로운 렌더링 엔진인 Impeller는 Metal 및 Vulkan과 같은 고급 GPU API를 활용하여 더 효율적인 렌더링, 낮은 전력 소비, 더 나은 프레임 속도를 제공한다. 이는 Flutter가 최신 하드웨어를 활용해서 더 뛰어난 앱 경험을 제공하겠다는 의지를 나타낸다.
디버깅
우선 요약
- 자체 렌더링 엔진을 사용하는 Flutter에 비해 브릿지 통신을 활용하는 React Native는 예외 및 오류가 네이티브 부분에서 발생할 때 디버깅이 쉽지 않다.
- 그러나 괜찮은 디버깅 도구인 Flipper를 사용할 수 있다.
React Native에서 디버깅은 문제가 될 수 있다. 특히 특정 예외나 오류가 애플리케이션의 네이티브 부분에서 발생할 때 더욱 그렇다. 예를 들어, 버그가 JavaScript 쪽, 즉 React Native나 앱의 코드에서 발생할 수 있다. 네이티브 쪽에서도 React Native나 서드파티 라이브러리에서 버그가 발생할 수 있다.
하지만 React Native에는 괜찮은 디버거인 Flipper가 있다. Flipper는 모바일 애플리케이션 디버깅을 위한 플랫폼으로 React Native, JavaScript 코드, 네이티브 코드와의 즉시 통합(out-of-the-box integration)을 제공한다.
Flutter에는 안드로이드 스튜디오와 Visual Studio에서 개발을 지원하는 도구 덕분에 디버깅이 더 쉽다. 크롬 브라우저에서 알려진 개발자 도구와 OEM 디버거는 개발자가 오류를 잡고 이해하는 데 도움을 준다. 또한 시각적 레이어 디버깅을 위한 도구인 Flutter Inspector를 통해 앱의 시각적 레이어를 확인하고 왜 그렇게 보이는지 파악할 수 있다.
패키지와 라이브러리
우선 요약
React Native와 Flutter 두 생태계 모두 풍부한 패키지와 라이브러리를 보유하고 있다.
React Native의 생태계는 Flutter보다 훨씬 크다. 이는 180만 개 이상의 패키지가 호스팅되고 있는 노드 패키지 매니저(npm) 덕분으로, 오랜 역사를 가지고 있고 주로 웹 개발에 맞춰져 있으나 많은 라이브러리가 React Native 앱에 쉽게 적용될 수 있다.
그러나 주의할 점으로 많은 JavaScript 라이브러리의 퀄리티가 낮아 실제 프로덕션에 사용기 어려운 경우가 많으므로, 앱에 사용할 라이브러리를 선택할 때는 신중해야 한다.
Flutter/Dart의 pub-dev 저장소는 다이내믹하게 성장하고 있지만 여전히 역사가 짧고 준비되어 있는 솔루션이 적다. 하지만 Github 저장소를 검색해보면 두 기술의 생태계 크기는 비슷하다는 것을 알 수 있다. 2023년 2월 기준 Flutter 저장소 개수는 487,428개이고 React Native UI 라이브러리는 355,832개다. Flutter의 경우 2022년에는 241,632개였으나 이 숫자가 거의 두 배로 증가했다. 이 때 React Native는 232,168개였다.
두 생태계 모두 풍부한 애니메이션, 상태 관리, 네트워킹 패키지들을 가지고 있다.
성숙도
기술의 성숙도는 일반적으로 장기 지원이 이루어지며 넓고 긍적적으로 채택됨으로 나타난다. React Native는 고품질의 서드파티 라이브러리가 많고 주요 브랜드의 기술 스택에 통합되어 있다.
Flutter도 빠르게 성장하고 있으며, 두 기술 모두 프로덕션에서 안전하게 사용할 수 있을 만큼 성숙했다고 말할 수 있다.
문서화
우선 요약
- 공식 문서는 Flutter가 잘 되어 있다.
- React Native는 복잡한 문제에 대한 정보를 커뮤니티 사이트에서 찾을 수 있다.
React Native가 Flutter보다 더 오래된 기술이지만, 공식 문서는 Flutter가 더 깊고, 찾기 쉽게 되어 있는 편이다. Flutter 문서에는 다양한 기술 배경 및 경험 수준을 가진 개발자를 위한 ‘시작하기’ 섹션이 마련되어 있다.
예를 들어, Flutter의 ‘시작하기’ 섹션은 Flutter를 처음 접하는 개발자나 웹 개발자가 모바일 애플리케이션에서 구성 요소를 배치하는 방법을 쉽게 찾을 수 있도록 돕는다.
반면 React Native의 공식 문서는 비슷한 수준의 주제나 깊이가 부족하지만, Stack Overflow와 Reddit과 같은 커뮤니티 사이트에서 많은 주제에 대한 정보가 있으며, 개발자들이 서로 복잡한 문제를 해결하는 데 도움을 주고 받고 있다.
개발자 커뮤니티
우선 요약
- 두 커뮤니티 모두 활발하며 많은 전문가를 가지고 있다.
- Flutter가 23년 2월 기준 Github에서 더 많은 문제를 해결하고 있다.
Flutter와 React Native 모두 커뮤니티가 활발하며, 매년 많은 컨퍼런스 / 해커톤 / 이벤트 등이 열리고 있다. 개발 관련 질문을 해결하는 데 있어 커뮤니티의 규모와 전문가들과의 커뮤니케이션 채널은 매우 중요하다. 두 프레임워크 모두 강력한 커뮤니티 지원 채널을 갖추고 있어서 복잡한 질문도 대부분 답변을 받을 수 있다.
아래는 각 기술엥 대해 가장 인기있는 커뮤니케이션 채널을 보다 자세히 비교한 표이다.
보다시피 Flutter 커뮤니티는 React Native보다 GitHub에서 더 많은 문제를 해결하고 있다. 버그는 앱의 사용자 경험을 크게 저하시킬 수 있으며, 버그가 오랫동안 해결되지 않아 지속되는 것은 중요한 문제다.
IDE (Integrated Development Environment)
우선 요약
- 둘 다 여러 IDE를 사용할 수 있다.
- 네이티브 안드로이드 개발자는 Flutter가 더 친숙할 수 있다.
기본적인 메모장 등으로 코드를 작성할 수도 있지만 전용 통합 개발 환경(IDE)에서 개발하는 것이 훨씬 쾌적하고 효율적이다. IDE는 디버거, 코드 편집기, 빌드 자동화 도구, 컴파일러 등 다양한 유용한 개발 도구를 내장하고 있다.
Flutter는 개발자가 안드로이드 스튜디오나 Visual Studio와 같은 IDE를 선택할 수 있도록 해준다. React Native에서도 Visual Studio나 WebStorm 등을 사용할 수 있다.
네이티브 안드로이드 개발 경험이 있는 개발자에게는 Flutter가 더 쉽고 친숙하게 느껴질 수 있는데, 이는 안드로이드 스튜디오가 개발자 친화적이기 때문이다.
크로스 플랫폼 능력
우선 요약
- 두 기술 모두 크로스 플랫폼 능력이 출중하다.
- Flutter 4는 데스크톱 앱 개발에 중점을 두고 있다.
React Native는 개발자가 iOS, 안드로이드, 웹을 위한 앱을 구축할 수 있게 해준다. 최근 Microsoft는 React Native로 데스크톱 앱을 작성할 수 있는 훌륭한 프로젝트를 공개했다. (MacOS + Windows)
React Native 0.71 버전(초기에는 몇 가지 문제가 있었음)에서는 기본적으로 TypeScript를 사용하여 크로스 플랫폼 개발 경험을 개선하고 있으며, 새로운 아키텍처 업데이트와 Flexbox Gap을 통한 레이아웃 관리가 포함되어 있다. 이 릴리스는 스타일과 접근성을 위한 웹 영감을 받은 props를 제공하여 일관성 있는 React Native의 API를 만든다. 수많은 플러그인 및 서드파티 라이브러리와의 호환성 덕분에 React Native는 크로스 플랫폼 애플리케이션 개발을 간소화하여 개발자가 다양한 기능을 신속하게 통합할 수 있도록 한다.
Flutter는 웹, macOS, Windows, Linux, Android, iOS 및 임베디드 시스템(예를 들어 차량의 인포테인먼트 시스템)을 위한 앱을 개발할 수 있다.
Flutter 3는 모든 호환 플랫폼 간에 코드를 공유할 수 있는 SDK를 통해 진정한 크로스 플랫폼 개발 기능을 약속했다. 실제로 Flutter 4는 데스크톱 앱 개발에 중점을 둘 예정이다. 반면 Flutter의 최신 릴리스인 Flutter 3.7은 개발자 도구, 국제화, Material 3 지원에 대한 기타 업데이트와 함께 iOS를 위한 새로운 렌더링 엔진과 백그라운드 처리 개선을 통해 성능을 향상시켰다.
핫 리로드 기능 (Hot Reload Feature)
우선 요약
- 둘 다 핫 리로드 기능이 있지만 복잡한 코드 변경은 재 컴파일이 필요하다.
핫 리로드는 개발자가 앱을 다시 로드하고 UI의 변경 사항을 확인할 수 있게 해주는 매우 편리한 기능이다. React Native의 핫 리로드에 해당하는 기능은 Fast Refresh로, 기본적으로 Flutter의 핫 리로드와 동일한 기능을 수행한다.
그러나 두 기능 모두 상태 없는 위젯을 상태 있는 위젯으로 변경하는 등의 고급 코드 변경 사항은 핫 리로드할 수 없다는 단점이 있다. 복잡한 변경은 앱을 다시 컴파일하는 과정이 필요하다.
프로그래밍 언어
Dart 언어는 안드로이드의 Java/Kotlin 언어와 매우 유사하여 기존에 네이티브 모바일 개발 경험이 있는 개발자가 배우기 쉽다. 반면 JavaScript는 이보다 덜 직관적이어서 마스터하기 더 어려운 편이다. 두 프레임워크 모두 플랫폼별 특정 기능을 위한 네이티브 모듈을 지원한다.
Material Design
우선 요약
- Flutter에는 Material Design이 내장되어 있다.
- 외부 종속성이 생기지만 React Native는 라이브러리를 활용하면 된다.
Flutter에는 Material Design 지원 기능이 내장되어 있다. 프레임워크에 직접 통합되어 즉시 사용 가능한 다양한 Material Design 위젯 셋을 제공한다. 이는 개발자가 최소한의 노력으로 앱에서 Material Design 원칙과 컴포넌트를 쉽게 구현할 수 있음을 의미한다. Flutter의 Material 위젯은 Google의 Material Design 가이드라인을 엄격히 준수하도록 설계되어서 플랫폼 전반에 걸쳐 일관된 모양과 느낌으로 시각적으로 매력적이고 기능적으로 풍부한 앱을 쉽게 만들 수 있다.
React Native에는 Material Deisgn 컴포넌트가 내장되어 있지 않지만 서드파티 라이브러리를 통해 Material Design을 활용할 수 있다. 널리 사용되는 라이브러리 중 하나인
react-native-paper는 React Native와 호환되는 광범위한 Material Design 컴포넌트를 제공한다. 개발자는 이러한 라이브러리를 사용해서 React Native 앱에서 디자인을 구현할 수 있으나 외부 종속성을 통합하고 관리하는 추가 단계가 필요하다.누가 Flutter를 쓰고 누가 React Native를 쓰는가?
Flutter는 다음과 같은 회사에서 기술 스택으로 사용하고 있다.
- Alibaba
- BMW
- eBay
- Square
- Groupon
- CapitalOne
React Native는 전 세계적으로 유명한 여러 브랜드가 사용하고 있다.
- Uber Eats
- Skype
- Tesla
- Coinbase
- Slaesforce
결국 React Native가 Flutter보다 나을까?
오랫동안 CTO들은 React Native가 Flutter보다 왜 더 좋은지에 대해 질문해왔으나, 이러한 질문의 기준이 이미 변화되었다. 숙련된 개발자의 손길에서는 React Native와 Flutter 모두 거의 네이티브 앱에 가까운 성능과 느낌의 훌륭한 앱을 개발할 수 있다. 그러나 Flutter는 점점 더 많은 기업과 개발자들에 의해 사용되고 있으며, 이 추세는 전 세계적으로 계속되고 있다.
그럼에도 불구하고 두 기술 중 하나를 선택할 때 단순히 인기나 기술적 장단만을 고려해서는 안된다. 예를 들어, 개발을 아웃소싱한 뒤 Flutter 개발자를 확보하여 앱을 유지보수할 수 있을지를 고민해야 한다.
Flutter의 완만한 학습 곡선은 귀중한 자산이다. 개발자가 프로젝트에 빠르게 참여해야 할 때, Flutter의 문서와 비교적 쉬운 Dart 언어는 큰 도움이 된다. 하지만 Dart는 React Native의 인기있는 JavaScript에 비해 그리 널리 사용되지 않는 프로그래밍 언어다. 따라서 숙련된 Flutter 개발자를 찾는 것이 어려울 수 있다.
또한, 생태계 문제도 고려해야 한다. Flutter는 구글에서 공식적으로 개발한 수많은 SDK(예를 들어 Google Ads SDK)를 제공받고 있다.
ChatGPT가 분석한 Flutter와 React Native 비교
항목 | Flutter | React Native |
개발 언어 | Dart | JavaScript, React |
UI 렌더링 | 모든 위젯을 자체 렌더링 | 네이티브 UI 컴포넌트 사용 |
개발 편의성 | Hot Reload 지원, 위젯 시스템 | Fast Refresh 지원, React 기반 |
성능 | 네이티브에 가까운 성능 | 브릿지 구조로 인해 비교적 성능 떨어짐 |
플랫폼 호환성 | 모든 플랫폼에서 동일한 UI 경험 제공 | 플랫폼별 네이티브 UI를 사용 |
생태계 | Google 지원, 빠르게 성장 중 | JavaScript와 npm 패키지 생태계 |
커뮤니티 | 빠르게 성장하는 중 | JavaScript와 React 커뮤니티로 강력함 |
언제 무엇을 선택할까?
- Flutter를 선택하는 경우
- 모든 플랫폼에서 동일한 UI/UX를 유지하고 싶은 경우
- 복잡한 UI나 애니메이션이 필요한 경우
- Google의 강력한 지원과 문서화를 중시하는 경우
- React Native를 선택하는 경우
- 이미 JavaScript와 React에 익숙한 개발팀이 있는 경우
- 기존 웹 애플리케이션과 코드 공유가 필요할 경우
- 더 네이티브한 UI와 사용자 경험이 중요한 경우
아티클을 읽고 느낀 점
전통 강호 React Native와 신흥 강자 Flutter
번역한 글은 2024년에 올라와서 Flutter와 React Native를 비교한 글인데, 어찌 Flutter를 찬양하는 느낌이 있다. 혹시 그 전까지만 해도 React Native가 더 좋거든?!이 주된 여론이었을 수도 있다.
한국에서 React Native 개발자가 더 많은 것은 당연한 수순이다. 사용자가 많은 JavaScript와 React를 다룰 수 있는 개발자가 언어적 문제 없이 손쉽게 넘어갈 수 있기 때문이다. Flutter의 성장세가 우수하지만, 비교적 포트폴리오가 약하고 시니어 개발자가 부족하다는 의견이 있다.
오랫동안 사용해야 하는 모바일 앱을 개발할 때 이후 이를 유지보수할 수 있는 Flutter 개발자가 없다면 어떻게 될까? 이런 문제들과 복합적인 이유들로 인해 React Native 개발자 구인이 더 많아 보이는 것은 어떻게 보면 당연해 보인다.
그런데 오랫동안 사용해야 하고 성능이 중요하면 네이티브로 만들어야 되는거 아님?…
둘 중 어떤 것을 선택하는 가는 기술적 장단만으로 고려해서는 안된다는 원문의 내용이 기억에 남는다. JavaScript 진영에서는 유명한 말이 있다.
“Any application that can be written in JavaScript, will eventually be written in JavaScript.” ㅡ Stack Overflow Co-Founder Jeff Atwood
“자바스크립트로 작성할 수 있는 애플리케이션은 언젠가 반드시 자바스크립트로 작성될 것이다.”
Flutter의 성능과 최적화가 뛰어나고 기본 제공 도구 셋이 뛰어나지만, JavaScript가 워낙 범용성이 높은 언어이다 보니 JavaScript를 활용한다는 점이 RN의 큰 장점이라고 할 수 있다.
귀에 딱지 앉은 말 ‘프레임워크나 언어가 중요한 것이 아니다.’
중요한 것은 자료구조와 알고리즘이라는 전문가, 중요한 것은 뭐든 빨리 시작해서 꾸준히 앱 개발 생태계와 생명 주기, 아키텍처를 익히는 것이라는 전문가, 중요한 것은 프로그래밍 패러다임이라는 전문가 등 프레임워크와 언어는 어느 정도 실력이 쌓이면 중요한 것이 아니라고 한다.
덕분에 결정이 쉬워짐
‘그냥 회사에서 쓰라는 거 빨리 배워서 쓰면 된다.’
지금 인턴으로 있는 회사도, 곧 입사할 스타트업 회사도 Flutter를 사용하고 있다. CTO분과의 대화에 따르면 기본적인 깡성능과 최적화 문제로 인해 Flutter를 선택했다고 한다. 내 경우 프론트엔드를 공부하면서 JavaScript와 TypeScript를 먼저 배웠기 때문에 언어적 장점을 놓치는 것은 아쉽지만, 언제나 새로운 언어를 한 번 익혀보고 싶다는 마음의 소리가 있었다.
Dart가 많이 사용하는 언어는 아니지만, 배워두면 분명 또 다른 언어를 배울 때 도움이 될 터. 익힐 거면 빨리 익혀서 내 기술적 역량을 높이는 것이 중요하겠다.
오케이. Flutter. 렛츠고.
여러분의 생각은 어떠신가요?
