Flutter가 뭔가요?
Flutter(플러터로 읽습니다.)는 구글에서 만든 멀티플랫폼 앱 프레임워크입니다. 멀티플랫폼 앱을 만들 수 있는 방법에는 고전적인 Apache Cordova(JS)부터, 마이크로소프트의 Xamarin(C#), 페이스북의 React Native(JS)까지 다양합니다.
타 프레임워크와 다른 점
플러터의 장점은 네이티브 UI를 직접 그린다는 데 있습니다. 먼저 다른 프레임워크를 간단히 소개하자면:
Cordova
웹뷰 기반의 Cordova는 하이브리드 앱의 가능성을 제시했지만, 태생적 한계로 매우 느린 퍼포먼스를 보입니다.
Xamarin
Xamarin은 C# 기반의 프레임워크입니다. 네이티브 빌드가 가능하기 때문에 높은 성능을 보장하지만, Xamarin은 플랫폼에 따라 여러 가지 버전이 있고 한 벌의 마크업으로 멀티 플랫폼을 지원하는 Xamarin.forms는 복잡한 UI를 구현하는 데 적합하지 않으며, 새로운 OEM 위젯을 사용하기 위해 Xamarin의 지원이 필요합니다. 또 각 플랫폼의 API를 사용하기 위해서 플랫폼 의존 분기 코드를 작성해야 하는 경우가 있습니다.
React Native
React Native는 UI 렌더링에 네이티브 위젯을 사용하지만, 연산은 JS 런타임에 의존합니다. JS와 네이티브 위젯이 통신하기 위해 Bridge를 거칠 때 마다 큰 비용이 듭니다. 또, RN으로 복잡한 인터페이스와 애니메이션을 구성하는 것은 네이티브 앱을 만드는 것보다 괴로울 수 있습니다. 하지만 JIT 컴파일러가 주는 빌드 타임 없는 빠른 개발과 성숙한 생태계는 큰 장점입니다.
Flutter
플러터는 네이티브 위젯을 사용하는 대신, 네이티브 위젯을 흉내 낸 픽셀을 직접 그립니다. 이 방식은 게임 엔진이 픽셀을 렌더링 하는 방식과 비슷합니다. 결과적으로 플러터로 작성한 앱은 대부분의 디바이스에서 60 fps의 성능을 낼 수 있습니다.
현재 플러터가 지원하는 플랫폼은 iOS와 Android입니다. 데스크톱 앱과 웹을 지원할 예정입니다. 재미있는 사실은 웹용 플러터의 렌더링이 Canvas 기반으로 제공된다는 점입니다.
플러터가 빠른 이유 중 하나는 Dart로 작성된 프레임워크기 때문입니다.
Dart
Dart는 구글이 만든 개발 언어입니다. Dart는 한 때 CoffeeScript, Lua, Elixir 등을 제치고 배우지 말아야 할 개발 언어 1위로 꼽혔는데요. Flutter의 등장이 Dart를 살렸습니다. 다시 말하면 Dart를 배워도 Flutter 말고는 할 게 없다는 뜻이며, 또 Flutter만을 위해서 Dart를 배울 가치가 충분하다는 뜻입니다.
Dart는 JIT(just-in-time) 컴파일과 AOT(ahead-of-time) 컴파일을 지원합니다. AOT컴파일러는 Dart 코드를 빠른 Native ARM 코드로 만들어줍니다. JIT 컴파일러는 hot reload를 지원하기 때문에 코드를 수정할 때 마다 앱을 네이티브 코드로 빌드할 필요 없이 변경된 부분을 바로 반영할 수 있어 빠른 앱 개발이 가능합니다.
플러터로 앱 만들기
힐링페이퍼에선 개발자에게 정기적으로 개발 능력을 향상할 수 있는 시간을 제공합니다. 주어진 일주일 동안 플러터로 사내에서 사용하기 위한 앱을 만들었습니다.
<video autoplay="" class="center fr-draggable" loop="" muted="" playsinline="" width="60%">어떤 앱인가요
- 강남언니 앱을 통해 부기 패키지를 받을 수 있습니다. 부기 패키지의 택배 송장을 카메라로 스캔하면 강남언니 시스템에 등록되는 기능
- 힐링페이퍼의 회의실, 커피머신 등 시설에 비치된 QR코드를 스캔하면 예약 일정과 사용방법 등을 안내하는 기능
주의사항
플러터로 앱을 만들면서 주의를 기울여야 했던 경우를 소개하고자 합니다.
부족한 생태계
생태계가 많이 부족합니다. 다른 프레임워크 생태계와 유사한 라이브러리가 존재하지 않을 수 있습니다. 만들어서 생태계에 기여하시는 것도 좋을 것 같습니다.
웹뷰
플러터의 공식 웹뷰는 다른 플러터 위젯들과 마찬가지로 사용하기 쉽습니다. 하지만 안드로이드에서 input필드를 터치했을 때 키보드가 나타나지 않는 치명적인 버그가 있습니다. 또, iOS의 경우 아직 기술 미리보기 단계이기 때문에 웹뷰를 사용하신다면 플러터 미리보기 기능을 사용하겠다고 명시해야 합니다.
멀티플랫폼 출시가 불가능할 수 있음
플러터 커뮤니티가 아직 거대하지 않기 때문에, 라이브러리 선택에 있어 신중할 필요가 있습니다. 라이브러리를 하나 추가할 때 마다 멀티 플랫폼 테스트를 꼭 해주세요. 아이폰에서 되는데 안드로이드에서 안 되거나, 안드로이드에서 되는데 아이폰에서 안 될 가능성이 있습니다.
React Native 등 멀티플랫폼 프레임워크를 사용해보셨다면 공감하시겠지만, Android와 iOS 개발 지식이 모두 필요합니다. 언어 수준에서 깊게 알 필요는 없지만, 예를 들어 안드로이드의 Activity 개념과 Gradle 빌드 시스템 등을 이해하고 있어야 각종 오류에 대처할 수 있습니다.
마치며
1주간 플러터로 앱을 만들며 느낀 장단점입니다.
장점
비동기 요청이 쉽다
ES6처럼 async/await를 지원하기 때문에 비동기 요청과 응답을 쉽게 보내고 받을 수 있습니다.
빌드시간 없는 빠른 개발
코드를 저장하는 순간 결과를 확인할 수 있습니다. RN처럼 변수 초기화 없이 로직만 변경하는 것을 지원합니다.
성능이 좋다
OEM 위젯을 사용하는 대신 GPU로 위젯을 직접 렌더링 합니다. 이 방식은 대부분의 게임이 렌더링 되는 방식과 유사합니다. Dart는 JIT컴파일과 AOT컴파일을 모두 지원하기 때문에 빠른 개발과 빠른 성능 모두 잡을 수 있습니다.
단점
러닝커브
JavaScript를 알고 있다면 바로 개발할 수 있는 React Native에 비해 러닝커브가 있습니다.
생태계가 부족하다
생태계가 부족하다는 것은 개발자가 모든 것을 직접 구현해야 한다는 것을 뜻합니다. 결과적으로 플러터로 프로덕션 앱을 만드는 것은 커뮤니티의 지원이 풍부한 React Native 혹은 iOS, Android 네이티브로 개발하는 것보다 시간이 오래 걸릴 수 있습니다.
종합
Flutter의 잠재력을 느낄 수 있는 시간이었습니다. 네이티브로 작성된 앱인지 구분할 수 없을 정도의 퍼포먼스를 보여주고, 인터페이스를 그리는 게 굉장히 쉬웠습니다.
빌드시간 없는 빠른 개발 환경에도 불구하고, 전체적인 개발 속도는 커뮤니티 지원이 좋은 React Native가 우세합니다. 프로덕션 앱 출시를 위해 멀티플랫폼 프레임워크를 고민하고 계시다면, React Native를 추천합니다.
플러터와 플러터 커뮤니티는 빠른 속도로 성장하고 있습니다. 빠른 개발과 성능 상 이점이 있는 플러터로 프로덕션 앱을 만들 날이 머지않았습니다.
