Flutter(프레임워크)
[image]
공식 홈페이지
구글에서 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]과 미려한 UI와 확장 기능을 제공하는 프레임워크이다. Flutter Gallery 샘플 앱을 설치하여 성능을 확인할 수 있다. 아이폰에서는 소스 코드를 다운받아 Xcode에서 실행하면 잘 작동한다.[3] 안드로이드 스튜디오나 IntelliJ IDEA, 비주얼 스튜디오 코드[4] 등을 이용하여 소프트웨어 디자인을 할 수 있다.[5]
Hot Reload 기능을 사용하면 디버깅을 중지하지 않고 소스 수정 후 저장만 하면 에뮬레이터나 기기에 바로 반영되어 UI와 로직이 모두 업데이트된다. 프레임워크의 구조 설계 자체가 이 기능을 위해 특화되어있다. Hot Restart까지 사용하면 프로젝트를 닫기 전까지 디버깅을 중지할 필요가 없다.
Flutter UI로 작성한 코드를 Web 에서 실행할 수 있는 Hummingbird가 발표되었다. 개발자들의 호응을 알 수 있는 GitHub 스타 순위는 2020년 4월 기준 7위까지 올라왔다.
Showcase
An open list of apps built with Flutter[6]
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위인 구글이 주도하며 완전 무료이고 데스크톱까지 지원을 공식 발표한 이상 플러터의 전망은 밝다.
Flutter for React Native Developers
React Native는 OEM에 의존적인 UI 위젯을 사용하고 있으며, 네이티브 코드를 실행할 때 bridge로 인한 성능 저하가 있고 학습 곡선이 가파르다는 단점[9]이 있다.
Flutter 공식문서(한글) - 한글화 진행중
Flutter 공식문서(영문)
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
유튜브 Flutter Dev - Flutter 관련 공식 영상이 올라온다.
Flutter SDK
Flutter Packages - UI 쪽은 Dart로 작성되어 쉽게 수정이 가능하며,
네이티브 쪽은 기존 안드로이드/iOS의 주요 패키지들이 짝을 이뤄 wrapping 되어 있다.
Reddit FlutterDev
awesome-flutter
국내 커뮤니티 네이버 카페, 페이스북 공개그룹
링크
국가자료종합목록 - 플러터
Flutter SDK 를 설치하지 않아도 간단한 예제는 Web에서 코딩하고 바로 실행시킬 수 있다.
Dart Pad
[image]
Sample
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
[image]
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] 후반의 기울기가 가파르다는 뜻이다. 배우면 배울수록 알아야 하는 것들이 폭발적으로 늘어난다는 뜻. 초반의 기울기가 가파르면 학습이 쉽다는 뜻이다.