Flutter의 렌더링 성능 최적화 방법

Flutter의 렌더링 성능 최적화 방법

Flutter는 크로스플랫폼 UI 프레임워크로서 부드러운 UI 애니메이션과 빠른 렌더링을 제공합니다. 하지만 복잡한 UI나 과도한 애니메이션이 포함될 경우, 렌더링 속도가 느려질 수 있습니다.

이 글에서는 Flutter에서 렌더링 성능을 최적화하는 방법을 설명하고, 부드러운 사용자 경험을 제공하기 위한 핵심 기술을 소개하겠습니다.

---

1. 렌더링 성능 저하의 원인

Flutter에서 렌더링 성능이 저하되는 주요 원인은 다음과 같습니다.

• 불필요한 위젯 리빌드(Rebuild)
• 과도한 애니메이션 및 복잡한 UI 구성
• 스크롤 중 많은 위젯이 동시에 렌더링됨
• 무거운 연산을 UI 스레드에서 수행

이를 해결하기 위해 Flutter에서 제공하는 최적화 기법을 활용해야 합니다.

---

2. 렌더링 성능 최적화 방법

(1) const 키워드를 사용하여 위젯 리빌드 최소화

Flutter에서는 위젯이 변경될 때마다 build()가 호출되어 리빌드가 발생합니다. 하지만 변경되지 않는 위젯을 계속 다시 렌더링할 필요는 없습니다. const 키워드를 사용하면 불필요한 리빌드를 방지할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("렌더링 최적화")),
        body: const Center(
          child: Text("const 키워드 사용 예제"),
        ),
      ),
    );
  }
}

const 키워드를 사용하면 동일한 위젯이 불필요하게 다시 렌더링되지 않습니다.

---

(2) ListView.builder를 사용하여 스크롤 성능 개선

Flutter에서 리스트를 렌더링할 때 ListView를 직접 사용하면 모든 아이템이 한 번에 렌더링됩니다. 대신 ListView.builder를 사용하면 필요한 부분만 렌더링되어 성능이 향상됩니다.

import 'package:flutter/material.dart';

class OptimizedListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ListView.builder 사용 예제")),
      body: ListView.builder(
        itemCount: 1000, // 많은 데이터도 효율적으로 처리 가능
        itemBuilder: (context, index) {
          return ListTile(
            leading: Icon(Icons.person),
            title: Text("사용자 $index"),
          );
        },
      ),
    );
  }
}

위 코드에서는 ListView.builder를 사용하여 화면에 보이는 아이템만 렌더링하도록 최적화했습니다.

---

(3) RepaintBoundary를 사용하여 UI 리렌더링 방지

Flutter에서 애니메이션이 포함된 UI는 전체 화면을 다시 그릴 수 있습니다. 이를 방지하려면 RepaintBoundary를 사용하여 특정 위젯만 다시 그려지도록 할 수 있습니다.

import 'package:flutter/material.dart';

class RepaintBoundaryExample extends StatefulWidget {
  @override
  _RepaintBoundaryExampleState createState() => _RepaintBoundaryExampleState();
}

class _RepaintBoundaryExampleState extends State<RepaintBoundaryExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("RepaintBoundary 예제")),
      body: Center(
        child: RepaintBoundary(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Transform.rotate(
                angle: _controller.value * 6.28, // 2π 라디안 회전
                child: child,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

RepaintBoundary를 사용하면 특정 위젯만 다시 렌더링되므로 성능이 향상됩니다.

---

(4) Offstage 및 Visibility로 화면에 보이지 않는 위젯 최적화

Flutter에서 Opacity를 사용하면 보이지 않는 위젯도 계속 렌더링됩니다. 성능을 최적화하려면 Offstage 또는 Visibility를 사용하는 것이 좋습니다.

import 'package:flutter/material.dart';

class VisibilityExample extends StatefulWidget {
  @override
  _VisibilityExampleState createState() => _VisibilityExampleState();
}

class _VisibilityExampleState extends State<VisibilityExample> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Visibility 최적화 예제")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Offstage(
              offstage: !_isVisible, // 완전히 렌더링 제거
              child: Container(width: 100, height: 100, color: Colors.red),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isVisible = !_isVisible;
                });
              },
              child: Text("토글"),
            ),
          ],
        ),
      ),
    );
  }
}

Offstage를 사용하면 렌더링 성능을 최적화할 수 있습니다.

---

결론

Flutter에서 렌더링 성능을 최적화하는 방법은 다음과 같습니다.

• const 키워드를 사용하여 불필요한 리빌드 방지
• ListView.builder를 사용하여 스크롤 성능 최적화
• RepaintBoundary를 사용하여 애니메이션의 영향을 최소화
• Offstage 및 Visibility를 활용하여 보이지 않는 위젯 최적화

이제 렌더링 성능을 최적화하여 더욱 부드럽고 빠른 Flutter 앱을 개발해 보세요!