Flutter의 정의
Flutter 플러터는 구글이 구현한 크로스 플랫폼 프레임워크 입니다. 안드로이드와 iOS, Web, Windows, masOS, Linux Desktop App까지 지원을 합니다.
Flutter의 3계층
플러터 프레임워크는 3계층(임베드 계층, 엔진 계층, 프레임워크 계층)으로 나눠져 있습니다.
Embedder(임베더) Layer
하드웨어와 가까운 Low-level 계층 (embed: 포함시키다)
운영체제의 자체적 기능을 모듈화했고, 운영 체제와의 연계를 위한 플랫폼의 엔트리 포인트를 제공해준다. 플러터가 현재 지원하는 6개의 각 플랫폼에서 구동되게 해주는 레이어다. 각 플랫폼의 네이티브 플랫폼과 직접 통신한다. 이 모듈들은 각 플랫폼의 네이티브 언어로 작성되어 있으며, 안드로이드는 Java와 C++, 윈도우나 리눅스는 C++로 작성되어 있다.
Engine(엔진) Layer
플러터의 핵심 계층
플러터를 위해 기본 요소들을 지원하며 그래픽(스키아 그래픽 엔진), 접근성, I/O(파일 시스템, 네트워크 기능) 등 플러터 핵심 API의 저수준 구현을 제공해준다.
엔진은 C, C++로 작성되어 있고 프레임워크에서 사용할 수 있게 다트 클래스로 감싸져 dart.ui를 통해 제공된다.
Framework(프레임워크) Layer
일반적으로 개발자들이 상호작용하는 레이어다. 필수적 위젯, 애니메니션, Material 패키지, Cupertino 패키지 등이 있다.
프레임워크는 계층으로 존재하며 각 계층의 역할을 알아보자.
- Foundation
Animation, Painting, Gesture 계층에게 기본 기초 클래스를 제공한다. - Animation, Painting, Gesture
일반적으로 사용되는 추상 클래스 및 빌딩 블록을 제공한다. - Rendering
렌더링을 위한 추상 클래스를 제공한다. 이 레이어를 사용해서 렌더링 객체 트리를 만들 수 있다! - Widget
위젯 레이어는 화면을 구성하는 구성의 추상화다. Rendering 레이어의 각 렌더링 객체는 위젯 레이어에 대응하는 클래스를 가지고 있다. - Material, Cupertino
Material 및 Cupertino 디자인을 구현한 Widget 레이어 구성들의 세트다.
Flutter의 차별성( vs React Native)
기존 크로스 플랫폼 프레임워크(React Native)들은 웹뷰를 사용하거나 각 네이티브 플랫폼의 UI 라이브러리를 사용합니다. 그렇기에 Bridge라는 이를 이어주는 매개체인 통역사가 필요합니다. 즉, 네이티브 프레임워크 코드로 전환을 하는데 중점을 두었습니다.
대표적인 React Native는 이 Bridge를 반드시 통과해야 합니다. 즉, 기존 플랫폼의 UI Component를 사용하기에 통신에 들어가는 리소스 비용이 높아집니다. 코드 수준이 올라갈수록 AOS와 iOS의 코드 구현이 나눠질 수 있습니다. 그렇기에 각 플랫폼에 맞는 위젯과 서비스로 개발해서 UI 디버깅 부담이 심합니다. 또한, 위젯의 경우 너무 빈번하게 접근해야 하므로 성능 문제를 야기할 수 있습니다. RN의 경우 각 영역에서 매우 빠르지만 한 영역에서 다른 영역으로 이동할 때 성능 병목지점이 발생합니다. 그렇기에 브리지를 최소한으로 유지하는 것이 좋은 설계를 만드는 방법입니다.
자체적 내부 엔진으로 자체적 UI를 생성합니다.
플러터는 스키아 엔진과 직접 통신해서 UI 웨젯을 렌더링 합니다. 즉, 어떤 플랫폼이든 스키아 엔진을 지원한다면 동일한 API를 사용해서 플러터가 컴파일되고 실행되도록 구현할 수 있음을 의미합니다. 그렇기에 일관된 UI를 제공할 수 있어서 플랫폼 별 UI 디버깅 부담이 현저히 적습니다.
최근 페이스북에서는 새로운 기능에 대한 구현보다는 성능 개선과 버그를 잡는 곳에 많은 비중을 차지할 뿐 아니라, 그 업데이트 속도도 느려지고 있는 것으로 알고 있습니다. 플러터는 Bridge(통역사) 없이 스키아라는 2D 렌더링 엔진으로 UI를 직접 그리며 메서드(기능)도 구글팀에서 직접 만들어 줘서 높은 퍼포먼스를 자랑하며 엄청나게 빠른 Flutter과 Dart 업데이트를 하기에 RN 보다 Flutter을 하는 것이 개꿀이라고 생각합니다. 플러터가 자바스크립트 브릿지 없이 리액티브 뷰를 제공하는 유일한 모바일 SDK라는 것만으로도 플러터는 사용해볼 가치가 있고 흥미롭습니다.
The Platform SDKs(Native App)
WebView
Reactive Views
Flutter
알아두면 좋은 지식
1. Bundle Identifier(번들아이디): 앱을 마켓에 출시할 대 식별하는 값
- 앱을 출시할 때 앱을 구분하는 용도이니 출시중이거나 개발 중으로 등록된 그 어떤 앱과도 겹치면 안된다.
2. Device Manager
- Release Name - API 33은 안드로이드 운영체제 버전이다.
- Internal Storage는 최소 8GB로 설정하자.
- Internal Storage는 어플리케이션 데이터가 저장되는 영역이다.
- External Storage는 사진이나 동영상등의 저장할 수 있는 사용자 영역이다.
3. 프로젝트 탭 - 안드로이드 스튜디오 개발시 Android가 아닌 Project로 되어 있어야 한다.
4. 플러터 프로젝트 생성 시 터미널보다 안드로이드 스튜디오로 생성 시 기본 구성을 깔끔하게 할 수 있다.
참고문헌
https://docs.flutter.dev/resources/architectural-overview
Flutter architectural overview
A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design.
docs.flutter.dev
https://velog.io/@error/Flutter-1.-플러터의-구성
[Flutter] 1. 플러터의 구성
플러터 개발자로 면접을 보다보면 거의 10번 중 8번은 이런 질문을 하는 것 같다.플러터의 렌더링 과정이나 트리의 구성을 설명해주세요.대충은 알고있다. 트리는 3개가 있고 레이아웃은 렌더 트
velog.io
https://sungwon-choi-29.github.io/trend/2019-08-15-trend/
Medium - What’s Revolutionary about Flutter
원문 - Wm Leler
sungwon-choi-29.github.io
https://dev-repository.tistory.com/108
Flutter 개념, 구조 및 장점
Flutter를 본격적으로 사용해보기 전에 Flutter가 어떤 것인지, 어떤 식으로 동작하는지와 장점에 대해 정리해본다. Flutter란? Flutter는 구글에서 2017년 5월에 출시한 모바일/웹/데스크톱 크로스 플랫
dev-repository.tistory.com
'Flutter > Environment & Convention' 카테고리의 다른 글
| [Flutter] APK 뽑아내기 (0) | 2023.06.08 |
|---|---|
| [Flutter] 로드맵 (0) | 2023.04.08 |
| [Flutter] Font Setting (pubspec.yaml) (0) | 2023.04.07 |
| [Flutter] 플러그인에 따른 권한 설정(AOS, iOS) (0) | 2023.03.28 |