그 중 두 번째 Recode를 위한 기술로 Flutter를 선택한 이유는 다음과 같습니다.
Flutter는 최근 모바일 앱뿐 아니라 PC와 웹 개발도 가능하게 돼 플랫폼 확장성을 확보할 수 있었고, 기술 공개 후 빠르게 발전하고 있어서 필요한 정보를 보다 수월하게 획득할 수 있을 것이라고 판단했습니다.
공통 코드로 UI를 구성할 수 있으며 자유도가 높았습니다. 특히 KMM 개발 당시Android Compose UI개발 만족도가 높았던 터라 선언형 UI 패러다임으로 완전히 전환하고자 했던 저희 목적에 부합했습니다.
네이티브 대비 성능 부분에서 위험성이 낮았고, 네이티브 기능을 개발할 때는MethodChannel을 활용하면 크게 제약 받는 부분이 없었습니다.
통합 개발 환경(IDE) 부분에서 팀 원 모두에게 익숙한 Android Studio를 활용할 수 있었습니다(참고).
Flutter로 다시 갈아엎자 ㅆ (←웃는 눈 모양입니다)
Flutter는 Dart 언어를 사용합니다. 따라서 Dart 언어에 익숙해지지 못하면 Flutter로 제대로 개발할 수 없습니다. 이때Dart tour 문서를 참고하면 언어 특징을 빠르게 훑어보기 좋습니다. Dart 언어의 상세한 부분까지 잘 소개한 문서입니다. Dart 언어를 개략적으로 이해한 후에Flutter Codelab 페이지를 읽어보면 Flutter를 보다 쉽게 이해할 수 있습니다.
Recode는 Dart 언어를 익히고 Flutter에 익숙해지는 것으로 시작해서 시작부터 출시까지 약 3개월 정도 진행했습니다. 제한된 기간 내에 1.0과 3.0 모드를 모두 제공해야 했으므로 공식 문서를 보며 Dart와 Flutter를 학습하면서 동시에 스펙 - 뷰 상태 - 로직을 잘 분리해 나가며 학습과 개발을 동시에 진행했습니다. Recode 시작 당시에는 Flutter SDK 3.0.2이었고, 출시할 즈음에는 Flutter SDK 3.0.5로 개발했습니다.
Flutter는선언형 UI 개발을 하기 때문에 가장 큰 고민 거리는 UI 상태 관리입니다. 상태 관리와 관련해서provider와bloc,getx등의 패키지가 있는데요. 처음 Recode를 시작할 때 패키지 학습 비용 및 패키지 의존성으로 인한 부담 때문에 직접 구현하는 형태로 진행했습니다. 상태 변경을 위해서ChangeNotifier를 활용했고, 상태 집단은 StateModel로 관리했습니다. 제품 개발에 반드시 필요한 패키지(예를 들어FlutterFire,google_maps_flutter등)가 아니라면 가급적 직접 구현하는 것을 원칙으로 정했습니다.
KMM과 비교해 구현 난이도가 높았던 사례
Flutter로 갈아엎으면서 KMM과 비교해 구현 난이도가 높았던 부분도 있었습니다. 권한 획득이나 푸시 수신 시나리오 같은 경우 각 플랫폼에서 제안하는 개발 가이드라인에 차이가 있는데요. KMM 때는 네이티브 영역을 각각 구현해 코드 복잡도가 높지 않았는데 Flutter로 변환하면서 하나의 코드로 작성하다 보니 플랫폼에 따른 분기 코드가 종종 발생해서 코드 가독성을 저해하는 부분이 있었습니다. 아래는 Flutter로 변환한 후 Android와 iOS 앱 실행 후 흐름입니다.
Android 앱 실행 흐름
iOS 앱 실행 흐름
플랫폼별로 SDK나 패키지 작동이 달랐던 사례
플랫폼별로 SDK나 패키지 작동이 기대와는 조금씩 달랐던 경우도 있었습니다. 예를 들어 앱 내 진동 효과를 발생시키는 코드를 플랫폼별로 다르게 구현해야 하는 경우입니다. Android는Vibration패키지에서 제공하는 인터페이스를, iOS에서는 Flutter SDK에서 제공하는 인터페이스를 사용하는 것이 요구 사항에 가장 적합하게 작동했습니다. 스펙에는 진동이 300ms, 500ms, 1000ms와 같은 방식으로 정의돼 있었는데 플랫폼별로 작동에 차이가 있어서 이를 구현할 때 분기가 필요했습니다.
위와 같은 코드는 Recode 출시 후 단계적으로 추상화하며 플랫폼별 구현체로 리팩토링하고 테스트 코드를 작성하면서 보다 가독성이 높고 유지 보수하기 좋은 형태로 변경하고 있습니다. 아래는 위 코드를 개선한 결과입니다.
de_theme_effect.dart
// The interface is reused.
void _vibrate300() => VibrationHelper.vibrate(VibrationEffect.effect300);
...
enum VibrationEffect { effect300, effect500, effect1000 }
class VibrationHelper {
// vibration only support Android, iOS platform.
static void vibrate(VibrationEffect effectType) {
// Note) PlatformUtils also an abstract class of each platform implementations.
if (PlatformUtils.isAndroid) {
_vibrateAndroid(effectType);
} else if (PlatformUtils.isIOS) {
_vibrateIOS(effectType);
} else {
log('${effectType.name} vibrate fail, Unsupported platform type');
}
}
static void _vibrateAndroid(VibrationEffect effectType) async {
// implementation as a vibration package.
if (await Vibration.hasVibrator() == true) {
switch (effectType) {
case VibrationEffect.effect300:
Vibration.vibrate(duration: 300);
break;
case VibrationEffect.effect500:
Vibration.vibrate(duration: 500);
break;
case VibrationEffect.effect1000:
Vibration.vibrate(duration: 1000);
break;
}
}
}
static void _vibrateIOS(VibrationEffect effectType) {
// implementation as a flutter(default) package.
switch (effectType) {
case VibrationEffect.effect300:
HapticFeedback.lightImpact();
break;
case VibrationEffect.effect500:
HapticFeedback.mediumImpact();
break;
case VibrationEffect.effect1000:
HapticFeedback.heavyImpact();
break;
}
}
}
Dart
트러블 슈팅 사례
두 번째 Recode 과정 중에 경험한 주요 트러블 슈팅 사례를 소개하겠습니다.
Google 지도 관련 이슈
먼저 Google 지도와 관련해서 발생한 두 가지 이슈를 소개하겠습니다.
의존 관계 업데이트 후 사이드 이펙트로 앱 성능 저하
배송원 앱에서는 배송원 위치와 가맹점 위치, 고객 드위치를 지도 위에 마커로 표시합니다. 지도는 Google 지도(google_maps_flutter) 패키지를 사용하고 있고, Google 지도를 사용하기 위해 아래와 같이 pubspec.yaml에Caret 문법를 활용해 의존 관계를 추가해 놓았습니다. 그런데 어느 순간 앱 성능이 급격히 저하되는 이슈가 발생했고, 확인 결과google_map_flutter버전이 올라가면서 각 플랫폼 구현체 의존 관계가 업데이트된 것을 확인할 수 있었습니다. 이슈 발생 전후 pubspec.lock을 비교해 보면 아래와 같습니다.
이슈 발생 원인은google_map_flutter가 2.2.0으로 버전이 올라가면서google_map_flutter_android패키지 의존 관계가 업데이트돼 발생한 사이드 이펙트였습니다. 이슈를 해결하기 위해 pubspec.yaml에 선언한google_maps_flutter패키지 버전을 caret 문법 대신 고정된 버전을 사용하는 것으로 수정했습니다.
pubspec.yaml
# AS-IS: Performance degradation due to version-up
dependencies:
google_maps_flutter: ^2.1.3 // It means '>=2.1.3 <3.0.0'
# TO-BE: Specify as fixed version
dependencies:
google_maps_flutter: 2.1.9
YAML
네이티브 영역에서 크래시 발생
Google 지도와 관련해 발생한 또 한 가지 이슈가 있습니다. 출시 후 Android 버전에서 crash-free(* 특정 기간 동안 비정상 종료가 발생하지 않은 사용자 비율)가 약 96~97%로 불안정한 상태가 지속됐습니다. Crashlytics 로그에서는ByteBuffer나Thread등 네이티브 영역에서 크래시가 발생한 것으로 나타나 정확한 원인을 파악하기 힘든 상황이었는데요. 크래시 발생 시 생성된 로그를 분석한 결과 강제 로그아웃이 발생해 로그인 화면으로 전환될 때 이런 상황이 발생하는 것을 확인할 수 있었습니다. 배송원 앱은 로그인에 성공하면 Google 지도를 화면에 표시하는데 이때 화면 전환 등으로 지도가 표시되는 화면이 사라질 때 크래시가 발생하는 것으로 예상됐습니다.
이 이슈는Google MapView의Rendering옵션을LATEST로 사용하면 해결할 수 있는 것으로 알려져 있었습니다(참고). 이를 참고해서 Android 네이티브 소스 코드를 수정해 crash-free를 99% 이상으로 안정화할 수 있었습니다. 현재google_maps_flutter_android패키지 2.4.0 버전부터는LATEST렌더링 옵션을 제공하도록 개선돼(참고) Flutter 소스 코드에서도 렌더링 옵션을 수정할 수 있도록 업데이트됐습니다(이와 관련해google_maps_flutter에 등록된이슈를 참고하시기 바랍니다).
제스처 미작동 이슈
아래 화면은 배송원 앱의 주문 상세 확인 화면입니다. 이 화면에서는 크게 좌우로 스와이프해 페이지 닫기,PageView내에서 좌우로 스와이프해 탭 화면 이동, Google 지도 내에서 핀치 줌(pinch zoom) 제스처가 가능합니다. 그런데 Android 기기에서 Google 지도 내 핀치 줌이 작동하지 않는 이슈가 발생했습니다.
제스처와 관련해 발생하는 문제는 두 가지였습니다.
Gesture Arena에서 여러 제스처가 경쟁해 Google 지도 제스처가 제대로 작동하지 않음
Gesture Arena에서 좌우 페이지 스와이프 제스처, 페이지 백 제스처, 상하 스크롤 제스처, 지도 제스처 등 여러 제스처가 경쟁해 Google 지도 제스처가 제대로 작동하지 않는 경우가 발생했습니다. 이때 Gesture Arena에서 경쟁하지 않고 즉시 모든 터치 이벤트를 받을 수 있게 하려면gestureRecognizers에EdgarGestureRecognizer를 추가해야 합니다.
EdgarGestureRecognizer는 일반적으로AndroidView.gestureRecognizers에서 전달되며 뷰 범위 내 모든 터치 이벤트를 내장된Android View로 즉시 발송하기 때문에 Gesture Arena에서 경쟁하지 않고 모든 터치 이벤트를 즉시 발송하므로 모든 터치를 전달받을 수 있습니다. Google 지도와 같이 모든 이벤트를 즉시 받아야 하는 뷰의 경우 유용하게 사용할 수 있습니다.
PageView 이동 시 첫 번째 페이지의 Google 지도에서 멀티 터치가 제대로 작동하지 않음
이 문제는viewportFraction이 기본 값인1.0인 경우 페이지가 완전히 넘어갔다고 판단하지 않아서 포커스를 완전히 넘겨주지 않아 발생한 문제였습니다.PageView의allowImplicitScrolling 프로퍼티를true로 설정해서 다음 화면 요소로 이동했다고 판단되면 포커스를 이동하도록 설정해 해결할 수 있었습니다.
텍스트 표시 관련 이슈
일본어 한자가 중국어 번체로 표시됨
iOS 기기 중 특정 기기에서 일부 문자가 일본어가 아닌 중국어(번체)로 표시되는 이슈가 발생했습니다. 예를 들어, '配達設定(배달설정)' 문구에서 일본어 한자('設')가 아닌 중국어 한자('設')로 표시되는 이슈로, 기기나 OS에서 제공하는 폰트마다 이런 이슈가 있을 것으로 예상했습니다.
배송원 앱 설정 화면 > 중국어 한자 표시 이슈
이 이슈를 해결하기 위해 스타일 프로퍼티(TextStyle)에locale 프로퍼티를 각 언어에 맞게 잘 설정해 줬지만 해결되지 않았습니다. 이에 iOS 기본 폰트에서 일본어 한자를 제대로 지원하지 않는 경우가 있다고 판단했고, iOS의fontFamilyFallBack 프로퍼티를 [.AppleSystemUIFont', 'Hiragino Sans']로 설정해 해결할 수 있었습니다. 아래는 코드 실행 결과입니다.
iOS와 Android 앱은 기기 설정에서 디스플레이 및 텍스트 크기를 변경할 수 있습니다. 기기 설정에서 이 옵션을 최소 및 최대로 설정할 경우 화면이 제대로 표시되지 않는 이슈가 발생했습니다. 이를 수정하기 위해 디자인 팀과 논의해MediaQuery위젯을 이용해서textScaleFactor를0.7~1.4로 제한하고, 필요에 따라 고정된 텍스트 크기로 표시되는 위젯을 만들어 대응했습니다.
백그라운드 상태에서 FCM(Firebase Cloud Messaging) 수신 시 isolate 관련 이슈
firebase_messaging패키지를 이용하면 앱이 백그라운드에 있는 상태에서 FCM 푸시 수신 처리가 가능합니다(참고). 그런데 이때SharedPreference에 접근할 경우 'When received, an isolation is spawned. Since the handler runs in its own isolate outside your applications context, it is not possible to update application state or execute any UI impacting logic.' 메시지와 함께 오류가 발생합니다.
Dart 앱은 단일 스레드 프레임워크이며 스레드 대신isolate에서 작동합니다. Isolate를 새로 만들고 서로 통신할 수는 있지만 각 isolate는 고유한 메모리 힙을 할당받기 때문에 공유하는 메모리는 없습니다. 백그라운드에서의 푸시 콜백은 새로운 isolate에서 전달하는 것이기 때문에 메인 isolate의 메모리 데이터를 사용할 수 없어서 위와 같은 오류가 발생합니다. 이 문제는 앱 디렉터리 하위에 JSON 형식의 파일로 데이터를 저장하고 관리할 수 있는 유틸리티를 만들어서 FCM 수신 시 로컬에 데이터 저장이 필요한 경우에는 이 유틸리티를 사용하는 것으로 해결했습니다.
기술 변경으로 더욱 돈독해진 팀워크
두 번째 Recode 과정에서는 새로운 기술을 학습하면서 동시에 그 기술을 활용해 제품을 만들어 내는 과정을 진행했습니다. Flutter 기술을 완벽히 이해하고 있지 않아서 여러 가지 우려가 있었지만 결과적으로 긍정적인 피드백이 많았습니다. 두 번째 Recode 프로젝트 회고에서 KMM에서 Flutter로 전환한 결과 가장 좋았던 점으로 모든 분들이 공감해 주신 것은 동일한 소스 코드로 고민과 토론이 가능해졌다는 점이었습니다.
KMM으로 개발할 때는 Android와 iOS, KMM 각 영역에서 개발자가 본인 업무에 해당하는 영역에서만 개발을 진행하면서 각자의 관심 기술에만 집중했고, 이는 결국 장기적인 관점에서의 협업 측면이나 기술 성장 측면에서 아쉬움을 남겼는데요. Flutter로 전환하면서 Flutter라는 기술과 Dart라는 언어를 이용해 함께 고민하고 학습하며 그 내용을 실제 프로덕트에 반영하는 기회를 얻었고, 그 과정에서 발생한 급박한 상황 역시 생각보다 더 긍정적으로 회고됐습니다. 저희와 같이 소수(3~4명) 인원이 하나의 앱을 개발할 때는 같은 언어로 함께 고민하며 프로젝트를 진행하는 게 성장과 협업 측면에서 더 큰 동기를 부여할 수 있다는 것을 느꼈습니다.
팀 전체 관점에서도 공감대가 넓어졌습니다. 데마에칸 서비스 중 배송원 앱뿐 아니라 가맹점 앱, 리테일 앱 역시 Flutter를 활용하고 있기에 팀 차원에서 기술 교류가 시작됐고, 각 앱에서 공통으로 사용하는 모듈도 개발 가능해져 협업 측면에서도 좋아졌습니다. IDE나 CI/CD 환경 혹은 각 프로젝트의 아키텍처를 공유할 수 있게 됐고, 리팩토링이나 테스트 코드 등도 함께 고민하고 공유할 수 있어서 개인은 물론 팀 전체가 함께 성장하는 데 큰 도움이 되고 있습니다(공통 모듈을 만들어 활용하고 있는 내용은Flutter 패키지로 공통 모듈 리팩토링하기를 참고하세요). 🙂
마치며
모바일 앱 개발 기술로 Flutter를 고민하고 있다면 아래와 같은 이유로 추천합니다.
한정된 자원으로 멀티 플랫폼 개발을 할 수 있습니다. Android와 iOS뿐 아니라 PC와 웹으로도 개발할 수 있어서 다양한 형태로 제품을 검증할 수 있고 QA 환경 구성에도 유리합니다.
앱 개발자에게 멀티 플랫폼 기술은 네이티브 개발자에게 다음 단계를 도전하기 위한 큰 과제와도 같기 때문에 커리어를 쌓고 채용 시장에서 경쟁력을 높일 수 있는 좋은 기회라고 생각합니다.
개인과 팀 모두 고민하고 성장하기 위한 환경을 고민하고 있다면 좋은 선택이라고 생각합니다.
배송원 앱은 Recode 후 새로운 버전에서 사용자에게 더 좋은 가치를 안정적으로 제공하기 위해 Flutter로 모듈화하고 테스트 코드를 작성하는 것에 집중하고 있습니다. Flutter 개발자분들과 더 나은 상태 관리 방법과 효율적인 의존 패키지 버전 관리 방법, 보다 빠른 빌드 및 배포 자동화 구성 방법, 그리고 새로운 프로덕트를 더 잘 만드는 방법 등을 고민하고 있습니다(개발자라면 대부분 공감할 부분들이라고 생각합니다 🙂 ). 사용자에게 더 나은 서비스를 제공할 수 있다면 세 번째 Recode를 진행해야 할 상황이 오는 게 조금은 기다려지기도 한다고 생각하며 글을 마치겠습니다.
나이로비에서 열린 Flutter Forward 행사에서 우리의 비전 제시 오늘 우리는 Flutter Forward 에서 Flutter에 대한 우리의 비전을 공유하게 되어 기쁩니다 . 전 세계 개발자들이 Flutter의 향후 방향에 대해 알아보기 위해 대면 및 온라인으로 모여 케냐의 나이로비에서 실시간으로 스트리밍되는 개발자 이벤트입니다.
Flutter는 앱 개발자가 단일 코드베이스에서 모바일, 웹 및 데스크톱용으로 빌드할 수 있게 해주는 UI 도구 키트입니다. Flutter를 사용하면 아름다운 앱 을 빌드 하여 화면의 모든 픽셀을 완벽하게 제어할 수 있습니다. 하드웨어 가속 그래픽 및 기본적으로 컴파일된 기계 코드를 지원하는 휴대전화 또는 컴퓨터 의 하드웨어를 활용하여 빠릅니다 . 앱에서 코드 변경 사항을 즉시 확인할 수 있는 상태 저장 핫 리로드와 같은 기술을 통해 생산성 이 향상됩니다. 이식성 덕분에 동일한 소스 코드를 사용하여 놀라지 않고 다양한 플랫폼에 배포할 수 있습니다 . 또한 완전히 오픈 소스 이므로 라이센스 비용이나 개발 도구 비용을 지불할 필요가 없습니다.
Flutter는 지금까지 700,000개 이상의 게시된 앱을 통해 인기가 입증되었습니다. 큰 아이디어 가 있는 소규모 스타트업부터 중요한 요구 사항이 있는 기업에 이르기까지 . Google에서도 Flutter가 Google Classroom 과 같은 팀 이 모바일 및 웹 사용자에게 고품질 솔루션을 제공할 수 있게 해주는 유용한 도구임을 알게 되었습니다. 또한 Google Ads , Google 지도 , Google Pay 및 물론 Firebase 를 포함한 다른 개발자 도구에서도 이에 대한 지원을 추가하고 있습니다 . https://youtu.be/JVJF_M9bgj4
"Flutter를 사용하여 동일한 기능에 대해 코드 크기를 66% 줄였습니다. 이는 각 플랫폼의 버그가 줄어들고 향후 기술 부채가 줄어드는 것을 의미합니다." (Kenechi Ufondu, 소프트웨어 엔지니어, Google Classroom)
Flutter의 첫 번째 릴리스는 Android 및 iOS에서 모바일 앱을 빌드하기 위한 UI 도구 키트를 제공했지만 Flutter 3에서는 Windows, macOS, Linux 및 웹을 포함하도록 프로덕션 지원을 확장하는 동시에 임베디드 플랫폼에서 Flutter를 사용할 수 있도록 했습니다. 이를 기반으로 이번 주 에 iOS의 새로운 렌더링 엔진, Material 3 및 iOS 스타일 위젯에 대한 향상된 지원, 개선된 국제화 지원, 백그라운드 처리 등 광범위한 새 기능을 추가한 최신 안정 릴리스인 Flutter 3.7 을 출시했습니다. 개선 및 개발자 도구 업데이트.
그러나 이번 행사에서 우리는 Flutter에 대한 투자의 다음 물결인 획기적인 그래픽 성능, 웹과 모바일을 위한 완벽한 통합, 새롭고 떠오르는 아키텍처에 대한 초기 지원, 지속적인 집중 등을 미리 볼 수 있기를 기대 하고 있습니다. 개발자 경험에 대해. 우리는 앞으로 몇 달에 걸쳐 점진적으로 제공될 작업을 선보일 예정이며, 이를 통해 어디에서나 사용할 수 있는 고품질의 아름다운 사용자 경험을 구축하려는 모든 개발자를 위한 강력한 도구 키트로서의 Flutter에 대한 우리의 비전에 대해 여러분이 흥분하게 되기를 바랍니다. 픽셀이 그려집니다.
고지 사항: 여기에서 미리 보는 기능은 아직 개발 중이며 앞으로 몇 달 동안 크게 변경될 수 있습니다. 이 초기 단계에서 표시하는 것은 얼리 어답터가 기여할 수 있는 기회를 제공하도록 설계되었습니다.
4가지 테마: 획기적인 그래픽 성능, 웹과 모바일을 위한 완벽한 통합, 초기부터 새롭게 떠오르는 아키텍처, 개발자 경험에 대한 지속적인 집중.
획기적인 그래픽 성능 역사적으로 교차 플랫폼 프레임워크는 추상화 계층을 생성하는 문제로 인해 비주얼에 대한 절충안이 필요했습니다. Flutter는 모든 장치에서 하드웨어 가속 그래픽과 일관된 시각적 모양을 제공하는 자체 렌더링 레이어를 사용하여 대부분과는 다른 접근 방식을 취했습니다. 앞으로 우리는 이 분야에서 Flutter의 기존 강점을 확장하는 획기적인 그래픽 성능 에 투자할 것입니다.
Flutter Forward에서는 Flutter의 차세대 렌더링 엔진인 Impeller 에 대한 더 많은 진행 상황을 보여주고 있습니다 . Impeller는 Flutter에 최적화되어 그래픽 파이프라인에 대한 더 많은 유연성과 제어 기능을 제공하고 새로운 기회를 열어줍니다. 임펠러는 셰이더 컴파일로 인한 런타임 시 드롭된 프레임을 완화하는 미리 컴파일된 셰이더를 사용하여 보다 예측 가능한 성능을 제공합니다. iOS 및 Android의 최신 저수준 API인 Metal 및 Vulkan의 프리미티브를 활용합니다. 또한 동시성을 효과적으로 사용하여 단일 프레임 워크로드를 여러 스레드에 분산시킵니다.
Impeller는 Wonderous 와 같이 까다로운 그래픽 앱을 위한 부드럽고 매끄러운 성능을 제공합니다 . 여기에 표시됨: https://wonderous.app 에서 사용할 수 있는 다양한 장치 및 폼 팩터에 맞게 UI를 조정하는 최신 버전의 Wonderous . 부드럽고 매끄러운 UI를 제공하는 것 외에도 Impeller는 특정 시나리오에서 성능을 크게 향상시킬 수 있습니다. 하나의 데모(아래 표시)는 이에 대한 최상의 사례를 보여줍니다. 왼쪽에는 현재 기본 렌더러를 사용하여 빌드된 SVG 클리핑을 사용하는 만화경 앱이 있습니다. 페이지를 아래로 스크롤하면 렌더링이 프레임당 예산보다 오래 걸리고 프레임 속도가 7~10fps로 떨어지면서 성능이 떨어집니다. 오른쪽은 Impeller에서 실행되는 동일한 앱을 보여주며 결함 없는 60fps로 렌더링됩니다. https://youtu.be/Z7v-YRdHusM
Impeller를 사용한 그래픽 성능 향상의 예를 보여주는 Kaleidoscopia 데모입니다. 처음부터 구축하는 것의 한 가지 이점은 아키텍처가 완전히 새로운 사용 사례를 지원할 수 있다는 것입니다. 커스텀 셰이더에 대한 새로 도입된 지원은 이미 Flutter 위젯 계층 구조와의 완벽한 통합을 보여주는 몇 가지 놀라운 새 데모 로 이어지고 있습니다. 여기서 우리의 작업은 모바일 장치에만 국한되지 않습니다. 이제 웹에서도 사용자 지정 셰이더를 조기에 지원하고 있으며, 이제 동일한 코드로 iOS, Android 및 브라우저에서 하드웨어 가속 환경을 지원합니다.
Flutter 픽셀 셰이더 데모를 보여주는 Chrome 웹 브라우저의 스크린샷. Flutter 마스코트인 Dash의 이미지가 있지만 슬라이더 컨트롤로 조정할 수 있는 모자이크 스타일의 효과가 있습니다. Flutter는 이제 웹에서 픽셀 셰이더를 지원하여 다양한 멋진 시각 효과를 사용할 수 있습니다. (신용 거래: 에릭 고메즈 .) 이제 우리는 Flutter로 3D 를 지원하는 초기 작업을 시작하고 있습니다. 기조연설에서 우리는 Blender 로 생성된 모델을 가져올 수 있고 핫 리로드를 사용하여 Blender를 실시간으로 반복하고 실행 중인 앱에서 결과를 볼 수 있음을 보여주었습니다. 아직은 초기 단계지만 3D를 다른 Flutter 경험에 통합할 수 있는 가능성과 함께 우리가 얻고 있는 초기 성능에 대해 매우 기쁘게 생각합니다.
Impeller를 사용하면 Flutter가 3D 그래픽을 렌더링할 수 있습니다. 이 재미있는 Dash 데모에서 볼 수 있습니다. 3D 및 사용자 지정 셰이더를 추가하면 휴대용 UI 툴킷의 그래픽 성능에 대한 기준이 새로운 수준으로 높아집니다. 이러한 새로운 기능이 출시되면 이를 통해 여러분이 무엇을 하게 될지 매우 기대됩니다.
웹과 모바일을 위한 완벽한 통합 Flutter와 Dart를 사용하여 완전히 앱을 작성할 수 있지만 거의 모든 사소한 프로젝트는 다른 코드와 연결해야 합니다. 웹에서 Flutter는 더 큰 앱 내에서 포함된 구성 요소로 사용될 수 있습니다. 모바일에서 앱은 시스템 API 또는 다른 언어로 작성된 기타 코드를 호출해야 할 수 있습니다. 따라서 우리의 두 번째 주요 투자 주제는 웹과 모바일의 원활한 통합입니다.
웹에서 우리는 Flutter 콘텐츠를 모든 표준 웹에 추가할 수 있게 해주는 요소 임베딩<div> 이라고 하는 새로운 기능을 미리 보고 있습니다 . 이러한 방식으로 포함되면 Flutter는 웹 구성 요소가 되어 웹 DOM과 깔끔하게 통합되고 CSS 선택기 및 변환을 사용하여 부모 Flutter 개체의 스타일을 지정할 수도 있습니다.
또한 JavaScript와 Dart 코드 간의 원활한 상호 운용성을 지원하기 위해 js 패키지 를 크게 변경하고 있습니다. js를 사용하면 Dart 코드의 모든 함수에 속성을 추가한 다음 JavaScript 코드에서 호출할 수 있습니다.@JSExport
이 두 가지 새로운 기능을 결합하면 웹에서 Flutter를 사용하는 몇 가지 흥미롭고 새로운 시나리오가 열립니다. Flutter Forward에서 선보인 개념 증명 데모 에서 HTML 기반 웹 페이지에 포함된 간단한 Flutter 앱을 볼 수 있습니다. CSS를 사용하여 애니메이션 회전 효과를 적용합니다. 회전하는 동안에도 Flutter 콘텐츠는 대화형으로 유지됩니다. 데모는 또한 HTML 버튼과 JavaScript 이벤트 핸들러를 사용하여 Flutter 상태를 변경하거나 그 반대로 할 수 있음을 보여줍니다. 이 작업이 완료되면 Flutter를 사용하여 기존 웹 앱에 상호작용성을 추가할 수 있는 많은 새로운 기회가 열릴 것이라고 생각합니다.
Flutter 웹 데모의 스크린샷. 전통적인 Flutter 카운터 앱이 표시되지만 CSS에서 기울어지고 변형되어 여성이 iPhone을 들고 있는 사진의 일부처럼 보입니다. 요소 포함을 사용하면 Flutter를 <div> 요소에 포함하고 CSS를 사용하여 스타일을 지정할 수 있습니다. Android 및 iOS로 전환하면서 Flutter는 Kotlin 또는 Swift와 같은 언어로 작성된 코드와 통신하기 위한 메시지 기반 접근 방식을 제공하는 플랫폼 채널을 사용하여 오랫동안 시스템 API와의 통합을 지원해 왔습니다. 이렇게 하면 해당 라이브러리에 대한 액세스가 잠금 해제되지만 앱 작성자는 여러 언어에 정통해야 하며 상당한 양의 상용구 코드가 필요합니다.
우리는 이제 라이브러리를 직접 호출할 수 있는 시스템 상호 운용성을 위한 새로운 접근 방식에 대한 작업을 시작하고 있습니다. iOS에서 우리는 Swift 및 Objective-C 라이브러리에 대한 지원을 추가하여 C 상호 운용성을 위한 FFI에 대한 작업을 구축하고 있습니다. Android에서는 JNI를 사용하여 Kotlin으로 작성된 Jetpack 라이브러리에 연결합니다. 새로운 명령을 통해 Dart는 언어 간 상호 운용을 위한 바인딩을 자동으로 생성하고 데이터 클래스를 적절하게 변환합니다. 완료되면 이 작업을 통해 Flutter 개발자가 플러그인을 사용하거나 다른 API 구문을 배울 필요 없이 새로운 Jetpack 또는 iOS 라이브러리를 호출할 수 있을 뿐만 아니라 플러그인 작성자의 작업이 크게 쉬워지기를 바랍니다. 자세한 내용 은 샘플을 확인하세요 !
새롭고 떠오르는 아키텍처 초기 단계 다양한 프로세서 아키텍처에 대한 Dart의 폭 넓은 지원과 고도로 최적화된 JavaScript 컴파일러 덕분에 Flutter는 이미 다양한 장치와 폼 팩터에서 실행될 수 있습니다. 그러나 몇 가지 흥미로운 새 옵션이 등장하면서 세 번째 주제는 새롭고 떠오르는 아키텍처를 조기에 지원하는 것 입니다.
WebAssembly 는 최신 브라우저에 대한 지원 이 증가하면서 플랫폼 중립적인 이진 명령 형식으로 성숙해졌습니다 . 흥미롭게도 WebAssembly는 JavaScript 이외의 다른 언어에 대한 웹 플랫폼을 엽니다. 최근 몇 달 동안 Chrome 팀 및 기타 WebAssembly 파트너와 협력하여 Dart와 같은 가비지 수집 언어에 대한 조기 지원 을 추가했습니다. WebAssembly에 대한 이 새로운 확장은 이제 Chrome의 최신 개발 빌드에서 플래그로 지원됩니다. Flutter Forward에서는 WebAssembly에 대한 Flutter 컴파일에 대한 초기 지원을 공개 하여 웹 지원을 위한 추가 속도 및 크기 최적화를 가능하게 합니다.
점점 더 많은 관심을 받고 있는 또 다른 플랫폼 아키텍처는 광범위한 사용을 위해 설계된 개방형 표준 ISA(Instruction Set Architecture)인 RISC-V 입니다. Android 팀은 최근에 RISC-V를 지원하기 위한 작업 에 대해 발표했으며 , Flutter가 RISC-V 기기에서 실행될 수 있도록 하기 위한 자체 여정의 일환으로 Dart가 이제 RISC-V를 지원함 을 발표하게 되어 기쁩니다. 사용할 수 있습니다. 프로덕션 RISC-V 하드웨어는 아직 초기 단계이지만 Flutter Forward에서 우리는 Linux를 실행하는 자체 조립 휴대용 터미널인 ClockworkPi DevTerm Kit R-01 에 대한 현재까지의 진행 상황을 시연했습니다. RISC-V 지원은 Flutter가 다양한 요구 사항에 맞는 강력한 UI 도구 키트를 제공할 수 있는 임베디드 시나리오에서 특히 중요할 것이라고 생각합니다.
ClockworkPi RISC-V 휴대용 단말기의 사진. 이것은 iPad와 거의 같은 크기의 작은 장치이지만 미니어처 키보드, 트랙포인트 마우스 및 터미널 디스플레이가 있습니다. Dart 콘솔 앱을 실행하는 실험용 RISC-V 컴퓨터인 ClockworkPi DevTerm R-01. 개발자 경험에 대한 지속적인 관심 위에서 설명한 모든 것의 기초는 상태 저장 핫 리로드와 같은 기능을 통해 처음부터 Flutter의 특징인 개발자 생산성입니다. 미래를 위한 우리의 네 번째이자 마지막 투자 영역은 Flutter와 Dart 모두 에서 개발자 경험에 지속적으로 초점을 맞추는 것입니다.
Flutter Forward에서 우리는 Dart 언어의 세련된 진화에 대한 우리의 약속을 보여주기를 희망하는 일부 주요 새 Dart 언어 기능에 대한 초기 작업의 일부를 미리 보고 있습니다. 개발 채널에서 특히 함께 잘 작동하는 두 가지 새로운 개선 사항인 레코드 및 패턴 에 대한 초기 지원을 제공합니다.
새로운 레코드 및 패턴 기능의 데모를 실행하는 VSCode의 이미지. Dart가 이제 여러 값을 반환할 수 있음을 보여줍니다. 데모 코드는 https://gist.github.com/timsneath/a75fd9f76b5b61c42676c9232160d14d에 있습니다. 여러 함수 매개변수를 반환하고 수신하는 데 사용되는 레코드 및 패턴의 간단한 예입니다. 우리는 또한 공식적으로 Dart 3 를 발표합니다. 이것은 언어에 건전한 널 안전을 도입하기 위한 우리 작업의 정점입니다. Dart 3는 또한 언어를 더욱 현대화하기 위해 오랫동안 사용되지 않는 다른 기능을 제거합니다. 일치하는 Flutter 빌드와 함께 Dart 3의 알파 품질 빌드를 게시하기 시작하여 개발자가 패키지와 앱을 테스트할 수 있습니다. Dart 3에 대한 자세한 내용 은 Dart 채널의 별도 블로그 게시물을 확인하십시오 .
물론 우리는 Flutter의 개발자 경험에도 투자하고 있습니다. 작년 I/O에서 발표 한 캐주얼 게임 툴킷의 성공에 이어 뉴스 툴킷 의 첫 번째 버전을 공유하고 있습니다. 처음부터 앱을 디자인합니다. 여기에는 탐색 및 검색, 인증, 광고 통합, 알림, 프로필 및 구독과 함께 기사 중심 앱을 구축하는 데 필요한 모든 것이 포함되어 있으며 Google 뉴스 이니셔티브 연구의 모범 사례가 통합되어 있습니다. 오늘 우리는 Hespress 를 포함하여 이 툴킷을 기반으로 앱을 구축하고 있는 이곳 아프리카의 얼리어답터 3명을 소개합니다., 모로코에서 가장 큰 뉴스 사이트 중 하나인 Bold Sports 는 인기 있는 나이지리아 스포츠 사이트입니다. 그리고 The Standard , 케냐에서 가장 오래된 신문.
Google 뉴스 툴킷의 얼리 어답터였던 세 명의 아프리카 기반 뉴스 게시자의 이야기입니다. 함께 나아가기 Flutter가 앞으로 나아갈 방향에 대한 기대를 공유해 주시기 바랍니다. 우리는 핵심 개발자 경험에 막대한 투자를 계속하는 동시에 Flutter로 훨씬 더 강력한 경험을 구축할 수 있는 길을 닦는 몇 가지 근본적인 개선을 하고 있습니다.
이 이미지는 우리의 방향을 요약합니다.
향후 작업을 위한 4가지 테마: 획기적인 그래픽 성능(임펠러, 쉐이더, 3D 지원); 웹과 모바일을 위한 완벽한 통합(요소 임베딩, JNIgen 및 FFIgen) 새롭고 떠오르는 아키텍처(WebAssembly 및 RISC-V)에 초기 단계; 개발자 경험(Dart 언어 기능, 사운드 null 안전, Google News Toolkit 및 Wonderous)에 대한 지속적인 초점. 자체 개발 테마 외에도 FlutterFlow 가 네이티브 모바일 애플리케이션 개발을 위한 로우 코드 빌더인 FlutterFlow 와 디자이너와 개발자가 사용자 인터페이스 개발에서 협업할 수 있는 유연한 도구를 제공하는 Widgetbook 과 같이 Flutter 생태계가 계속해서 확장되는 방식을 보는 것은 기쁩니다.
끝으로 케냐에 와서 현지 개발자들의 기업가 정신과 재능을 볼 수 있어서 정말 기뻤습니다. 여기 아프리카에서 Flutter 커뮤니티의 활력은 특별합니다. Flutter Kenya 사용자 그룹에만 1,000명이 넘는 개발자가 있습니다. 그리고 Flutter가 아프리카 전역의 개발자들에게 빠르게 성장하는 앱 경제에 참여할 수 있는 새로운 기회를 제공할 수 있다는 사실에 매우 기쁩니다. Klasha는 Flutter를 사용하여 신속하게 시장에 진출하고 지역 문제를 해결하는 이러한 약속의 좋은 예입니다. 다음은 Flutter 사용 경험에 대한 동영상입니다.https://youtu.be/o8NPZ2ofLbI
Klasha( https://klasha.com/ )의 이야기, 아프리카 소비자들에게 전 세계 상품에 원활하게 액세스할 수 있는 기술 스타트업 및 Flutter 사용 경험.
C:\src\flutter 밑에 압축 풀고, 시스템 환경 변수에 경로설정하고, 안드로이드스튜디오도 다운받아서 설치.
C:\src\flutter>flutter doctor
flutter doctor 입력하면
C:\Users\HWKim>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.2, on Microsoft Windows [Version 10.0.19041.572], locale ko-KR)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code (version 1.50.1)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.
C:\Users\HWKim>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.2, on Microsoft Windows [Version 10.0.19041.572], locale ko-KR)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code (version 1.50.1)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.
