상품 앱을 개발할 때, 사용자를 끌어들이기 위해 애니메이션은 매우 중요한 요소입니다. 애니메이션을 통해 제품의 미적 요소를 강조하고, 사용자 경험을 향상시킬 수 있습니다. 이번 블로그 포스트에서는 플러터(Flutter)와 Lottie를 사용하여 상품 앱에 변화하는 애니메이션을 표시하는 방법에 대해 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 오픈 소스 애니메이션 라이브러리로, After Effects로 만든 애니메이션 파일을 웹, 모바일 등 다양한 플랫폼에서 사용할 수 있게 해줍니다. Lottie는 JSON 포맷으로 애니메이션을 표현하며, 애니메이션의 재생, 반복, 속도 조절 등 다양한 기능을 제공합니다.

필요한 패키지 설치하기

플러터 프로젝트에서 Lottie 애니메이션을 사용하기 위해서는 lottie 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래의 코드를 추가하여 패키지를 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0

저장 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

Lottie 애니메이션 파일 가져오기

Lottie 애니메이션 파일을 사용하기 위해서는 .json 파일 형식으로 제공되어야 합니다. Lottiefiles.com은 Lottie 애니메이션 파일을 무료로 다운로드할 수 있는 사이트 중 하나입니다. 원하는 애니메이션을 검색하고, 다운로드한 후 프로젝트에 추가합니다.

애니메이션 표시하기

Lottie 애니메이션을 플러터 앱에 표시하기 위해서는 Lottie.asset() 또는 Lottie.network() 메서드를 사용합니다. Lottie.asset()를 사용하면 로컬에 저장된 애니메이션 파일을 사용할 수 있고, Lottie.network()를 사용하면 웹에 저장된 애니메이션 파일을 사용할 수 있습니다.

먼저, 애니메이션 파일을 assets 디렉토리에 추가한 후, 아래의 코드를 통해 애니메이션을 표시할 수 있습니다.

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

class AnimationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          'assets/animation.json',  // 애니메이션 파일 경로
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

위의 코드에서 Lottie.asset()의 첫 번째 매개 변수에 애니메이션 파일의 경로를 지정합니다. 그리고 애니메이션의 크기를 조절하기 위해 width와 height를 설정할 수 있습니다.

위와 같이 코드를 작성하고 실행하면, 상품 앱에 Lottie 애니메이션을 표시할 수 있습니다.

마치며

이번 블로그 포스트에서는 플러터와 Lottie를 사용하여 상품 앱에 애니메이션을 표시하는 방법에 대해 알아보았습니다. Lottie는 다양한 애니메이션 효과를 제공하므로, 앱의 시각적인 요소를 강조하고 사용자 경험을 향상시킬 수 있습니다. 앞으로 Lottie를 활용하여 다양한 애니메이션을 구현해보세요!