---
id: wiki-2026-0508-cross-platform-mobile-development-frameworks
title: Cross-platform Mobile Development Frameworks
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [RN vs Flutter vs KMP, hybrid mobile]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [mobile, react-native, flutter, kmp, capacitor]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: multi
  framework: multi
---

# Cross-platform Mobile Development Frameworks

## 매 한 줄
> **"매 single codebase → multiple OS targets — runtime tradeoff 의 spectrum"**. 매 2026 landscape 는 RN(JS+native), Flutter(Skia/Impeller), Kotlin Multiplatform(shared logic + native UI), Capacitor(WebView) 의 4 축. 매 native parity vs dev velocity vs binary size 의 결정.

## 매 핵심

### 매 4 가지 architectural model
1. **Embedded JS runtime + native widgets**: React Native (Hermes/JSC + UIKit/Android View).
2. **Embedded engine + own renderer**: Flutter (Dart AOT + Impeller GPU).
3. **Shared logic + native UI**: Kotlin Multiplatform (KMP) — UI 는 SwiftUI/Compose.
4. **WebView wrapper**: Capacitor / Tauri Mobile / PWA — 매 web stack 그대로.

### 매 2026 의 maturity 비교
| 축 | RN 0.76+ | Flutter 3.27 | KMP 2.1 | Capacitor 7 |
|---|---|---|---|---|
| native look | 매 high | 매 own widgets | 매 native | 매 medium |
| perf | 매 JSI direct | 매 Impeller GPU | 매 native | 매 WebView |
| binary | ~25MB | ~20MB | ~8MB | ~10MB |
| hot reload | 매 fast | 매 fastest | 매 medium | 매 instant |

### 매 선택의 실제 driver
- 매 dev team 의 existing skill (TS vs Dart vs Kotlin).
- 매 design 의 brand-custom 정도 (Flutter 우세).
- 매 native API depth (RN 의 거대 ecosystem).
- 매 backend 와의 code share (KMP 우세).

## 💻 패턴

### React Native (Bridgeless)
```typescript
// App.tsx
import { View, Text, Pressable } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Pressable onPress={() => console.log('tap')}>
        <Text>Hello RN 0.76</Text>
      </Pressable>
    </View>
  );
}
```

### Flutter (Material 3)
```dart
// main.dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext c) => MaterialApp(
    home: Scaffold(
      body: Center(child: FilledButton(
        onPressed: () => debugPrint('tap'),
        child: const Text('Hello Flutter'),
      )),
    ),
  );
}
```

### Kotlin Multiplatform (shared module)
```kotlin
// shared/src/commonMain/kotlin/Greeting.kt
class Greeting {
    fun greet(): String = "Hello from ${Platform().name}"
}

expect class Platform() {
    val name: String
}
// androidMain: actual class Platform { actual val name = "Android" }
// iosMain:     actual class Platform { actual val name = UIDevice.currentDevice.systemName() }
```

### Capacitor (web → native shell)
```typescript
import { Camera, CameraResultType } from '@capacitor/camera';

const photo = await Camera.getPhoto({
  resultType: CameraResultType.Uri,
  quality: 90,
});
console.log(photo.webPath);
```

### 매 platform-specific code split (RN)
```typescript
// Button.ios.tsx / Button.android.tsx — Metro 의 자동 resolve
import { Platform } from 'react-native';
const haptic = Platform.select({
  ios: () => require('react-native-haptic-feedback').trigger('impactMedium'),
  android: () => require('react-native-vibration').vibrate(50),
});
```

## 매 결정 기준

| 상황 | Approach |
|---|---|
| 매 web team 의 mobile 진입 | React Native |
| 매 brand-custom UI + 60fps animation | Flutter |
| 매 existing Android/iOS app 의 logic share | Kotlin Multiplatform |
| 매 enterprise content app + minimal native | Capacitor / PWA |
| 매 highest native parity 필요 | 매 native (Swift+Kotlin) |

**기본값**: 매 startup MVP 는 RN, 매 design-driven product 는 Flutter, 매 brownfield enterprise 는 KMP.

## 🔗 Graph
- 부모: [[Frontend]]
- 변형: [[React_Native]] · [[Flutter]] · [[Bridgeless_New_Architecture]]
- 응용: [[Expo_Router]] · [[Hermes]] · [[Impeller]]
- Adjacent: [[Dart]] · [[JavaScriptCore]] · [[Skia]]

## 🤖 LLM 활용
**언제**: 매 framework 선택 의 decision 지원, 매 platform-specific limitation (image picker, BLE) lookup, 매 perf trade-off 의 정량 비교.
**언제 X**: 매 native-only API (CarPlay, Vision Pro full) 가 critical 한 경우 — 매 native 의 권장.

## ❌ 안티패턴
- **매 framework hopping**: 매 1년마다 RN→Flutter→KMP — 매 sunk cost 의 누적.
- **매 WebView 로 모든 것**: 매 perf-critical screen 의 WebView 내장 — 매 jank 의 발생.
- **매 native module 의 abandon**: 매 unmaintained community module 의 prod 배포.
- **매 platform divergence 무시**: 매 iOS HIG vs Material 의 cross-paste — 매 user 위화감.

## 🧪 검증 / 중복
- Verified (RN 0.76 release 2024-10, Flutter 3.27 docs, KMP Stable 2023-11, Capacitor 7 release).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — RN/Flutter/KMP/Capacitor 의 4-axis comparison |
