컨플릭트를두려워하지말자

플러터에서 웹뷰를 띄우기 위해서는, 플러터에서 기본적으로 제공하는 웹 뷰 패키지를 사용하면 된다. 

https://pub.dev/packages/webview_flutter/install

공식 페이지 설명에 따라 pub 명령어를 통해 웹뷰 패키지를 설치하고 

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

상단에 패키지를 import 하면 된다. 

안드로이드 스튜디오 연결 등 귀찮은 설정들을 다해주고나서 공식 페이지의 예제 탭을 눌러보면

코드가 너무 길다... 나같은 플러터 초보는 코드가 한 눈에 안들어오고 그냥 눈 앞이 아득해진다. 

그래서 내가 간단히 기본 홈 위젯 바디안에 웹뷰를 띄우는 코드를 작성해봤다.

class WebViewScreen extends StatefulWidget {
  final String url; // 웹뷰에 로드할 URL
  const WebViewScreen({super.key, required this.url});

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();

    // 각 플랫폼(Android/iOS)에 맞는 WebViewController 생성에 필요한 초기화 파라미터 설정
    const PlatformWebViewControllerCreationParams params =
        PlatformWebViewControllerCreationParams();

    // WebViewController 초기화
    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);

    // JavaScript 활성화 및 초기 URL 로드
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // JavaScript 활성화
      ..loadRequest(Uri.parse(widget.url)); // URL 로드

    // 플랫폼이 Android인 경우 필요한 설정
    if (controller.platform is AndroidWebViewController) {
      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }

   
    _controller = controller;
  }

  @override
  Widget build(BuildContext context) {
    // WebView 위젯에 컨트롤러를 전달하여 UI 렌더링
    return WebViewWidget(controller: _controller);
  }
}

WebViewScreen의 state에서 리턴해주는 WebViewWidget은 우리가 설치한 웹뷰 패키지에서 제공하는 위젯이다.

이 위젯은 자바스크립트를 제어하고, url을 가져오는 컨트롤러를 필요로 하며, 그 컨트롤러를 웹뷰 위젯의 state에서 정의하는 것이다. 

이렇게 작성한 위젯은

class WebViewApp extends StatelessWidget {
  const WebViewApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('안드로이드 웹뷰 테스트'),
        ),
        body: const WebViewScreen(
          url: 'https://house-of-ham.tistory.com/',
        ),
      ),
    );
  }
}

파라미터로 원하는 url을 넣어 간단하게 사용할 수 있다. 

화면에서 보면 이런 모습. 

상단 앱바 아래에 웹뷰가 떠 있다. 

https://github.com/goeunleee/webview_flutter

내 레포지토리에 들어가면 main.dart에 적용한 모습 & 거기다 버튼에 따라 웹뷰 url을 변경하는 토글 기능까지 추가한 전체 코드를 볼 수 있다. (아래사진참조)

버튼에 따라 깃허브, 티스토리블로그를 변경해가며 볼 수 있는 웹 뷰 

https://flutter.dev/

구글에서 만든 ios, android를 모두 아우를 수 있는 크로스브라우징 & 크로스 플랫폼 프레임워크이다.

Flutter 하나만으로 모바일 앱, 데스크톱 앱, 웹 앱이 모두 개발이 가능하다는 것이다. (심지어 IoT UI개발도 가능!)

하나의 코드베이스로 프로젝트 하나를 개발해서 apk로 빌드하면 안드로이드 앱이, web 빌드를 하면 웹 앱이 만들어지는 프레임워크 ~.~ 

(리액트로 예를 들면 리액트 앱 하나를 개발해서 안드로이드 아이폰 웹 데스크톱 앱 개발이 다 가능하다는 소리다 대박!)

https://dart.dev/

Dart라는 새로운 언어를 배워야 해서 초기 진입장벽이 있기는 하지만,

만약 시스템 프로그래밍 언어(C,C++,java)를 배운 사람이라면 문법이 거의 유사하기때문에 빠르게 접할 수 있다.

컴공전공자가 매우 쉽게 배울 수 있는 프레임워크라네 

그리고 C와 문법이 비슷하면서도, String 타입이나 async/await 비동기 처리도 지원을 하니 만약 javascript까지 알고 있다면 더욱 배우기 쉬울 것이다 

또한, 배포단계에서 AOT (ahead of time compile)기반으로 컴파일되기때문에 실행시점에 컴파일되는 JIT(just in time)방식과 달리 초기 실행속도가 빠르고, 보안면에서 우수하다는 장점이 있다. 

*aot : 소스코드를 기계어로 미리 변경 후 컴파일. 런타임에서 별다른 작업이 필요없음.

<-> jit : 실행시점에 그때그때 코드를 컴파일 

더 신기한건, 개발시에는 JIT로 컴파일 된다는 점! 그래서 개발시에는 즉각적으로 변화를 확인할 수 있고 디버깅도 쉽게 할 수 있다는 점이다 

물론 단점도 있다. 

Flutter는 SEO 최적화가 어렵고, 기계어가 포함되기 때문에 파일 크기가 커질 수 있다. 또한, UI 개발에 최적화되어 있어 애플리케이션 계층의 작업을 처리하는 데는 강점이 있지만, 하드웨어 계층의 작업을 처리하는 데는 한계가 있다. 

이러한 작업은 Java, Kotlin, Swift와 같은 네이티브 언어를 사용하는 것이 적합하다.

Flutter는 하드웨어를 직접 제어하기보다는 API(플러그인)나 라이브러리를 통해 간접적으로 하드웨어와 연동하는 애플리케이션 개발에 적합한 프레임워크이다.

끝