본문 바로가기
[개발] 이야기/[Flutter] 이야기

모바일 크로스 플랫폼 프레임워크의 개념과 발전 히스토리를 알아보자 쉽게(플루터의 탄생과정)

by 헤이나우
반응형

플루터를 더 알아보기 위해선 모바일 크로스 프레임워크의 개념에 대해서 이해할 필요가 있습니다.

 

기존 네이티브 모바일 개발 방법과 모바일 크로스 플랫폼 탄생 과정

우선 모바일 운영체제에서 애플리케이션 작동원리에 대해서 알아봅시다

 

모바일 운영체제에서 애플리케이션은 위 그림과 같이 작동한다.

ios와 android플랫폼의 애플리케이션은 Native언어를 통해 만들고 Camera등의 서비스를 이용하기 위해 Platform과 소통한다.

iOS는 Object-C, 안드로이드는 Java기반의 서로 다른 네이티브 언어를 통해 응용프로그램을 개발할 수 있기 때문에, 두 운영체제의 독점은 모바일 응용 프로그램을 만드는 개발자들에게 부담을 주었다.

모바일 애플리케이션을 출시하기 위해서는 서로 다른 두 가지 네이티브 언어로 개발하고 지속해서 유지보수해야 한다는 것을 의미했다.

같은 애플리케이션을 두가지 방식으로 개발 및 유지보수하는 수고로움을 덜기 위해 모바일 크로스 플랫폼 프레임워크가 탄생하게 됐다.

 

1. WebView를 클로스 플랫폼 프레임워크

초기의 모바일 크로스 플랫폼 프레임워크 중 대표적인 것은 Javascript와 webview를 기반으로 만들어진 Apache Cordova, Ionic이다. 두 가지 모두 Cordova를 기반으로 제작되었고, Ionic은 GUI및 CUI기능을 추가한 프레임워크다. 이들은 웹뷰를 이용하는 프레임워크로 HTML언어를 통해 Platform내부의 Webview와 소통하며 웹뷰는 Canvas를 통해 사용자에게 렌더하게 된다. 네이티브와 다르게 Javascript를 통해 플랫폼의 서비스들과 직접 소통하기는 어렵기 때문에 플릿지를 이용한다. 초기 프레임워크들은 브릿지덕분에 Javascript코드를 통해 서비스와 소통할 수 있었다. 이러한 프레임워크들은 하나의 언어를 통해 개발과 유지보수를 할 수 있다는 점에서 애플리케이션 제작이 이용되었다.

 

2. React-Native의 출시

초기 모바일 크로스 플랫폼 프레임워크의 등장 이후 대규모 트래픽을 다루는 다수의 IT기업들이 등장했다. 그에 따라 사용자 경험의 중요성이 대두되었다. 때문에 애플리케이션 복잡성이 증가하더라도 좋은 사용자 경험을 제공할 수 있는 비동기적 데이터 흐름에 기반한 리액티브 프로그래밍이 많은 인기를 얻었다. 그러한 이유로 리액티브 프로그래밍 패턴을 가지고 웹뷰 생성을 이전 프레임워크 대비 쉽게 만들어준 React-Native는 많은 IT회사의 선택을 받았다. React-Native출시 이후 테슬라, 에어비앤비, 월마트, 우버 등 다양한 기업들이 React-Native를 통해 자신의 애플리케이션을 출시했다.

React-Native는 초기 모바일 크로스 플래폼 프레임워크와 달리 Flux라는 이름의 브릿지를 이용해 소통한다. 이러한 구조 덕분에 React-Native를 사용한 회사들은 Native 언어를 이용한 개발 리소를 최소화 하고 JavaScript언어만으로 iOS, Android운영체제 모두에서 작동하는 애플리케이션을 만들수 있다.

 

3. React-Native의 한계

Native영역과 소통하기 위해 브릿지를 거쳐야 한다는 구조적 한계 때문에 React-Naive는 외면받게 되었다. 애플리케이션을 사용할 때 브릿지는 빈번하게 호출되기 때문에 블릿지를 거치는 구조에서 병목현상이 발생하기 때문이다. 즉, 리액트는 구조적 한계로 다수의 트래픽이 발생하는 애플리케이션에서는 성능 문제가 발생하였다.

때문에 React-Native로 만들어진 애플리케이션은 규모가 커질수록 성능이 떨어졌다. 뿐만 아니라 IT기업들의 서비스가 글로벌화되며 인터넷과 모바일 단말기 수준과 무관하게 같은 사용자 경험을 제공하는 것은 소프트웨어에 중요 요구 사항이 되었다. 이러한 맥락에서도 브릿지라는 구조적 한계는 기업들이 리액트를 포기하게된 중요 이유가 되었다. 

 

4. Flutter의 출시 

2017년 구글이 출시한 플루터는 리액트와 유사하게 리액트 프로그래밍을 기반하여 제작되었지만, 컴파일 프로그래밍 언어를 다트로 이요하여 브릿지로 인한 성능 문제를 겪지 않는다 즉, 플루터는 브릿지를 거치지 않고 플랫폼과 소통할 수 있기 때문에 브릿지로 인한 병목현상이 발생하지 않는다. 대신 Flutter 내부의 Skia라는 렌더링엔진을 보유하여 플랫폼에 요청하지 않고 즉시 렌더링하는 방식을 취한다. 이 때문에 플루터의 렌더링 속도는 네이티브의 렌더링 속도와 유사하다. 때문에 플루터는 고성능의 애플리케이션이 작동될 때 리액트보다 상대적으로 좋은 성능을 가진다.

반응형

댓글