Flutter
본 글은 기존 Notion에서 이전된 글입니다.
I. 서론
1. 사전지식
1) Dart
구글이 자바스크립트를 대체하기 위해 2011년 개발한 웹프로그래밍 언어로, 모바일 앱, 웹 앱, 명령어 스크립트, 서버 프로그래밍 등 어떤 것이든 다트를 사용해 만들 수 있다.
2) 크로스 플랫폼 프레임워크
하나의 코드베이스로 여러 플랫폼에 동시에 서비스를 제공하기 위한 프레임워크이다. 대표적인 크로스 플랫폼 프레임워크로는 React-Navtive/JavaScript, Xamarin/C#, Flutter/dart가 있다. 이러한 프레임워크들은 최종적으로 JavaScript, C#, Dart로 짠 코드들이 네이티브 코드로 변경되어 동작하게 된다.
하나의 코드베이스로 네이티브 코드를 호출할 수 있고, 각각의 플랫폼에 대해서 깊이 공부하지 않아도 JavaScript, C#, Dart에 대해 안다면 개발을 시작할 수 있다는 장점이 있다.
3) 네이티브 앱
플랫폼의 네이티브 언어와 프레임워크를 이용해서 개발하는 것이다. 기기의 성능을 최대한 이끌어 낼 수 있다는 장점이 있지만, 각 플랫폼 별로 모두 개발할 수 있어야 한다는 문제가 있다.
4) 하이브리드 앱
웹 페이지를 웹뷰로 감싸서 플랫폼에 내는 방법이다. 웹 개발로 앱도 동시에 개발할 수 있고, 각각의 플랫폼에 완전히 동일한 경험을 하게 만들어 줄 수 있다는 장점이 있다.
II. 본론 : Flutter란
1. 정의
구글에서 개발한 크로스 플랫폼 프레임워크이다. 여러 플랫폼에서 제공되어야하는 서비스를 하나의 코드베이스로 관리하기 위해서 사용된다.
2. 장점
1) 빠른 시간에 좋은 성능의 앱을 개발할 수 있음
- 하나의 언어를 통해 ios, android 앱을 모두 개발할 수 있음
- 또한, navtive에서 OS 종속적인 부분 등을 신경 쓸 필요가 없음
2) 많은 Reference
- 많은 위젯과 라이브러리, showcase, 애니메이션 등이 공개되어 있고 쉽게 찾아볼 수 있게 정리되어 있음
- 위젯 라이브러리를 통해 손쉽게 개발이 가능함
3) 빠른 성장세 및 인기
- 렌더링 엔진을 가지고 있기 때문에 데스트캅 앱, 웹까지도 확장성을 늘리고 있는 추세
- 현재도 Flutter의 개발 및 유지보수도 잘 이루어지고 있음
- 구글에서 적극적인 생테계 조성이 이루어진다면 추후 React Native를 제칠 수 있을 거라 기대할 수 있음 ⇒ 2022년부로 React Native를 제쳤음
2019년 스택 오버플로 개발언어 설문조사
2022년 스택 오버플로 개발언어 설문조사
3. 아키텍처
Flutter의 아키텍처는 확장 가능한 계층화된 시스템으로 설계되었다. 기본 계층에 각각 의존하는 일련의 독립 라이브러리로 존재한다. 어떤 계층도 아래 계층에 대한 액세스 권한이 없으며 프레임워크 수준의 모든 부분은 선택 사항이며 교체 가능하도록 설계되었다.
1) Skia 엔진
C++로 개발된 오픈 소스 2D 그래픽 라이브러리로 OpenGL의 Canvas를 사용해 렌더링을 한다. Flutter에서 Dart로 코드를 작성하면 안드로이드나 iOS의 컴포넌트들을 거치지 않고, 바로 화면을 렌더링 할 수 있다.
2005년에 구글에 인수되었고, 현재까지도 계속해서 Google의 후원을 받고 있다.
2) OpenGL
그래픽 라이브러리 중 하나로써, 대표적인 그래픽 라이브러리로는 DirectX, Metal, OpenCV 등이 있다.
가장 큰 장점은 범용성으로, 앞서 얘기한 DirectX는 윈도우에서만 사용이 가능하지만 OpenGL은 윈도우와 Mac 뿐만 아니라 모든 운영체제에서 사용할 수 있기 때문에 Flutter가 크로스 플랫폼 프레임워크가 될 수 있었던 핵심 요소 중 하나이다. 모든 운영체제에서 사용할 수 있는 이유는 크로노스 그룹의 지속적인 관리하에서 모든 운영체제들이 OpenGL를 사용할 수 있도록 만들어져왔고, 만들어지고 있기 때문이다.
3) 동작 방식
기존 네이티브 코드(Swift, Java 등)로 iOS 혹은 Android 개발을 할 때 소스코드는 운영체제와 직접적으로 소통한다. 예를 들어 text input 등 모든 요소를 만들어 달라고 하면, 운영체제가 iOS 혹은 Android 상의 버튼을 만들어주는 방식으로 네이티브 프레임워크가 동작한다.
하지만 Flutter 혹은 Dart 소스코드는 운영체제(Android, iOS 등)와 직접적으로 소통하지 않는다. 왜냐하면 다른 크로스 플랫폼 프레임워크와 동작하는 방식이 다르기 때문이다. Flutter 혹은 Dart 소스 코드를 작성하면 이 코드는 Skia Engine으로 오게 되고, Flutter 프레임워크 상에서 포함하고 있는 여러가지 요소들(애니메이션, Painting, Gestures 등)을 엔진이 실제 화면에 그려준다. 즉 Flutter 애플리케이션은 플랫폼의 Native Widget(실제 iOS 혹은 Android 버튼을 만들지 않음)을 사용하지 않는다.
운영체제는 엔진만 동작시키는 역할을 수행할 뿐, 엔진이 프레임워크를 동작시키고 엔진이 픽셀을 그려주는 역할을 수행한다.
4. Flutter vs React-Native
위에서는 Flutter의 장점과 동작 방식에 대해서만 서술하였다. 그렇다면 무조건 Flutter가 좋고 React-Navtive는 배척해야할까? 그렇지 않다. React-Native는 기존 네이티브 컴포넌트들을 사용할 수 있다. iOS 기준으로 서술하자면 기존 알람 앱에 있는 input, navigation 바와 같은 iOS 유저들에게 친숙한 UI들을 사용할 수 있다는 것이다.
즉, 네이티브 앱 운영체제 상에서 가능한 위젯을 사용하고 싶을 땐 React-Native로 만드는 것이 좋고, 내가 만든 위젯과 애니메이션을 사용하는(세밀하고 커스터마이징이 많이 들어간 디자인일 수록) 크로스 플랫폼 어플리케이션을 만들고자 한다면 Flutter를 사용하는 것이 좋을 것이다.
단, React-Native에서 버튼을 하나 만들면 iOS와 안드로이드에서 서로 다르게 보이지만, Flutter에서는 동일하게 보일 것이다.
III. 결론
생략.
