플러터(Flutter)의 3대 핵심 기술 분석

 

 

 

 

플러터(Flutter)는 앱 개발자들이 선호하는 프레임워크 중 하나입니다. 그 이유는 플러터의 뛰어난 3대 핵심기술 때문입니다.3대 핵심 기술인 위젯 시스템, 랜더링 엔진, 플랫폼 통합 기술에 대해서 자세하게 살펴보겠습니다.

1. 위젯 시스템

플러터의 위젯 시스템은 UI를 구성하고 표현하는 핵심 요소입니다. 플러터 애플리케이션은 모든 것이 위젯으로 이루어져 있으며, StatelessWidget과 StatefulWidget은 이러한 위젯의 기본 요소입니다.

위젯과 엘리먼트 트리(출처:doc.flutter.dev)

1) StatelessWidget

StatelessWidget은 상태가 없는 위젯으로, 한 번 생성되면 그 상태를 변경할 수 없습니다. 이는 UI가 변하지 않고 고정된 상태를 가지는 경우에 적합합니다. StatelessWidget은 build() 메서드를 오버라이드하여 UI를 생성합니다. 이 메서드는 한 번만 호출되며, UI를 한 번 생성한 후에는 변경되지 않습니다. StatelessWidget은 상태를 가지지 않기 때문에 이전 상태에 대한 정보를 저장하거나 추적할 필요가 없어, 메모리 사용량이 적고 빠르게 렌더링 됩니다.

2) StatefulWidget

StatefulWidget은 상태가 있는 위젯으로, 상태가 변경되면 UI를 다시 빌드하여 반영합니다. 이는 UI가 동적으로 변하는 경우에 적합합니다. StatefulWidget은 두 가지 클래스로 이루어집니다: StatefulWidget 클래스와 State 클래스. StatefulWidget 클래스는 UI를 빌드하는 역할을 하고, State 클래스는 위젯의 상태를 관리합니다. State 클래스는 createState() 메서드를 통해 생성되며, StatefulWidget이 화면에 나타날 때 한 번만 호출됩니다.

StatefulWidget은 내부 상태를 가지고 있기 때문에 상태가 변경될 때마다 UI를 다시 빌드하여 변경 사항을 반영합니다. 이를 통해 동적인 UI를 구현할 수 있으며, 사용자 입력이나 외부 이벤트에 따라 화면이 업데이트됩니다.

2. 렌더링 엔진

플러터는 Skia를 기반으로 한 고성능의 2D 렌더링 엔진을 사용합니다. Skia는 Google에서 개발한 오픈소스 그래픽 엔진으로, Android의 UI 그리기에 사용되는 것과 동일합니다. 플러터는 Skia를 통해 모든 UI 요소를 그리며, 이를 통해 고성능의 반응적이고 부드러운 UI를 제공합니다.

플러터 렌더링(출처:doc.flutter.dev)

1) 작동 원리

• 위젯 트리: 플러터 애플리케이션은 위젯 트리로 구성됩니다. 이 트리는 화면에 표시되는 모든 위젯을 계층 구조로 표현합니다.
• 렌더링: Skia를 사용하여 위젯 트리를 기반으로 화면에 UI를 그립니다. Skia는 벡터 그래픽을 지원하며, GPU 가속을 통해 고성능의 그래픽 처리를 제공합니다.
• 리플로우: UI에 변경이 발생하면 플러터는 리플로우 과정을 거쳐 화면을 다시 그립니다. 이 과정에서 변경된 위젯만 다시 그려지므로 성능을 향상합니다.

2) 특장점

• 고성능: Skia를 기반으로 한 렌더링 엔진은 GPU 가속을 활용하여 고성능의 UI를 제공합니다. 이를 통해 부드러운 애니메이션 및 터치 반응을 구현할 수 있습니다.
• 일관성: 플러터는 모든 플랫폼에서 동일한 UI를 제공합니다. Skia를 통해 렌더링 되는 UI는 모든 디바이스에서 일관되게 보입니다.
• 확장성: Skia는 다양한 디바이스 및 환경에서 사용될 수 있는 확장 가능한 렌더링 엔진입니다. 이를 통해 플러터는 다양한 플랫폼 및 환경에서 실행될 수 있습니다.

3. 플랫폼 통합

플러터는 iOS와 Android 플랫폼과의 통합을 위해 네이티브 코드와의 상호 작용을 지원합니다. 이를 통해 플러터 애플리케이션은 각 플랫폼의 네이티브 기능을 사용할 수 있습니다.

플랫폼 채널(출처:doc.flutter.dev)

1) 네이티브 코드와의 통합

플러터는 네이티브 코드와의 통합을 위해 네이티브 메시지 채널을 제공합니다. 이 채널을 통해 플러터와 네이티브 코드 간에 데이터를 주고받을 수 있습니다. 예를 들어, iOS와 Android에서 제공하는 네이티브 API를 사용하여 특정 기능을 구현하고, 이를 플러터에서 호출하여 사용할 수 있습니다.

2) 네이티브 플랫폼의 API 호출

플러터는 Dart와 C/C++ 언어를 사용하여 네이티브 플랫폼의 API를 호출합니다. Dart는 플러터의 주요 프로그래밍 언어로 사용되며, 플러터의 모든 위젯과 기능을 구현합니다. C/C++ 언어는 네이티브 코드와의 상호 작용을 위해 사용되며, 네이티브 플랫폼의 API를 호출하고 기능을 구현합니다.

3) 플러그인 시스템

플러터는 플러그인 시스템을 제공하여 네이티브 기능을 사용할 수 있도록 합니다. 이 시스템은 플러터 패키지와 네이티브 코드 간의 인터페이스를 제공하여 네이티브 기능을 플러터로 가져올 수 있도록 도와줍니다. 플러그인은 플러터 패키지로 제공되며, 플러그인 패키지에는 Dart 코드와 네이티브 코드가 모두 포함될 수 있습니다. 이를 통해 개발자는 플러터에서 간편하게 네이티브 기능을 사용할 수 있습니다.

플러터가 제공하는 주요 플러그인 종류 몇 가지를 살펴보겠습니다.

• FlutterFire: Firebase를 플러터 애플리케이션에 통합할 수 있는 플러그인
• camera: 카메라 기능을 플러터 애플리케이션에 통합할 수 있는 플러그인
• geolocator: 위치 정보 기능을 플러터 애플리케이션에 통합할 수 있는 플러그인
• http: HTTP 통신 기능을 플러터 애플리케이션에 통합할 수 있는 플러그인
• shared_preferences: 간단한 데이터를 로컬에 저장하고 관리할 수 있는 플러그인

이외에도 다양한 플러그인이 있으며, 플러터 패키지 검색 엔진인 pub.dev에서 원하는 플러그인을 찾아볼 수 있습니다. 이러한 플러그인을 사용하여 플러터 애플리케이션에 원하는 기능을 손쉽게 추가할 수 있습니다.

 

추가 정보 더 보기

[리액트의 핵심 기술과 최적화 전략]

[자마린의 핵심 기술 : 바인딩,UI, 성능]