[ 플러터 2.5 업데이트 ] 릴리즈 노트 간단 정리 flutter 2.5 release version update.

안녕하세요 개발하는남자 개남입니다. 오늘의 포스팅 할 내용은 플러터 2.5 버전에 관한 내용입니다. 다행스럽기도 하고 귀찮기도 한 버전 업데이트 관한 소식을 정리해보려고 합니다. 우선 버전 업데이트를 하게 되면 기존에 진행 중에 있던 프로젝트들의 버전을 올릴지 말지에 대한 고민과 버전을 업데이트했을 때의 이슈를 대비해 충분한 테스트가 필요하게 되어 개발 리소스가 추가적으로 발생하는 점에 대해서는 

버전 업데이트는 귀찮은 일이 아닐 수 없습니다. 

하지만 동시에 다행스럽기도 한데요 이유는 구글이 그래도 플러터 프로젝트를 꾸준히 관리 하고 업데이트를 하고 있다는 것이기 때문에 갑자기 서비스가 종료될 걱정은 하지 않아도 된다는 점에서 다행스러움을 느끼게 됩니다. 6개월 전 플러터 2.0으로 업데이트되는 메이저 버전 업데이트 소식 이후 꾸준히 패치 버전 및 마이너 버전이 업데이트되어 왔는데 최근 2.5 업데이트가 되면서 관심 있는 부분이 업데이트되어 어떤 부분인지 같이 살펴보려고 이렇게 포스트를 작성합니다.

근데??? 전 여전히 2.0.6 버전을 사용하고 있답니다. ㅎㅎㅎ (버전 업데이트에 안좋은 기억이 있기 때문에 쉽게 업데이트를 하지 않는 편입니다.)

 

---

오늘 이 포스팅은 아래의 What's new in Flutter 2.5 포스팅을 참조 하였습니다.

원문을 확인하시길 원하시는 분은 아래 링크를 통해 디테일한 것을 확인하시면 될 것 같습니다 :) 

What’s new in Flutter 2.5

---

플러터 2.5 업데이트 항목 

 

• Performance : iOS shader warmup, async tasks , GC & message passing
• Dart 2.14: formatting, language features, pub & listing out-of-the-box
• Framework: Android full screen, Material You & text editing shortcuts
• Plugins : camera, image picker & plus plugins
• Flutter DevTools : performance , Widget inspector & polish
• IntelliJ/Android Studio: intergration tests, test coverage, and icon previews
• Tools: exceptions, new app template & Pigeon 1.0

 

위 사항이 업데이트된 내용이라고 보시면 됩니다

이제 하나하나 간단하게 살펴보고 제가 관심이 있는 항목이 어떤 부분인지 정리해 보겠습니다.

업데이트 항목 나열 순서가 아무래도 flutter 개발 팀이 중요하다고 생각하는 순서로 나열하고 정리하지 않았을까?라고 생각됩니다 

제가 이번 업데이트에 관심 있는 부분이 상위 2가지 항목입니다. 

• Performance : iOS shader warmup, async tasks , GC & message passing
• Dart 2.14: formatting, language features, pub & listing out-of-the-box

가장 먼저 두 가지를 살펴보고 나머지 부분은 간단하게 살펴보도록 하겠습니다. 

 

---

Performance : iOS shader warmup, async tasks , GC & message passing 

쉽게 정리하면 성능 향상을 시켰다는 것입니다.

포스팅에서 언급하기로는 이전 버전까지는 네트워크/ 파일 시스템/ 플러그인 등의 사용 중 비동기 이벤트를 처리하면서 

버벅거림이 있었고 때로는 애니메이션이 중단되는 상황도 있었지만 이번 업데이트로 해당 문제를 개선하였다고 말합니다. 

전후 비동기 이벤트 결과 처리로 인한 프레임 지연

 

차트만 봐도 알 수 있듯 before / After 가 비약적으로 성능 향상을 보여줍니다.

 

또한 GC 가비지 컬렉션이 불필요한 메모리를 회수하면서 앱 내에서 알아서 최적화를 시켜주는 그런 녀석이 있는데 

GC 가 이전에는 너무 많은 GC가 발생하면 메모리 제한된 장치에서 메모리 부족 상태가 발생하여 버벅거리는 현상이 있었다고 합니다. 

업데이트 버전에서는 메모리 회수를 아주 빠르게 회수한다고 하네요 

 

사용하지 않는 대용량 이미지 메모리를 적극적으로 회수하기 위한 수정 사항을 추가하기 전과 후의 GC

예를 들어서 20초짜리 GIF를 단순히 돌리는 데에 400 개가 넘는 GC 가 돌게 되는데 이제는 4개만 필요하게 되었다고 합니다.

