[Archive] 모션 Lottie로 공유하기 그리고 오류

(아카이브 회의시간)

디자이너: 영상은 Lottie로 전달드리면 될까요?

개발자: 네네~

나: (노티? 로티?? 그게 뭐예요?)

낯선 용어에 들리는 대로 구글에 검색을 했다.

 

Lottie란? 애니메이션 효과를 실시간으로 렌더링 하여 네이티브 앱에 적용시키기 위해 Airbnb가 만든 오픈소스 라이브러리이다.

 

이하 자세한 설명은 이미 잘 정리해주신 분들이 있기 때문에 생략 후 적용 과정에 집중해서 기록해두려 한다.

우선 필요한 모션은 애펙(After Effects)으로 작업했다.

따라서 다음은 After Effect 작업물을 Lottie 파일로 렌더링 한 과정에 대한 기록이다.

 

Step 1.  After Effect에서 모션만들기

1. 모션에 필요한 그래픽 요소들을 피그마에서 SVG로 내보내기

2. SVG 파일을 Adobe illustrator에서 Ai 파일로 저장

3. 컴포지션 1배수로 설정

4. ⭐️⭐️⭐️ After Effect에서 불러온 Ai 파일은 Shape Layer(모양 레이어)로 변경. 이후 Ai 파일은 삭제해도 됨.

(변경할 Ai 파일 레이어 선택> 마우스 오른쪽 클릭> Create> Create Shapes from Vector Layer)

3. 애니메이션 작업 시작

Shape Layer(모양 레이어)로 변경

Step 2.  LottieFiles 플러그인 설치하기

1. 애프터이펙트 저장 후 종료

2. 압축을 풀어줄 ZXP 인스툴러 다운로드 하기

3. 플러그인 다운로드 하기

4. ZXP 인스톨러를 열고 플러그인을 드래그 앤 드롭

5. https://lottiefiles.com/ 회원가입 후 로그인하기

 

Step 3.  사용하기

1. 웹페이지 로그인 상태

2. 애펙에서 Window> Extention> LottieFiles 실행

3. Lottie.JSON(*.json)으로 저장

Window> Extention> LottieFiles/ 실행화면1,2

Step 4.  렌더링 파일 확인하기 - Preview

https://lottiefiles.com/preview에 업로드하면 웹에서 프리뷰를 확인할 수 있다.

Preview 업로드 화면

 

---

🚧 BUT 디자인 누락,, 오류 발생 🚧

그런데 전달드린 Lottie 파일을 적용하면 그래픽의 일부분이 누락돼서 보이는 문제가 생겼다.

오류 화면

(왼) Lottie 적용 후 앱에서 호출 되는 모습 / (오) 원본 디자인파일

처음에는

1. Archive 글자 영역이 포함 안된 채로 렌더링 됐거나

2. 폰트를 Shape Layer로 변환하지 않은 줄 알았다.

하지만 웹에서 확인한 프리뷰에서는정상적으로 보였고, Shape Layer 변환도 제대로 되어있었다.

 

그렇다면

3. 애펙에서 사용했던 마스크 효과가 Lottie에 지원되지 않는 건 아닐까?

Lottie 지원 기능 목록

(변경 전) After Effect 파일/ Lottie 지원 기능 목록 일부

우선 홈페이지에는 Mask path 지원 가능하다고 나와있다.

그럼 도대체 문제는 무엇일까,, 방법을 찾아도 알 수 없었다.

 

그래서 혹시나 하는 마음으로

마스크 효과를 삭제하고 다른 방식으로 영상을 제작했다.

(Archive 텍스트 위에 Shape 도형 레이어를 올린 후 Parent와 Scale의 키프레임 조정을 통해 마스크 효과를 대신했다.)

(변경 후) After Effect 파일

결과는..?

해결됐다..!

 

결론은 영상이 의도한 대로 재생되지 않는다면,

지원 가능한 기능이라도 다른 방법을 통해 영상을 다시 제작해보는 것이 가장 빠른 해결 방법이 될 수 있다.

 

 

 

 

참고

https://brunch.co.kr/@pizzakim/46

Lottie 사용 설명서

http://uidesignguides.com/airbnb-lottie/

Lottie와 Bodymovin이용해 모션 개발과 공유하기 - UI Design Guide