2. Lottie 앱에서 에러없이 잘 구현하기

웹에서 잘 구현되는 Lottie가 앱에서 유독 작동되지 않는 경우가 있지 않은가?

Lottie는 예민한 툴이다. 에펙으로 작은 임팩트만 줘도 IOS나 안드로이드 상에서 추출이 안 되는 경우가 더러 있다. 그럼 열심히 만들어놓은 걸 어떻게 살릴지 난관이 예상되어 머리가 아파오는데.... 해결하기 위해 갖은 방법을 써서 고생하다 찾은 최적의 방법이 있다. 바로 "1차 PNG 시퀀스로 저장해서 2차 컴포넌트로 불러오기"

이 방법을 사용하면 어떤 경우도 다 구현이 가능하다.

Step 1. 일단 피그마, AI, 에펙 등 아무거나 사용해 애니메이션을 구현할 아이템을 만든다.

피그마가 가장 익숙한 사람이 되어버려서 AI를 사용할 경우 작업 속도가 정말 많이 느려졌다. 결국 애니메이션 일러스트까지 피그마로 만드는 지경에 이르렀으니, 일단 예시를 들면 피그마로 열심히 일러스트를 뚱땅뚱땅 만든다. 그리고 만든 일러스트를 구현하고 싶은 모션에 따라 재료를 쪼개듯 분리해 폴더에 <PNG>로 저장하는 편이다. 

이때 추출한 파일 이름이 달라지면 일러를 수정했을 때 에펙에 반영이 안 되니 이름은 항상 같게 저장하면 된다. AI랑 동일하다. 같은 이름으로 저장되면 에펙 파일에 동일하게 일러스트 수정사항이 반영된다!

요런 모션 정도는 일러를 PNG로 쪼개서 저장해도 충분히 만들 수 있다. 그럼 그림자나 반투명 효과도 문제없이 쉽게 추출이 가능해서 사실 정말 많이 애용하는 방법인데, 그럼에도 꼭 에펙이나 AI로 만들어서 펜툴을 사용해야 한다든지 효과를 써야 하는 경우가 있다. 그럴 경우에 백 프로 IOS나 안드로이드에서 에러가 난다. 하다못해 텍스트 타이핑 효과를 써도 앱에서 안 나온다.

기획전 메뉴 영역에 들어가는 타이포 애니메이션을 만들었는데

이슈가 무려 8개? 벌써 머리가 아프다...

Step 2. 그럴 경우 일단 그냥 만들어서 렌더링을 돌려버린다. 근데 이제 PNG 시퀀스로.

렌더링을 돌릴 경우 Default는 아마 H.264로 되어있을 텐데 그 부분을 PNG 시퀀스로 변경해 주면 된다. 

그리고 출력 위치에 폴더 하나 생성해 주면 끝. 그럼 영상이 프레임 단위 이미지로 저장될 것이다.

Step 3. 그럼 다시 에펙에 컴포지션을 만들고 파일을 불러온다.

파일 열기(Command + I)를 누른 후 PNG 시퀀스들이 저장된 폴더에서 이미지를 전부 선택한다. 이때 이미지들을 열기 전 <컴포지션 만들기>가 선택되어 있으면 된다.

Step 4.  스틸 지속 시간 0:00:00:01로 지정하기

스틸 지속 시간을 최소 단위로 선택하고 컴포지션을 만들면 저렇게 계단식으로 쌓일 것이다.

그럼 성공이다!