[Flutter] 앱 성능 측정 및 개선 방법

2022년 6월 1일에 작성됨

 

요즘 Flutter 보다 iOS에 집중하고 있어서 Flutter에는 손이 잘 안 가지만 예전에 작업했을 때 Performance View를 사용했던 경험을 까먹을까 봐 기록하려 합니다.

 

만약 어떤 앱을 다운로드하였는데 버벅거리고 끊기면 누구라도 그 앱을 사용하기 싫어질 것이고, 평가도 좋지 못할 것이다.

사람마다 취향이 다르고 관점도 다르기 때문에 누구한테는 좋은 앱, 누구한테는 좋지 못한 앱이 될 수 있다.

하지만 앞에서 말한 것처럼 앱 퍼포먼스가 떨어진다면 사용해서 판단하기 전에 삭제할 가능성이 높기에 우리는 어떤 앱을 만들던 앱 퍼포먼스를 확인해서 완성도를 높여야 할 필요가 있다.

Using the Performance View

Flutter에서는 앱을 실시간으로 모니터링해 주는 Performance Profiling 도구를 제공하는데 퍼포먼스를 차트로 직접 볼 수 있다. 사용법은 profile 모드로 실행하고, Dart DevTools를 켜면 된다. (실기기로는 켜지는데 시뮬레이터로는 켜지지 않는 것 같다.)

 

막대 차트에는 크게 3가지가 확인이 가능하다.

 

UI

Dart VM을 통해 Dart 코드를 실행하는 스레드입니다. 여기에는 Flutter 프레임워크뿐만 아니라, 애플리케이션의 코드도 포함됩니다. Widget Tree를 Layer Tree로 변환하고 렌더링 할 Raster 스레드로 보내는 역할을 합니다.

 

Raster

Raster 스레드는 Layer Tree를 가져와 GPU와 통신하여 UI를 업데이트합니다. Raster 스레드, 해당 데이터에 직접 액세스 할 수 없다. Skia engine이 이 스레드에서 실행됩니다.

 

Jank (slow frame)

프레임 차트에 버벅거림이 빨간색 오버레이와 함께 표시되는데, ~16ms 이상 걸리는 경우 버벅거림으로 간주된다. (60 FPS 장치에 해당), 60 FPS의 프레임 렌더링 속도를 달성하려면 각 프레임이 ~16ms 이하로 렌더링 되어야 한다. 이 이상으로 올라가면 UI가 버벅거리거나 프레임 손실이 발생할 수 있다. (렌더링 시간이 짧으면 짧을수록 좋습니다.)

 

그 밖에도 많은 정보들을 확인할 수 있는데 자세한 내용은 공식문서를 참고하자.

 

성능 개선 방법

• build 메서드는 UI가 변경되면 다시 호출될 수 있는 함수라서 build에 비용이 많이 드는 작업을 하면 안 된다.
• 위젯을 여러 개로 나누자. 위젯 안의 메서드를 나누는 건 아무런 도움이 안 되고 큰 위젯을 여러 개의 위젯으로 나눠야 한다.
• const를 도전적으로 사용하자. 위젯을 const로 선언해서 작성하면 상위 위젯이 rebuild 되어도, 변경이 없으면 다시 build가 되지 않는다.
• ListView 보다는 ListView.builder가 낫다. ListView는 모든 위젯을 빌드하는 반면 ListView.builder는 화면에서 벗어나면 메모리에 유지하지 않는다.

성능 개선 방법은 내가 이해할 수 있는 선에서 정리해 보았다. 실제로 큰 체감을 했던 방법은 const였는데, 단순히 const widget을 사용가능한 곳에 모두 추가했더니 엄청난 퍼포먼스 향상을 했었다.

Flutter Lint를 이용하면 코드 스타일을 통일할 수 있어서 (const 필수 등록 같은) 성능 개선에 충분히 영향을 미칠 수 있기에 Lint 사용을 추천한다. (사실 모든 언어에 사용을 하면 좋은..?)

 

더 자세하고 많은 성능 개선 방법은 공식문서 와 Flutter 앱 성능 측정 및 개선 방법 이 글을 확인하면 좋을 것 같다.