Flutter(프레임워크)

1. 개요2. 상세

2.1. 디자인 예시

3. Xamarin과의 비교4. React Native와의 비교5. 외부 링크6. 도서7. Dart Pad8. 관련 문서

1. 개요 [편집]

공식 홈페이지

구글에서 2017년 5월 크로스 플랫폼 모바일/웹/데스크톱 GUI 애플리케이션 소프트웨어 디자인 프레임워크로서 출시되었다. 사용되는 언어는 역시 구글에 의해 제창된 Dart를 사용한다. 컴파일된 프로그램은 안드로이드와 iOS상에서 실행을 지원하며, 웹 브라우저에서 플러터 앱 실행을 위한 transpilation, 리눅스/윈도우즈/맥 데스크톱 상에서 플러터 앱 실행 지원도 공식 발표되었으며 구글 안드로이드 OS의 차기 운영체제인 퓨시아의 유저 인터페이스 및 퓨시아 애플리케이션들이 플러터로 작성된다.

네이티브 CPU 머신코드로 직접 컴파일링 및 UI를 자체 렌더엔진으로 직접 렌더링하기 때문에 성능이 뛰어나며 크로스플랫폼 솔루션으로 iOS에서 구글의 Material 테마 디자인과 Ripple 애니메이션을 볼 수 있고 Android에서 애플의 Cupertino[1] 테마 패키지를 사용가능하다. 마치 화면 전체를 그래픽 API로 fillRect 하고 drawText drawImage 해서 앱을 만드는 것처럼 Flutter는 Skia 엔진을 사용하여 렌더링해준다. 각 OS 플랫폼의 네이티브 widget/ui 구성요소로 변환하지 않고 플러터의 그래픽 렌더 엔진인 스키아로 직접 플랫폼 Canvas상에 드로잉되기 때문에 성능이 높고 플랫폼에 관계없이 픽셀 퍼팩트한 디자인을 구현가능하다.

2. 상세 [편집]

크로스플랫폼 환경에서 네이티브 이상의 성능[2]과 미려한 UI와 확장 기능을 제공하는 프레임워크이다. Flutter Gallery 샘플 앱을 설치하여 성능을 확인할 수 있다. 아이폰에서는 소스 코드를 다운받아 Xcode에서 실행하면 잘 작동한다.[3] 안드로이드 스튜디오나 IntelliJ IDEA, 비주얼 스튜디오 코드 [4] 등을 이용하여 소프트웨어 디자인을 할 수 있다.[5]

Hot Reload 기능을 사용하면 디버깅을 중지하지 않고 소스 수정 후 저장만 하면 에뮬레이터나 기기에 바로 반영되어 UI와 로직이 모두 업데이트된다. 프레임워크의 구조 설계 자체가 이 기능을 위해 특화되어있다. Hot Restart까지 사용하면 프로젝트를 닫기 전까지 디버깅을 중지할 필요가 없다.

Flutter UI로 작성한 코드를 Web 에서 실행할 수 있는 Hummingbird가 발표되었다. 개발자들의 호응을 알 수 있는 GitHub 스타 순위는 2020년 4월 기준 7위까지 올라왔다.

2.1. 디자인 예시 [편집]

Showcase
An open list of apps built with Flutter [6]

3. Xamarin과의 비교 [편집]

Flutter for Xamarin.Forms Developers

Xamarin은 UI 언어인 XAML과 프로그래밍 언어인 C#이 분리되어 있고, C#만으로 UI를 작성하려면 Imperative 스타일의 UI가 된다. Xamarin.Forms에서 C#만으로 UI디자인과 프로그래밍을 하나로 작성하려면 Imperative 스타일의 지저분한 코드가 되지만 플러터는 보다 진보된 Declaritive UI[7] 방식으로 GUI 디자인과 로직 디자인을 Dart 언어 하나로 통합하고 있다. Xamarin에서는 복잡하게 구현해야 했던 UI와 애니메이션들도 Flutter 프래임워크에서는 아주 간단히 작성된다.

