안드로이드 스튜디오에서 고퀄리티 에니메이션 간단하게 삽입하기 -Lottie-

안녕하세요. thinkingfactory입니다.

안드로이드 스튜디오에서 에니메이팅 작업 없이 고퀄리티의 에니메이션을 구현하는 방법을 소개해드립니다.

최근 안드로이드 어플리케이션은 완전히 레드오션으로 향해 가고있습니다. 그 이유는 다음과 같습니다.

1. 개발 접근성은 높아지고있다.
2. 휴대폰에 설치하는 어플의 수는 한정적이다.

따라서 이런 실정을 해결하기 위해 승부를 보는 것이 UI/UX입니다. 사용자가 부담이 없고 최대한의 편의를 느껴야 어플리케이션 경쟁에서 살아남을 수 있기 때문입니다.

그런 이유에서 고퀄리티 에니메이션 구현은 어플에 경쟁력을 주고, 서비스에 대해서 QA(Quality Assurance, 품질 보증)에 대한 부분적인 피력이 가능합니다. 예를 들어, 어플리케이션에 버튼 배치만 되어 있고 피드백이나 인터렉션을 하지 않도록 제작된다면 사용자는 딱딱한 벽이랑 얘기하는 느낌이 들겠죠?

어느정도 솔루션을 줄 수 있는 고퀄리티 에니메이션을 구현 방법에 대해서 바로 살펴보겠습니다.

1. 에니메이션 이미지 파일을 다운받는다.

에어비엔비 회사에서 고퀄리티 에니메이션을 정말 방대하게 제공하고있습니다. 플랫폼 회사 답게 에니메이션 마켓을 정말 잘 구현해놓았는데요, 다음 링크를 통해 접속하시기 바랍니다.

Marketplace - Premium Lottie animations designed for Web & Mobile

마켓플레이스 페이지에서 원하는 에니메이션 클릭

에니메이션의 Download 클릭

이렇게하면 오픈 리소스 에니메이션을 다운받게 됩니다. 혹시나 원하는 에니메이션이 있다면 서치를 통해 찾을 수 있습니다.

2. 에니메이션 이미지를 main > assets 디렉토리에 삽입시켜준다.

app > src > main > assets

삽입된 JSON들은 이제 안드로이드 스튜디오에서 사용할 수 있습니다. 간단한 코드를 통해 구현해봅시다.

3. 로티 라이브러리를 추가한다.

implementation lottie

implementation 'com.airbnb.android:lottie:3.0.7'

 

4. 로티 레이아웃(XML)을 삽입한다.

com.airbnb.lottie.LottieAnimationView

       <com.airbnb.lottie.LottieAnimationView
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        app:lottie_fileName="loading_material_speedup.json" //Set filename
        app:lottie_autoPlay="true" //Set AutoPlay or not
        app:lottie_repeatCount="2" //RepeatCount Attribute
        app:lottie_loop="false" //Loop Option
        app:lottie_speed="1.8" //Default Speed : 1.0
        />

신경써야할 부분은 주석처리를 해놓았습니다. 파일이름을 삽입한 에니메이션의 json 파일이름으로 입력하시면 됩니다.

이 때 파일은 2)에서 언급한 디렉토리인 assets 폴더에 있어야 합니다.

이렇게 작성하면 앱을 실행 시에 자동으로 에니메이션이 작동하는데, 레이아웃을 삽입한 뒤에 코드로 설정하고 싶다 하시는 분들은 다음 코드를 확인하시면 됩니다.

        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
        animationView.setAnimation("animation.json");
        animationView.loop(true);
        animationView.playAnimation(); //Play the animation

저는 에니메이션이 사용자 경험에 있어서 중요하다고 생각하는 편이기때문에 에니메이션에 대해서 다루는 법을 작성했습니다.

다음 강의는 코틀린으로 개발하기편을 제작하도록 하겠습니다.

읽어주셔서 감사합니다.