Lottie 사용 설명서
How to Use Lottie with Secret Tips
Lottie는 After Effects에서 보다 높은 퀄리티의 모션 그래픽 및 애니메이션 효과를 실시간으로 렌더링 하여 네이티브 앱에 적용시키기 위해 Airbnb가 만든 오픈소스 라이브러리로, 애프터 이펙트에서 작업한 애니메이션 데이터를 LottieFiles라는 AE 플러그인을 통해 JSON 파일로 추출하는 방식입니다. Lottie는 OOM(Out of memory)에 대해서도 신경을 많이 쓴 라이브러리입니다.
JSON 파일은 Java Script Object Notation의 약자로 JSON은 단순 데이터 포맷이며, 데이터를 표시하는 방법입니다. JSON을 쓰는 이유는 .json 파일이 가지고 있는 데이터를 받아서 객체나 변수에 할당해서 사용하기 위함입니다.
JSON의 구조
Object(객체)
- name/value의 순서쌍으로 set이다.
- {}로 정의된다. ex) { "이름" : "홍길동" }
Array(배열)
- 그 배열이 맞다. ex) [ 10, "array", 32 ]
JSON은 왜 쓰는가?
위의 예제 JSON 파일의 이름을 'honggildong_info.json '이라고 하면, 이 정보(데이터)를 서로 주고받기 위해 여러 가지의 형식으로 넘겨줄 수 있겠지만 JSON은 다른 포맷에 비해 경량화된 데이터 포맷입니다. 그렇기에 A가 B에게 홍길동의 정보가 담긴 데이터를 넘겨주기 위해 JSON 포맷으로 포장하여 넘겨줍니다.
여기서 Lottie는 최종 JSON 파일로 추출되어 솔리드, 모양 레이어, 마스크, 알파 매트, 트림 패스 및 대시 패턴 등 애펙에서 사용하는 다양한 효과들을 대부분을 iOS, Android, React Native 및 웹 등 여러 플랫폼에서 고퀄리티로 재생할 수 있게 합니다. 또 큰 파일 크기에 대해 걱정할 필요 없이 딜레이 없고 선명한 애니메이션이 가능하며, JSON 파일에서 애니메이션을 로드하여 코드상 애니메이션 파일을 완전히 분리할 수 있습니다. 프로덕트 내에 컨텍스트에 맞는 마이크로 인터렉션과 애니메이션을 잘 활용하면 사용자에게 자연스러운 사용성을 유도하며 감성적 메시지를 전달할 수 있습니다.
Step 1.
피그마/스케치에서 Export 잘하기
효율적인 comp와 footage 관리를 원한다면 같은 어도비의 Illustrator나 Photoshop을 이용해서 작업하는 편이 호환성 측면에서 훨씬 좋습니다. 하지만 로딩이나 프로그래스 인디케이터, 아이콘 등 스케치에서 작업한 벡터 파일에 약간의 가벼운 모션을 주는 정도라면, 피그마/스케치에서 작업한 에셋을 가지고 애프터 이펙트(AE)에서 작업하기 편하게 재료 손질을 하는 개념으로 추출을 잘하는 정도로 알아두어도 괜찮다고 생각됩니다.
피그마/스케치에서 애프터 이펙트로 가져갈 에셋을
➊ 레이어 정리: 비어 있거나 사용하지 않는 레이어는 삭제
➋ 레이어 이름: 레이어의 형태나 특징에 맞춰 네이밍을 간단하게 수정
➌ Grouping: 위 레이어 정리를 마친 에셋을 하나의 Group으로 묶음
➍ SVG 파일로 추출
이 SVG 파일을 Adobe Illustrator에서 AI 파일로 저장 후, 애펙으로 불러옵니다.
변환한 일러스트 파일로 해당되는 레이어로 컴포지션을 만들며 Shape Layer로 변경해서 ★★★ 모션 및 애니메이션을 작업을 시작할 수 있습니다.
Figma Plugin
Convertify Figma to Sketch/XD/AE
✕ 이 플러그인은 유료이며 일러스트레이터와 포토샵으로 작업 시 건너뛰세요.
피그마에서 다른 웹사이트나 특정 API를 거치지 않고 Sketch, Adobe XD로 변환해 주는 플러그인입니다. 기본적으로 변환된 .xd 파일을 사용하여 Adobe XD에서 After Effects로 아트보드를 내보냅니다.
➊ 피그마에 Convertify를 설치 후, 해당 플러그인을 실행
➋ 추출할 에셋이 있는 페이지를 선택 후
➌ 원하는 Convert 방법을 클릭하고, 변환이 완료된 파일을 저장하려면 하단의 다운로드 버튼을 클릭
Sketch Plugin
AEUX
✕ 이 플러그인은 무료이며 일러스트레이터와 포토샵으로 작업 시 건너뛰세요.
Lottie 작업 시 벡터 파일들을 변환하는 과정을 몹시 귀찮게 여러 번 거치게 되는데, AEUX는 스케치 작업 환경에서 애니메이션 가능한 Vector 레이어를 애펙으로 바로 전송해주는 플러그인입니다. 피그마에도 AEUX를 사용할 수 있으나, JavaScript 환경에서 npm을 이용해 최신 node.js와 타입스크립트 컴파일러를 설치하는 등 조금 많이 복잡합니다. 피그마에선 위에 소개한 Convertify Figma to Sketch/XD/AE이 좀 더 범용적으로 사용되고 있습니다.
1. 스케치에 AEUX 플러그인 설치하기 (피그마를 사용하는 경우 1-2로)
➊ 먼저 AEUX 플러그인 다운로드
➋ 다운로드한 파일의 압축을 풀어 'AEUX.sketchplugin'을 두 번 클릭하면 스케치에 설치가 완료
2. AE에 AEUX 플러그인 설치하기
➊ Adobe의 Extension Manager 다운로드
➊ 또는, aescripts + aeplugins에서 ZXP Installer 다운로드
➋ AEUX.zxp 파일을 ZXP Installer에 드래그 앤 드롭
➌ 애프터 이펙트 프로그램 종료 후 다시 열기
➍ Menu > Window > Extensions에 AEUX 선택
3. AEUX 워크 플로우
➊ 상단 플러그인 메뉴에서 스케치에서 AEUX > Open panel
➋ 스케치에서 레이어 선택
➌ 다음 중 하나를 사용하여 도형을 전송
Ae로 선택-레이어 데이터가 장면 뒤에서 전송
AEUX.json 내보내기-레이어 데이터가 파일로 저장
➍ 이미지 (필요한 경우)는 지정한 위치의 디스크로 추출
➎ 내보내기가 완료되면 패널 내에 메시지가 나타난다.
➏ After Effects 프로그램으로 전환
➐ Menu > Window > Extensions > AEUX 선택
➑ 원하는 컴포지션 옵션을 설정
➒ 스케치에서 레이어를 자동으로 만들거나 JSON 파일을 스케치에서 패널로 드래그하려면 클릭
4. AEUX 패널 옵션
패널 옵션의 설정을 통해, 레이어 제작 방식을 디자이너가 지정할 수 있습니다.
• New Comp: 대부분의 디자인 앱은 다양한 픽셀 밀도에 대해 낮은 해상도로 작동할 수 있지만 애펙에서는 실제 픽셀 값이 필요하다. 새 comp의 크기는 Comp size multiplier로 정의된다. 새 컴포지션을 만들 때 컴포지션 크기 승수 드롭 다운이 표시됩니다.
• Current: 기존 컴포지션에 새 레이어를 추가할 때 현재 컴포지션의 너비가 측정되어 들어오는 대지의 컴포지션 크기 승수를 정의하는 데 사용됩니다. 컴포지션 크기 승수는 대지의 너비와 컴포지션의 너비가 일치하도록 새 레이어의 크기를 조정합니다.
• Export size at 1x: 애펙에서 원하는 컴포지션 크기에 상관없이 작업할 수 있지만 자산 크기의 1 배인 컴포지션 크기로 내 보내야 합니다. After Effects의 모든 픽셀 값은 iOS에서 포인트로 변환되고 Android에서 dps로 변환되어 모든 화면 밀도에서 동일하게 표시됩니다. Google은 일반적인 기기의 화면 크기가 dps 인 기기 측정 항목 모음을 통합했습니다.
• Detect parametric shapes: 직사각형과 타원을 선호하거나 경로를 좋아할 수 있습니다. 원하는 방식으로 도형을 전송하여 변환을 제한하십시오.
• Precomp groups: 기본적으로 그룹은 기본 구성 요소에서 보이는 레이어에 보이지 않는 부모 레이어로 만들어집니다. 이 옵션은 이러한 그룹화된 레이어를 자동으로 미리 구성합니다. Precomp는 그룹화 버튼으로 그룹 해제할 수도 있습니다.
• Auto build artboards: 이 옵션을 활성화하면 현재 선택된 다른 옵션을 사용하여 스케치에서 레이어를 사용할 수 있는 즉시 레이어가 만들어집니다.
• Ae Precomp / Un-precomp: 다른 모든 디자인 앱과 마찬가지로 레이어를 그룹으로 구성
• Group and ungroup: 사전 구성은 단일 구성 요소에서 긴 계층 목록을 단순화할 수 있지만 액세스 할 수 없는 여러 구성 요소를 만듭니다. 이제 After Effects에서 처음으로 한 번의 클릭으로 그룹을 사전 구성하고 사전 구성 해제할 수 있습니다.
• Toggle Visibility - Show and hide: 그룹 레이어는 렌더링 되지 않지만 여러 요소를 변환하는 데 도움이 되는 사각형 안내 레이어입니다. 레이어 가시성 안구를 전환하거나 변형 속성을 조정하여 이러한 기능과 상호 작용할 수 있습니다. 클릭으로 모든 길드 레이어 표시를 전환하려면 클릭하십시오.
• Delete all guide layers: 그룹이 마음에 들지 않고 불필요한 레이어가 많으면 클릭하여 광고에서 모든 가이드 레이어를 제거합니다.
5. Export 전에 레이어 정리 필수
스케치 또는 일러스트레이터에서 에셋을 가져와 Shape Laye로 변환할 때 Shape Layer에 숨겨진 이상한 것들이 있을 수 있습니다. Lottie의 JSON 파일을 좀 더 저용량에 효율적으로 만들려면, 스케치나 일러스트레이터에서 작업 시 레이어를 깨끗하게 정리하고 export 하는 게 좋습니다.
왼쪽 화면은 스케치에서 export 한 것인데 추가 경로, 그룹 및 병합 경로가 있는 파일의 예입니다. 왼쪽 화면에는 컴포지션 범위를 벗어나는 두 개의 이상하게 큰 아트보드 영역이 보이지만, 오른쪽에는 필요한 Shape Layer만 정리되어 있습니다.
Step 2.
애프터 이펙트로 애니메이션 만들기
LottieFiles을 사용하기 위해서는 애프터 이펙트로 shape animation이나 여러 가지 모션 그래픽 작업된 파일이 필요합니다. Lottie를 위한 애니메이션은 일반적인 모션 그래픽 작업 방식과는 조금 다른데, 아래는 Lottie 애니메이션을 제작하기 위한 몇 가지 일반적인 팁입니다.
1. Composition Settings
컴포지션 설정의 단축키는 ⌘K입니다.• Width, Height: 애펙에서는 어떤 크기든 원하는 컴포지션 사이즈로 작업할 수 있지만, Lottie 작업 시 피그마/스케치 UI의 1배수(@1x) 로 컴포지션 크기로 설정해야 합니다. 애펙의 모든 픽셀 값은 iOS에서 포인트(pt)로 변환되고, Android에서 dps로 변환되어 모든 화면 밀도에서 동일하게 표시됩니다.
• Frame Rate: 게임 속 이미지가 크고 움직임을 부드러운 느낌을 내고 싶으면 60 fps(frames per second)로, 그 외의 기능적인 UI 모션이면 보통 30 fps으로 설정 하세요. 내 작업에 맞는 프레임 속도를 미리 선택하는 것이 중요합니다. 나중에 변경해야 할 경우 기존 키 프레임에 이상이 생길 수 있습니다.
• Duration: 기간을 선택할 수 있습니다. 정적 자산을 내보내려면 지속 시간을 1 초로 설정하고, 나중에 언제든지 다시 변경할 수 있습니다.
2. ★★★ 모든 벡터 파일은 Create Shape from Vector Layer로 변환 후 애펙에서 모션 작업을 시작하세요.
일반적으로 애펙에서는 AI, SVG, EPS, PDF 등의 벡터 파일을 Shape Layer로 변환해야 합니다. 불러온 벡터 파일을 Shape Layer로 변환하지 않고 작업하면 LottieFiles에서 테스트할 때 Lottie 애니메이션이 작동하지 않습니다.
위 이미지와 같이 레이어에 마우스 오른쪽 버튼을 클릭하고 'Create → Create Shapes from Vector Layer'를 선택하여 벡터 파일을 Shape Layer로 변환 후★★★ 애니메이션 및 모션 작업을 시작하세요. 중요 또 중요! 변환 후 composition에서 .ai 파일은 삭제해도 됩니다.
스케치에서 EPS 포맷이나 PDF 포맷으로 직접 내보내면 변환되는 과정에서 artboard path가 Shape Layer에 추가되는 경우가 있습니다. 왼쪽은 SVG 변환이고, 오른쪽은 EPS 변환입니다. 오른쪽의 예에서는 투명도가 대지 크기의 경로를 가지고 있기 때문에 투명도가 반전된 것을 볼 수 있습니다. 복잡한 아트웍으로 Lottie 작업을 한다면 상황이 정말 이상해질 수 있습니다.
사용하지 않는 path와 아트보드 영역을 일일이 찾아 삭제하고 정리하는 것은 시간이 많이 걸리고 성가신 일입니다. 이것이 SVG 포맷이 가장 편한 이유입니다.
3. Lottie 지원 기능 목록
그라디언트, 블러, 레이어 효과 같은 기능은 지원하지 않고, Shape Layer의 변형과 움직임 위주일 때 효과적으로 사용할 수 있습니다.
• Matte and mask size matters: 알파 매트를 사용하면 퍼포먼스에 영향을 주며, 매트의 사이즈가 퍼포먼스를 낮추므로 매트 효과를 써야 한다면 되도록 작게 만드는 게 좋습니다.
• Debugging: 애니메이션이 깨진다면 레이어를 하나씩 내보내서 어떤 게 작동하고 어떤 건 안되는지 디버깅합니다. 문제가 되는 영역을 나눈 뒤 해당 레이어를 다른 방식으로 만들어야 합니다.
• No blending modes or Luma mattes: Multiply, Screen, Add 같은 블렌딩 모드와 Luma matte는 지원하지 않습니다.
• No layer styles: Drop Shadow, Color overlay, Stroke 같은 레이어 스타일은 지원하지 않습니다.
• Make Nulls visible and have 0% opacity: Null 레이어를 사용했다면 일반적으로 레이어를 숨김으로 합니다. JSON 파일이 인식하게 하려면 Null레이어를 보이게 처리해주고 Opacity를 0%로 바꿔줍니다.
Step 3.
LottieFiles 플러그인 활용하기
LottieFiles 플러그인은 기존의 Bodymovin의 모든 Lottie 기능을 구현해주고, 더 빠르고 효율적인 인스턴트 미리 보기 및 모바일 디바이스에서 보다 더 최적화된 테스트 플로우를 제공합니다. 또 Lottie 애니메이션을 더 쉽게 업로드(+렌더링)하고, 협업하는 사람들과 비공개로 공유하는 것이 더 쉬워졌으며, 배경색 변경, 파일크기 검토, 성능 그래프 렌더링과 같은 기능도 추가되었고, Explore Tab에서는 Lottie 애니메이션을 검색하고 .aep 파일을 다운로드할 수 있습니다.
1. 애프터 이펙트에 LottieFiles 플러그인 설치하기
➊ 애펙이 실행되고 있다면 작업 중인 파일 저장하고 종료
➋ Adobe의 Extension Manager 다운로드하기
➋ 또는, aescripts + aeplugins에서 ZXP Installer를 다운로드하기
➌ 최신 버전의 LottieFiles 플러그인을 다운로드하기
➍ LottieFile의 .zxp 파일을 ZXP Installer에 드래그 앤 드롭
2. 웹브라우저에서 LottieFiles.com 가입 후 로그인 상태
3. ★★★ AE을 열어, LottieFiles 설정
➊ 애펙을 오픈한 후 Preferences(맥 단축키: ⌘ + ⌥ + ;)를 열고
➋ 왼쪽 메뉴 중 Scrpting & Experssions 선택 > Application Scripting > Allow Scripts to Write Files and Access Network를 체크 > OK를 해줍니다.
위 설정은 LottieFiles 플러그인에서 애니메이션이 재생되지 않고 '렌더링' 상태에 멈춰 있을 때를 미리 방지하기 위함입니다.➌ 메뉴 > Windows > Extensions > LottieFiles 실행
LottieFiles 플러그인 '로그인' 전 화면➍ 실행 후 플러그인 화면의 'Login to LottieFile' 버튼을 누르면 됩니다.
➎ 로그인에 문제가 있으면 버튼 하단의 Login using access code를 누르면, 웹 브라우저에서 새 창이 뜨고 왼쪽 하단의 4자리 access code가 나옵니다. 이 4자리 코드를 AE 플러그인 화면에 입력하면 접속이 됩니다.
After Effects Extensions
Bodymovin
✕ 위 LottieFiles Extensions이 더 최신 방법입니다. 히스토리 차원에서 기존 내용도 남겨둡니다.
Hernan Torrisi가 2015년 2월 이래로 매월 플러그인 기능과 개선사항을 추가하여 탄탄한 기반을 구축해 왔습니다. Bodymovin이라는 플러그인을 설치하고 해당 플러그인을 사용하여 렌더링 합니다. After Effects 툴을 이용해 JSON 파일의 애니메이션 파일을 만들면 네이티브 앱에 적용시킬 수 있다. 이를 위한 도구가 바로 Bodymovin 플러그인입니다.
1. AE에 Bodymovin 설치방법
➊ 애펙이 실행되고 있다면 작업 중인 파일 저장하고 종료
➋ Adobe의 Extension Manager 다운로드하기
➋ 또는, aescripts + aeplugins에서 ZXP Installer를 다운로드하기
➌ 최신 버전의 bodymovin 플러그인을 다운로드하기
➍ bodymovin.zxp 파일을 ZXP Installer에 드래그 앤 드롭
➎ 애펙을 오픈한 후 Windows > Extensions > Bodymovin 실행
2. Bodymovin 워크 플로우
➊ 렌더링 할 컴포지션을 선택
➋ 생성된 assets 폴더에 JSON 파일을 넣어주시면 됩니다. 파일 명은 '영문자' 혹은 '_'로 구현되어야 한다. 이름에서 오류가 나는 경우가 생각보다 많이 있어서 주의해주시면 됩니다. 예를 들어 'animation.json', 'animation_test.json'이라고 JSON 파일 네이밍을 붙이면 됩니다.
➌ 어떤 포맷으로 렌더링 할지 Bodymovin settings에서 설정
➍ 옵션은 여러 가지가 있는데, 다중 선택이 가능하다.
➎ Setting이 완료되면 경로를 지정한다. (어떤 포맷으로 렌더링 되는지 확인할 수 있다)
➏ 왼쪽 상단의 초록색의 Render 버튼을 누르면 렌더링 시작
3. Bodymovin Settings
• Split(분할): 메인 컴포지션에 둘 이상의 레이어가 있는 경우, 지정한 시간 단위로 나누어 여러 개의 JSON 파일로 내보냄.
• Glyphs(글리프): 이 옵션을 선택하면 모든 텍스트 문자가 도형으로 변환됩니다(Outline 기능). 이 옵션을 선택하지 않으면 올바른 글꼴을 렌더링 하기 위해 폰트 파일을 공유하거나 또는 클래스 이름을 제공해야 함.
• Hidden(숨김): 모든 숨김 레이어를 포함하며, 숨겨진 레이어를 가리키는 표현식이 있을 때 필요한 기능입니다. 레이어가 추가되므로 최종 파일 사이즈가 늘어납니다.
• Guided(안내선): 모든 Guide 안내선 레이어를 포함합니다. 가이드 레이어는 렌더링에 포함되지 않는 레이어이고, 레이어가 추가되므로 최종 파일 사이즈가 늘어납니다.
• Extra Comps(추가 컴포지션): 애니메이션의 일부로 내보낼 추가 컴포지션을 선택할 수 있습니다. 주 컴포지션 또는 하위 컴포지션 트리에 포함되지 않은 외부 컴포지션을 가리키는 표현식이 있는 경우에만 필요.
• Original Assets Name(원본 에셋 이름): 에셋 명을 jpg 같은 확장자로 레스터 라이즈 했다면 이미지 폴더에 소스명을 포함해 추출.
• Standalone(독립형): 애니메이션과 플레이어를 하나의 파일에 추출합니다. 배너처럼 페이지에 하나의 애니메이션만 있을 때 유용.
• Demo: 애니메이션을 쉽게 미리 볼 수 있도록 demo.html 파일을 내보냄.
긴 글 읽어주셔서 감사합니다 ☻
