디자이너들이 꼭 알아야할, Bodymovin 플러그인 설치법

부제목 : HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (2)

 

이전 글

HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (1)

1편은 Lottie 기본 사용법을 다룬 내용이 있어요. 안보신 분들은 다녀오세요! 👋🏻

 

1편에 작업을 하던 중 한 가지 문제점을 발견했다. 🧐

 

문제점

선택을 하기 전에는 default 이미지가 보여져야하는데, 사용하려는 리소스는 모션의 처음 상태가 빈 화면인 것이다. 😱

'리액션 2' 처럼 👍 가 진하게 보여져야 하는게 안보이는 상황. 누르면 당연히 모션실행이 돼서 보인다.

설명하기 쉽도록 흐리게 처리했지만 실제로는 빈 화면

 

결론, 이 다운받은 리소스의 '일부'를 직접 수정해야하는 상황이다.

에프터이펙트의 사용법은 모르지만 일단 해본다..

 

bodymovin과 After effect를 사용해 이 리소스를 수정해보자!

방법은 여러가지였으나 일단 내가 찾고 시도해본 방법은 이렇다.

 

1. 플러그인 설치

1. ZXP installer - 사용하는 OS에 맞게 다운로드 한다.

ZXP Installer

 

2. bodymovin

GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io

 

2. After effect 실행

에펙은 유료 프로그램이여서 구매나 구독이 필요하다. 무료 체험도 있다.

VFX 및 모션 그래픽 소프트웨어 | Adobe After Effects

 

3. Lottie 리소스 import 하고 수정하기

Window - Extensions - Bodymovin

1. 에펙에서 Window - Extensions - Bodymovin 을 누르면 아래와 같은 창이 뜨는데, Import Lottie Animation을 누르고 리소스 url 을 입력한다.

 

Import Lottie Animation 클릭

수정할 Lottie 리소스의 URL 입력

2. 입력 후 Import From Url을 누르면 5초 정도의 로딩 후, 리스트와 에펙 프로젝트 내에 파일이 불러온 파일이 보여진다.

3. 이제 원하는 방향으로 수정하면된다.

여기서부턴 after effect 의 사용법을 알아야 수정이 가능하지만 간단한 수정인 경우 구글링만 조금해도 쉽게 사용할 수 있다.

내가 수정하려는 리소스는 첫 화면이 비어있었기 때문에, 마지막 화면을 가장 처음에 추가하는 수준이었다.

 

4. json 파일로 저장 후 Lottie 에 업로드하기

1. 수정을 다했다면 일단 저장하자.

다시 Bodymovin을 열고 Render 버튼을 누르면 저장이 가능하다.

💡 혹시 이런 오류가 뜨나요?
"Is Preferences > Scripting & Expression > Allow Scripts to Write Files and Access Network enable?"
그렇다면 시키는대로 대로 하면 된다.
(환경설정 > 스크립팅 및 표현식 - ‘스크립트를 사용한 파일 쓰기 및 네트워크 엑세스 허용'에 체크!)

 

2. 저장 후 로띠로 돌아가서 'upload animation’ 에 json 파일을 올린다.

수정된 리소스가 올라가며 기존과 동일한 방법으로 이 리소스를 사용할 수 있다.

 

끝!

 

여기까지 이 글의 제목대로 Bodymovin과 Aftereffect를 사용한 수정방법이였다. 만약에 난 정말 에펙은 사용할 수가없다고 한다면 방법이 없는건 아니다. 편법(?)을 쓰면된다.

 

다시 문제점을 가져와 보면, 사용하려는 리소스의 처음 상태가 빈 화면인 것이기 때문에 이 모션 뒤에 background image를 깔아주면 된다.

 

기존 리소스는 체크여부 상관없이 로띠 리소스가 보여줬다면, 이런 문제점이 나타나는 경우에만 분기처리를 해주는거다.

css로 다음과 같이 처리한다.

.reaction_item.opposite label i {
    background-size: contain;
    background-image: url(이미지 경로);
}

.reaction_item.opposite label.on i {
    background-image: none;
}

특정 클래스가 붙은 label 내에있는 i(리소스)에 background-image를 추가해주고,

체크(모션 실행) 후에는 background-image를 가려주면 다시 모션이 보이게 된다. 

눈속임 느낌이 있지만, 결과는 모두 동일하게 보인다. 각자의 역량에따라 방법을 선택하면 된다.

 

 

질문이 있다면 댓글을 달아주세요! 👋