크로스 플랫폼 프레임워크 비교, Flutter vs React Native

이것도 이전에 작성했던 문서, 작성했던 시점과 많은 부분이 바뀌었다.

• React Native의 New Architecture(Fabric, TurboModules, JSI)에 대한 설명을 2026년 기준으로 보강, 기존에 "Bridge를 통해서 네이티브 기능 사용"이라고만 적혀있던 부분이 지금은 구조가 많이 바뀜
• Hermes 엔진에 기본 JS 엔진이 된 점 추가, Flutter 쪽은 Impeller가 Skia를 대체한 현재 상황을 반영

---

하나의 코드베이스로 Android와 iOS 앱을 동시에 만들 수 있다면? 네이티브 언어(Kotlin, Swift)를 각각 쓰지 않아도 된다면? 이게 크로스 플랫폼 프레임워크가 해결하려는 문제다.

이 글에서는 가장 많이 쓰이는 두 프레임워크, Flutter와 React Native를 비교한다.

---

먼저 알아둘 것

크로스 플랫폼으로 만든 앱은 네이티브 앱보다 미세하게 성능이 떨어진다. 프레임워크들이 버전을 거듭하면서 그 차이를 줄이고 있긴 하지만, 고프레임 게임이나 복잡한 실시간 처리가 필요한 프로젝트라면 여전히 네이티브가 맞다.

다만 일반적인 비즈니스 앱 수준에서는 사용자가 차이를 느끼기 어렵고, 오히려 프레임워크 쪽이 네이티브보다 나은 부분도 있다.

---

Flutter

flutter.dev · github.com/flutter

Google이 만든 프레임워크로, Dart 언어를 쓴다.

가장 큰 특징은 자체 렌더링 엔진(Skia → Impeller)을 가지고 있다는 점이다. 플랫폼의 네이티브 UI 컴포넌트를 안 쓰고 모든 픽셀을 직접 그린다. 덕분에 어떤 플랫폼에서든 똑같은 UI가 나오고, 복잡한 애니메이션에서도 안정적인 프레임을 유지한다.

그 외 특징을 정리하면 이렇다.

• Dart 언어 — Java랑 문법이 비슷해서 진입 장벽이 낮은 편이다.
• Hot Reload / Hot Restart — 코드 고치면 바로 확인할 수 있다.
• 위젯 기반 선언적 UI — 모든 UI 요소가 위젯이다.
• 플랫폼 지원 범위가 넓음 — Android, iOS 말고도 Web, Windows, macOS, Linux까지 된다.
• MethodChannel — 네이티브(Kotlin/Swift) 코드와 통신해서 플랫폼 고유 기능을 쓸 수 있다.
• 공식 패키지가 많음 — Google이 직접 관리하는 패키지가 꽤 있고, pub.dev에 45,000개 넘는 패키지가 올라와 있다.
• Dart DevTools — 성능 프로파일링, 위젯 리빌드 추적 등 디버깅 도구가 잘 되어 있다.

AOT 컴파일로 네이티브 ARM 코드로 변환되기 때문에 앱 시작 속도와 런타임 성능도 좋다. 커스텀 디자인이 중요하거나, 브랜드 고유의 룩앤필을 살려야 하는 앱에서 특히 힘을 발휘한다.

---

React Native

reactnative.dev · github.com/facebook/react-native

Meta(구 Facebook)가 만든 프레임워크로, JavaScript / TypeScript를 쓴다.

Flutter와 다르게 플랫폼의 실제 네이티브 UI 컴포넌트를 사용한다. iOS의 바운스 물리, Android의 리플 이펙트 같은 것들이 별도 구현 없이 자연스럽게 동작한다는 뜻이다.

2026년 기준으로 New Architecture가 기본값이 되면서 성능이 많이 올라왔다.

• Fabric Renderer — 동기적, 동시성(concurrent) UI 업데이트가 가능해졌다.
• TurboModules — 네이티브 모듈을 lazy-loaded로 접근할 수 있다.
• JSI — 예전의 비동기 Bridge가 사라지고, JS와 네이티브 코드 간 통신 지연이 크게 줄었다.

그 외 특징은 이렇다.

• React 문법 거의 그대로 — 웹에서 React 쓰던 사람이라면 빠르게 적응할 수 있다.
• 코드 푸시 (OTA 업데이트) — Microsoft CodePush로 스토어 심사 없이 앱을 업데이트할 수 있다. Flutter에는 없는 기능이라 이게 필요한 프로젝트라면 큰 차별점이다.
• npm 생태계 — 서드파티 라이브러리가 압도적으로 많다. 다만 공식 패키지는 Flutter보다 적다.
• Flexbox 스타일링 — CSS를 직접 못 쓰고, Flexbox 기반 스타일 객체를 사용한다.
• Hermes 엔진 — 기본 JS 엔진으로, 시작 시간과 메모리 사용을 최적화한다.
• 선언적 UI & 컴포넌트 기반 — React의 설계 철학을 그대로 이어받았다.

React vs React Native 문법 차이

React (웹):

<div style={{ backgroundColor: 'blue', padding: '10px' }}>Hello</div>

React Native (모바일):

<View style={{ backgroundColor: 'blue', padding: 10 }}>
  <Text>Hello</Text>
</View>

HTML 태그 대신 View, Text 같은 네이티브 컴포넌트를 쓰고, 스타일 값에 단위(px 등)를 안 붙인다.

JS/React 경험이 있는 팀이 빠르게 모바일 앱을 내야 할 때 유리하고, OTA 업데이트가 필요하다면 사실상 선택지가 좁아진다.

---

비교 표

항목	Flutter	React Native
개발사	Google	Meta
언어	Dart	JavaScript / TypeScript
렌더링	자체 엔진 (Impeller)	네이티브 컴포넌트
렌더링 성능	복잡한 애니메이션, 커스텀 UI에서 우세	메모리 효율, 바이너리 크기에서 우세
지원 플랫폼	Android, iOS, Web, Windows, macOS, Linux	Android, iOS, tvOS, macOS, Windows
생태계	pub.dev 45,000+	npm 전체 활용 가능
공식 패키지	풍부	적음 (커뮤니티 의존)
OTA 업데이트	미지원	CodePush 지원
네이티브 연동	MethodChannel	JSI / TurboModules
학습 곡선	Dart를 새로 배워야 함	JS/React 경험자에게 유리
디버깅	Dart DevTools	React Native Debugger

---

그래서 뭘 쓸까

Flutter가 맞을 때 — 커스텀 UI가 핵심이거나, 모바일+데스크톱+웹을 하나의 코드로 커버하고 싶거나, 플랫폼 간 UI 일관성이 중요할 때.

React Native가 맞을 때 — 팀에 JS/React 경험자가 많거나, 네이티브 룩앤필이 중요하거나, OTA 업데이트가 필수이거나, 기존 React 웹 앱과 코드를 공유하고 싶을 때.

정답은 없다. 프로젝트 요구사항, 팀의 기술 스택, 유지보수 전략에 따라 다르다.
개인적으로, Flutter를 좋아하는데 개발자 편의성이 뛰어나고 원하는 구조를 적용하기 쉬워서 Flutter를 선호한다. 물론 Flutter를 이전부터 해오고 있었기 때문에 Flutter를 더 선호하긴 한다 ㅎㅎ

---