flutter 3.10, dart 3.0 발표 요약

으라차차·2023년 5월 11일

dart 3.0 flutter flutter 3.10 impeller material3

오늘 구글 I/O 행사에서 flutter 쪽도 거의 breaking change급 버전업이 발표되었습니다.
여러분이 만들어둔 앱을 뜯어 고쳐야 하나 생각이 드실테지만 그런건 아니고요. 워낙 매력적인 내용들이 많아서 refactoring을 하고 싶거나
단순히 빌드만 새로 해서 성능 향상을 볼 수도 있기 때문입니다. 즉, 이미 만들어 놓으신 서비스엔 영향 없습니다. ^^

상세한 내용은
1) google Flutter director, Tim Sneath's post : flutter, dart release note
https://medium.com/flutter/racing-forward-at-i-o-2023-with-flutter-and-dart-df2a8fa841ab
2) Kevin Chisholm's post : material3 부분이 자세히 설명되어 있습니다.
https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73
3) 그리고 I/O행사 직후 공개한 개발자 비디오 영상
https://www.youtube.com/watch?v=yRlwOdCK7Ho&t=428s&ab_channel=Flutter

제가 살펴보니 1) -> 3) -> 2) 순으로 보시면 될 것 같습니다.

그리고 모두 영문이라 요약해 보도록 하겠습니다.

일단 flutter는 3.10, dart는 3.0으로 stable버전의 업그레이드입니다.

1. Flutter 3.10

1) 그래픽스 엔진인 impeller가 ios에 default로 적용됩니다.

기존에 사용된 skia 엔진은 구조상 'shader 로딩 이슈'로 초기 실행(cold booting)시 지연이 있었습니다. 결국 그래픽스 엔진 자체를 교체할 수 밖에 없었고 그래서 impeller라는 신규 엔진이 만들어지게 되었습니다. 3.7부터 ios에 preview로 발표되었고 안정화를 거쳐 이번 3.10에 기본 적용됩니다.
android는 3.7의 ios preview와 같이 이번 3.10부터 preview로 이용할 수 있습니다.
동영상에서 설명하지만 flutter의 "layered architecture구조" 덕분에 기존 앱이나 개발자가 따로 신경쓸 필요없이 skia-->impeller 교체가 자연스럽게 이뤄진것이 인상적입니다.

2) web 환경 지원이 더 좋아졌습니다.

서비스 실행시 브라우저로 로딩되는 CanvasKit 사이즈가 줄었는데 특히 Chromium 기반 브라우저의 추가 최적화까지 더해서 1.5MB까지 줄었다고 합니다.(기존엔 2.7MB)
사용하지 않는 아이콘 폰트를 줄여주기 때문에 거의 1/100로 사이즈가 줄었습니다. 위 내용까지 더해서 로딩타임을 재봤더니 42% 정도 개선이 되었다고 합니다. (그런데 cable connection 시뮬레이션 환경입니다.^^ 아무튼 사이즈가 줄었으니 좋아진거죠)

3) WASM 지원이 좀 더 진전을 이뤘습니다.

WASM(WebAssembly)은 모든 브라우저에서 실행될 수 있는 바이너리 포맷 표준입니다. 멀티플랫폼을 지향하는 대부분의 플랫폼들은 거의 필수적으로 지원할 부분이기도 합니다. 그런데 flutter가 제대로 성능을 보이기 위해서는 dart의 GC가 제대로 동작해야 하는데 wasm 표준에서 GC 지원이 최근 채택되어 이제 활용가능하게 되었다고 합니다.(Chromium기반 브라우저들과 Firefox는 거의 안정화 단계인데 safari는 언급이 없네요)
- stable 상태는 아니며 간단하게 체험을 해볼 수 있습니다.
  https://youtu.be/yRlwOdCK7Ho?t=1996
참고로 dart의 GC는 flutter 같이 인스턴스(위젯)들의 생성/삭제가 빈번한 환경을 지원하기 위해 나름 효과적인 구조를 갖추고 있는데요. 다음 글을 읽어보시길 권해드립니다.
https://medium.com/flutter/flutter-dont-fear-the-garbage-collector-d69b3ff1ca30

4) Material3 지원

Material3는 앱/웹 서비스들을 위한 google의 UX/UI 가이드라인입니다. 잘 아시겠지만 flutter는 거의 대부분의 위젯들을 Material3 가이드라인에 맞춰 제공하고 있으며, iOS를 위한 cupertino UI 위젯도 이용할 수 있습니다.
- flutter 자체는 pixel 단위까지 제어할 수 있기 때문에 자신만의 UX를 가진 UI 위젯들을 만들 수 있습니다. 즉, 매우 독창적이고 예쁜 앱을 만들수 있습니다. 하지만 UI에 대한 차별화가 굳이 중요하지 않은 대부분의 서비스들은 Color만 간단히 조정해도 매우 독창적이고 일관성있는 서비스 개발이 가능합니다.

