---
id: wiki-2026-0508-크로스-플랫폼-기술-cross-platform-techno
title: 크로스 플랫폼 기술(Cross-Platform Technology)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Cross-Platform, Multi-platform Development]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [cross-platform, mobile, desktop, architecture]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript / Kotlin / Dart
  framework: React Native / Flutter / KMP / Tauri
---

# 크로스 플랫폼 기술(Cross-Platform Technology)

## 매 한 줄
> **"매 single codebase 의 iOS + Android + Web + Desktop 의 ship — 매 native 의 90% performance, 매 dev cost 의 50%."**. 매 1990s Java 의 "Write Once Run Anywhere" 의 promise 부터 매 2026 의 mature stack — Flutter 4, React Native New Arch, KMP 의 stable, Tauri 2 — 의 production scale.

## 매 핵심

### 매 stack 분류
- **Hybrid web**: Cordova, Ionic — 매 WebView 의 wrap (legacy).
- **JS bridge**: React Native (Old Arch) — 매 message passing.
- **Native bindings**: React Native New Arch (JSI), NativeScript — 매 direct call.
- **Custom rendering**: Flutter (Skia / Impeller) — 매 framework 의 own pixel.
- **Compile-to-native**: KMP, MAUI, Compose Multiplatform — 매 platform UI 의 native.
- **Web-on-desktop**: Electron, Tauri — 매 web → desktop.

### 매 trade-off axis
- **Performance**: 매 native > Flutter ≈ RN-NewArch > RN-OldArch > WebView.
- **Bundle size**: 매 KMP / Tauri (small) << Flutter (15MB+) << Electron (100MB+).
- **UI fidelity**: 매 native (perfect) > KMP-Compose > Flutter (custom) > RN (mixed) > Web (loose).
- **Dev velocity**: 매 Flutter ≈ RN > KMP > native.
- **Hot reload**: 매 Flutter / RN (instant) > KMP / Tauri (slow) > native (none).

### 매 응용
1. **Mobile app**: 매 RN / Flutter 의 Instagram, Airbnb, BMW, Wonolo.
2. **Desktop**: 매 Tauri 의 Spotify-class, Electron 의 VSCode.
3. **Multi-target**: 매 KMP 의 shared business logic + native UI.

## 💻 패턴

### React Native (New Architecture)
```tsx
// 매 Fabric renderer + TurboModules
import { TurboModuleRegistry } from 'react-native';

interface Spec {
  multiply(a: number, b: number): number;
}

const NativeMath = TurboModuleRegistry.getEnforcing<Spec>('NativeMath');

export default function App() {
  return <Text>{NativeMath.multiply(3, 4)}</Text>;
}
```

### Flutter 4
```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Cross-platform')),
        body: const Center(child: Text('Hello')),
      ),
    );
  }
}
```

### Kotlin Multiplatform (KMP)
```kotlin
// shared/src/commonMain/kotlin/Repository.kt
class Repository {
    suspend fun fetchUser(id: String): User {
        return httpClient.get("https://api/users/$id").body()
    }
}

// androidApp — 매 Compose
@Composable
fun UserScreen(repo: Repository) { /* ... */ }

// iosApp — 매 SwiftUI
struct UserView: View {
    let repo: Repository
    var body: some View { /* ... */ }
}
```

### Tauri 2 (Rust + web)
```rust
// src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error");
}
```

```ts
// src/App.tsx
import { invoke } from '@tauri-apps/api/core';

const msg = await invoke<string>('greet', { name: 'World' });
```

### Compose Multiplatform
```kotlin
// commonMain
@Composable
fun App() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}

// iOS, Android, Desktop, Web — 매 same code
```

### Platform-specific code (RN)
```tsx
import { Platform } from 'react-native';

const styles = {
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2 },
    android: { elevation: 4 },
  }),
};
```

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

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

### Expo Router (RN file-based)
```tsx
// app/(tabs)/home.tsx
import { Stack } from 'expo-router';

export default function Home() {
  return (
    <>
      <Stack.Screen options={{ title: 'Home' }} />
      <View><Text>Hello</Text></View>
    </>
  );
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 매 mobile-first startup | Expo (React Native) |
| 매 design-heavy app | Flutter |
| 매 native-feel + shared logic | Kotlin Multiplatform |
| 매 desktop app | Tauri 2 (small) / Electron (legacy) |
| 매 enterprise + Windows-first | .NET MAUI |
| 매 web-existing → mobile | Capacitor |
| 매 game | Unity / Unreal / Godot |

**기본값**: 매 mobile — Expo (RN). 매 design-heavy — Flutter. 매 desktop — Tauri 2.

## 🔗 Graph
- 부모: [[Software Architecture]] · [[Mobile Development]]
- 변형: [[React Native]] · [[Flutter]] · [[Kotlin Multiplatform]] · [[Tauri]]
- 응용: [[Hybrid App]] · [[Mobile-First]] · [[Multi-target Build]]
- Adjacent: [[Native Development]] · [[WebView]] · [[Skia]]

## 🤖 LLM 활용
**언제**: 매 stack selection 의 trade-off 의 explanation, 매 platform-specific code 의 generation, 매 migration plan 의 brainstorm.
**언제 X**: 매 perf-critical native API integration — 매 platform docs + native dev 의 우선.

## ❌ 안티패턴
- **One-size-fits-all UI**: 매 iOS 와 Android 의 동일 UX — 매 platform convention 의 ignore.
- **WebView for everything**: 매 native feel 의 손실 — 매 60fps scroll 의 어려움.
- **No platform testing**: 매 iOS 만 test — 매 Android 의 quirks 의 발견 누락.
- **Bridge bloat (RN Old Arch)**: 매 high-frequency message — 매 New Arch (JSI) 의 migrate.
- **Shared UI 의 over-share**: 매 Flutter 의 Cupertino + Material 의 mix — 매 either 의 commit.

## 🧪 검증 / 중복
- Verified (Flutter 4 release, RN New Architecture docs, KMP stable announcement, Tauri 2 docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — cross-platform stack matrix + RN/Flutter/KMP/Tauri patterns |