[After Effect] 에펙에서 로티(Lottie) 만들기 (Adobe Lottie file)

안녕하세요. 당근입니다.

UI 만들다 보면 콘텐츠 용 비주얼을 만들다가 간단한 애니메이션은 자급자족 해야할 때가 있어요.

애니메이션은 따로 만져주는 전문가가 있으면 좋겠지만... 대부분 환경이 그렇게 갖춰져있지 않지요 ㅠㅠ.

그럴 때 간단하게 남들이 만들어놓은 애니메이션을 컬러만 수정해서 사용하거나 직접 업로드해서 개발팀에 전달하기 좋은 로티!

Lottie 에 대해서는 길게 설명하지 않을게요. 

오늘은 Adobe Exchange에서 제공하는 Lottie files로 에펙에서 어떻게 로티로 내보내서 사용하는지 간단한 사용법을 알려드리려고 합니다. 예전에는 Bodymovin 이라는 걸 통해서 사용했던 것 같은데. 이제 요런 방법도 있어요. 

 

먼저 어도비 로티 파일즈가 없으신 분들은 아래 링크에서 다운받아주세요.

 

https://exchange.adobe.com/apps/cc/103642/lottiefiles-for-after-effects

Adobe Exchange

 

에펙에서 애니메이션 만들기

애프터 이펙트에서 원하는 애니메이션을 만듭니다.

저는 승차권이 주르륵 나오는 비주얼이 필요해서 간단하게 만들어줬어요.

Lottiefiles

별도의 렌더링 없이 바로 로티로 내보내요.

Window - Extensions - LottieFiles 선택

렌더

렌더버튼을 클릭합니다.

렌더완료

업로드 버튼을 누르고요!

아마 이때쯤 브라우저에서 로그인을 시킬거예요.

로티 아이디가 없으시면 만드셔서 로그인해주세요.

반응형

 

 

워크스페이스 및 프로젝트 폴더 지정

계정이 잘 나요죠? 워크스페이스에 프로젝트 폴더를 지정하고 

업로드 버튼을 누르면 끝~!

업로드완료

이렇게 나오면 업로드가 완료된거예요. 지구본 버튼을 누르시면 로티 웹사이트에서 해당 애니메이션을 열어줍니다.

이때 JSON, GIF 등등으로 뽑아서 이미지 소스 공유하시면 되겠죠!

JSON 파일로 공유하는 건 무료인데다, 계정당 10개까지는 이미지 업로드도 무료니까 꼭 꼭 사용해보세요.

 

lottie gif

그럼 로티로 뽑은 작은 버전의 gif 보여드리면서 마무리할게요.

당근이었습니다.