[Flutter] 웹뷰 패키지 2종 비교

안녕하세요. 모바일 앱 개발자 임동혁입니다. 오늘은 플러터에서 가장 인기있는 웹뷰 패키지인 Flutter WebView 와 Flutter InAppWebView를 간단하게 비교해보겠습니다.

 

웹뷰?

웹뷰(Webview)는 우리가 사용하는 앱 내에서 웹의 콘텐츠를 표시하는 기술입니다. 웹뷰를 사용하면 기존에 만들어둔 리소스를 재활용 할 수 있기 때문에 개발속도가 빨라져 더 많은 서비스를 빠르게 제공할 수 있다는 장점이 있습니다. 또한 배포와 업데이트에 오랜 시간이 걸리는 네이티브 앱과 달리 빠른 업데이트가 가능하다는 점도 웹뷰의 큰 장점 중 하나라고 할 수 있습니다.

 

과거에는 웹이 네이티브로 개발된 앱보다 속도가 느리다는 단점때문에 웹뷰의 도입이 망설여졌지만, 기술의 발전으로 웹과 웹뷰 지원 패키지의 속도가 향상됨에 따라 오히려 웹뷰를 사용하지 않는 앱을 보기 찾아 보기 어려울 정도로 웹뷰 형태의 앱이 많아진 것 같습니다. 국내외 거대 IT 기업들 역시 웹뷰를 적극적으로 도입한 서비스를 제공하고 있습니다.

 

웹뷰 in Flutter

플러터 패키지 관리 레포지토리인 pub.dev에서 가장 인기있는 웹뷰 패키지는 공식 Flutter팀에서 개발한 Flutter WebView와 많은 Contributor에 의해 개발되고 있는 Flutter InAppWebView가 있습니다. 두 패키지 모두 2000개 이상의 Like를 받고 100%의 Popularity를 보여주고 있는만큼, 플러터 개발자에게 큰 사랑을 받고 있습니다.

 

웹뷰 셋업

 

플러터에서 웹뷰를 사용하기 위해 먼저 Android App 수준의 build.gradle에서 minSdkVersion과 targetSdkVersion을 요구사항대로 맞춰주어야 합니다. 

// project/andoroid/app/build.gradle
/* before
...
defaultConfig {
    applicationID "com.your.project"
    minSdkVersion flutter.minSdkVersion
    targetSdkVersion flutter.targetSdkVersion
    ...
    }
 ...
 */

// After
 ...
 defaultConfig {
     applicationID "com.your.project"
     minSdkVersion 20    // Change Minimum SDK Version to 20
     targetSdkVersion 30 // And Target SDK Version to 30
     ...
     }
  ...

 

다음, 프로젝트의 pubspec.yaml 파일에 두 패키지의 dependencies를 추가해줍니다.

// project/pubspec.yaml
...
depencencies: 
    webview_flutter: ^4.7.0
    flutter_inappwebview: ^6.0.0
    // flutter_inappwebview: ^5.8.0 // Last Version for the performance testings. 
...

 

성능 비교

가장 먼저 두 패키지의 성능을 비교해보겠습니다. 프레임 드랍과 느린 로딩 속도는 사용자 경험에 부정적인 영향을 끼칠 수 있으므로 다양한 측면에서 성능 비교를 진행해보았습니다. 프레임 측정은 Flutter DevTools, 로딩 속도는 Dart DateTime 클래스를 사용해 측정했습니다. 

 

또한 Flutter InAppWebView는 5.x 버전에서 6.0 버전으로 업데이트가 되며 성능 향상이 있었다고 고지하고 있습니다. 따라서 두 버전 모두 테스트를 진행해보았습니다. 

 

 

실험 환경: MacBook Pro 16 (2022, M1 Pro), macOS Sonoma 14.4.1

실험 디바이스: Xcode Emulator, iPhone 15, iOS 17.0

 

Flutter WebView 4.7.0

Load Time: 1.09s

 

 

Flutter InAppWebView 5.8.0

Load Time: 1.13s

 

Flutter InAppWebView 6.0.0

Load Time: 1.10s

 

Flutter InAppWebView는 버전이 올라가면서 약간의 성능 향상이 있었습니다. 하지만 전반적인 성능은 Flutter WebView가 우세하다고 할 수 있습니다. 전반적인 사용자 경험 역시 초반에 버벅임이 없는 Flutter WebView가 앞선다고 느꼈습니다.

 

기능 비교

 

Flutter WebView 패키지는 더 가볍고 직관적으로 개발할 수 있습니다. WebView 컨트롤러의 메서드를 사용할 수 있는 NavigationDelegate 클래스를 살펴보면, 꼭 필요한 기능 위주로 제공하고 있는 것을 알 수 있습니다. 

class NavigationDelegate{
  NavigationDelegate({
    FutureOr<NavigationDecision> Function(NavigationRequest request)?
        onNavigationRequest,
    void Function(String url)? onPageStarted,
    void Function(String url)? onPageFinished,
    void Function(int progress)? onProgress,
    void Function(WebResourceError error)? onWebResourceError,
    void Function(UrlChange change)? onUrlChange,
    void Function(HttpAuthRequest request)? onHttpAuthRequest,
  });
}

 

이에 반해 Flutter InAppWebView 패키지의 생성자를 보면, Flutter WebView보다 더 많은 기능을 제공하는 것이 목적인 것을 확인할 수 있습니다.특히 당겨서 새로고침, 새 창 보기 등 여러 기능들을 제공하는 것으로 사용자에게 친숙한 경험을 제공할 가능성이 열려있습니다. 아래 보여지는 코드보다 훨씬 더 많은 내용이 있지만 여백이 부족하여 생략했습니다.

class InAppWebView extends StatefulWidget {
 InAppWebView({
    Key? key,
    Set<Factory<OneSequenceGestureRecognizer>>? gestureRecognizers,
    int? windowId,
    HeadlessInAppWebView? headlessWebView,
    InAppWebViewKeepAlive? keepAlive,
    bool? preventGestureDelay,
    TextDirection? layoutDirection,
    InAppWebViewGroupOptions? initialOptions,
    InAppWebViewSettings? initialSettings,
    URLRequest? initialUrlRequest,
    UnmodifiableListView<UserScript>? initialUserScripts,
    PullToRefreshController? pullToRefreshController,
    FindInteractionController? findInteractionController,
    ContextMenu? contextMenu,
    ... 
    });

 

결론

 

Flutter WebView와 Flutter InAppWebView 모두 훌륭한 웹뷰 패키지인 것은 이미 많은 플러터 개발자에 의해 증명이 되었습니다. 기능적인 측면에서는 Flutter InAppWebView가 더 뛰어나다는 것을 알 수 있습니다 .하지만 간단한 실험을 통해 Flutter WebView 패키지의 성능이 조금 더 뛰어나다는 것을 알 수 있었습니다. 실제 디바이스에서는 느낄 수 없는 차이일 수 있지만, 중저가 스마트폰을 선호하는 사용자까지 고려했을 때 충분히 고민해볼만한 점입니다.