ThemeData()의 colorSchemeSeed 또는 colorSeed를 통해 이용할 수 있습니다.
    
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        // colorSchemeSeed: <--  특정 Color를 기반으로 각 widget들에 어울리는 컬러들이 자동으로 결정
        // colorSeed:<-- ColorScheme.fromImageProvider(...)로 정한 이미지를 바탕으로 각 widget들에 어울리는 컬러들이 자동으로 결정
      ),
      home: const HomeView(),
    );

Color뿐만 아니라 Material3를 적용한 공통 widget들이 대폭 늘어났습니다. 이젠 거의가 다 지원되는것 같습니다.
적용된 widget들은 다음에서 소개하고 있습니다.
https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

5) 개발환경

DevTools
- 서비스 구동전후의 메모리 사용을 비교해볼 수 있습니다.
- console 창에서 객체들의 값이나 힙메모리를 살펴볼 수 있습니다.
- 다른 debugging tools을 통해 좀 더 정교하고 시각적인 분석이 가능해졌습니다. 영상에서는 perfetto를 통해 보여줍니다. 특히 단계별 visualization이 엄청 세분화되어 보기 편해졌습니다.
iOS 특화 지원
- 무선 디버깅(개인적으로 제일 반기는 기능입니다)
  iOS 앱 개발시 디바이스를 케이블로 연결하지 않고 무선 연결해서 loading/debugging이 가능해졌습니다.
- gamut 지원
  iOS 디바이스들의 색재현율을 그대로 활용할 수 있습니다. impeller를 사용하고 Info.plist에 FLTEnableWideGamut를 설정하면 됩니다.
- iOS가 제공하는 spell check service를 CupertinoTextField 클래스의 spellCheckConfiguration파라미터로 사용할 수 있습니다.
android 특화 지원
- 요즘 안드로이드폰에 많이 지원하는 CameraX의 기능들을 활용할 수 있습니다. 거의 필수적인 부분 위주로 지원하고 feedback을 보고 계속 추가한다고 합니다.

위 내용외 devtools과 플랫폼별 지원은 다음을 참고해주세요.
https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

2. Dart 3.0

대부분이 flutter 3.7 릴리즈와 3월에 있었던 forward행사에서 발표된 내용으로 이번에 stable버전으로 릴리즈되었습니다.

사실 이번 업그레이드는 flutter보다는 dart가 더 영향이 크다고 생각됩니다. 특히, record, pattern 지원은 거의 breaking change 수준입니다. 아마도 기존 코드들에 대한 refactoring을 강하게 느끼실 것 같습니다.

1) 100% sound null safty

간단히 얘기하자면, "null 또는 null 가능성이 있는 값이나 변수를 non-nullable 변수에 초기화하거나 할당되지 못하게 코딩단계에서 막자"는 것입니다. 지원 로드맵이 꽤 오래전부터 조심스럽게 진행되었기 때문에 혼란은 거의 없는것 같습니다. 이번 발표는 이를 공식화 하고 flutter 플랫폼이나 pub.dev 공식 패키지들에 있는 관련된 deprecated codes들을 모두 제거한다는 뜻이기도 합니다.

2) record, pattern

이들 사용으로 함수/메소드 호출과 리턴 주위가 엄청 깔끔해지고요, switch 조건문의 pattern 매칭으로 switch block이 깔끔해집니다. 특히, Widget constructor에서 parameter들을 선별적으로 사용해야 할 때 코드를 매우 직관적으로 작성할 수 있습니다.

List를 채울때, [ if ... ]이나 [ for() ... ]를 사용해서 list를 동적으로 만들기 편했던 것처럼 객체나 위젯 생성시 parameter들을 동적으로 넣을때 코드가 깔끔해집니다.
다음 동영상에서 자세한 설명과 사례를 보실 수 있습니다.
https://www.youtube.com/watch?v=KhYTFglbF2k&ab_channel=Flutter

3) class 용도 구분 키워드 추가

클래스를 만들때 그 용도를 명확해서 사용시 구분해서 사용할 수 있도록 하였습니다. 설명에는 서비스 규모가 커질수록 클래스 용도를 명확히 하면 혼란을 덜 겪는다고 합니다.

interface class : 상속은 안되고 꼭 구현해야할 내용들만 기술하는 클래스를 만들때입니다. 추상 클래스를 생각하시면 됩니다.
base class : private members들만 상속해주는 클래스를 만들때입니다. 이어 나오는 final의 반대 케이스로 이해하시면 됩니다.
final class : 더이상 sub class를 만들수 없는 마지막 클래스를 만들때입니다.

.끝.