Flutter 앱 성능 최적화 — 빌드 최적화와 오버렌더링 잡아내기

Flutter 앱을 개발하다 보면 어느 순간 앱이 무거워졌다고 느끼는 때가 있다.
버튼 반응이 느려지거나, 스크롤이 버벅거리거나, 디바이스가 뜨거워지는 현상까지...
이럴 땐 단순히 기능 추가가 아니라, 성능 최적화가 필요하다.

이 글에서는 빌드 최적화와 오버렌더링 탐지를 중심으로 Flutter 성능을 올리는 팁을 정리해본다.

---

⚙️ Build 최적화 — 최소한만 다시 그리기

Flutter는 위젯 트리에서 변경이 생기면 해당 위젯과 자식 위젯을 다시 빌드한다.
하지만 이게 불필요하게 많아지면, 성능은 곤두박질친다.

✅ const 키워드 활용하기

위젯이 절대 바뀌지 않는다면 const로 선언해두면
Flutter가 이를 캐싱해 다시 빌드하지 않는다.

const Text('고정된 텍스트');  // good!
Text('바뀌지 않지만 const 안 붙임');  // bad!

✅ 불필요한 setState 피하기

StatefulWidget의 setState는 전체 위젯을 다시 빌드하기 때문에 꼭 필요한 부분에만 사용해야 한다.

setState(() {
  count++; // OK
  // theme 전체 변경, navigation 변경 등 → 분리하는 것이 더 좋음
});

---

🧱 위젯 분리 + RepaintBoundary 활용

✅ Stateless 위젯으로 분리하기

위젯을 잘게 나누면 변경이 생긴 곳만 리빌드되어 퍼포먼스를 유지할 수 있다.

✅ RepaintBoundary로 그리기 최적화

RepaintBoundary는 위젯의 렌더링 경계를 지정해서, 내부만 변경될 때 외부까지 다시 그리지 않도록 돕는다.

RepaintBoundary(
  child: HeavyWidget(),
);

무거운 위젯(예: 차트, 애니메이션, 리스트 등)에 활용하면 효과가 크다.

---

🔍 오버렌더링 탐지하기

Flutter는 디버그 모드에서 렌더링 문제를 눈으로 확인할 수 있는 강력한 툴을 제공한다.

✅ Flutter Inspector > Performance Overlay

Flutter DevTools 또는 IDE (VSCode / Android Studio)에서 활성화

• 초록색 막대가 너무 높다면, 프레임 드롭 발생 중
• 오렌지색은 GPU 처리 → 애니메이션이 많은 위젯일수록 커짐

✅ 오버렌더링 시각화

Flutter Inspector > "Highlight Repaints" 또는
MaterialApp(
  showPerformanceOverlay: true,
);

화면 깜빡임이 심하면, 불필요한 rebuild가 많은 것이다.

---

🧘 마무리하며

Flutter는 기본적으로 성능이 우수하지만, 개발자의 코드 설계에 따라 얼마든지 무거워질 수 있다.
빌드 최적화와 렌더링 탐지를 습관처럼 활용해보자.

화려한 UI도, 부드럽게 동작해야 진짜 사용자에게 전달된다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 심화과정입니다.