사실 이 부분에서 엄청난 공감을 하는 것이 프로젝트에서 gif 5초짜리? 를 돌려야 할 때가 있어서 무심코 사용했다가 이상하게 메모리 사용이 해당 페이지에서 많이 사용되는 현상을 경험한 적이 있었습니다. 무엇이 문제인지 디버그를 통해서 GIF라는 사실을 알게 되었던 기억이 있는데 2.5 버전 업데이트를 하게 되면 해당 문제도 해결되겠더라고요 ~ 이제 GIF도 안심하게 이용할 수 있을 것 같네요 :) 

 

 

. 그리고 flutter는 dart 언어로 개발되고 native 인 java / kotlin으로 또는 iOS Swift/Objective-C로 메시지를 전송할 일이 많을 텐데

그런 과정에서 발생하는 지연시간이 50%나 감소되었다고 합니다

iOS 메시지 대기 시간 전후

 

---

Dart 2.14: formatting, language features, pub & listing out-of-the-box

이전 메인 업데이트였던 플러터 2.0 버전부터 dart 버전을 2.12 버전을 사용하면서 null-safety가 적용되었었습니다.

플러터 2.5 버전에서는 dart 버전이 2.14 버전까지 올라왔습니다. 이번 버전에서 가장 눈에 들어오는 것은 lint 부분입니다. 지난 버전까지 별도로 lint를 세팅하기 위해서는 추가적인 작업르 해야지만 설정을 할 수 있었습니다. 그 말은 사용의 유무는 옵션이고 개발자의 선택에 의존되게 되고 또한 코딩 규칙 등에 익숙하지 않은 분들에 경우는 절대 사용하지 않을 옵션일 수 있습니다. 

하지만 지난번 lint 관련 포스팅에서 언급했듯이 코딩 규칙은 일종의 개발 문화와도 연관이 있다고 생각되고 그리고 동일한 규칙을 통해 코드 리뷰에도 좀 더 친숙하게 볼 수 있을 뿐 아니라 추가적으로 발생될 수 있는 문제를 미리 대응할 수 있도록 해주는 도움이 되는 기능이라고 생각됩니다. 혹시 lint 관련 포스팅을 아직 보시지 않았다면 다음 링크를 통해 확인해보시면 도움이 되실 것입니다. 

 

[ Flutter : 플러터 ] Linting 설정으로, 흔하게 실수할 수 있는 것을 build 전 방지하기.

아무튼 이번 2.5 버전부터는 dart 2.14가 되면서 기본적으로 설정될 수 있도록 설계되었다는 것입니다.

물론 기본적으로 설정되어 있지만 사용을 희망하지 않는 분들은 해당 내용을 제거할 수는 있습니다 :)

 

 

---

Framework: Android full screen, Material You & text editing shortcuts

2.5 버전 업데이트되면서 몇 가지 프레임워크에 수정 및 개선 사항이 포함되었다고 합니다. 안드로이드에 전체 화면 모드가 추가되었습니다. 이 부분은 안드로이드의 경우 하단에 있는 안드로이드 내비게이션 바? 부분을 변경할 수있는 기능 인것 같습니다. 보통 안드로이드 하단에 뒤로가기 홈으로 가기 사용중인 앱 확인 버튼 이렇게 3가지 버튼이 하단에 배치되는 형태가 있는데 그부분을 변경 할 수 있어 보입니다. 이 부분은 사실 전 전혀 사용하지 않았던 부분이라.. 크게 와닿지는 않았습니다. 

새로운 Android 엣지 투 엣지 모드: 일반 모드(왼쪽), 엣지 투 엣지 모드(중앙), 맞춤형 SystemUIOverlayStyle이 있는 엣지 투 엣지(오른쪽)

 

floatingactionbutton의 크기 및 테마를 지원한다고 합니다.

이 부분은 사실 크기 조절 하기 위해서 별도의 floatingActionButton 같은 Widget을 만들어 커스텀하게 사용했었는데 기본 옵션에서 바로 크기 조절 등 스타일을 바꿀 수 있나 보네요 한번 테스트해볼 만할 것 같습니다. 

 

다음은 스크롤 메트릭스 알림이라는 기능인데요 아무래도 웹을 위한 기능이 아닌가 생각됩니다. 물론 앱에서도 되면 좋긴 하겠지만 앱에서는 별로 익숙하지 않은 기능이기도 합니다. 이미지처럼 우측에 스크롤바를 보여줌으로 사용자에게 어느 정도의 스크롤이 존재하는지를 보여주는 기능이라고 볼 수 있습니다. 

 

 

