고급

Performance와 Optimization

렌더링, 앱 크기, 웹 성능, isolates, profiling을 점검합니다.

핵심 개념

Performance와 Optimization 주요 항목

측정 우선

성능 최적화는 먼저 측정하고 병목을 찾은 뒤 진행해야 합니다.

언제 쓰나: Performance profiling은 프레임 렌더링과 느린 작업을 찾는 데 도움을 줍니다.

Flutter에서: 웹 성능은 별도의 profiling 문서와 배포 환경을 함께 확인해야 합니다.

flutter run
# DevTools에서 Performance와 Inspector를 확인합니다.

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter run
Launching lib/main.dart...
Flutter DevTools available.')
      ],
    )
    ],
  ),
)

대표 최적화

변하지 않는 위젯에는 const를 사용합니다.

언제 쓰나: 긴 목록은 builder 생성자와 적절한 캐싱 전략을 사용합니다.

Flutter에서: 무거운 계산은 isolate나 백그라운드 처리로 분리할 수 있습니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('대표 최적화', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('변하지 않는 위젯에는 const를 사용합니다.'),
      ],
    ),
  ),
)

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '대표 최적화',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    )
    ],
  ),
)

확장 개념

성능 점검 순서

먼저 DevTools로 프레임 시간과 병목 위치를 측정합니다.
긴 목록은 ListView.builder처럼 필요한 항목만 만드는 구조를 사용합니다.
이미지 크기, 불필요한 rebuild, 과도한 레이아웃 계산은 자주 등장하는 성능 원인입니다.

코드

예제

ListView.builder(
  itemCount: lessons.length,
  itemBuilder: (context, index) {
    return LessonTile(lesson: lessons[index]);
  },
)

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        'Flutter layout',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        Chip(label: Text('아이콘')),
        Chip(label: Text('제목')),
        Chip(label: Text('남은 너비'))
      ],
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('긴 문서 제목도 안전하게 표시됩니다.')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

DevTools로 측정const 적용긴 목록 최적화앱 크기 확인

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Dart languageDart 문법 자체가 궁금할 때 함께 봅니다.