패스트캠퍼스 환급챌린지 27일차 미션(2월 27일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 이전 챕터에서 만들었던 토스 클론 앱에 Flutter에서 제공하는 Animation을 적용하는 실습을 진행했다.

 

일단 전통적인 Animation 자체는 정적인 이미지들을 매우 잦은 빈도로 연이어 보여주면서 구현되는데, Flutter는 유저의 인터랙션과 Flutter 앱의 Build 사이에 Animation Layer를 도입하면서 애니메이션에 대한 최적화가 되어있다.

Build 하위에도 Layout, Paint, Composition, Rasterize라는 Layer가 존재한다.

무튼 Animation Layer에서 Flutter는 Animation을 이루는 단일의 장면을 구현할때 tic()이라는 함수를 호출하게 된다.

 

UI에 덧씌워서 유저의 인터랙션에 반응하는 UI를 만들 때 Code based animation을, 단순하게 화면에서 재생되는 듯한 애니메이션을 구현할 때는 별도의 UI 드로잉 툴을 활용해서 제작된 애니메이션을 활용하는 Drawing based animation을 활용할 수 있다.

 

Drawing based animation에서 유명한 패키지는 Rive, Lottie가 있고, Code based animation은 커스텀 패키지를 활용하거나, Implicit Animation, Custom Implicit Animation, Explicit Animation을 활용할 수 있다.

 

이후에 flutter_animate라는 패키지를 활용해서 특정 위젯에 Code based animation을 적용하는 실습을 진행하였는데, 확실히 빌더 패턴으로 명시적인 메서드 체이닝을 통해 순차적으로 애니메이션이 보여지도록 코딩할 수 있어서 사용성이 매우 좋았던 것 같다.

 

추가로 강사님이 직접 만드신 애니메이션 패키지인 live_background 패키지도 살짝 구경할 수 있었는데, 여러 옵션을 지정하면서 외형을 세밀하게 조절할 수 있는 것이 매력적이었다. LiveBackgroundWidget()을 추가하면 아래와 같은 배경화면을 확인할 수 있다.

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://bit.ly/48sS29N