다음은 SnackBar 관련 내용입니다.

이 부분은 너무 반가운 기능이기도 합니다. 왜냐하면 SnackBar 옵션이 하단밖에 없었기 때문입니다. 

보통은 상단에서 띄우는데 왜 하단에만 있었는지… 아무튼 이 기능을 통해 이제는 상단에 알림을 띄울 수 있게 되었군요 ^^ 

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('The MaterialBanner is below'),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Show MaterialBanner'),
            onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
              MaterialBanner(
                content: const Text('Hello, I am a Material Banner'),
                leading: const Icon(Icons.info),
                backgroundColor: Colors.yellow,
                actions: [
                  TextButton(
                    child: const Text('Dismiss'),
                    onPressed: () => ScaffoldMessenger.of(context)
                        .hideCurrentMaterialBanner(),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

 

 

---

Plugins : camera, image picker & plus plugins

이 부분은 별도 설명이 따로 없고 어떤 내용인지만 설명하여 저도 그냥 나열하도록 하겠습니다

그리고 앱에서 카메라 제어할 일이 많이 있지 않았어서 관심 있는 부분도 아니였습니다. 

하지만 카메라 어플을 개발하실 분이라면 도움이 될 만한 요소가 아닐까 생각되네요 

 

• 3795 [카메라] android-rework 파트 1: Android 카메라 기능을 지원하는 기본 클래스
• 3796 [카메라] android-rework part 2: Android 자동 초점 기능
• 3797 [카메라] android-rework part 3: Android 노출 관련 기능
• 3798 [카메라] android-rework part 4: Android 플래시 및 확대/축소 기능
• 3799 [카메라] android-rework part 5: Android FPS 범위, 해상도 및 센서 방향 기능
• 4039 [카메라] android-rework part 6: Android 노출 및 초점 기능
• 4052 [카메라] android-rework part 7: Android 노이즈 감소 기능
• 4054 [카메라] android-rework part 8: 최종 구현을 위한 지원 모듈
• 4010 [카메라] iOS에서 평면 장치 방향을 트리거하지 않음
• 4158 [카메라] iOS에서 초점 및 노출 포인트 설정을 위한 좌표 회전 수정
• 4197 [카메라] 방향 변경 시 카메라 미리보기가 항상 다시 생성되지 않는 문제 수정
• 3992 [카메라] 지원되지 않는 FocusMode 설정 시 충돌 방지
• 4151 [카메라] camera_web 패키지 소개
• 3898 [image_picker] 이미지 선택 도구 수정 카메라 장치
• 3956 [image_picker] 새로운 Google Play 저장 요구 사항을 준수하기 위해 Android의 내부 캐시로 카메라 캡처 저장 위치를 ​​변경합니다.
• 4001 [image_picker] 카메라 권한에 대한 중복 요청을 제거했습니다.
• 4019 [image_picker] 카메라가 소스일 때 회전 수정

 

---

Flutter DevTools : performance , Widget inspector & polish

Flutter DevTools의 기능들이 여럿 개선되었습니다.

셰이더 컴파일로 인해 손실된 프레임을 감지하는 DevTools

 

Flutter 엔진은 이제 타임라인에서 셰이더 컴파일 이벤트도 식별합니다. 실시간으로 확인하면서 프레임 드롭되는 구간이 어디인지 확인하여 대응이 가능하다고 하네요. 사실 이 부분은 많이 사용해보지 않아서 정확히 어떻게 확인하는 것인지는 잘 모르겠으나 성능적인 이슈가 확인되면 DevTools를 통해 체크하면서 대응하면 될 것 같습니다. 

 

그 외에도 Flutter Inspector를 핀란드의 크리에이티브 기술 에이전시인 Codemate 와 협력하여 몇 가지 업데이트가 되었다고 합니다.

개선된 기능 

• 디버그 토글 버튼의 ​​기능을 더 잘 전달합니다.
• 관심 위젯을 더 쉽게 스캔하고 찾을 수 있습니다.
• 레이아웃 탐색기와 위젯 트리의 색 구성표 정렬

Widget inspector의 경우는 기존에도 어떻게 widget 이 정리되어있는지 구조는 시각적으로 볼 수 있었는데요. 

그 밖에도 원하는 위젯을 탐색이 원활해진 것으로 보입니다. 이 부분은 확인해보면 좋을 것 같네요 :) 

 

 

---

IntelliJ/Android Studio: intergration tests, test coverage, and icon previews

안드로이드 스튜디오/IntelliJ를 사용하시는 분들에게 도움이 되는 업데이트 사항인 것 같습니다.

아쉽게도 전 VSCode 사용자다 보니 해당 업데이트 내용에 대해서는 관심이 없네요 ㅎㅎ 

관심이 있으신 분들은 링크를 통해 확인해주세요 :) 

 

하단부에 소개되는 VSCode 개선 내용도 다루고 있는데요 

이번 릴리스에서는 Flutter용 Visual Studio Code 플러그인이 개선되어 "Dart: Add Dependency" 및 "Dart: Add Dev Dependency"라는 두 가지 새로운 명령이 추가되었다고 합니다. 

근데.. 이 부분은 사실 편하면 편하고 익숙하지 않은 분들에게는 굳이 사용을 해야 하나?라고 생각이 되는 업데이트라고 생각합니다 

그리고 이번 Dart 2.14 버전으로 업데이트되면서 lint가 적용되었다고 위에서 언급한 부분이 있는데요. 해당 문법적 오류?를 단축키? 단축 액션으로 수정할 수 있는 것으로 보입니다.

편리하다면 정말 편리할 것 같은데 이 부분은 뭐가 문제인지 인지를 하고 사용하는 것과 뭐가 문제인지 모르고 사용하는 것은 차이가 크다고 생각합니다. 문법적 오류? 코딩 스타일의 문제를 고치려면 문제 되는 부분을 하나하나 확인하면서 직접 수정하는 편이 전 더 좋다고 생각합니다. 왜냐하면 고치면서 이것을 내가 또 잘못 사용했구나. 하고 인지하고 고치는 것이 더욱 기억이 오래 남기 때문입니다. 

 

이 기능은 편리할 수 있지만 충분히 인지하고 있는 상황에서 사용하면 좋을 것 같다는 생각이 되네요 

 

 

---

Tools: exceptions, new app template & Pigeon 1.0

마지막 업데이트 내용입니다.

예외 처리에 대해서 좀 더 디테일하게? 탐색하여 알려준다고 합니다. 사실 정확히 뭔 내용인지 사용해보면서 경험을 소개드리는 것이 좋을 것 같은데요 지금까지 디버그 모드로 돌리면서 불편함? 은 크게 느끼지 못했어서 어떻게 개선된 부분이 와닿을지는 모르겠네요. 

해당 문서에서 언급한 내용으로 정리하자면 

이 릴리스에서 디버거는 이제 이전에 프레임워크( #17007 )에서 포착한 처리되지 않은 예외에서 올바르게 중단됩니다. 이렇게 하면 디버거가 프레임워크 깊숙이 있는 임의의 줄을 가리키는 대신 코드에서 던지는 줄을 직접 가리킬 수 있으므로 디버깅 경험이 향상됩니다.

 

플러터가 나온 뒤로 플러터 프로젝트를 생성하면 제공되는 Counting 되는 템플릿이 지금까지 계속 유지되고 있는데요 이번 버전에서는 새로운 템플릿이 제공되네요 물론 명령어에 옵션을 추가해야 만들 수 있습니다 명령어는 아래와 같습니다. 

$ flutter create -t skeleton my_app

skeleton이라는 템플릿에서 기대되는 기능들에 대해서는 아래 내용을 참고해주세요.

• 용도는 ChangeNotifier여러 위젯을 조정합니다
• arb 파일을 사용하여 기본적으로 현지화를 생성합니다.
• 예시 이미지를 포함하고 이미지 자산을 위한 1x, 2x 및 3x 폴더를 설정합니다.
• "기능 우선" 폴더 구성 사용
• 공유 기본 설정 지원
• 밝고 어두운 테마 지원
• 여러 페이지 간 탐색 지원

 

---

지금까지 플러터 2.5 업데이트 내용을 정리해보았습니다. 

2.0.6 버전을 사용하는 저로써 과연 2.5로 업데이트를 하는 게 좋을지는 좀 더 지켜보고 판단하려고 합니다. 퍼포먼스 부분측면에서 업데이트 하면 좋을 것 같긴하지만, 업데이트로 인한 소스 충돌이나 서비스 안정성인 면에서 좀더 숙고해서 반영해보려고 합니다. 

하지만 집에서 공부할 때에는 2.5로 업데이트를 진행하고 공부를 할 예정이라 추후에 2.5로 했을 때 좋은 점에 대해서 다시 한번 포스팅을 남겨 보도록 하겠습니다. 

 

영상으로 플러터 코딩 관련 공부를 원하시는 분들은 유튜브에서 개발하는남자를 검색하시거나 링크를 클릭하셔서 확인해보시고 

도움이 될 것 같다 싶으시면? 구독 좋아요 알림 설정 부탁드려요 :)