Flutter 튜토리얼 70편: 다중 Flutter 인스턴스와 성능

Why#

NOTE

여러 Flutter 화면을 사용할 때 각각 독립적인 FlutterEngine을 생성하면 메모리 낭비가 심합니다. FlutterEngineGroup은 공유 가능한 리소스를 그룹 내 엔진들이 재사용하게 하여 메모리를 절약합니다.

대규모 앱에서 Flutter를 점진적으로 도입할 때 특히 중요한 기능입니다.

What#

NOTE

FlutterEngineGroup은 FlutterEngine을 생성하는 팩토리 역할을 합니다. 그룹에서 생성된 엔진들은 다음 리소스를 공유합니다.

공유되는 리소스	설명
GPU 컨텍스트	그래픽 렌더링에 필요한 OpenGL/Metal 컨텍스트
폰트 메트릭스	폰트 로딩 및 측정 데이터
이미지 디코딩 스냅샷	공유 이미지 캐시
Isolate 그룹 스냅샷	Dart Isolate 초기화 데이터

graph TD A[FlutterEngineGroup] --> B[Engine 1] A --> C[Engine 2] A --> D[Engine 3] E[공유 리소스] --> B E --> C E --> D E --> |GPU 컨텍스트| F[렌더링] E --> |폰트 캐시| G[텍스트] E --> |이미지 캐시| H[이미지]

첫 번째 엔진 생성 시 약 180MB가 필요하지만, 추가 엔진은 약 20MB만 필요합니다.

How#

TIP

Android에서 FlutterEngineGroup 사용하기

1
// App.kt - Application 클래스
2
class App : Application() {
3
    lateinit var engineGroup: FlutterEngineGroup
4

5
    override fun onCreate() {
6
        super.onCreate()
7
        // FlutterEngineGroup 초기화
8
        engineGroup = FlutterEngineGroup(this)
9
    }
10
}

1
// MainActivity.kt - 엔진 생성
2
class MainActivity : FlutterActivity() {
3
    override fun onCreate(savedInstanceState: Bundle?) {
4
        super.onCreate(savedInstanceState)
5

6
        val app = application as App
7

8
        // 첫 번째 엔진 생성 (전체 초기화 비용 발생)
9
        val engineOne = app.engineGroup.createAndRunDefaultEngine(this)
10

11
        // 두 번째 엔진 생성 (리소스 공유로 빠른 생성)
12
        val engineTwo = app.engineGroup.createAndRunDefaultEngine(this)
13

14
        // 특정 진입점으로 엔진 생성
15
        val options = DartEntrypoint(
16
            FlutterInjector.instance().flutterLoader().findAppBundlePath(),
17
            "secondScreenMain"
18
        )
19
        val engineThree = app.engineGroup.createAndRunEngine(this, options)
20
    }
21
}

iOS에서 FlutterEngineGroup 사용하기

1
import Flutter
2
import UIKit
3

4
@main
5
class AppDelegate: FlutterAppDelegate {
6
    let engineGroup = FlutterEngineGroup(name: "multiple-flutters", project: nil)
7

8
    override func application(
9
        _ application: UIApplication,
10
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
11
    ) -> Bool {
12
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
13
    }
14
}

1
class ViewController: UIViewController {
2
    var engineOne: FlutterEngine!
3
    var engineTwo: FlutterEngine!
4

5
    override func viewDidLoad() {
6
        super.viewDidLoad()
7

8
        let appDelegate = UIApplication.shared.delegate as! AppDelegate
9

10
        // 기본 진입점으로 엔진 생성
11
        engineOne = appDelegate.engineGroup.makeEngine(withEntrypoint: nil, libraryURI: nil)
12

13
        // 특정 진입점으로 엔진 생성
14
        engineTwo = appDelegate.engineGroup.makeEngine(
15
            withEntrypoint: "secondScreenMain",
16
            libraryURI: nil
17
        )
18
    }
19

20
    @IBAction func showFirstFlutterScreen(_ sender: Any) {
21
        let flutterVC = FlutterViewController(engine: engineOne, nibName: nil, bundle: nil)
22
        present(flutterVC, animated: true)
23
    }
24
}

