[플러터] 하이브리드 앱 만들기 <webview + 웹서버>

본 글은 flutter 2.8.1, dart 2.15.1을 기준으로 작성되었습니다.

본 글은 지난 글에서 제시한 방법 중 webview_flutter 라이브러리와 웹서버를 이용하여 하이브리느 앱을 만드는 방법에 대해 다루고 있습니다.

1. webview_flutter를 선택한 이유

1. flutter에서 만든 공식 라이브러리입니다. 때문에 호환성이나 버그 등의 이슈에 대해 더 빠르게 대응할 가능성이 높습니다.
2. 가장 많은 LIKES와 POPULARITY를 가지고 있습니다. 때문에 오류나 구현 방법 등에 있어 더 많은 사용자와 교류할 수 있습니다.
3. webview_flutter 다음으로 많은 LIKES와 POPULARITY를 가진 라이브러리로 flutter_inappwebview가 있습니다.
   하지만 flutter_inappwebview는 마지막 업데이트가 2022년 4월 3일 기준으로 2021년 4월 7일로, 2022년 2월 24일에 업데이트한 webview_flutter에 비해 업데이트가 느린 편입니다.

2. webview_flutter 설치하기

flutter 라이브러리는 pubspec.yaml의 dependencies: 아래에 라이브러리 명을 추가하는 방법으로도 할 수 있으나 저는 라이브러리 간 충돌하는 이슈를 설치할 때 확인하기 위하여 터미널에서 아래의 명령어를 통해 설치하는 것을 선호합니다.

flutter pub add webview_flutter
flutter pub get

3. 화면에 webview 띄우기

아래와 같은 코드를 통해 webview를 띄울 수 있습니다.

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

class WebScreen extends StatelessWidget {
  const String URI = 'https://velog.io/@gyodaesaeng';

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: URI,
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

Webview의 파라미터로 initialUrl과 javascriptMode가 있는 것을 볼 수 있습니다.
이 중 initialUrl은 필수 파라미터로 Webview가 처음 띄울 웹페이지 주소를 의미합니다.
javascriptMode는 disabled와 unrestricted가 존재하는데 설정을 따로 하지 않을 경우 기본값은 disabled로 이 경우 웹 페이지의 javascript를 실행하지 않습니다.
대부분의 웹 앱의 경우 javascript를 사용하므로 unrestricted로 설정해야 정상적으로 웹 앱을 사용할 수 있습니다.

4. 플러터와 웹 앱 정보 전달하기

webview와 웹 앱 간 정보를 전달하는 방법은 크게 3가지가 있습니다.
JavascriptChannel을 이용하는 방법, Cookie를 이용하는 방법, Javascript 스크립트를 이용하는 방법입니다.
이 중 JavascriptChannel을 이용하는 방법이 유일하게 양방향 통신이 가능합니다.
하지만 본 글에서는 Cookie를 이용하는 방법을 다룹니다.
JavascriptChannel은 플러터와 웹 앱이 정보를 자주 주고받아야 하는 상황에서는 유용하지만 Cookie를 이용하는 방법보다 플러터와 웹 앱 양쪽에서 더 복잡합니다.
그래서 보안이 중요하지 않고 초기에 플러터에서 웹 앱으로 정보를 전달해주기만 하면 되는 상황에서는 Cookie를 이용하는 방법이 더 좋을 수 있습니다.
아래와 같은 코드로 구현 가능합니다.

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

class WebScreen extends StatelessWidget {
  const String URI = 'https://velog.io/@gyodaesaeng';
  const String DATA_NAME = 'name';
  const String DATA_VALUE = 'Jaejin Lee';

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: URI,
      javascriptMode: JavascriptMode.unrestricted,
      initialCookies: [
        WebViewCookie(
          name: DATA_NAME,
          value: DATA_VALUE,
          domain: URI,
        ),
    );
  }
}