Flutter의 레이어와 아키텍처 구조를 알아보자
참고 문서 : https://docs.flutter.dev/resources/architectural-overview
플러터 공식 문서에서 제공하는 아래 이미지를 참고하며 알아보자.
Flutter
아키텍처 레이어가 어떻게 구성되어있는지 알아보기 전에 먼저 플러터가 무엇인지 되짚어보자. 플러터는 크로스플랫폼 앱 개발 프레임워크이다.
프레임워크는 쉽게 말해서 목적을 달성하기 위해 기능을 이것저것 모아놓은 꾸러미 같은 것이다. 높은 수준의 인터페이스에서는 개발자를 위한 위젯 라이브러리 등을 갖추고, 기계 수준에서는 스레드나 이벤트 루프, 메모리를 관리하는 기능을 갖추었다고 예시를 들 수 있겠다.
그런데 잘 생각해보면 귀여운 dart를 가지고 심도 있는 CS적 기술을 구현할 수 있을 것 같지는 않다ㅜㅜ!! 그러면 앱을 렌더링하고 빌드하고 디바이스와 통신하는 기능은 다 어떻게 구현한 걸까?
이러한 기능들을 목적, 수준에 따라 레이어로 분류한 결과물이 Architectural layer이다. 각 레이어는 역할도 다르고, 기반 언어도 다르다. 공식 문서에 따르면 플러터에서는 다음 세 수준으로 레이어를 나누었다.
- FrameWork
- Engine
- Embedder
이제 각 레이어를 상세히 살펴보자.
FrameWork
Dart 언어로 작성한 프레임워크 레이어는 개발자가 가장 자주 접하는 라이브러리를 포함한다. 앱 개발에 필요한 기능 뿐만 아니라 개발자에게 편의를 제공하기 위한 기능까지 포함하며, 때문에 쉬운 언어에 속하는 Dart 로 작성되었다.
대표적으로 앱 디자인을 돕는 Material과 Cupertino 가 있다. 예를 들어서 개발자가 도형 아래 그림자를 만들고 싶다면 복잡한 연산을 할 필요 없이 그저 boxShadow 옵션을 추가하기만 하면 된다.
Material이란?
구글이 개발한 디자인 시스템이다. 플러터로 앱을 개발해놓고 보면 어디서 본 것 같고 구글스러운 비슷비슷한 느낌이 들 텐데, Material design의 영향인 것 같다.
또한 기본 제공 라이브러리 뿐만 아니라 그때그때 필요해서 import하는 추가 라이브러리도 프레임워크 레이어의 요소이다. 공식 문서에 따르면, 플러터는 앱을 만들 때 필요한 기능을 다양한 라이브러리에서 제공받도록 컨셉을 짰기 때문에 프레임워크 자체 용량은 별로 크지 않다고 한다.
Engine
C++ 로 작성한 엔진 레이어는 프레임워크 기능의 핵심이 되는 부분이다.
페이지를 넘길 때 표시되는 화면을 새로 렌더링하거나 텍스트 객체를 조정하거나 파일 입출력을 담당하는 등 앱의 기능과 관련된 중요한 역할을 맡는다.
Embedder
임베더 계층의 기능은 디바이스나 운영체제와 직접 소통한다. 따라서 언어가 한 가지로 정해져있지 않고, 다양한 플랫폼에 맞추기 위해 여러 가지 방식으로 작성되었다.
사용자가 앱과 소통하려면 텍스트를 입력하거나 위치 정보를 제공하거나 권한을 허용하고 사진을 업로드하는 제스처를 취할 수 있어야 한다.
이 때 임베더 계층은 앱과 디바이스 사이로 연결 통로를 놓는 역할을 수행한다(플러그인). 임베더는 디바이스의 플랫폼이 무엇인지에 따라 API를 정하고 플러터 프레임워크를 호스팅하며 화면을 렌더링한다(Render Surface Setup). 또 사용자의 입력을 관리하고, (Event loop) 스레드를 생성하고 (Thread setup) 아이콘과 이름을 가지고 앱을 패키징한다.
