What’s new in Flutter 3.24
원문: https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4
최신 플러터 업데이트에 오신 것을 환영합니다!
플러터 3.24는 앱 개발 경험을 향상시킬 흥미로운 새로운 기능과 개선 사항으로 가득합니다.
이번 릴리스의 주요 특징은 플러터 GPU의 미리보기이며,
이를 통해 플러터에서 직접 고급 그래픽과 3D 장면을 구현할 수 있습니다.
웹 앱은 여러 개의 플러터 뷰를 포함할 수 있어 앱의 유연성이 향상되었습니다.
마지막으로 수익을 극대화 할 수 있도록 비디오 광고 수익화 지원 기능을 추가했습니다.
지난 몇 달 동안 플러터 커뮤니티는 매우 활발하게 활동하여 852개의 프레임워크 커밋과 615개의 엔진 커밋이 이루어졌습니다. 이번 릴리스를 가능하게 한 49명의 새로운 기여자를 맞이하여 기쁩니다.
여러분의 헌신과 열정이 플러터를 앞으로 나아가게 하는 원동력입니다.
그러니 이번 최신 릴리스에서 플러터 커뮤니티가 가져온 모든 새로운 기능과 개선 사항을 직접 확인해보세요!
Flutter Framework
새로운 Sliver 추가
이번 릴리스에서는 동적인 앱 바 동작을 위해 함께 구성할 수 있는 새로운 슬리버가 추가되었습니다.
이 새로운 슬리버를 사용하여 사용자가 스크롤할 때 헤더가 떠 있거나 고정되거나 크기가 조정되도록 만들 수 있습니다.
이 새로운 슬리버는 기존의 SliverPersistentHeader와 SliverAppBar슬리버와 유사하지만, 더 간단한 API를 가지고 있어 더욱 효과적으로 조합할 수 있습니다.
이 새로운 슬리버는 새로운 샘플 코드와 함께 제공합니다.
예를 들어, PinnedHeaderSliver’s의 API 문서에는 iOS 설정 앱의 앱 바와 같은 효과를 재현하는 예제가 포함되어 있습니다.
쿠퍼티노 라이브러리 업데이트
이번 릴리스에서 CupertinoActionSheet의 정확도를 개선했습니다.
이제 액션 시트의 버튼을 손가락으로 슬라이드하며 햅틱 피드백을 실행합니다.
버튼의 글꼴 크기와 굵기도 이제 기본 네이티브 버튼과 일치합니다.
또한 CupertinoButton에 새로운 포커스 속성을 추가했으며,
이제 비활성화된 CupertinoTextField의 색상을 사용자 정의할 수 있습니다.
쿠퍼티노 라이브러리의 새 단장이 진행 중이며,
향후 릴리스에서 더 많은 업데이트를 기대해 주세요!
TreeView
two_dimensional_scrollables 패키지는 TreeView 위젯을 출시했으며,
|이와 함께 성능 좋은 스크롤 트리를 구축할 수 있는 여러 보조 클래스도 제공됩니다.
이러한 트리는 성장함에 따라 모든 방향으로 스크롤할 수 있습니다.
패키지에 포함된 샘플 앱도 TableView와 TreeView 위젯을 사용하는 여러 새로운 예제들로 업데이트되었습니다.
트리 생성을 위한 TreeSliver도 프레임워크에 추가되어, 1차원 스크롤링에서 사용할 수 있습니다. TreeView와 TreeSliver의 API는 일치하여, 사용 사례에 맞는 것으로 쉽게 전환할 수 있습니다.
CarouselView
이번 릴리스에는 ‘Material Design carousel’ 위젯인 CarouselView 가 포함되었습니다. CarouselView는 “Uncontained” 레이아웃을 제공하며, 스크롤 가능한 항목 목록이 컨테이너의 가장자리까지 스크롤됩니다.
앞뒤 항목들은 뷰에서 벗어나거나 뷰로 스크롤될 때 동적으로 크기가 변경될 수 있습니다.
더 많아진 위젯에서 사용할 수 있는 기능
이번 릴리스에서는 디자인에 특화되지 않은 핵심 위젯 로직을 Material 라이브러리에서 Widgets 라이브러리로 이동시키기 위한 작업을 일부 포함했습니다.
Feedback위젯은 Tap, long press 등 제스처에 반응하여 장치에서 촉각 및 오디오 피드백에 쉽게 접근할 수 있습니다.ToggleableStateMixin과ToggleablePainter는 체크박스, 스위치, 라디오 버튼과 같은 토글 위젯을 구축하기 위한 기본 클래스입니다.
AnimationStatus 에 대한 enum 기능 강화
커뮤니티 회원 @nate-thegrate의 멋진 기여로, AnimationStatus에 대한 enum 기능이 강화되었습니다. 여기에는 다음과 같은 getters 를 포함합니다.
- isDismissed
- isCompleted
- isRunning
- isForwardOrCompleted
이 중 일부 getter는 이미 AnimationController와 CurvedAnimation과 같은 Animation 하위 클래스에 존재했습니다.
이제 모든 상태 getter가 AnimationStatus 뿐만 아니라 Animation 하위 클래스에서도 사용할 수 있게 되었습니다.
마지막으로, 애니메이션의 방향을 전환할 수 있는 toggle 메서드가 AnimationController에 추가되었습니다.
SelectionArea 업데이트
플러터의 SelectionArea는 이제 마우스를 사용한 트리플 클릭 및 터치 디바이스에서의 더블탭과 같은 더 많은 네이티브 제스처를 지원합니다.
기본적으로 SelectionArea와 SelectableRegion위젯은 이러한 새로운 제스처를 사용합니다.
트리플 클릭
- 트리플 클릭 + 드래그 : 문단 블록 내에서 선택 영역을 확장할 수 있습니다.
- 트리플 클릭 : 클릭한 위치의 문단 블록을 선택합니다.
더블 탭
- 더블 탭 + 드래그 : 단어 블록 내에서 선택 영역을 확장합니다 (네이티브 Android/Fuchsia/iOS 웹에서 지원)
- 더블 탭 : 탭한 위치의 단어를 선택합니다 (네이티브 Android/Fuchsia/iOS 및 Android/Fuchsia 웹에서 지원)
엔진
Imperller
성능과 정확도 향상
iOS에서 곧 출시될 Stable Release에서 Impeller의 선택 옵션을 제거할 준비를 하면서, 팀은 Impeller의 성능과 정확도 향상에 노력해왔습니다.
한 가지 예로, 텍스트 렌더링에 대한 일련의 개선 작업을 통해 이모지 스크롤링의 성능이 크게 향상되었고, 많은 이모지를 스크롤할 때 발생하던 끊김 현상이 사라졌습니다.
이는 Impeller의 텍스트 렌더링 능력을 시험하는 훌륭한 스트레스 테스트였습니다.
또한, 여러 문제를 해결함으로써 이번 릴리스에서 Impeller의 텍스트 렌더링 정확도도 크게 향상시켰습니다.
특히, 텍스트의 굵기, 간격 그리고 자간이 이제 기존 렌더러의 텍스트 정확도와 일치하게 되었습니다.
안드로이드 미리보기
이번 버전에서는 Android에서 Impeller의 Preview를 계속 진행하고 있습니다.
Impeller가 사용하는 플랫폼 뷰와 관련된 Android 14의 버그로 인해 어려움이 있었고, 이로 인해 Preview 기간을 연장했습니다.
이 버그는 이미 Android 팀에서 수정했지만, 많은 기기들이 당분간 패치 전 Android 버전을 사용할 것으로 보입니다.
이러한 문제를 해결하기 위해 추가적인 API 마이그레이션이 필요하며, 이에 따라서 추후 버전에 적용 될 예정입니다.
Flutter 앱이 가능한 한 많은 기기에서 원활하게 작동하도록 하기 위해, 우리는 올해 말에 있을 Stable Release전까지 Impeller를 기본 렌더러로 설정하는 것을 보류하기로 했습니다.
Impeller의 Android Preview가 3.24 버전에 계속 진행 됨에 따라, Flutter 개발자들에게 최신 안정 버전으로 업그레이드하고, Impeller를 활성화했을 때 발견되는 문제를 보고해 주시길 부탁드립니다.
이 시점에서의 피드백은 Impeller가 Android에서 성공적으로 작동할 수 있도록 하는 데 매우 중요하며, 올해 말 Impeller를 기본 렌더러로 도입하는 데 큰 도움이 됩니다.
Android 하드웨어 생태계는 iOS보다 훨씬 다양하기 때문에, Impeller와 관련된 가장 유용한 피드백은 문제가 발생한 특정 기기와 Android 버전에 대한 자세한 정보를 포함하는 것이 좋습니다.
다운스케일된 이미지에 대한 기본 설정 개선
이번 릴리스에서는 이미지의 기본 FilterQuality설정이 FilterQuality.low에서 FilterQuality.medium으로 변경되었습니다.
큰 이미지를 작은 영역에 렌더링할 때, FilterQuality.low를 사용하면 FilterQuality.medium 보다 이미지가 더 ‘픽셀화’되어 보이고 렌더링 속도도 느려질 수 있습니다.
앞으로 팀은 각 FilterQuality수준에 대해 더 적합한 이름을 찾는 작업도 진행할 예정입니다.
Flutter GPU preview
Flutter는 주요 채널에서 사용할 수 있는 Flutter GPU로 렌더링 기능에 대한 대규모 업데이트를 도입했습니다.
이 저수준 그래픽 API는 개발자들이 네이티브 플랫폼 코드를 사용하지 않고도 Dart 코드와 GLSL 셰이더를 이용해 커스텀 렌더러를 만들 수 있도록 합니다.
Flutter GPU는 Flutter에서 직접 렌더링할 수 있는 범위를 확장하여 고급 그래픽과 3D 장면을 구현할 수 있게 합니다.
이 기능은 현재 iOS, macOS, Android에서 지원되는 Impeller 렌더링 백엔드를 필요로 합니다.
아직 초기 Preview 단계이지만, Flutter GPU는 궁극적으로 모든 Flutter 플랫폼을 지원하는 것을 목표로 하고 있습니다.
이 API는 렌더 패스 첨부, Vertex stage, GPU로의 데이터 업로드에 대한 완전한 제어를 가능하게 합니다.
이러한 유연성은 2D 캐릭터 애니메이션부터 복잡한 3D 장면에 이르기까지 정교한 렌더링 솔루션을 만드는 데 필수적입니다.
개발자들은 메인 채널로 전환하고 프로젝트에 ‘flutter_gpu’ 패키지를 추가함으로써 Flutter GPU를 사용할 수 있습니다.
앞으로 몇 달 동안 더 많은 기능과 안정성이 개선될 예정이며, ‘flutter_scene’과 같은 상위 렌더링 라이브러리들이 이러한 고급 기능의 사용을 더 쉽게 만들어 줄 것입니다.
Flutter GPU에 대해 더 깊이 알아보고, 이를 프로젝트에 어떻게 활용할 수 있는지 궁금하시다면, Flutter GPU 블로그 포스트를 확인해 보세요.
게임 개발이든 복잡한 그래픽 작업이든, Flutter의 새로운 GPU 기능은 여러분의 제품에 강력한 선택이 될 것입니다.
Web
Multi-view embedding
Flutter 웹 애플리케이션은 이제 멀티뷰 임베딩을 활용할 수 있어, 여러 HTML 요소에 동시에 콘텐츠를 렌더링할 수 있습니다. ‘embedded mode’ 또는 ‘multi-view,’로 알려진 이 기능은 기존 웹 애플리케이션에 Flutter 뷰를 통합하는 데 유연성을 제공합니다.
멀티뷰 모드에서는 Flutter 웹 애플리케이션이 실행 시 즉시 렌더링되지 않습니다. 대신, 호스트 애플리케이션이 ‘addView’ 메서드를 사용해 첫 번째 ‘View’를 추가할 때까지 대기합니다. 호스트 애플리케이션은 이러한 뷰를 동적으로 추가하거나 제거할 수 있으며, Flutter는 이에 따라 위젯을 조정합니다.
멀티뷰 모드를 활성화하려면 flutter_bootstrap.js파일 내의 initializeEngine메서드에서 multiViewEnabled: true로 설정하면 됩니다. 이후 JavaScript에서 뷰를 관리할 수 있으며, 이를 지정된 HTML 요소에 추가하거나 필요에 따라 제거할 수 있습니다. 각 뷰의 추가 및 제거는 Flutter 내에서 업데이트를 발생시키며, 이를 통해 동적인 콘텐츠 렌더링이 가능합니다.
이 기능은 여러 개의 독립적인 Flutter 뷰가 필요한 복잡한 웹 애플리케이션에 Flutter를 통합하는 데 특히 유용합니다.
또한, 각 뷰에 대한 맞춤 초기화 데이터를 지원하여, 개인화된 구성과 상호작용이 풍부한 경험을 제공합니다.
멀티뷰 임베딩을 Flutter 웹 애플리케이션에 구현하는 방법에 대해 더 자세히 알아보려면, 상세한 문서를 확인해 보세요.
수익화
비디오 광고 수익화 지원
Flutter 모바일 앱에서 인스트림 비디오 광고 수익화를 지원하는 새로운 Interactive Media Ads(IMA) 플러그인을 출시했습니다.
이 새로운 IMA 플러그인은 주로 디스플레이 광고 형식을 지원하는 기존 Google Mobile Ads(GMA) 플러그인에 더해, Flutter 앱에 새로운 광고 수익화 기회를 제공합니다.
인스트림 비디오 광고는 일반적으로 사용자에게 비디오 콘텐츠 재생 전에(preroll), 재생 중에(midroll), 또는 재생 후에(postroll) 비디오 플레이어에서 보여집니다.
일부 인스트림 비디오 광고는 건너뛸 수 있는 옵션도 제공합니다.
Flutter IMA의 이점:
- Flutter 앱에서 비디오 플레이어 콘텐츠를 원활하게 수익화할 수 있습니다. 예를 들어, 앱 사용자가 비디오 콘텐츠를 재생하려고 클릭할 때, Flutter IMA 플러그인을 사용하여 비디오 콘텐츠가 시작되기 전에 15초짜리 광고를 먼저 보여줄 수 있습니다.
- 프리미엄 Google 광고 수요에 접근하고, IAB VAST와 같은 업계 표준을 준수하는 네이티브 IMA SDK의 동일한 혜택을 누릴 수 있습니다.
초기 출시 버전은 현재 Android와 iOS 플랫폼에서 프리롤 비디오 광고를 지원합니다.
Midroll 광고 지원은 곧 제공될 예정입니다. Flutter 앱의 비디오 콘텐츠에서 새로운 IMA 플러그인을 사용해 보시길 권장합니다.
문제가 있거나 우려 사항이 있으시면 GitHub에서 알려주세요.
Resources: Plugin guide, Sample App, Git Repository
iOS
Swift Package Manger 초기 지원
현재 Flutter는 CocoaPods를 사용하여 iOS 또는 macOS의 네이티브 종속성을 관리하고 있습니다.
Flutter 3.24는 Swift Package Manager에 대한 초기 지원을 추가했습니다.
이를 통해 다음과 같은 여러 가지 이점이 제공됩니다:
- Swift 패키지 생태계에 접근할 수 있습니다. Flutter 플러그인은 점점 확장되는 Swift 패키지 생태계를 활용할 수 있게 됩니다!
- Flutter 설치가 간소화됩니다. Swift Package Manager는 Xcode에 포함되어 있으므로, 앞으로는 Flutter를 Apple 플랫폼에서 사용하기 위해 Ruby와 CocoaPods를 설치할 필요가 없게 될 것입니다.
플러그인 작성자들께 Swift Package Manager에 대한 지원을 플러그인에 추가해 보시고, 경험에 대한 피드백을 제공해 주시기를 권장합니다.
Flutter의 Swift Package Manager 지원에 대한 피드백이 있으시면, 이슈를 등록해 주세요.
Ecosystem
Shared Preferences plugin 업데이트
우리는 shared_preferences 플러그인에 두 가지 새로운 API인 SharedPreferencesAsync와 SharedPreferencesWithCache를 추가했습니다. 가장 큰 변화는 Android 구현이 기존의 Shared Preferences 대신 Preferences DataStore를 사용한다는 점입니다.
SharedPreferencesAsync는 플랫폼에 직접 호출하여 장치에 저장된 최신 설정을 가져올 수 있게 해주는 API입니다. 이 과정은 비동기적이며, 캐시된 버전을 사용하는 것보다 약간 느릴 수 있지만, 다른 시스템이나 isolates에 의해 업데이트될 수 있는 설정을 다룰 때 유용합니다.
이런 경우 캐시가 오래될 수 있기 때문입니다.
SharedPreferencesWithCache는 SharedPreferencesAsync 위에 구축된 API로, 사용자가 로컬에 캐시된 설정을 동기적으로 접근할 수 있게 해줍니다. 이는 이전 API와 유사하지만, 이제는 서로 다른 매개변수로 여러 번 인스턴스화할 수 있습니다.
이 새로운 API들은 향후 현재의 SharedPreferences API를 대체할 목적으로 도입되었습니다.
다만, 이 플러그인은 생태계에서 가장 많이 사용되는 플러그인 중 하나이기 때문에, 생태계가 새로운 API로 전환하는 데 시간이 걸릴 것임을 잘 알고 있습니다.
Flutter and Dart Package Ecosystem Summit Europe 2024
Fluttercon Europe 2024의 일환으로, 첫 번째 대면 Flutter 및 Dart 패키지 생태계 회담이 개최되었습니다.
이는 2023년 8월에 개최된 첫 번째 가상 회담의 연장선에 있습니다. 여기에서 토론 세션의 주요 내용을 요약해 보았습니다.
다음 회담이 2024년 9월 20일 뉴욕시에서 열리는 Fluttercon USA에서 개최될 예정이라는 소식을 전하게 되어 기쁩니다!
만약 당신이 패키지 작성자나 기여자이고, Fluttercon USA 2024에 참석할 계획이라면, 회담에 참가할 자리를 확보하기 위해 등록하세요.
이번 회담에서는 패키지 작성자와 유지 관리자들이 모여 비공식 회의 형식으로 다음과 같은 주제에 대해 논의했습니다:
- 세션 1 — Native Interop의 과거, 현재, 그리고 미래
- 세션 2 — 지속 가능한 패키지 유지 관리 모델
- 세션 3 — 패키지 생태계 단절 문제 해결
우리는 회담이 특히 더 넓은 Flutter와 Dart 행사와 함께 진행될 때, 커뮤니티 내에서 중요한 도전 과제들을 논의하고 해결책을 모색할 수 있는 귀중한 플랫폼이 된다고 믿습니다.
앞으로도 커뮤니티와 협력하여 이러한 회담을 더 많이 개최할 수 있기를 기대하고 있습니다.
DevTools 와 IDEs
이번 릴리스에는 Flutter DevTools 도구 모음에 흥미로운 개선 사항들이 포함되었습니다.
만약 Flutter 앱이 예상보다 더 많은 위젯을 생성하고 있는지 궁금해한 적이 있다면, DevTools 성능 도구의 새로운 기능이 도움이 될 수 있습니다.
새로운 Rebuild Stats 기능을 사용하면, 앱 내에서 특정 위젯이 몇 번이나 빌드되었는지, 심지어 특정 Flutter 프레임에서 빌드된 횟수까지도 확인할 수 있습니다.
네트워크 프로파일러와 Flutter Deep Links 도구 등에서 세부적인 개선과 중요한 버그 수정을 완료했으며, IDE 내에서 DevTools를 사용할 때 더 나은 경험을 제공하기 위해 전반적인 개선도 이루어졌습니다. 참고로, 모든 DevTools 도구를 IDE 안에서 직접 사용할 수 있다는 사실을 알고 계셨나요?
이번 릴리스에서는 VS Code의 Flutter 사이드바가 개선되어 원하는 도구에 더 쉽게 접근할 수 있게 되었습니다.
개선된 사이드바를 사용하려면 VS Code와 Flutter 및 Dart 확장 기능을 최신 버전으로 업그레이드하세요.
이번 릴리스에서는 DevTools 확장 프레임워크에 대한 주요 개선 사항도 포함되었습니다.
이제 Dart 또는 Flutter 테스트를 디버깅할 때뿐만 아니라, 디버깅 중이 아니고 단순히 IDE에서 코드를 작성할 때도 DevTools 확장 도구(패키지 종속성 중 하나에서 제공하는 도구)를 사용할 수 있습니다.
따라서 이러한 사용자 여정을 위해 도구를 사용하거나 새로 만들고자 했다면, 이제 그게 가능해졌습니다.
Flutter 3.24에 포함된 모든 업데이트에 대해 더 자세히 알아보려면, DevTools 2.35.0, 2.36.0, 그리고 2.37.2의 릴리스 노트를 확인해 보세요.
주요 변경 사항 및 사용 중단된 기능
이번 릴리스에서는 Navigator의 페이지 API 변경, PopScope의 제네릭 타입 수정, Flutter 웹의 기본 렌더러 변경 등 중대한 변경 사항이 포함되었으며, 몇 가지 새로운 사용 중단(deprecations)도 도입되었습니다.
전체 마이그레이션 가이드는 주요 변경 사항 페이지에서 확인하실 수 있습니다.
항상 커뮤니티의 테스트 기여에 감사드립니다. 덕분에 이러한 변경 사항을 조기에 발견할 수 있었습니다. 더 자세한 내용은 Flutter의 주요 변경 사항 정책을 참고하세요.
결론
Flutter의 성공 중심에는 바로 여러분, 우리의 놀라운 커뮤니티가 있습니다. 이번 릴리스는 여러분의 수많은 기여와 변함없는 열정이 없었다면 가능하지 않았을 것입니다.
진심으로 감사드립니다.
이번 릴리스에서 이루어진 성과에 대해 더 자세히 알고 싶다면, 릴리스 노트와 변경 로그를 확인하여 Flutter 3.24의 모든 추가 사항을 살펴보세요.
Flutter 3.24와 Dart 3.5는 이제 Stable채널에서 사용할 수 있습니다. 최신 Flutter 여정을 시작하려면 flutter upgrade 명령어만 실행하시면 됩니다.
여러분이 만들어낼 멋진 결과들을 기대하고 있습니다!