Dart에서 다중 진입점 정의하기

1
void main() => runApp(const MyApp(screen: 'home'));
2

3
@pragma('vm:entry-point')
4
void secondScreenMain() => runApp(const MyApp(screen: 'settings'));
5

6
@pragma('vm:entry-point')
7
void thirdScreenMain() => runApp(const MyApp(screen: 'profile'));
8

9
class MyApp extends StatelessWidget {
10
  final String screen;
11
  const MyApp({super.key, required this.screen});
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return MaterialApp(
16
      home: _buildScreen(),
17
    );
18
  }
19

20
  Widget _buildScreen() {
21
    switch (screen) {
22
      case 'settings':
23
        return const SettingsScreen();
24
      case 'profile':
25
        return const ProfileScreen();
26
      default:
27
        return const HomeScreen();
28
    }
29
  }
30
}

@pragma('vm:entry-point') 어노테이션은 해당 함수가 네이티브 코드에서 호출될 수 있음을 Dart 컴파일러에게 알립니다.

Watch out#

WARNING

FlutterEngineGroup을 사용해도 각 엔진은 독립적인 Dart Isolate³를 가집니다.

화면 간 상태 공유가 필요하면 다음 방법을 사용하세요:

1. 플랫폼 채널: 네이티브 코드를 통해 데이터 전달
2. 공유 저장소: SQLite, SharedPreferences 등
3. 네이티브 상태 관리: 네이티브 레이어에서 상태 유지

1
// 플랫폼 채널을 통한 데이터 공유 예시
2
class DataChannel {
3
  static const platform = MethodChannel('com.example/data');
4

5
  static Future<void> setSharedData(String key, String value) async {
6
    await platform.invokeMethod('setData', {'key': key, 'value': value});
7
  }
8

9
  static Future<String?> getSharedData(String key) async {
10
    return await platform.invokeMethod('getData', {'key': key});
11
  }
12
}

또한 이 기능은 아직 실험적이며 웹 플랫폼에서는 지원되지 않습니다.

결론: FlutterEngineGroup으로 다중 Flutter 인스턴스의 메모리 오버헤드를 크게 줄일 수 있습니다.

Why#

NOTE

Flutter 화면이 표시되기까지 여러 단계의 초기화 과정이 있습니다. 이 시퀀스를 이해하면 어디에서 병목이 발생하는지 파악하고 최적화할 수 있습니다.

특히 앱 시작 시 첫 Flutter 화면이 느리게 표시되는 문제를 해결하는 데 도움이 됩니다.

What#

NOTE

Flutter 엔진 로딩은 크게 네 단계로 나뉩니다.

sequenceDiagram participant App as 앱 시작 participant Engine as FlutterEngine participant Dart as Dart VM participant UI as Flutter UI App->>Engine: 1. 엔진 초기화 Engine->>Dart: 2. Dart 코드 로딩 Dart->>Dart: 3. main() 실행 Dart->>UI: 4. 첫 프레임 렌더링

단계	동작	일반적 소요 시간
FlutterEngine 초기화	네이티브 라이브러리 로딩, GPU 설정	~200ms
Dart 코드 로딩	AOT 바이너리 또는 JIT 스냅샷 로딩	~300ms
main() 실행	Dart 코드 실행, 위젯 트리 구성	~100ms
첫 프레임 렌더링	GPU에 픽셀 렌더링	~16ms

총 약 600ms 이상이 소요될 수 있으며, 디바이스 성능에 따라 달라집니다.

How#

TIP

사전 워밍으로 로딩 시간 단축하기

앱 시작 시점에 Flutter 엔진을 미리 초기화하면 사용자가 Flutter 화면에 진입할 때 즉시 표시할 수 있습니다.

Android 사전 워밍

