크로스 플랫폼 앱이란: Flutter, React Native, KMP 비교

크로스 플랫폼 앱이란?

Cross-Platform App(크로스 플랫폼 애플리케이션)은 단일 코드베이스에서 여러 모바일 운영 체제에서 실행되도록 개발된 소프트웨어입니다. iOS(Swift)와 Android(Kotlin)를 위해 두 개의 별도 프로젝트를 유지하는 네이티브 개발과 달리, 크로스 플랫폼 개발은 비즈니스 로직, 사용자 인터페이스, 데이터 계층을 하나의 프로젝트에 결합합니다.

크로스 플랫폼 개발의 개념은 2009년 PhoneGap(이후 Apache Cordova)과 함께 등장했으며, 웹 애플리케이션을 네이티브 WebView에 패키징했습니다. 현대 프레임워크는 크게 발전했습니다. Flutter는 Dart를 통해 네이티브 ARM 코드로 컴파일되고, React Native는 네이티브 브리지를 갖춘 JavaScript 엔진을 사용하며, Kotlin Multiplatform은 공유 코드를 플랫폼별 바이너리로 컴파일합니다. 2026년까지 새로운 모바일 앱의 40% 이상이 최소 하나의 크로스 플랫폼 기술을 사용합니다.

주요 도입 지표: 시장 출시 30~50% 단축, 두 네이티브 팀 대비 30~40% 비용 절감, 두 플랫폼에서 통합 기능 세트 지원. 그러나 크로스 플랫폼 앱은 여전히 플랫폼별 UI 차이, 하드웨어 API 접근, 애니메이션 및 게임과 같은 성능 중요 기능의 과제에 직면합니다.

Flutter: 아키텍처와 성능

Flutter는 Dart 언어를 사용하는 Google의 오픈 소스 UI 프레임워크로, 자체 Skia 렌더링 엔진(버전 4.x에서는 Impeller)을 갖추고 있습니다. 네이티브 플랫폼 컴포넌트를 사용하는 프레임워크와 달리, Flutter는 모든 픽셀을 자체적으로 렌더링하여 인터페이스를 완전히 제어할 수 있습니다. 이 접근 방식은 플랫폼 간 차이를 없애지만 앱 크기가 5~15MB 증가합니다.

// Flutter — 간단한 카운터
import 'package:flutter/material.dart';

void main() { runApp(const CounterApp()); }

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  /* ... */
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('크로스 플랫폼 카운터')),
      body: Center(
        child: Column(
          children: [
            const Text('버튼을 이만큼 눌렀습니다:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter의 핵심은 위젯 아키텍처입니다. 패딩과 정렬부터 레이아웃 제약 조건까지 모든 것이 위젯입니다. React에서 상속된 이 선언형 모델은 UI를 예측 가능하게 만듭니다. Dart의 AOT 컴파일 덕분에 Flutter 앱은 2초 이내에 시작되며 중간급 기기에서도 60FPS를 유지합니다. 새로운 렌더링 엔진인 Impeller는 Skia의 주요 문제였던 셰이더 컴파일 중 끊김 현상을 제거했습니다.

React Native: JavaScript 브리지와 생태계

React Native는 JavaScript/TypeScript와 React를 사용하여 모바일 앱을 만들기 위한 Meta의 크로스 플랫폼 프레임워크입니다. Flutter와 달리, React Native는 JavaScript 브리지를 통해 플랫폼의 네이티브 UI 컴포넌트(iOS에서는 UIView, Android에서는 View)를 사용합니다. 비즈니스 로직은 JavaScript 엔진(Hermes 또는 JSC)에서 실행되며 네이티브 모듈과 비동기적으로 상호 작용합니다.

// React Native — 플랫폼 코드가 포함된 컴포넌트
import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, Platform
} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const greeting = Platform.select({
    ios: 'iOS에서 인사',
    android: 'Android에서 인사',
    default: '안녕하세요',
  });

  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(c => c + 1)}>
        <Text>+1</Text>
      </TouchableOpacity>
    </View>
  );
};

React Native의 가장 큰 장점은 생태계입니다. npm에는 200만 개 이상의 패키지가 있으며, React Navigation, Expo, Reanimated 같은 라이브러리는 네비게이션, 제스처, 애니메이션을 위한 즉시 사용 가능한 솔루션을 제공합니다. 관리형 워크플로우인 Expo는 OTA 업데이트와 50개 이상의 내장 네이티브 모듈로 빌드 및 게시를 간소화합니다. Instagram, Shopify, Discord는 React Native에서 실행되며 월간 활성 사용자 수가 5억 명 이상입니다.

