| <colbgcolor=#fff,#1f2023><colcolor=#075B9D,#60C9F8> 플러터 Flutter | |
| | |
| 분류 | 애플리케이션 프레임워크 |
| 개발 | |
| 안정화 최신 버전 | 3.19.0 - 2024년 2월 16일 # |
| | |
[clearfix]
1. 개요
구글에서 2017년 5월 출시된, Skia를 렌더링 엔진으로 사용하는 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. 하나의 코드 베이스로 안드로이드, 리눅스, Windows, macOS, iOS 및 웹 브라우저에서 모두 동작되는 앱을 위해 출시되었다. 사용되는 언어는 역시 구글에 의해 제창된 Dart를 사용한다.플러터 웹 앱의 브라우져에서 렌더링은 HTML renderer 모드 또는 CanvasKit renderer 모드가 사용된다. HTML renderer는 HTML 엘리먼트, CSS, 캔버스 엘리먼트 및 SVG 엘리먼트가 사용되어 브라우져 캔버스상에 그려진다. CanvasKit renderer는 Skia를 WASM(WebAssembly)로 컴파일한 모듈과 WebGL을 사용하여 표시된다.
빌드된 플러터 웹 앱을 기존 HTML 페이지의 풀윈도우, iframe, 또는 임의의 html element에 임베딩을 지원한다. Javascript과의 상호연동과 통신도 가능하다. 플러터의 웹 지원은 다트 언어 및 플러터 패키지를 자바스크립트로 컴파일 되어 웹 브라우저 상에서 실행되며 WebAssembly로 직접 컴파일도 지원하기 시작했다. 참고로, flutter 패키지 사용없이 dart로 작성된 프로그램을 자바스크립트로 컴파일하여 리거시 HTML/CSS와 연동하여 사용도 가능하다.
데스크톱 상에서의 플러터 앱 실행은 2021년 3월부터 공식적으로 지원되고 있다. 구글의 차기 운영체제인 퓨시아의 유저 인터페이스 및 퓨시아 애플리케이션들이 플러터로 작성된다.
플러터 프레임워크는 소스 코드를 네이티브 CPU 머신 코드로 직접 컴파일 하며 UI를 렌더링 엔진 Skia로 직접 렌더링하기 때문에 성능이 뛰어나다. 소프트웨어 디자이너의 선택에 따라 iOS 앱에서 구글의 Material 테마 디자인과 Ripple 애니메이션을 사용하는 것이 가능하고 반대로 안드로이드에서 애플의 Cupertino 테마를 적용하는 것도 가능하다. 즉 플랫폼에 관계없이 플러터용 테마 디자인 라이브러리 적용 및 테마(Theme) 커스텀이 가능하다는 뜻이다. 각 OS의 네이티브 Widget/UI 컴포넌트로 변환하지 않고 플러터의 렌더링 엔진인 스키아로 직접 플랫폼 캔버스 상에 그리기 때문에 성능이 높고 어느 운영체제에서 소프트웨어 디자인이 가능하다.
2. 상세
Flutter는 기본적으로 리액티브 프레임워크 프로그래밍 기법으로 제작되었다. 선언형(declarative) UI와 상태관리(state management)가 특징이다. State 클래스에는 화면 표시와 관련된 build() 메서드외에 특정조건에서만 실행되는 라이프사이클 매서드가 있다.[1] UI 디자인을 Dart언어의 Widget을 사용하면 되므로 UI언어가 분리된 Java, C#, Javascript 계열의 개발과는 생산성 측면에서 비교 자체를 불허한다. 백엔드 지원에 있어서는 Appwrite나 Firebase등이 있으며 모바일 뿐아니라 웹 앱 분야에서도 강점을 가지고 있다. 구글에서 작정하고 밀어주는 프레임워크 중 하나이기에 인기가 점차 늘어나고 있다.Dart는 정적 언어이기에 디버깅시의 불편함이 적고, Firebase 사용 시에는 웹과의 통신에서 비효율적인 HTTP 메소드를 주고받지 않아도 된다. 소규모 프로젝트 제작 시에는 엄청나게 빠른 속도로 퀄리티 높은 앱을 제작할 수 있게 해주는 원동력이 된다. 다만 iOS 출시 시에는 파이어베이스가 디버깅 면에서 불편함을 주기도 한다.[2]
const와 final로 구분되는 상수가 특징인데, const는 컴파일 시에 적용되고 final은 런타임 시에 적용된다. 이렇게만 말해두면 이해가 쉽지만 실제 개발 환경에서는 오만가지 환경에 도배된 final을 마주하며 “내가 알던 그 개념이 아닌데?” 라는 반응이 나올 가능성이 높다. 일반적인 상황에서는 고정된 디자인에는 const, 상태 관리에는 final을 사용한다 생각하면 된다.[3]
상태 관리 라이브러리는 기본 지원 Inherited 및 구글이 밀어주는 provider가 있는데 다른 라이브러리들 또한 provider의 구축 및 설계를 따라가고 있기에 provider는 기본적으로 배워두는 것이 좋다. 혹은 hooks를 배웠다면 기본 Inherited만을 사용해서 앱을 만드는 것도 가능하다. 규모가 있는 프로젝트에 투입될 경우 상태 관리 라이브러리는 물론 네이밍과 라우팅 규칙까지[4] 정해진 디자인 패턴을 사용하는 경우가 많으니 유의해야 한다.
주요 IDE로는 Android Studio와 VSCode가 있으나 안드로이드 에뮬레이터 가속 기능, 디버깅, 에디터 기능 등등 Android Studio가 압도하기에 Android Studio를 사용하는 경우가 많다. 참고로, 안드로이드 에뮬레이터 사용시 리눅스의 KVM과의 상성이 매우 좋기 때문에 성능을 위해서라면 Linux를 사용하것이 좋다. 플러터 학습에는 안드로이드 스튜디오 및 Material Design 테마가 쓰이는 경우가 많으며, Cupertino 테마는 학습량이 증가하기 때문에 Material 테마를 커스텀화 하여 사용하면된다. 사실 이건 안드로이드 스튜디오의 압도적인 편의성도 있지만, 그만큼 Xcode 개발 환경이 말 그대로 쓰레기 같아서 그렇기도 한다.
2.1. 디자인 예시
Official showcaseIt's all widgets[5]
3. 상태 관리 라이브러리
3.1. GetX
상당히 다양한 기능을 가져 상태 관리 라이브러리로 치기에는 너무 커서 사용 시 문제가 될 수 있다는 의견과 편리해서 좋다는 의견이 매우 심하게 대립하는 라이브러리.상태관리라기엔 너무 많은 기능을 담고있은데다 오랫동안 업데이트가 안되어서 다른 패키지랑 충돌하거나 사용할수없게하는 경우가 많아 상당한 이슈가 있다.
3.2. BLoC
BLoC의 핵심 개념은 Flutter가 Vue처럼 상호간에 잘 연결된 UI 영역과 로직 영역의 직접 연결을 끊고 그 사이를 BLoC이 들어가 이벤트 기반으로 바꿔버리는 것이다.산하 라이브러리로 Cubit이 있다.
3.3. Provider
InheritedWidget을 기반으로 만든 상태 관리 패키지. BLoc에 비해 간편하고 사용하기가 쉬우며, Flutter의 기본 틀을 벗어나지 않는다는 장점이 있다.[6] 구글에서 만든 것은 아니지만 구글에서 소규모 프로젝트의 경우 Provider를 공식 추천하면서 특히 큰 인기를 끌게 되었다.3.4. Riverpod
Provider의 제작자가 만든 Provider의 근본적인 문제점을 개선한 상태 관리 라이브러리.3.5. Hooks
Provider, Riverpod 등을 관리하는 사람이 만든 라이브러리. init과 dispose 등의 상태 관리 개선, Stateful과 Stateless의 통합 등이 특징이다.다른 라이브러리와 달리 자체적으로는 할 수 있는 일이 제한되지만, Hooks의 사용 유무에 따라 디버깅 및 생산성에서 큰 차이를 보이기 때문에 플러터 사용자라면 익혀두는 것이 권장된다. 쓸만한 기능들만 익히는데는 2시간 정도면 충분하다.
4. 외부 링크
유튜브 공식 Flutter 영상Flutter 공식 문서
Flutter SDK 다운로드
Flutter Packages - 플러터 라이브러리 패키지
공식 트위터 - '금주의 위젯' 등 유용한 소식이 업데이트된다.
Reddit FlutterDev
5. 도서
도서관 자료 목록 - 플러터 링크6. DartPad
Flutter SDK 를 설치하지 않아도 간단한 예제는 Web에서 코딩하고 바로 실행시킬 수 있다.DartPad
Sample
7. 백엔드
셀프 호스팅을 지원하는 AppWrite나 구글의 Firebase를 사용하는 대신 Dart 라이브러리를 사용한 백엔드 서버 앱 작성도 가능하다. 대표적으로 dart_frog와 get_server 라이브러리가 있다.[1] flutter hooks에서는 이마저도 귀찮다고 initState, didChangeDependencies, dispose를 useEffect 하나로 대체해버렸다.[2] Flutter는 특히나 1인 개발 애플리케이션 시장에 있어 새로운 지평을 열었다고 평가받는다. 하지만 모바일 앱 서비스에서 iOS의 더러운 런칭 과정 및 Xcode 때문에 현재는 웹/앱으로 대세가 옮겨감에 있고 이는 Flutter만이 아니더라도 된다는 역설에 빠지게 된다. 그럼에도 불구하고 웹조차도 지원되는 유기성과 호환성 및 빠른 개발속도 덕분에 Flutter 사용자의 수는 빠르게 늘어나고 있는 추세다.[3] final은 상수인데 어째서 상태 관리에 쓰냐는 의문이 든다면 자바스크립트에서 배열이나 객체에 const를 사용하는 것을 생각하면 쉽다.[4] 예컨대 go_router 라이브러리[5] Flutter를 이용해 디자인한 앱들이 올라오고, 2022년초 이후 다수의 웹 앱 예제가 올라오고 있다. 오픈소스인 경우 소스를 볼 수 있다.[6] GetX가 비판을 받는 주요한 이유 중 하나가 BuildContext를 사용하지 않음으로써 Flutter의 기본 틀을 파괴했다는 주장이다.