본 포스트에서는 플러터 애플리케이션을 구성하는 아키텍처에 대한 입문 정도의 이야기와 아이오닉, Cordova, React Native 등의 다른 모바일 하이브리드 개발 방법과 어떤 차이를 가지는지 이야기해 보겠습니다.
제법 오래 전부터 많은 기업들이 비즈니스를 모바일 애플리케이션으로 서비스를 합니다. 이제 대부분의 사람들이 PC로 뭔가를 처리하기 보다는 모두 손에 들고 다니는 모바일 휴대폰이 일상이 되었기 때문에 기업들도 비즈니스를 하기 위해서는 모바일 애플리케이션은 필수로 개발해야 하는 영역이 된 지 오래입니다.
모바일 시장은 Google, 삼성으로 대표되는 Android와 Apple이 대표하는 iOS 진영이 시장을 양분하고 있습니다. 어느 쪽의 사용자도 무시할 수 없기에 기업은 양쪽의 비용을 모두 부담하여 Android와 iOS 앱을 개발해 왔습니다. 하여 전부터 OSMU (One Source Multi Use) 라는 용어가 보여주듯 한 번의 개발로 Android와 iOS 애플리케이션을 만들 수 있는 방법들을 활발하게 고민해 왔습니다.
Apache Cordova
그 과정에서 많은 방법과 Platform, Framework들이 스쳐갔지만 가장 보편적으로 많이 사용되고 있는 방법은 Open Source인 Apache Cordova 기반의 Framework 들이었습니다. Cordova 애플리케이션의 아키텍처는 아래 링크에서 확인할 수 있습니다.
https://cordova.apache.org/docs/en/11.x/guide/overview/index.html
Architectural overview of Cordova platform - Apache Cordova
Overview Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on
cordova.apache.org
아키텍처를 확인해보면 아래와 같습니다. (출처는 위 링크입니다.)
Android, iOS, Windows 애플리케이션에서 사용할 수 있는 WebView를 생성하고, 해당 WebView에서 Native 기능을 사용할 수 있는 Plug-in 인터페이스를 제공합니다. 하여 실제 비즈니스 UI의 대부분은 WebView 위에서 동작하는 웹 애플리케이션으로 만들어 사용하고 Device의 기능을 사용하고자 할 때만 Plug-in을 사용해서 개발합니다.
Cordova는 Open Source 형태로도 많이 사용하지만, Cordova를 Wrapping 한 솔루션들도 제법 많아 많은 기업들이 현재까지도 활발하게 사용하고 있습니다.
React Native
Front-end 개발 언어 중에 가장 인기가 높은 (물론 아직 점유율 1위는 jQuery 지만) React의 인기에 힘입어 요즘은 React Native도 계속 성장하는 추세입니다. React Native는 React와 마찬가지로 Facebook에서 개발한 모바일 Open Source Framework 입니다.
인스타그램, 페이스북, 핀터레스트, 스카이프 등 쟁쟁한 앱들에서 사용하고 무엇보다 React에 익숙하다면 Learning Curve를 줄일 수 있다는 장점이 있어 성장세를 이어가고 있습니다. React Native의 아키텍처는 아래 링크에서 확인할 수 있습니다.https://reactnative.dev/architecture/xplat-implementation
Cross Platform Implementation · React Native
The React Native renderer utilizes a core render implementation to be shared across platforms
reactnative.dev
아키텍처를 보면 아래와 같이 간략하게 설명되어 있습니다. (출처는 위 링크입니다.)
비즈니스를 JavaScript로 작성하면 패브릭이라는 렌더링 시스템이 처리하여 사용자에게 UI를 제공합니다. Cordova와 전혀 다르지만 UI를 웹 애플리케이션으로 작성한다는 점은 유사합니다.
Google에서도 이런 흐름에 호응하여 크로스 플랫폼을 지원하기 위한 Front-end 개발도구를 하나 내놓았습니다.
Flutter
Flutter는 Cordova나 React Native와는 다른 방향의 아키텍처를 제시합니다. Flutter에 대한 소개는 아래 링크에서 확인할 수 있습니다.
Flutter - Build apps for any screen
Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.
flutter.dev
위 링크를 보시면 아래와 같은 표현이 있습니다.
Flutter는 Front-end UI을 웹 애플리케이션으로 개발하지 않습니다. 다른 개발 도구들은 자체의 렌더링 엔진으로 JavaScript 기반의 웹 애플리케이션을 UI로 사용하는 반면 Flutter는 위와 같이 "natively compiled" 입니다. Java와 JavaScript의 장점을 결합한 듯한 Dart 라는 언어로 UI를 개발한 후 Android, iOS, Windows, Web 애플리케이션을 각자 네이티브 애플리케이션으로 컴파일 해줍니다.
하여 JavaScript를 기반으로 하는 다른 기술들에 비해 Native와 조금 더 가까운 퍼포먼스를 보여줍니다. 대신 처음보는 언어인 Dart를 사용하여 개발하므로 Learning Curve가 조금 있습니다. 웹 애플리케이션만 개발하던 분이라면 UI를 개발하는 사상 자체가 Android와 가까운 Dart에 초기 적응이 쉽지 않을 수 있을 것 같습니다.
Flutter에서 사용하는 Dart 언어에 대한 소개는 아래 링크에서 확인할 수 있습니다.
Dart programming language
Dart is a client-optimized language for fast apps on any platform
dart.dev
Google에서 지속적으로 신규 버전을 제공하고 있지만, 지속성을 가질 지 아닐 지 잘 감이 안오는 Flutter 및 Dart에 대해서 다음 포스트에서는 개발 환경을 구성하는 방법을 알아보겠습니다.