Kotlin Multiplatform: 네이티브 UI와 공유 로직

Kotlin Multiplatform (KMP)은 공유 Kotlin 코드를 플랫폼별 바이너리로 컴파일하는 JetBrains의 기술입니다. Flutter 및 React Native와 달리, KMP는 UI 프레임워크를 제공하지 않습니다. 그 목적은 인터페이스를 완전히 네이티브로 유지하면서 비즈니스 로직, 데이터 계층, 네트워크 요청, 검증을 재사용하는 것입니다. Netflix, McDonald's, VMware는 프로덕션에서 KMP를 사용합니다.

// Kotlin Multiplatform — commonMain의 공유 저장소
class UserRepository(
    private val api: KtorClient,
    private val db: Database
) {
    suspend fun getUsers(): Result<List<User>> {
        return try {
            val users = api.fetch<List<UserDto>>("/users")
            db.save(users.map { it.toDomain() })
            Result.success(db.getAll())
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// expect/actual — 플랫폼별 날짜 형식
expect fun formatDate(timestamp: Long): String

KMP의 핵심 패턴은 expect/actual 메커니즘입니다. 공유 모듈(commonMain)에서 expect 함수 또는 클래스가 선언되고, 각 플랫폼별 소스 세트(androidMain, iosMain)에서 actual 구현이 제공됩니다. 이를 통해 공유 코드에서 통합된 공용 인터페이스를 유지하면서 플랫폼 API(SharedPreferences, NSUserDefaults, 카메라, 생체 인식)를 사용할 수 있습니다. KMP의 UI 계층인 Compose Multiplatform은 2025년에 Android와 Desktop에서 안정화되었으며, iOS 버전은 아직 베타 테스트 중입니다.

크로스 플랫폼 프레임워크 비교

성능은 시나리오에 따라 크게 다릅니다. Flutter의 자체 렌더링은 애니메이션과 전환에 안정적인 60FPS를 보장합니다. React Native의 브리지 아키텍처는 네이티브 호출당 2~5ms의 지연 시간을 추가하지만, 새로운 JSI(JavaScript Interface) 계층이 이 격차를 줄입니다. KMP는 공유 코드가 플랫폼 바이너리로 직접 컴파일되므로 오버헤드가 없습니다. 복잡한 애니메이션이 있는 UI 집약적 앱의 경우 Flutter와 네이티브 개발 사이에서 선택합니다.

적합한 프레임워크 선택 방법

Flutter, React Native, KMP 중 선택은 프로젝트 우선순위에 따라 달라집니다. 픽셀 완벽한 UI와 완전한 애니메이션 제어가 필요한 경우 Flutter가 가장 일관된 크로스 플랫폼 경험을 제공합니다. 팀이 JavaScript/React에精通하고 가장 큰 서드파티 라이브러리 생태계를 중요시하는 경우 React Native가 실용적인 선택입니다. 네이티브 앱이 이미 존재하고 비즈니스 로직을 공유해야 하는 경우 KMP는 UI를 손상시키지 않고 모듈별로 공유 코드를 도입할 수 있습니다.

MVP 및 스타트업의 경우 Flutter 또는 React Native가 80~100%의 공유 코드로 시장에 가장 빠르게 진출할 수 있는 경로를 제공합니다. 기존 네이티브 기반이 있는 엔터프라이즈 애플리케이션의 경우 KMP는 점진적인 모듈 마이그레이션을 가능하게 합니다. 커스텀 렌더링이 필요한 게임 및 미디어 애플리케이션은 Flutter 또는 완전 네이티브 접근 방식의 이점을 얻습니다. 각 프레임워크는 성숙도를 입증했습니다. Instagram(React Native), Google Pay(Flutter), Netflix(KMP)는 크로스 플랫폼 기술로 실행됩니다.

트렌드: Flutter는 통합 코드베이스로 데스크톱과 웹으로 확장하고 있습니다. 새로운 아키텍처(Fabric + TurboModules)를 갖춘 React Native는 브리지를 완전히 제거합니다. Compose Multiplatform을 갖춘 KMP는 네이티브 성능을 유지하면서 통합 UI 계층을 목표로 합니다. 2027년까지 크로스 플랫폼 개발과 네이티브 개발 간의 경계는 완전히 모호해질 것이며, 프레임워크는 플랫폼 컴파일 경로로 전환하고 있습니다.