[플러터] 대표 웹뷰 패키지 소개 및 장단점
내 상황에 맞는
앱뷰는 무엇일까?
안녕하세요. 앱개발지식나눔입니다.
플러터로 서비스를 개발하시다보면 가끔 인앱 웹뷰를 사용해야할 때가 있습니다. 예를들어 저는 플러터로 홈페이지를 웹뷰로 열어 그 안에서 PASS를 실행해야 했던 경험이 있습니다. 정말 까다로운 조건이였죠. 이처럼 각자 홈페이지를 앱에서 실행해야하는 이유가 있을 것입니다.
오늘은 대표적인 플러터 웹뷰 3가지를 가져왔습니다. 대부분 플러터 유저가 이것 중에 하나를 사용하며 각각의 특징과 장단점을 알아보고 개발자 입맛에 맞는 패키지를 사용하시기 바랍니다. 그럼 바로 시작해볼까요?
1. flutter_inappwebview: https://pub.dev/packages/flutter_inappwebview
2. url_launcher: https://pub.dev/packages/url_launcher
3. Webview: https://pub.dev/packages/webview_flutter
1. flutter_inappwebview 패키지
첫번째는 플러터 InAppWebView 패키지입니다. 3가지 중에서 가장 범용성이 넓으면서 가장 기능이 많은 패키지입니다. 그 이유는 해당 사이트에 들어가서 보면 아시겠지만 이 패키지 안에 9가지 종류의 다른 웹뷰가 있기 때문입니다.
그럼 이 패키지가 다른 두 가지보다 뛰어난 점이 무엇일까요? 바로 JavaScriptChannel을 사용할 수 있는 점입니다. (물론 이 패키지의 InAppWebView 만 가능합니다. InAppWebView 패키지 안에 있는 기본 InAppWebView 클래스 입니다. 착오 없으시길 바랍니다.)
JavaScriptChannel은 웹에서 자바스크립트로 작성된 코드를 통해서 일정한 값을 앱-웹간 양방향 소통할 수 있는 도구입니다. 예를들어 웹 페이지에서 모든 인증 절차가 끝나면 yes를 웹에서 앱으로 자바스크립트채널로 넘겨줄 수 있습니다. 이는 매우 효과적이고 사용자 친화적인 메소드입니다.
그럼 단점은 무엇일까요? 일반 InAppWebView의 가장 큰 단점이자 가장 큰 확장성입니다. 다시 말해서 크롬, 사파리, IE 브라우저에서 자동적으로 해주는 모든 자바스크립트 기능들을 일일히 다 구현해야 한다는 점입니다. 예를 들어, 웹에서 window.open이라는 새창 열기 자바 스크립트 명령이 있으면 이것을 일반 InAppWebView에서 onCreateWindow 메소드를 통해 showDialog를 만들어서 그 안에 직접 구현했습니다. 이처럼 일일히 구현해야한다는 점은 많은 시간과 시행착오가 필요합니다. InAppWebView 패키지 안 다양한 클래스들은 다른 포스트에서 설명하겠습니다.
<InAppWebView 새창 띄우는 법>
[Flutter] - [플러터] InAppWebView에서 새 창 여는 법
[플러터] InAppWebView에서 새 창 여는 법
왜 웹뷰에서 버튼을 눌렀을 때 흰색 화면만 보일까? 안녕하세요. 앱개밸자지식나눔입니다. 오늘은 플러터 패키지인 InAppWebView에서 새로운 창(탭)을 여는 법에 대해서 알아보겠습니다. 그전에 저
app-developement-sharing-forum.tistory.com
2. url_launcher 패키지
두번째 패키지는 처음 패키지보다 가벼운 웹뷰 패키지입니다. 다른 패키지와 다르게 이 패키지는 이메일 보내기, SNS Message 공유하기, 전화걸기를 사전에 작성해둔 주소로 InkWell와 같이 이벤트를 발생하는 모든 기능을 통해 작동이 가능하다는 점입니다. 그리고 사용법이 매우 간단합니다. (물론 저는 InAppWebView의 ChromeSafari 클래스가 개인적으로 간단합니다.) 또한 크롬,사파리와 같이 외부 브라우저를 사용할지, 내부 인앱 브라우저를 사용할지 선택할 수 있습니다.
단점은, 자바스크립트채널 사용이 불가능합니다. 그리고 아이폰일 경우 생각보다 SNS 공유하기가 잘 작동이 안 됩니다. 또한 웹 페이지에서 어떠한 html 소스를 받아올 수 없습니다. 이는 오직 InAppWebView 패키지에서만 가능합니다. 그 외에 단순한 서핑이나 정보 획득 정도면 충분한 패키지라 생각이 됩니다.
3. WebView 패키지
마지막 패키지인 WebView는 가벼운 InAppWebView 버전입니다. 아마 대부분 사람들이 첫 패키지를 바라보면 수많은 클래스 메소드에 휩싸여 정신이 없으실겁니다. 이 패키지는 그런 사람들을 위해서 필요한 메소드만 모아 재창작된 패키지라고 생각하시면 됩니다.
장점은 일단 메소드가 직관적이고 필요한 것만 모여있다는 점입니다. 그리고 JavaScriptChannel이 가능합니다. 그리고 대부분 기능이 약간씩만 다르고 첫번째 패키지와 비슷합니다.
하지만 치명적 단점은 새창열기가 불가능합니다. 현재 시점으로 3.0.1 버전 기준으로 확실하게 불가능합니다. 이것때문에 저는 많은 시행착오를 가졌었는데요.. window.open 자바스크립트가 실행되면 흰색 화면이 되어버립니다. 홈페이지에 새창, 팝업이 있으면 InAppWebView의 ChromeSafariBrowser 클래스나 url_launcher를 사용하는 것을 추천드립니다.
결론
| InAppWebView | url_launcher | WebView | |
| 확장성 | 최상 | 중 | 하 |
| 사용자 친화성 | 자연스러움 | 약간 부자연스러움 | 중간 |
| 자바스크립트 사용 가능 여부 | 가능(일반 클래스만) | 불가 | 가능 |
| 새창 열기 가능 여부 | 가능 | 가능 | 불가 |
| 이메일, SNS 공유, 전화걸기 가능 | 불가 | 가능 | 불가 |
이상 각 패키지를 비교한 앱개발지식나눔이였습니다.