Flutter — 하나의 코드로 iOS/Android 동시에

이 토픽을 마치면

Flutter가 왜 나왔는지, 다른 크로스 플랫폼 도구와 뭐가 다른지, 언제 쓰면 좋은지 판단할 수 있습니다.

앱을 두 번 만들어야 하는 고통

스마트폰 앱을 만들려면 두 가지를 따로 만들어야 합니다:

text

iOS     → Swift (또는 Objective-C) → Xcode → App Store
Android → Kotlin (또는 Java) → Android Studio → Play Store

같은 기능인데 언어가 다르고, 도구가 다르고, 배포처가 다릅니다. 개발자가 2배, 비용이 2배, 버그도 2배. 스타트업에게는 치명적입니다.

"하나의 코드로 양쪽을 동시에 만들 수 없을까?" — 이 질문에서 크로스 플랫폼 프레임워크가 탄생했습니다.

Flutter의 접근 — 직접 그린다

기존 크로스 플랫폼 도구(React Native, Cordova)는 네이티브 UI 컴포넌트를 호출하는 방식입니다. JavaScript 코드가 "여기에 버튼을 그려줘"라고 운영체제에 요청합니다.

Flutter는 다릅니다. 화면의 모든 픽셀을 직접 그립니다. 운영체제의 UI 컴포넌트를 쓰지 않고, 자체 렌더링 엔진(Skia → Impeller)으로 캔버스 위에 직접 그립니다.

text

React Native: JS → Bridge → 네이티브 버튼(iOS/Android 각각)
Flutter:      Dart → 자체 렌더 엔진 → 모든 픽셀을 직접 그림

이 방식의 장점:

iOS와 Android에서 완전히 동일한 UI
네이티브 컴포넌트에 의존하지 않으므로 OS 업데이트에 안 깨짐
60fps/120fps 부드러운 애니메이션

Dart — Flutter의 언어

Flutter는 Google이 만든 Dart 언어를 씁니다:

dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(
          child: Text('안녕하세요!', style: TextStyle(fontSize: 24)),
        ),
      ),
    ),
  );
}

"왜 JavaScript를 안 쓰고 Dart를?" — Dart는 AOT(Ahead-of-Time) 컴파일이 가능해서 네이티브 수준의 성능을 냅니다. JavaScript는 JIT(Just-in-Time) 기반이라 이 수준의 성능을 내기 어렵습니다.

Flutter는 앱뿐 아니라 웹, 데스크톱(Windows/macOS/Linux)까지 하나의 코드로 커버합니다. 코딩애플 닷컴도 Flutter Web으로 만들어졌습니다.

Widget — Flutter의 모든 것

Flutter에서 화면의 모든 것은 Widget입니다. 텍스트, 버튼, 패딩, 레이아웃 전부:

dart

Center(                          // 가운데 정렬 Widget
  child: Column(                 // 세로 배치 Widget
    children: [
      Text('Hello'),             // 텍스트 Widget
      ElevatedButton(            // 버튼 Widget
        onPressed: () {},
        child: Text('클릭'),
      ),
    ],
  ),
)

CSS로 스타일을 적용하는 웹과 달리, Flutter는 Padding, Center, SizedBox 같은 Widget으로 레이아웃을 구성합니다. 처음엔 중첩이 깊어 보이지만, 모든 것이 코드이므로 조건부 렌더링이나 재사용이 자연스럽습니다.

React Native와의 비교

	Flutter	React Native
언어	Dart	JavaScript/TypeScript
렌더링	자체 엔진 (직접 그림)	네이티브 컴포넌트 호출
생태계	Google + 커뮤니티	Meta + 거대한 JS 생태계
성능	네이티브급	거의 네이티브급 (Bridge 오버헤드)
러닝커브	Dart를 새로 배워야 함	JS/React 경험 재활용
적합한 상황	디자인 일관성, 애니메이션	기존 JS 팀, 빠른 프로토타입

"어떤 걸 써야 하나요?" — 정답은 없습니다. JavaScript를 이미 알면 React Native가 진입장벽이 낮고, 디자인 통일성과 성능이 중요하면 Flutter가 유리합니다.

Hot Reload — Flutter의 킬러 기능

text

코드 수정 → 저장 → 0.5초 만에 화면 반영

Flutter의 Hot Reload는 앱을 재시작하지 않고 코드 변경을 즉시 반영합니다. UI를 수정하면서 실시간으로 결과를 확인할 수 있습니다. 네이티브 개발에서 빌드 → 배포 → 확인에 30초~1분 걸리는 것과 비교하면 개발 속도 차이가 큽니다.

이것이 가능한 이유는 Dart의 JIT(개발 중)/AOT(배포 시) 이중 컴파일 전략 때문입니다. 개발 중에는 JIT로 빠르게 반영하고, 배포할 때는 AOT로 네이티브 바이너리를 만듭니다.

핵심 한 줄: Flutter는 Google이 만든 크로스 플랫폼 프레임워크로, Dart 언어 하나로 iOS·Android·웹·데스크톱 앱을 동시에 만듭니다. 네이티브 UI를 빌려 쓰는 대신 모든 픽셀을 직접 그리는 접근이 핵심 차별점입니다.