Flutter — 핵심 개념, 아키텍처 및 위젯

Flutter란 무엇인가

Flutter는 2015년 Google이 발표한 사용자 인터페이스 생성을 위한 SDK(소프트웨어 개발 키트) 및 프레임워크입니다. Flutter 1.0의 첫 번째 안정 버전은 2018년 12월에 출시되었습니다. React Native와 달리 Flutter는 JavaScript와 네이티브 코드 사이에 브리지를 사용하지 않고 프로세서의 네이티브 명령어로 직접 컴파일됩니다.

Flutter의 주요 특징은 자체 렌더링 엔진입니다. 이 프레임워크는 UIKit(iOS)이나 Android의 View 시스템에 의존하지 않습니다. 대신 Flutter는 Skia(2024년 이전) 또는 새로운 Impeller 엔진을 통해 각 픽셀을 독립적으로 그립니다. 이는 모든 플랫폼에서 일관된 모양을 보장하고 다양한 OS 버전 간의 적응 문제를 제거합니다.

Statista 2024에 따르면 Flutter는 인기 면에서 크로스플랫폼 프레임워크 중 1위를 차지하고 있으며, 약 46%의 개발자가 모바일 개발에 이를 사용합니다. 이 프레임워크는 Google Pay, Alibaba, eBay, BMW, Tencent의 프로젝트에서 사용됩니다.

Flutter의 역사와 버전

첫 번째 Flutter 알파 버전은 2015년 Dart Developer Summit에서 Sky라는 이름으로 발표되었습니다. 2018년에는 iOS와 Android만 지원하는 Flutter 1.0이 출시되었습니다. Flutter 2.0(2021)은 Web과 Desktop 지원을 추가했습니다. Flutter 3.0(2022)은 macOS와 Linux에 대한 안정적인 지원을 도입했습니다. Flutter 3.16(2023)은 Impeller를 도입했습니다. Metal과 Vulkan 기반의 새로운 렌더링 엔진입니다.

Flutter 3.22(2024)는 iOS에서 기본적으로 Impeller를 포함하고, Material Design 3 지원이 개선되었으며, 매크로 확장을 포함한 Dart 3.4, 플랫폼 리소스에 직접 액세스할 수 있는 기본 Native Assets 지원을 제공합니다. Google은 Impeller가 Skia에 비해 프레임 끊김을 90% 감소시킨다고 보고합니다.

Dart 언어

Dart는 2011년 Google이 만든 프로그래밍 언어로 Flutter에서 사용됩니다. Dart는 엄격한 타입 지정과 JIT 컴파일(Hot Reload용) 및 AOT 컴파일(프로덕션 빌드용) 기능을 결합합니다. Dart 3.0(2023)은 패턴 매칭, sealed class, records를 안정적인 기능으로 도입했습니다.

Dart의 Null safety는 버전 2.12부터 도입된 필수 기능입니다. 컴파일러는 빌드 시 모든 nullable 타입을 검사하여 런타임에서 NullPointerException을 제거합니다. 데이터 타입(int, String, bool)은 기본적으로 non-nullable이며, nullable 값은 ? 접미사를 사용합니다(예: String? name).

Flutter 아키텍처

Flutter 아키텍처는 3계층 원칙으로 구축되었습니다. 하위 계층은 엔진(C/C++)으로, 렌더링, I/O 및 플랫폼 API 액세스를 담당합니다. 중간 계층은 프레임워크(Dart)로, 위젯 시스템, 제스처, 애니메이션 및 네비게이션을 구현합니다. 상위 계층은 애플리케이션(Dart)으로, 위젯을 트리로 조립합니다.

위젯 및 위젯 트리

Flutter에서는 모든 것이 위젯입니다. 위젯에는 StatelessWidget(불변, 상태를 저장하지 않음)과 StatefulWidget(가변, State를 통해 상태를 관리)의 두 가지 유형이 있습니다. 위젯 트리는 각 하위 위젯이 상위 위젯 내에 중첩되는 계층 구조입니다. Scaffold, AppBar, Container, Text, Column, Row — 이것이 기본 구성 요소입니다.

BuildContext는 트리에서 위젯의 위치를 전달하는 객체입니다. MediaQuery.of(context)는 화면 크기를 가져오고, Theme.of(context)는 현재 테마를 가져옵니다. BuildContext는 네비게이션(Navigator.of(context)), InheritedWidget 액세스, Localizations.of를 통한 로케일 번역에 사용됩니다.

Impeller 엔진

Impeller는 C++로 작성되고 Metal(iOS/macOS)과 Vulkan(Android)을 사용하는 Flutter의 최신 렌더링 엔진입니다. 모든 프레임을 처음부터 다시 그리던 Skia와 달리 Impeller는 셰이더를 미리 컴파일하여 캐시에 저장합니다. 이는 복잡한 장면의 초기 렌더링 시 지연을 제거하고 GPU 부하를 줄입니다.

Google Flutter 팀의 테스트에 따르면 Impeller는 셰이더 컴파일 시간을 200–500ms(Skia)에서 1–3ms로 단축합니다. iPhone 13 Pro에서 Impeller의 임펄스 렌더링은 프레임 드롭 없이 120FPS를 달성합니다. Vulkan이 탑재된 Android에서는 중간급 기기(Xiaomi Redmi Note 12)에서도 안정적인 60FPS를 제공합니다.

