> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 하이브리드 앱 설정하기 - 플러터 SDK

<Info>
  **알립니다**

  하이브리드 앱 설정을 하기 전에 앱과 웹사이트에 각각 [플러터 SDK](/ko/developers/flutter-sdk-v4)와 [웹 SDK](/ko/developers/web-sdk)를 설치해 주세요.
</Info>

하이브리드 앱에서 웹 사이트 코드를 변경하지 않아도 에어브릿지 플러터 SDK가 인앱 웹 사이트에서 발생하는 에어브릿지 관련 작업을 처리하도록 설정할 수 있습니다.

## 플러터 SDK로 웹 SDK 동작 처리하기

플러터 SDK는 웹 SDK에서 진행되는 이벤트 전송, 디바이스 설정, 유저 설정에 관한 명령을 대신 처리할 수 있습니다. 웹뷰에 웹 사이트를 표시하기 전에 `Airbridge.createWebInterfaceScript` 함수와 `Airbridge.handleWebInterfaceCommand` 함수를 이용해 설정해 주세요.

`webToken` 은 [웹 SDK 토큰](/ko/guides/tokens#웹-sdk-토큰)입니다. 웹 SDK 토큰은 에어브릿지 대시보드의 \[설정]>\[토큰 관리]에서 확인할 수 있습니다.

`postMessageScript` 는 웹 SDK가 플러터 SDK에 전달하는 명령어가 저장된 `payload` 변수를 플러터 영역에 전달하는 자바스크립트 코드입니다.

`command` 는 웹 SDK가 플러터 SDK에 전달하는 명령어입니다.

<CodeGroup>
  ```dart flutter_inappwebview lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
  import 'dart:collection';
  import 'package:airbridge_flutter_sdk/airbridge_flutter_sdk.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_inappwebview/flutter_inappwebview.dart';

  class TestPage extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
      return TestState();
    }
  }

  class TestState extends State<TestPage> {
    @override
    void initState() {
      super.initState();
    }

    @override
    Widget build(BuildContext context) {
      return FutureBuilder(
        future: getJavascriptInterface(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return InAppWebView(
            initialUrlRequest: URLRequest(url: WebUri('YOUR_WEB_URL')),
            onWebViewCreated: (controller) async {
              controller.addJavaScriptHandler(handlerName: 'postMessage', callback: (args) {
              Airbridge.handleWebInterfaceCommand(args[0]);
              return args;
              });
            },
            initialUserScripts: UnmodifiableListView<UserScript>([
              UserScript(
              source: snapshot.requireData ?? "", 
              injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
            ]),
          )
        });
    }

    Future<String?> getJavascriptInterface() async {
      return await Airbridge.createWebInterfaceScript(
        webToken: 'YOUR_WEB_SDK_TOKEN',
        postMessageScript: 'window.flutter_inappwebview.callHandler("postMessage", payload);',
      );
    }
  }
  ```
</CodeGroup>

<Danger>
  **알립니다**

  **webview\_flutter** 의 경우 하이브리드 설정 스크립트 코드 주입을 페이지 로딩 전에 할 수 있는 인터페이스를 지원하고 있지 않아서 **webview\_flutter** 에 대한 샘플 코드는 지원되지 않습니다.

  **flutter\_inappwebview** 사용을 권장합니다.
</Danger>

## 주의사항

<Accordion title="인앱 웹뷰의 이벤트 수집">
  하이브리드 앱 설정을 하면 웹 SDK만으로 인앱 웹뷰에서 발생하는 이벤트를 수집해야 합니다. 앱 SDK로 이벤트를 추가로 수집하면 해당 이벤트가 중복해서 집계됩니다.

  인앱 웹뷰에 실제 모바일 웹사이트를 사용하면 웹 SDK만으로 이벤트를 수집해 주세요.
</Accordion>

<link rel="alternate" hrefLang="en" href="https://help.airbridge.io/en/developers/hybrid-app-settings-flutter-sdk-v4" />

<link rel="alternate" hrefLang="ko" href="https://help.airbridge.io/ko/developers/hybrid-app-settings-flutter-sdk-v4" />