1
class App : Application() {
2
    lateinit var flutterEngine: FlutterEngine
3

4
    override fun onCreate() {
5
        super.onCreate()
6

7
        // 앱 시작 시 엔진 미리 초기화
8
        flutterEngine = FlutterEngine(this).apply {
9
            // Dart 코드 미리 실행
10
            dartExecutor.executeDartEntrypoint(
11
                DartExecutor.DartEntrypoint.createDefault()
12
            )
13
        }
14

15
        // 엔진 캐시에 등록
16
        FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine)
17
    }
18
}

1
// 나중에 Flutter 화면 표시
2
class MainActivity : AppCompatActivity() {
3
    fun showFlutterScreen() {
4
        startActivity(
5
            FlutterActivity
6
                .withCachedEngine("my_engine_id")
7
                .build(this)
8
        )
9
    }
10
}

iOS 사전 워밍

1
class AppDelegate: FlutterAppDelegate {
2
    lazy var flutterEngine = FlutterEngine(name: "my_engine")
3

4
    override func application(
5
        _ application: UIApplication,
6
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
7
    ) -> Bool {
8
        // 엔진 사전 워밍
9
        flutterEngine.run()
10
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
11
    }
12
}

1
// 나중에 Flutter 화면 표시
2
@IBAction func showFlutterScreen(_ sender: Any) {
3
    let appDelegate = UIApplication.shared.delegate as! AppDelegate
4
    let flutterVC = FlutterViewController(
5
        engine: appDelegate.flutterEngine,
6
        nibName: nil,
7
        bundle: nil
8
    )
9
    present(flutterVC, animated: true)
10
}

초기 라우트 지정하기

1
// Android
2
flutterEngine.navigationChannel.setInitialRoute("/settings")
3

4
// iOS
5
flutterEngine.navigationChannel.setInitialRoute("/settings")

Dart에서 초기 라우트 처리

1
void main() {
2
  runApp(
3
    MaterialApp(
4
      initialRoute: window.defaultRouteName,
5
      routes: {
6
        '/': (context) => const HomeScreen(),
7
        '/settings': (context) => const SettingsScreen(),
8
      },
9
    ),
10
  );
11
}

Watch out#

WARNING

사전 워밍은 메모리와 CPU를 미리 사용합니다.

주의 사항:

1. 메모리 트레이드오프: 사전 워밍된 엔진은 앱이 종료될 때까지 메모리를 차지합니다.
2. 배터리 영향: 백그라운드에서 Dart 코드가 실행되면 배터리를 소모합니다.
3. 적절한 타이밍: 사용자가 Flutter 화면을 높은 확률로 방문할 때만 사전 워밍하세요.

1
// 조건부 사전 워밍 예시
2
class App : Application() {
3
    override fun onCreate() {
4
        super.onCreate()
5

6
        // 사용자 패턴에 따라 조건부 워밍
7
        if (userFrequentlyVisitsFlutterScreen()) {
8
            prewarmFlutterEngine()
9
        }
10
    }
11
}

결론: 로딩 시퀀스를 이해하고 사전 워밍을 적절히 활용하면 Flutter 화면 진입 시간을 단축할 수 있습니다.

Why#

NOTE

모바일 앱에서 메모리 관리는 사용자 경험에 직접적인 영향을 미칩니다. 메모리가 부족하면 시스템이 앱을 강제 종료하거나 UI가 버벅거립니다.

특히 add-to-app 환경에서는 네이티브 코드와 Flutter가 메모리를 공유하므로 더욱 주의가 필요합니다.

What#

NOTE

Flutter 엔진의 메모리 구성 요소는 다음과 같습니다.

구성 요소	메모리 사용량	설명
Dart VM	~40MB	Dart 런타임 및 GC
GPU 리소스	~50MB	텍스처, 셰이더 캐시
Skia	~30MB	2D 그래픽 엔진
폰트 캐시	~10MB	로드된 폰트 데이터
이미지 캐시	가변	디코딩된 이미지
위젯 트리	가변	UI 구조 데이터

