로티 파일은 에프터이펙트에서 만든 애니메이션을 json 파일로 변환해주는 오픈 소스 라이브러리로 Android, iOS, React Native, Web에서 사용할 수 있다. LottieFiles for After Effects 플러그인을 설치하면, 무료로 사용할 수 있다.
목차
1. 로티 파일 플러그인 설치
2. 애니메이션을 json 파일로 변환
3. 로티 파일 사이즈 줄이는 팁
1. 로티 파일 플러그인 설치
에프터이펙트는 꺼놓은 상태에서 설치를 진행하면 된다.
- Adobe CC* > 마켓플레이스 접속
- LottieFiles for After Effects 설치
* Adobe CC(Adobe Creative Cloud)는 어도비 프로그램을 설치, 관리하는 프로그램으로, 최신 버전의 어도비 사용자라면 설치가 되어있을 것이다. '마켓플레이스'는 상단 제일 오른쪽 탭에서 찾을 수 있다.
1. Adobe CC > 마켓플레이스에서 Lottie 검색
어도비 CC의 상단 메뉴에서 마켓플레이스를 선택, 플러그인 메뉴에서 Lottie라고 검색한다.
2. LottieFiles for After Effects 설치
제일 처음 나오는 LottieFiles for After Effects를 다운로드하고, 설치한다.
맥북 프로 M1 경고문이 나오는 경우
맥북 프로 M1의 경우, 설치 시 아래와 같은 경고 메시지가 나올 수 있다. 에프터이펙트를 실행할 때 Intel 모드로 실행한 경우에만 플러그인을 쓸 수 있다는 말인데, Default로 설정되어 있어서 크게 신경 쓸 메시지는 아니다.
맥북 프로 M1에서 Intel 모드로 여는 방법은, 어도비 CC > 모든 앱 > After Effects의 열기 버튼 옆에 있는 점 3개 더보기 버튼을 선택하여, 열기 (Intel)을 선택하면 된다.
2. 로티 파일로 변환하기
에프터이펙트에서 작업한 모션 파일을 열어놓은 상태에서 진행한다.
- Windows > Extensions > LottieFiles 선택 (한글판 : 창 > 확장명 > LottieFiles)
- LottieFiles 팝업에서 로그인
- Export 선택
- 다운로드
1. Windows > Extensions > LottieFiles 선택 (한글판 : 창 > 확장명 > LottieFiles)
2. LottieFiles 팝업에서 로그인
선택 시, 홈페이지로 이동하여 간단한 로그인을 거친다. 회원가입은 무료이다.
Permission Error
간혹 Permission Error가 나올 수 있는데, 걱정할 것 없다. 에러 창에 나온 설명대로 Preference > Scripting & Expressions 메뉴에서 Allow Scripts to Write Files and Access Network 허가를 체크해놓으면 된다.
Preferences > Scripting & Expressions 메뉴를 선택
Scripting & Expressions > Application Scripting에서 Allow Scripts to Write and Access Network가 체크되었는지 확인한다.
3. Export 선택
현재 에프터이펙트에서 열려있는 모든 Composition을 확인할 수 있다. (아래 예시 이미지에서는 Spinner라는 Composition이 열려있는 상태). 오른쪽 녹색 화살표 버튼을 눌러서 Export 할 수 있다.
4. 다운로드 선택
Export를 누르면 간단한 프리뷰 화면으로 넘어간다. 왼쪽 다운로드 아이콘을 선택하여 로컬 파일로 컴퓨터에 저장할 수 있다. 참고로, 오른쪽의 Upload 버튼을 누르면, LottieFiles 홈페이지의 내 계정에 업로드된다.
json 파일로 출력 버튼을 선택하면, 로컬 디스크에서 저장할 파일 위치를 지정하여 파일로 저장할 수 있다.
3. 로티 파일 사이즈 줄이는 팁
로티 파일용으로 애니메이션 제작 시, Composition, Layer 개수가 적을 수록 좋다.
- Composition 개수 줄이기
- Layer 개수 줄이기
에프터이펙트 Composition의 개수, 레이어 개수에 따라 파일 사이즈가 많이 차이 날 수 있다. 가능하면 하나의 레이어에 작업을 하거나, Composition이나 Layer의 개수를 줄여야 한다. 동일한 모션이라도 콤포지션이 복잡한 파일이 제일 무겁고, 여러 개의 레이어로 된 파일이 그다음으로 무겁다.
이유는 여러 개의 Composition의 경우, 각 Composition마다의 속성이 함께 코드로 표현이 되고, 여러개의 Layer가 있는 경우에도 마찬가지로 각 Layer마다의 속성이 함께 코드로 표현이 되어서 그렇다고 한다. 실무에서 에프터이펙트로 작업할 때는 생각보다 복잡한 파일을 제작할 수 있는데, 모바일의 특성에 맞는 파일 제작 노하우가 필요해 보인다.
'그래픽 툴 > 에프터이펙트' 카테고리의 다른 글
| 어도비 플러그인 삭제 방법 (0) | 2022.11.15 |
|---|---|
| 에펙에서 작업한 애니메이션 로티 lottie 적용하기 (맥) (0) | 2021.09.13 |
| 에펙에서 GIF로 뽑기 (이제 그 투명배경을 곁들인...) (0) | 2021.09.10 |
| 에펙에서 작업한 동영상, 포토샵에서 GIF로 다시 뽑기 (에펙에서 실패한 분들 오세요) (0) | 2021.09.10 |
| 일러스트에서 에펙으로, 레이어 구분해서 내보내기 (0) | 2021.09.09 |
댓글