본 글은 flutter 2.8.1, dart 2.15.1을 기준으로 작성되었습니다.
최근 하이브리드 앱으로 개발되는 프로젝트들이 많습니다. Gmail, 인스타그램, 트위터, 우버, 에버노트 등 다양한 앱이 하이브리드 앱으로 개발된 것으로 알려져 있으며 UI만으로는 하이브리드 앱과 네이티브 앱을 구별할 수 없기 때문에 훨씬 더 많은 앱들이 하이브리드 앱으로 개발되었을 수도 있습니다. 하이브리드 앱과 네이티브 앱에 대해서는 다른 글에서 자세히 다뤄보겠습니다.
하이브리드 앱을 만드는 프레임워크는 여러 가지가 있으나 본 글에서는 플러터를 이용하여 하이브리드 앱을 만들어 볼 것입니다.
플러터에서 하이브리드 앱을 만드는 방법은 크게 세가지로 나눌 수 있습니다.
1. webview + asset
asset에 웹 페이지 파일들을 넣어두고 flutter에서 공식 지원하는 webview_flutter를 사용하여 asset에 저장된 웹 페이지를 띄우는 방식입니다.
네트워크에 연결되어 있지 않아도 된다는 장점을 가지고 있으나 웹 페이지가 변경될 때마다 새로 빌드하여 배포해주어야 한다는 단점을 가지고 있습니다. 또한 웹 서버에 접속하는 것이 아닌 로컬에 위치한 파일을 여는 것이기 때문에 SPA의 경우 일반적인 라우터를 사용할 수 없고 해쉬라우터를 사용해야 한다는 단점도 있습니다.
2. inappwebview + asset
inappwebview는 webview 다음으로 많이 쓰이는 webview 라이브러리입니다. webview에 비해 다양한 기능을 가지고 있는데 그 중 하나가 로컬호스트 서버입니다. 이를 이용하여 asset에 있는 웹 페이지를 로컬호스트 서버로 띄운 뒤 서버에 접속할 수 있습니다.
이를 통해 1번의 장점을 모두 가져가면서 라우팅의 제약도 없어지며 플러터와 웹과 통신하기도 더 수월해지게 됩니다.
하지만 웹 페이지가 변경될 때마다 새로 빌드하여 배포해주어야 한다는 단점은 동일하게 가지고 있습니다.
3. (weview / inappwebview) + 웹서버
외부에서 웹 서버를 구동하고 webview를 통해 해당 ip/도메인에 접속하여 화면을 띄우는 방식입니다.
세 방법 중 가장 하이브리드 앱에 가까운 방법입니다.
네트워크에 접속하지 못할 경우 화면을 띄우지 못한다는 단점이 있으나 웹 페이지가 변경되어도 새로 빌드하여 배포할 필요가 없다는 장점이 있습니다. 추가로 웹 서버를 운영하는 비용이 든다는 단점이 있지만 웹서버에서 정적으로 파일만 보내기 때문에 비용은 작은 편입니다.
