2nd/10_Wiki/Topics/AI_and_ML/크로스 플랫폼 기술(Cross-Platform Technology).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-크로스-플랫폼-기술-cross-platform-techno	크로스 플랫폼 기술(Cross-Platform Technology)	10_Wiki/Topics	verified	self	Cross-Platform Multi-platform Development	none	A	0.9	applied	cross-platform mobile desktop architecture		2026-05-10	pending	language framework TypeScript / Kotlin / Dart 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)

// 매 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

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)

// 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)

// 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");
}

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

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

Compose Multiplatform

// 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)

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)

import { Camera, CameraResultType } from '@capacitor/camera';

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

Expo Router (RN file-based)

// 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
• 변형: React Native · Flutter · Kotlin Multiplatform · Tauri
• 응용: Mobile-First
• Adjacent: 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