[Flutter] 앱 실행 시 애니메이션이 버벅일 때 : Shader Compilation Jank 사용하기

앱을 하나 만들었는데 앱 처음 실행 시 화면 이동 할 때나 어떤 애니메이션을 주었을 때 화면이 버벅인 적이 자주 있다.

 

한두번 클릭 하다보면 제법 정상적인 애니메이션이 뜨는데 왜 처음에만 그럴까 앱을 잘 못 만들었나 처음엔 그렇게 생각했다.

 

그렇게 찾은게 셰이더 컴파일이다.

 

https://docs.flutter.dev/perf/rendering/shader

Reduce shader compilation jank on mobile

 

 

 

위 사이트를 들어가보면 위와 같이 애니메이션이 실행 시 버벅이는 것을 셰이더 컴파일이 보완해준다고 한다.

 

앱이 처음 실행 할 때만 버벅거림이 있고 그 후에는 괜찮다면 Shader Compilation Jank 라고 한다.

 

위 방법을 사용하면 셰이더를 수집하여 앱 실행 시 먼저 컴파일 되어 속도를 개선한다고 한다.

 

추가로 먼저 컴파일이 되기 때문에 초기 스플래시 지속시간이 조금 길어질 수 있다고 한다.

 

기능은 딱 내가 원하던 것,, 어떻게 사용하는 걸까?

 

첫번째로 먼저 사용하려면 앱 실행 시 터미널을 사용해 실행해 준다.

 

처음 실행을 한다면 첫번째 코드를 사용해주고

flutter run --profile --cache-sksl --purge-persistent-cache

이전에 실행한 적이 있다면 아래 코드를 사용해 앱을 실행해 준다.

flutter run --profile --cache-sksl

 

다음으로 앱이 실행이 되었다면 버벅거림이 발생하는 구간을 마구마구 클릭해준다. 내가 원하는 버벅거림이 개선될 때 까지...

 

원하는 만큼 버벅거림이 줄었다면 shift + m을 명령줄에서 눌러 flutter_01.sksl.json.을 만들어 준다.

 

홈페이지엔 m을 누르라고 되어있지만 맥북을 사용해서 그런건지 윈도우도 그런지 모르겠지만 맥에선 그냥 m만 눌러선 파일캡처가 안되더라,, 다른 곳을 찾아보니 shift + m을 사용하라고 해서 해봤더니 됐다..

 

SkSL을 캡처해 flutter_01.sksl.json이 만들어졌다면 위에선 앱을 빌드해보자.

 

<android>

flutter build apk --bundle-sksl-path flutter_01.sksl.json

or

flutter build appbundle --bundle-sksl-path flutter_01.sksl.json

 

 

<ios>

 

flutter build ios --bundle-sksl-path flutter_01.sksl.json

위 명령어를 사용하여 빌드하여 테스트하면 된다.

 

++

추가로 sksl을 추가하여 apk 파일과 ipa 파일을 생성해보자.

 

<android>

flutter build apk --release --bundle-sksl-path flutter_android_01.sksl.json

or

flutter build appbundle --release --bundle-sksl-path flutter_01.sksl.json

<ios>

flutter build ipa --release --bundle-sksl-path flutter_01.sksl.json

 

위의 명령을 사용하면 안드로이드 apk파일과 ios ipa파일을 생성할 수 있다.

 

ipa는 archive파일이 생성되어 파일을 더블클릭해 ipa을 생성해주면 된다.