Flutter 애플리케이션 예제

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('Flutter 애플리케이션')),
        body: const Center(
          child: Text('안녕하세요, Flutter!'),
        ),
      ),
    );
  }
}

Flutter의 장점

단일 코드베이스 — Flutter의 주요 장점입니다. 하나의 Dart 프로젝트가 iOS, Android, Web, Windows, macOS, Linux로 컴파일됩니다. Google에 따르면 이는 별도의 iOS 및 Android 프로젝트에 비해 개발 시간을 30–50% 단축합니다. Alibaba는 Flutter로 전환한 후 버전 출시 시간을 30% 단축했습니다.

성능은 네이티브에 가깝습니다. Dart의 ARM 및 x86_64 머신 코드로의 AOT 컴파일은 인터프리터 지연을 제거합니다. Impeller 엔진은 2018년 기기(iPhone XR, Samsung Galaxy S9)에서도 60FPS를 보장합니다. Google에 따르면 Flutter 애플리케이션의 99.5% 프레임이 끊김 없이 렌더링됩니다.

Hot Reload — 즉각적인 코드 업데이트 기술입니다. 개발자가 소스 코드를 변경하고 파일을 저장하면 Flutter가 현재 애플리케이션 상태를 잃지 않고 300–800ms 내에 위젯 트리를 재구성합니다. 이는 UI 디자인 반복을 가속화합니다: 전체 재빌드를 기다리지 않고 여백, 색상, 애니메이션을 몇 초 만에 변경할 수 있습니다.

Material Design 3와 기본 Cupertino 디자인 언어(iOS 스타일)는 표준 Flutter 패키지에 포함되어 있습니다. Material 3 위젯은 동적 색상(Material You), 반응형 레이아웃, 화면 전환 애니메이션을 지원합니다. CupertinoPageTransition과 CupertinoNavigationBar는 네이티브 iOS 네비게이터 동작을 모방합니다.

커스터마이징은 각 플랫폼에서 사용자 정의 View를 만들 필요가 없습니다. build()를 재정의하고 새 위젯을 반환하기만 하면 됩니다. 애니메이션 패키지(AnimatedContainer, Hero, TweenAnimationBuilder)와 제스처 패키지(GestureDetector, Dismissible)는 플랫폼 코드를 작성하지 않고 UI 애니메이션 시나리오의 95%를 커버합니다.

Flutter 생태계 및 패키지

pub.dev는 Dart와 Flutter의 공식 패키지 레지스트리입니다. 2024년 7월 기준으로 레지스트리에 45,000개 이상의 패키지가 게시되어 있습니다. 패키지 설치는 flutter pub add <패키지명> 명령어로 수행됩니다. Pub은 자동으로 종속성을 해결하고, 버전 호환성을 확인하며, pubspec.lock을 생성합니다.

Flutter에서 상태 관리는 주요 아키텍처 과제 중 하나입니다. flutter_bloc 외에도 인기 있는 솔루션으로는 Provider(Google 권장, InheritedWidget 사용), Riverpod(컴파일 타임 안전성을 갖춘 Provider의 재설계 버전), GetX(상태, 라우팅, DI를 하나로)가 있습니다. Provider가 시작하기에 가장 간단합니다: ChangeNotifierProvider가 모델을 감싸고 Consumer가 데이터 변경 시 위젯을 재구성합니다.

Flutter의 테스팅은 세 가지 수준에서 지원됩니다. 단위 테스트(flutter test)는 UI 없이 함수와 클래스를 테스트합니다. 위젯 테스트(testWidgets)는 격리된 환경에서 개별 위젯을 렌더링합니다. 통합 테스트(IntegrationTest)는 기기나 시뮬레이터에서 전체 애플리케이션을 실행합니다. Flutter 3.22는 패치 분석과 개선된 코드 커버리지 보고를 통해 패치 테스트 지원을 추가했습니다.

인기 패키지

dio는 인터셉터, 타임아웃, FormData를 지원하는 HTTP 클라이언트입니다. GitHub의 Flutter 프로젝트 중 40%에서 사용됩니다. Dio는 로깅, 재시도, 인증 토큰 추가를 위한 요청 인터셉션을 지원합니다. 두 번째로 인기 있는 라이브러리는 retrofit으로, 타입화된 API 클라이언트를 생성합니다.

flutter_bloc은 BLoC(비즈니스 로직 컴포넌트) 패턴을 기반으로 하는 상태 관리 라이브러리입니다. BlocProvider는 위젯 트리 아래로 상태를 전달하고, BlocBuilder는 상태 변경 시 UI를 재구성하며, BlocListener는 부작용(네비게이션, SnackBar)을 처리합니다. Cubit은 이벤트가 없는 BLoC의 단순화된 버전입니다.

go_router는 Google의 Flutter용 선언적 네비게이션입니다. 경로는 중첩 경로, 리디렉션, 딥 링크를 지원하는 GoRouter 구성에 설명됩니다. ShellRoute는 BottomNavigationBar 탭 간에 네비게이션을 분할합니다. GoRouter 14.0은 타입 세이프 경로와 탭 상태 보존이 있는 StatefulShellRoute를 지원합니다.