👨‍💻 [Flutter] Flutter 에서 Chromium 을 활용하려면 어떻게 해야 하나요?

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

Flutter 에서 Chromium 을 활용하려면 어떻게 해야 하는지 간략히 알아보았습니다.

---

질문 >

Flutter 에서 Chromium 을 활용하려면 어떻게 해야 하나요?

답변 >

Flutter에서 Chromium을 활용하려면, Flutter 애플리케이션 내에서 웹 컨텐츠를 렌더링하거나, 웹 브라우저와 상호작용하기 위해 외부 Chromium 기반 라이브러리나 플러그인을 사용해야 합니다. Chromium은 오픈 소스 브라우저 엔진이기 때문에 이를 Flutter와 통합하여 웹 페이지를 표시하거나 제어할 수 있습니다.

Flutter에서 Chromium을 활용하는 대표적인 방법은 **flutter_webview**와 같은 플러그인을 사용하는 것입니다. 이 플러그인은 기본적으로 플랫폼 네이티브 WebView를 래핑하여 Flutter에서 웹 컨텐츠를 표시하는 데 사용됩니다. 하지만 Chromium 엔진 기반으로 더욱 높은 제어권과 성능을 얻고자 할 때는 직접 Chromium을 통합하거나 서드파티 라이브러리를 활용할 수 있습니다.

---

Flutter에서 Chromium 활용 방법

1. Flutter WebView 사용

Flutter에서 기본적으로 WebView 플러그인을 사용하여 Chromium 엔진 기반으로 웹 페이지를 렌더링할 수 있습니다.

플러그인 설치

dependencies:
  webview_flutter: ^4.0.1

Flutter WebView 예제

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chromium WebView')),
      body: WebView(
        initialUrl: '<https://flutter.dev>',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

특징

• iOS에서는 WKWebView, Android에서는 WebView를 기본적으로 사용.
• Chromium 기반 브라우저 기능 활용 가능.
• Flutter WebView는 JavaScript 지원 및 페이지 로드 이벤트를 제공합니다.

---

2. 플러그인 기반 Chromium 직접 활용

flutter_inappwebview는 WebView를 포함하여 더 높은 수준의 기능을 제공하는 플러그인입니다.

설치

dependencies:
  flutter_inappwebview: ^5.7.2

Flutter InAppWebView 예제

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewExample(),
    );
  }
}

class InAppWebViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('InAppWebView Example')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: Uri.parse("<https://flutter.dev>"),
        ),
        onWebViewCreated: (controller) {
          print("WebView Created");
        },
        onLoadStart: (controller, url) {
          print("Started loading: $url");
        },
        onLoadStop: (controller, url) {
          print("Finished loading: $url");
        },
      ),
    );
  }
}

특징

• 더 고급 기능 제공 (예: 파일 업로드, JavaScript 실행, 이벤트 처리 등).
• Android의 Chromium WebView와 iOS의 WKWebView에 기반.
• 커스텀 이벤트와 상태 관리 지원.

---

3. Chromium 엔진 직접 활용

Chromium 엔진을 Flutter 애플리케이션에서 직접 통합하려면 Chromium의 **CEF (Chromium Embedded Framework)**를 사용합니다. CEF는 Chromium 기반 브라우저를 독립 실행형으로 통합할 수 있도록 설계된 프레임워크입니다.

단계별 가이드

1. CEF 라이브러리 준비:
   • Chromium Embedded Framework(CEF)를 다운로드하여 Flutter의 네이티브(Android/iOS) 플랫폼에 통합합니다.
   • CEF 다운로드
2. 네이티브 코드 설정:
   • CEF를 Android와 iOS의 네이티브 코드(Java/Kotlin, Objective-C/Swift)로 구성.
   • CEF 라이브러리를 Flutter 네이티브 모듈에 연결합니다.
3. Flutter와 네이티브 연결:
   • Flutter에서 MethodChannel을 통해 네이티브 코드를 호출하여 Chromium 엔진을 초기화하고, 브라우저 UI를 렌더링합니다.

Flutter에서 네이티브 연동 예제

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Native Chromium Example')),
      body: ElevatedButton(
        onPressed: () async {
          try {
            await platform.invokeMethod('openChromiumBrowser');
          } catch (e) {
            print("Error: $e");
          }
        },
        child: Text('Open Chromium Browser'),
      ),
    );
  }
}

Native 코드 (Android - Java)

import android.os.Bundle;
import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;

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

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

        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler(
                        (call, result) -> {
                            if (call.method.equals("openChromiumBrowser")) {
                                // Chromium WebView 실행 로직 작성
                                result.success("Chromium Browser Opened");
                            } else {
                                result.notImplemented();
                            }
                        }
                );
    }
}

특징

• Chromium 엔진의 완전한 제어 가능.
• 고급 브라우저 기능 구현 가능.
• 설정과 통합 작업이 복잡.

---

4. Flutter Web과 Chromium

Flutter Web에서는 기본적으로 웹 브라우저를 통해 앱이 실행됩니다. Chromium 기반 브라우저(예: Google Chrome)에서 실행할 수 있으며, Flutter Web의 주요 기능을 사용할 수 있습니다.

Flutter Web 실행

flutter create my_flutter_web_app
cd my_flutter_web_app
flutter run -d chrome

---

장단점 비교

방법	장점	단점
WebView 플러그인	간단하게 웹 콘텐츠 렌더링 가능. 크로스 플랫폼 지원.	제한된 커스터마이징과 성능.
flutter_inappwebview	고급 기능 제공 (JavaScript, 파일 업로드 등).	더 많은 설정 필요.
CEF 직접 통합	완전한 브라우저 엔진 제어 가능.	복잡한 설정 과정 및 플랫폼별 작업 필요.
Flutter Web (Chrome)	Flutter 앱을 직접 웹에서 실행.	네이티브 앱이 아닌 웹 앱에서만 사용 가능.

---

결론

Flutter에서 Chromium을 활용하려면 사용 사례와 복잡도에 따라 적절한 접근 방식을 선택해야 합니다:

• 간단한 웹 콘텐츠 렌더링 → WebView 또는 flutter_inappwebview.
• 고급 브라우저 기능 → CEF 직접 통합.
• 웹 환경에서의 실행 → Flutter Web.

필요한 기능과 프로젝트의 요구 사항에 따라 위 방법들을 적절히 활용하면 됩니다.

---

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

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---