플러터 경우 GUI에 있어 각 플랫폼의 네이티브 UI로 변환하지 않고 Skia 렌더엔진으로 직접 처리되며, 프로그램 실행시 네이티브 UI로 컨버팅 프로세스가 있는 Xamarin보다 높은 성능을 보여준다. 예를 들어 Xamarin.Forms에서 ListView 를 쓰면 Android/iOS 각각의 ListView가 호출되어 미묘하게 화면표시가 달리 동작하는 부분이 있고 각각의 Custom Renderer가 필요했는데, Flutter에서는 플랫폼이 달라도 완전히 동일한 UX를 제공한다. Xamarin은 각 플랫폼의 네이티브 UI로 변환하여 실행되고 복잡한 UI를 위해서는 각각의 커스텀 렌더러가 필요하여 생산성이 떨어지고 네이티브 앱 개발환경에 비해 컴파일도 오래 걸린다.

Flutter가 모바일 뿐아니라 데스크톱까지 지원을 발표하고 Xamarin은 웹 환경까지 지원하지 못하고 있다. 플러터는 기존 컴퓨터 언어의 단점들을 개선한 최신판인 Dart [8]를 쓰고 있는것 또한 장점이다. 안드로이드의 주인인 구글이 재창한 다트가 모바일 및 크로스 플랫폼 소프트웨어 디자인에 보다 적합하다. 또한 안드로이드 차기 OS에서 역시 플러터가 메인이 되므로 더욱그렇다.

플러터는 모바일뿐아니라 웹 및 리눅스를 포함하는 데스크톱 환경까지 지원한다고 공식 발표하였고, 웹도 기존부터 지원해 왔으므로 사실상 플랫폼 지원 폭에서 자마린을 능가한다. 자마린은 유료 윈도우즈 PC 환경 및 유료 비주얼 스튜디오에 국한된 MS 프로그램에 종속되어 있다. 플러터는 모바일 환경의 1위인 구글이 주도하며 완전 무료이고 데스크톱까지 지원을 공식 발표한 이상 플러터의 전망은 밝다.

4. React Native와의 비교 [편집]

Flutter for React Native Developers

React Native는 OEM에 의존적인 UI 위젯을 사용하고 있으며, 네이티브 코드를 실행할 때 bridge로 인한 성능 저하가 있고 학습 곡선이 가파르다는 단점[9]이 있다.

5. 외부 링크 [편집]

Flutter 공식문서(한글) - 한글화 진행중
Flutter 공식문서(영문)
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
유튜브 Flutter Dev - Flutter 관련 공식 영상이 올라온다.
Flutter SDK
Flutter Packages - UI 쪽은 Dart로 작성되어 쉽게 수정이 가능하며,
네이티브 쪽은 기존 안드로이드/iOS의 주요 패키지들이 짝을 이뤄 wrapping 되어 있다.
Reddit FlutterDev
awesome-flutter
국내 커뮤니티 네이버 카페, 페이스북 공개그룹

6. 도서 [편집]

링크
국가자료종합목록 - 플러터

7. Dart Pad [편집]

Flutter SDK 를 설치하지 않아도 간단한 예제는 Web에서 코딩하고 바로 실행시킬 수 있다.
Dart Pad

파일:스크린샷 2020-08-14 오후 3.20.39.png
Sample

8. 관련 문서 [편집]

[1] 구글 입장에서 같은 실리콘밸리에 입주한 애플을 지칭할 때 사용한다. 우리나라로 치면 분당style 이나 판교style 쯤 된다.[2] 안드로이드, iOS를 기본지원한다. 컴파일 to 웹으로 브라우저 실행도 지원[3] 메인 메뉴 > Material > Text fields 들어가서 Name과 Phone 을 왔다갔다 하며 애니메이션이 부드러운지 확인한다. debug 모드에서는 버벅일 수 있으며 flutter build apk나 flutter build ios로 apk ipa 를 만들어서 설치하면 잘 돌아간다.[4] 비주얼 스튜디오에서 쓰이는 ctrl + .은 매우 유용하다. 명령 팔레트에서 Flutter: Toggle Debug Painting을 켜놓고 UI 작업을 할 수 있다.[5] 크롬 OS에서 개발할 경우 따로 Android 에뮬을 띄울 필요가 없다.#[6] Flutter를 이용해 디자인한 앱들이 올라오고, 오픈소스인 경우 소스를 볼 수 있다.[7] https://flutter.dev/docs/get-started/flutter-for/declarative[8] C언어와 문법이 거의같다고 보면되며, 거기에 C#, Java, JS, Python의 장점만 추가시킨 최신 컴퓨터 프로그래밍 언어이다.[9] 후반의 기울기가 가파르다는 뜻이다. 배우면 배울수록 알아야 하는 것들이 폭발적으로 늘어난다는 뜻. 초반의 기울기가 가파르면 학습이 쉽다는 뜻이다.