배경 지식

Flutter 구조

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> Dart는 Just-In-Time(JIT) 컴파일과 Ahead-Of-Time(AOT) 컴파일을 모두 지원한다. JIT 컴파일은 개발 모드에 사용돼서 Hot Reload 같은 빠른 피드백 루프를 제공한다. AOT 컴파일은 배포 모드에 사용돼서 컴파일된 코드가 기기에 더 최적화된 상태로 실행할 수 있게 만든다.

</aside>

이미지 출처 : Flutter 공식 문서

• 네이티브 개발에선 운영체제(OS)와 직접 상호작용하여 버튼, 텍스트 같은 UI 요소를 생성한다.
• Flutter는 네이티브 플랫폼의 위젯을 사용하지 않고 자체적으로 UI를 렌더링한다. 이는 비디오 게임 엔진의 작동 방식과 유사하다.
• Dart로 작성된 코드는 Flutter 프레임워크를 사용하여 UI를 정의하고, 실제 화면에 렌더링하는 작업은 C++로 작성된 Flutter 엔진(Skia)이 담당한다.
• 이 엔진이 모든 UI 요소를 그리기 때문에 네이티브 위젯을 사용하지 않는다.
• Dart 코드와 Flutter SDK는 네이티브 ARM 라이브러리로 컴파일돼서 각 플랫폼의 실행 파일로 패키징된다.
• 이렇게 만들어진 애플리케이션은 각 플랫폼에서 동일한 Flutter 엔진을 실행하여 UI를 렌더링한다.
• 즉, Flutter 위젯은 운영체제가 제공하는 네이티브 위젯이 아니라 Flutter 엔진이 그린 것이다.
• 이러한 특징으로 Flutter는 iOS, Android, Windows 등 다양한 플랫폼에서 동일하게 작동한다.
• 하지만 Flutter 애플리케이션의 UI는 네이티브 애플리케이션과 완전히 동일하지 않을 수 있다.
• 이로 인해 Flutter 앱이 자연스럽지 않을 수 있는 단점이 있지만, 개발자가 모든 픽셀을 제어할 수 있게 하여 다양한 커스터마이징과 애니메이션이 가능하다는 장점이 있다.

Flutter vs React Native

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> Flutter = 일관성, React Native = 자바스크립트 생태계

</aside>

Flutter

• 엔진 및 UI 렌더링: Flutter는 게임 엔진처럼 작동하여 모든 UI를 자체 엔진으로 렌더링한다. 즉, iOS나 Android의 네이티브 컴포넌트를 직접 사용하지 않고, 모든 그래픽을 자체적으로 렌더링한다. 이 방식은 모든 플랫폼에서 동일한 UI를 제공할 수 있는 장점이 있지만, 네이티브 위젯을 사용할 수 없는 단점이 있다.