pie title FlutterEngine 메모리 분포 (대략) "Dart VM" : 40 "GPU 리소스" : 50 "Skia" : 30 "폰트 캐시" : 10 "기타" : 20

기본 엔진만으로 약 150~180MB를 사용하며, 앱 복잡도에 따라 증가합니다.

How#

TIP

메모리 최적화 전략

1. 이미지 캐시 관리

1
// 이미지 캐시 크기 제한
2
class MyApp extends StatelessWidget {
3
  @override
4
  Widget build(BuildContext context) {
5
    // 이미지 캐시를 100MB로 제한
6
    PaintingBinding.instance.imageCache.maximumSizeBytes = 100 << 20;
7

8
    return MaterialApp(
9
      home: const HomeScreen(),
10
    );
11
  }
12
}

1
// 화면 전환 시 캐시 정리
2
@override
3
void dispose() {
4
  // 이 화면에서 사용한 이미지 캐시 정리
5
  imageCache.clear();
6
  super.dispose();
7
}

2. 대용량 리소스 해제

1
class HeavyScreen extends StatefulWidget {
2
  @override
3
  _HeavyScreenState createState() => _HeavyScreenState();
4
}
5

6
class _HeavyScreenState extends State<HeavyScreen> {
7
  ui.Image? _heavyImage;
8

9
  @override
10
  void dispose() {
11
    // 대용량 이미지 명시적 해제
12
    _heavyImage?.dispose();
13
    _heavyImage = null;
14
    super.dispose();
15
  }
16
}

3. 메모리 압박 대응

1
class MyApp extends StatefulWidget {
2
  @override
3
  _MyAppState createState() => _MyAppState();
4
}
5

6
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
7
  @override
8
  void initState() {
9
    super.initState();
10
    WidgetsBinding.instance.addObserver(this);
11
  }
12

13
  @override
14
  void didHaveMemoryPressure() {
15
    // 시스템이 메모리 부족 신호를 보냄
16
    imageCache.clear();
17
    imageCache.clearLiveImages();
18

19
    // 불필요한 데이터 정리
20
    _clearCachedData();
21
  }
22

23
  @override
24
  void dispose() {
25
    WidgetsBinding.instance.removeObserver(this);
26
    super.dispose();
27
  }
28
}

4. FlutterEngineGroup 활용

1
// 사용하지 않는 엔진 해제
2
class MultiEngineManager(private val engineGroup: FlutterEngineGroup) {
3
    private val engines = mutableMapOf<String, FlutterEngine>()
4

5
    fun getEngine(id: String): FlutterEngine {
6
        return engines.getOrPut(id) {
7
            engineGroup.createAndRunDefaultEngine(context)
8
        }
9
    }
10

11
    fun releaseEngine(id: String) {
12
        engines.remove(id)?.destroy()
13
    }
14

15
    fun releaseAll() {
16
        engines.values.forEach { it.destroy() }
17
        engines.clear()
18
    }
19
}

Watch out#

WARNING

메모리 최적화 시 다음 사항에 주의하세요.

과도한 캐시 정리 금지

1
// 잘못된 예: 매 프레임마다 캐시 정리
2
@override
3
Widget build(BuildContext context) {
4
  imageCache.clear();  // 성능 저하 유발
5
  return ...;
6
}
7

8
// 올바른 예: 적절한 시점에만 정리
9
@override
10
void didHaveMemoryPressure() {
11
  imageCache.clear();
12
}

엔진 재사용 vs 생성 트레이드오프

전략	장점	단점
엔진 재사용	빠른 화면 전환	지속적인 메모리 사용
매번 생성	사용 시에만 메모리 사용	느린 화면 전환
하이브리드	균형 잡힌 성능	구현 복잡도 증가

사용 패턴에 따라 적절한 전략을 선택하세요.

결론: 적절한 메모리 관리 전략으로 add-to-app 환경에서도 안정적인 사용자 경험을 제공할 수 있습니다.