플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 프레임워크로, 아름답고 반응형 UI를 빠르게 구축할 수 있게 해줍니다. 이번 포스트에서는 플러터의 Lottie 패키지를 이용하여 실시간 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 라이브러리로, After Effects로 제작된 애니메이션을 모바일 앱에 쉽게 적용할 수 있도록 도와줍니다. Lottie는 JSON 형식으로 애니메이션 데이터를 저장하고, 프로젝트에 해당 JSON 파일을 추가하여 애니메이션을 적용할 수 있습니다.

플러터에서 Lottie 사용하기

플러터에서 Lottie를 사용하기 위해서는 lottie 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.1

의존성을 추가한 후, 패키지를 가져와서 Lottie 위젯을 사용할 수 있습니다. 다음은 assets/animation.json에 저장된 애니메이션을 적용하는 예시 코드입니다:

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Lottie.asset(
            'assets/animation.json',
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}

위 코드에서 Lottie.asset 메서드는 프로젝트의 assets 폴더에서 animation.json 파일을 가져와서 애니메이션을 적용합니다. width와 height 속성을 이용하여 애니메이션의 크기를 조절할 수 있습니다.

정리

이번 포스트에서는 플러터에서 Lottie 패키지를 사용하여 실시간 애니메이션 효과를 적용하는 방법을 알아보았습니다. Lottie는 After Effects로 제작된 애니메이션을 플러터 앱에 적용하기 위한 강력한 도구로, 반응형 UI를 구현하는데 유용합니다. 추가적인 정보는 Lottie 공식 문서를 참고하시기 바랍니다.