개요

요즘 떠오르고 있는프레임워크중 하나인 플러터에대 해서 정리하고자 한다.

사실 약 2년전 이전회사를 그만두고 웹 개발로 전향하여 웹 프레임워크의 선택에 기로에 있을때 Flutter와 React, React-Native의 존재를 알고있었다. 그때만 하더라도 플러터는 앱개발을 지원하는 프레임워크였고 웹 개발은 이제 막 지원을 시작하는 단계였고 웹개발을 이제 막 시작한 내가 아직은 배울만한 내용은 아니라고 생각했었다. 그래서 리액트 공부를 선택했다. 멍청했던거 같기도..?

그때는 리액트를 어느정도 배우고 난 이후에 모바일 개발이 필요 할때 배워야지 라는 생각을 했었다. 사실 지금은 플러터에 대한 정보가 꽤나 많이 쌓였지만 그때는 정말 배우기 어려웠을거다.. 아마.. 배웠으면 삽질만 했겠지..? 라는 생각도 좀 해본다.

하지만 지금 시작했더라도 나는 후회하지 않는다. 늦었더라도 시작했다는게 중요하니까:)

어찌됬든 본론으로 돌아와서 플러터에 대해서 간략하게 이야기 해보고자 한다.

Flutter

요즘 핫한 ChatGPT에게 플러터에 대해서 물어봤다.

Flutter는 Google에서 개발한 오픈소스 프레임워크로, 모바일, 웹 및 데스크탑 애플리케이션 개발을 위해 사용됩니다. Flutter는 Dart 언어를 사용하여 작성되며, 매우 빠르고, 직관적이며, 재사용 가능한 UI를 구축하기 위한 다양한 도구와 라이브러리를 제공합니다.

Flutter는 UI를 작성하기 위한 자체 위젯 및 레이아웃 시스템을 제공하며, 이는 모든 디바이스 크기와 모양에 맞게 조정됩니다. 또한, Flutter는 기기 간 호환성 문제를 해결하기 위한 다양한 기능도 제공합니다. 예를 들어, Flutter는 다양한 터치 이벤트 및 기타 입력 이벤트를 처리하고, 다양한 모바일 플랫폼 및 웹 브라우저에 적합한 렌더링 엔진을 제공합니다.

Flutter는 또한 개발 생산성을 향상시키기 위한 다양한 기능을 제공합니다. 예를 들어, Flutter는 Hot Reload라는 기능을 제공하여 코드 변경 사항을 즉시 확인할 수 있도록 합니다. 또한, Flutter는 다양한 코드 편집기와 통합되어 있으며, 다양한 개발 도구를 사용하여 개발자가 편리하게 애플리케이션을 개발할 수 있습니다.

Flutter는 모바일 애플리케이션, 웹 애플리케이션 및 데스크탑 애플리케이션을 개발하는 데 사용됩니다. Flutter는 크로스 플랫폼 애플리케이션 개발에 적합한 도구이며, 하나의 코드베이스로 다양한 플랫폼에서 애플리케이션을 실행할 수 있습니다.

어휴 길다 그렇다고 한다.

아키텍처

공식문서에 띠르면 확장 가능한 계층화된 시스템으로 설계되었으며, 기본 계층에 각각 의존하는 일련의 독립 라이브러리로 존재한다.어떤 계층도 다른 계층에 대한 액세스 권한이 존재하지 않으며 프레임워크 수준의 모든 부분은 선택 사항이며 교체 가능하도록 설계되었다.

즉 다른 프레임워크와도 호환이 되게 설계되었다고 이해했다.

계층 설명

다트 앱

• 위젯을 원하는 UI로 구성한다. 즉 개발자가 디자인을 하는 부분
• 비즈니스 로직을 구현한다. 화면상 보여질 데이터 처리, API요청 등

프레임워크

• 고품질 앱(위젯, 제스처 감지, 접근성, 텍스트 입력 등)을 빌드하기위한 상위 수준 API를 제공한다. 기본 input box나 마우스 클릭, 터치 등
• 앱의 위젯 트리를 화면으로 합성한다. 다트 앱에서 구성한 위젯 UI를 합성하는 작업

엔진

• 합성된 장면을 레지스터화 담당
• 플러터 핵심 API(그래픽, 텍스트, 레이아웃, Dart 런타임)의 low-level 구현을 담당
• Engine의 Embedder APU를 사용하여 특정 플랫폼과 통합

임베더

• 화면 렌더링, 접근성 및 입력과 같은 서비스에 대한 액세스를 위해 운영체제와 소통
• 이벤트 루프를 관리
• 플랫폼별 API를 노출시킴

러너

• 임베더로 부터 노출된 플랫폼별 API를 실핸 가능한 앱패키지로 구성

네이티브 프레임워크 vs 플러터

플러터와 다른 네이티브 프레임워크의 다른점을 이야기 해보고자 한다. 결론부터 말하자면 핵심은 운영체제와의 소통이다.

네이티브 프레임워크

코드를 작성하고 실행시키면 운영체제에게 버튼과 같은 것들을 직접적으로 만들어달라고 요청을 한다.
즉 운영체제와 직접적인 소통을 하기 때문에 네이티브 UI(안드로이드 혹은 IOS 위젯)를 사용할 수 있다.

플러터

플러터는 코드를 작성하면 플러터 프레임워크에 적용되며 운영체제하고 직접적으로 소통 하지 않는다.
대신 엔진을 사용하는데 아키텍처에 보이는 Engine(UI를 렌더링 하는데 사용하는 계층)이 그 부분이다.
엔진이 플러터에서 만들어달라고 요청한대로 그려준다. 이는 마치 유니티 앱과 상당히 비슷하다.

운영체제와 직접적으로 소통하지 않기 때문에 네이티브 UI를 사용할 수 없다는 단점이 존재한다. 하지만 이는 장점이자 단점이 될 수 있다.

정리

플러터는 운영체제의 의해서 버튼이나 아이콘 등을 그려내는 것이 아닌 엔진을 이용해서 그려낸다. 이는 장점과 단점이 존재하는데 만약 어플리케이션을 네이티브 앱처럼 보이고 싶으면 리액트 네이티브를 이용해 개발하는 것을 추천한다.

하지만 아주 세밀한 디자인 요구사항이 있을때 즉 UI가 커스터마이징이 있을 경우에는 플러터를 사용을 추천한다.

자세한 내용은 공식문서에 잘 설명되어있으니 참고하면 된다.

https://docs.flutter.dev/resources/architectural-overview#state-management
https://nomadcoders.co/courses