React Native vs Flutter
목표: RN과 Flutter를 간결 비교
전제: 모바일 앱 + GCP/Firebase 사용
TL;DR
- RN: JS/TS + React, 네이티브 브리지 방식 → 웹 프론트 전환 쉬움
- Flutter: Dart + 자체 렌더러(Skia) → 픽셀 일관성·애니메이션 강점
- Firebase: 둘 다 잘 붙음. 초기 세팅/옵션 생성은 FlutterFire가 단순
1) 아키텍처 관련
| 항목 | React Native | Flutter |
|---|---|---|
| 언어/패턴 | JS/TS + React(훅) | Dart + 위젯 트리 |
| 렌더링 | JS ⇄ 네이티브 브리지 | Skia 엔진으로 직접 그림 |
| UI 특성 | 플랫폼 룩앤필 자연스러움 | 픽셀 단위 일관성↑, 커스텀 UI 강함 |
| 성능 초점 | 브리지 오버헤드 관리 | 프레임 안정성·애니메이션 유리 |
| 네이티브 연동 | 커뮤니티 브릿지 풍부 | Platform Channel 비교적 단순 |
2) DX & 생산성
React Native
- 웹 프론트(React) 경험 그대로 전이, NPM 생태계 풍부
- 패키지/네이티브 의존 조합에 따라 iOS·Android 이슈가 분기될 수 있음
- 복잡 애니메이션/스크롤은 최적화 전략 필요(reanimated 등)
Flutter
- Hot reload 품질, 레이아웃·애니메이션 체계적, 디자인 핑퐁 감소
- 공식 문서·템플릿 정제, 멀티플랫폼 옵션 자동화(flutterfire configure)
- Dart 학습 필요, JS 생태계 재사용은 제한
3) Firebase/GCP 궁합
| 항목 | React Native | Flutter |
|---|---|---|
| 기본 연동 | @react-native-firebase/* 성숙 | FlutterFire 일관 |
| 옵션/세팅 | google-services/plist 등 수동 관리 빈도 | flutterfire configure가 옵션 파일 자동 생성 |
| 에뮬레이터 | 가능 | 설정 간단, 로컬 루프 짧음 |
| Functions/Run | 동일(프론트와 무관) | 동일 |
비용은 프레임워크 무관. 개발 단계는 에뮬레이터 + 무료 할당으로 최소화 가능.
4) 성능 & UI
- RN: 네이티브 컴포넌트 활용 → OS 룩앤필 자연. 다만 JS↔Native 왕복이 많은 화면은 배치 업데이트 등 필요.
- Flutter: 엔진이 직접 렌더 → 플랫폼 차이 없이 동일 UI. 커스텀 그래픽/애니메이션에 강함.
5) 빌드/배포 & 유지보수
- 공통: iOS는 Xcode/Apple 계정, Android는 SDK/키스토어 필수
- RN: 브리지 패키지 조합에 따른 플랫폼별 트러블슈팅 발생 가능
- Flutter: 템플릿·가이드 통일, 멀티플랫폼 옵션 자동화 → 초기 세팅 사고↓
6) 선택 관련
이럴 때 RN
- 팀이 React/TypeScript에 숙련
- 웹과 패턴/코드 공유가 핵심 가치
- 플랫폼 고유 룩앤필을 자연스럽게 유지
이럴 때 Flutter
- 픽셀 퍼펙트 UI/애니메이션이 중요
- Firebase 중심 MVP → 프로덕션을 빠르게 진행
- 소수 인원으로 iOS/Android 동시 출시 필요
