👨‍💻 [Flutter] Flutter에서 CEF 를 직접 통합하려면 어떻게 해야 하나요?

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

Flutter에서 CEF 를 직접 통합하려면 어떻게 해야 하는지 간략히 알아보았습니다.

---

질문 >

Flutter에서 CEF 를 직접 통합하려면 어떻게 해야 하나요?

답변 >

Flutter에서 **CEF (Chromium Embedded Framework)**를 직접 통합하려면 Flutter와 네이티브 플랫폼(Android, iOS, 데스크톱) 간의 상호작용을 구성해야 합니다. CEF는 Chromium 기반의 웹 브라우저 엔진으로, 고급 브라우저 기능이 필요할 때 사용할 수 있습니다. 그러나 Flutter에는 CEF를 바로 사용할 수 있는 공식 플러그인이 없기 때문에 네이티브 코드를 작성하고 이를 Flutter와 연결해야 합니다.

---

CEF를 Flutter에 통합하기 위한 단계

---

1. CEF 프로젝트 준비

CEF는 오픈소스 프로젝트로, C++ 기반의 라이브러리를 제공합니다. 먼저 CEF 라이브러리를 준비해야 합니다.

1. CEF 다운로드:
   • CEF 공식 사이트에서 CEF 바이너리 또는 소스를 다운로드합니다.
   • 플랫폼별로 적합한 빌드를 선택합니다.
2. CEF 초기화:
   • CEF를 초기화하고 기본 브라우저 창을 생성하는 코드를 작성합니다.
   • 예제:

#include "include/cef_app.h"#include "include/cef_browser.h"#include "include/cef_client.h"int main(int argc, char* argv[]) {
    CefMainArgs main_args(argc, argv);
    CefRefPtr<CefApp> app;
    return CefExecuteProcess(main_args, app, nullptr);
}

---

2. 네이티브 플랫폼(Android/iOS)에 CEF 통합

Flutter는 네이티브 플랫폼과 상호작용하기 위해 MethodChannel을 사용합니다. CEF를 네이티브 코드로 통합한 후, 이를 Flutter에서 호출할 수 있도록 설정합니다.

---

(A) Android

• Android 프로젝트에 CEF 추가:
  • 다운로드한 CEF 라이브러리를 android/app/libs 또는 적절한 위치에 추가합니다.
  • build.gradle 파일에 CEF 라이브러리를 연결합니다:

android {
    ...
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.so'])
}

• MainActivity.java에서 CEF 초기화:
  • CEF 브라우저를 실행하도록 메서드를 작성합니다:

import android.os.Bundle;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "com.example/cef";

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);

        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
            .setMethodCallHandler((call, result) -> {
                if (call.method.equals("launchCEF")) {
                    launchChromium();
                    result.success("CEF Launched");
                } else {
                    result.notImplemented();
                }
            });
    }

    private void launchChromium() {
        // CEF 초기화 및 브라우저 실행 코드
        // 이곳에 CEF 초기화 및 창 열기 코드를 추가합니다.
    }
}

---

(B) iOS

• iOS 프로젝트에 CEF 추가:
  • CocoaPods 또는 직접 라이브러리 파일을 사용하여 CEF를 통합합니다.
  • Podfile에 CEF 라이브러리를 추가합니다:

pod 'CEF', :git => '<https://bitbucket.org/chromiumembedded/cef.git>'

• AppDelegate.swift에서 CEF 초기화:
  • CEF를 초기화하고 브라우저 창을 실행하는 메서드를 작성합니다:

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller = window?.rootViewController as! FlutterViewController
        let methodChannel = FlutterMethodChannel(name: "com.example/cef",
                                                 binaryMessenger: controller.binaryMessenger)

        methodChannel.setMethodCallHandler { (call: FlutterMethodCall, result: FlutterResult) in
            if call.method == "launchCEF" {
                self.launchChromium()
                result("CEF Launched")
            } else {
                result(FlutterMethodNotImplemented)
            }
        }

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    private func launchChromium() {
        // CEF 초기화 및 브라우저 실행 코드
        // CEF 창 생성 및 로드 코드 작성
    }
}

---

3. Flutter와 네이티브 연결

Flutter에서 네이티브 메서드(launchCEF)를 호출하여 CEF 브라우저를 실행합니다.

• Flutter 코드 작성:
  • Flutter에서 MethodChannel을 사용하여 네이티브 코드를 호출합니다:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class CEFExample extends StatelessWidget {
  static const platform = MethodChannel('com.example/cef');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CEF Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              final result = await platform.invokeMethod('launchCEF');
              print(result); // CEF Launched
            } catch (e) {
              print('Error: $e');
            }
          },
          child: Text('Launch CEF Browser'),
        ),
      ),
    );
  }
}

• Flutter 앱 실행:
  • 버튼을 누르면 CEF 브라우저가 실행됩니다.

---

4. 데스크톱 플랫폼에 CEF 통합

Flutter 데스크톱 앱에서는 C++ 기반으로 CEF를 직접 통합해야 합니다.

1. CEF 초기화:
   • Flutter 데스크톱 프로젝트에서 windows/ 또는 linux/ 디렉토리 내에 CEF 초기화 코드를 작성합니다.
2. Flutter와 C++ 통신:
   • MethodChannel을 사용하여 Flutter와 C++ 간 데이터를 송수신합니다.

---

장단점

장점	단점
고급 브라우저 기능 활용 가능 (예: WebRTC, 확장 프로그램).	설정 및 구현이 복잡하며 플랫폼별 코드 작업 필요.
완전한 커스터마이징 가능.	빌드 크기가 증가할 수 있음.
Chromium 기반 성능 제공.	Flutter 커뮤니티에서 공식적인 지원 부족.

---

결론

Flutter에서 CEF를 직접 통합하려면 **네이티브 코드(Android, iOS, 데스크톱)**와 Flutter MethodChannel을 사용하여 상호작용을 구성해야 합니다. 이는 복잡한 작업이지만, 고급 브라우저 기능이 필요하거나 웹 콘텐츠에 대한 완전한 제어가 필요할 때 유용합니다. 다만, 프로젝트의 복잡성을 고려하여 WebView 기반 솔루션과 비교해 적합성을 판단해야 합니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---