Lottie와 Bodymovin 활용

Lottie파일의 모션스펙 개발팀에 전달하기

Lottie?

  • Airbnb의 Lottie는 모션을 바로 코드로 적용할 수 있는 라이브러리이다. 애프터 이펙트에서 Bodymovin 플러그인을 이용하여 모션을 JSON 파일을 렌더링한다. 모션이 코드로 직접 변환되므로 용량이나 이미지 깨짐을 걱정할 필요가 없다. 하지만 플랫폼 별로 지원되지 않는 디자인 요소가 있어 확인한 뒤 사용해야한다.

Lottie 지원 기능 목록

  • 예시 파일들을 확인하면 알 수 있듯이 아직 그라디언트, 블러, 레이어 효과 같은 기능은 지원하지 않는다. 벡터 Shape의 변형과 움직임 위주일 때 효과적으로 사용할 수 있다.

  • 아래는 Lottie를 사용한 Google Home의 시작 화면이다.

After Effect

Bodymovin 설치

1. ZXP 인스톨러를 설치한다 (애프터 이펙트가 열려있으면 미리 종료)

2. 최신 버전의 Bodymovin 플러그인을 설치한다.

3. ZXP 인스톨러를 열고 Bodymovin 플러그인을 드래그 앤 드롭한다.

4. 애프터 이펙트 실행

5. 컴포지션 셋팅

Bodymovin 패널의 기어 아이콘을 누르면 셋팅 화면에 진입한다.

  • Split: 애니메이션을 지정한 시간 단위로 나누어 여러개의 JSON 파일로 내보낸다.

  • Glyphs: 모든 텍스트를 도형으로 변환한다. (Outline 기능) 체크를 하지 않았다면 폰트 파일을 공유해야한다.

  • Hidden: 모든 숨김 레이어를 포함한다. 숨겨진 레이어를 가리키는 표현식이 있을 때 필요한 기능이다. 레이어가 추가되므로 최종 파일 사이즈가 늘어난다.

  • Guided: 모든 Guide 안내선 레이어를 포함한다. 가이드 레이어는 렌더링에 포함되지 않는 레이어이다. 레이어가 추가되므로 최종 파일 사이즈가 늘어난다.

  • Extra Comps: 애니메이션의 일부로 내보낼 추가 컴포지션을 선택할 수 있다. 주 컴포지션 또는 하위 컴포지션 트리에 포함되지 않은 외부 컴포지션을 가리키는 표현식이있는 경우에만 필요합니다.

  • Original Assets Name: 에셋 명을 jpg같은 확장자로 레스터라이즈 했다면 이미지 폴더에 소스명을 포함해 추출한다.

  • Standalone: 애니메이션과 플레이어를 하나의 파일에 추출합니다. 배너처럼 페이지에 하나의 애니메이션만 있을 때 유용하다.

  • Demo: 애니메이션을 쉽게 미리 볼 수 있도록 demo.html 파일을 내 보낸다.

로티 애니메이션 만들기

  • 로티를 위한 애니메이션을 일반적인 애프터 이펙트 작업 방식과는 조금 다르다. 아래는 로티 애니메이션을 제작하기 위한 몇가지 일반적인 팁이다.

단순함을 유지하기

  • Lottie를 제작하면서 염두해야 할 부분은 모바일 제품에서 JSON파일은 최대한 작아야 한다는 점이다. 유사한 레이어에 동일한 키 프레임을 복제하면 코드가 추가된다. 반드시 써야 할 때만 Path 키 프레임 애니메이션을 사용하자. 그것들은 각 키 프레임에 데이터를 추가하기 때문에 가장 많은 공간을 차지하게 만든다. Auto-Trace나 Wiggler같은 기능은 JSON파일을 무겁게 만들고 퍼포먼스를 떨어트린다. 최대한 효율적으로 모션을 제작하자.

일러스트레이터에서 벡터 불러오기

  • 일러스트레이터, EPS, SVG, PDF 에셋을 애프터 이펙트에서 도형 레이어로 변경해야 Lottie 애니메이션을 적용할 수 있다.

1x 로 내보내기

  • 컴포지션 사이즈가 에셋의 1x사이즈가 되도록 주의한다.

표현식이나 이펙트 없음

  • Lottie는 아직 표현식이나 이펙트를 지원하지 않는다.

매트와 마스크 사이즈

  • 알파 매트를 사용하면 퍼포먼스에 영향을 준다. 매트의 사이즈가 퍼포먼스를 낮추므로 매트효과를 써야한다면 되도록 작게 만들자.

디버깅

  • 애니메이션이 깨진다면 레이어를 하나씩 내보내서 어떤게 작동하고 어떤건 안되는지 확인해보자. 문제가 되는 영역을 나눈뒤 해당 레이어를 다른 방식으로 만들어야 한다.

블렌딩 모드, 루마 매트 지원 안함

  • Multiply, Screen, Add 같은 블렌딩 모드와 Luma matte는 지원하지 않는다.

레이어 스타일 지원 안함

  • Drop Shadow, Color overlay, Stroke같은 레이어 스타일은 지원하지 않는다.

전체 화면 애니메이션

  • 디바이스 화면보다 더 큰 애니메이션을 사용하고 싶다면 안드로이드에서 centerCrop 스케일 타입을 사용하거나 iOS에서 aspectFill 컨텐트 모드를 사용한다.

Null 레이어

  • Null 레이어를 사용했다면 일반적으로 레이어를 숨김으로 한다. 여기서는 JSON이 파일이 인식하려면 Null레이어를 보이게 처리해주고 Opacity를 0%로 바꿔준다.

스케치, SVG, 일러스트레이터 파일을 Lottie에 적용하기

  1. 원하는 에셋울 하나의 그룹으로 만들어준다.

  2. SVG 파일로 export한다. AEUX 플러그인을 사용하면 나머지 3 ~ 6 과정을 생략해도 좋다.

  3. SVG 파일을 일러스트레이터에서 열고 .ai 파일로 저장한다.

  4. ai 파일을 애프터 이펙트에 불러온다.

  5. 해당 레이어로 컴포지션을 만든다. 지속시간과 프레임 수를 정한다. 프레임 수는 이미지가 크고 움직임이 부드러운 표현적인 모션이면 60fps로, 그 반대의 기능적인 모션이면 30fps여도 충분하다.

  6. 일러스트레이터 파일을 Shape Layer로 변경한다.

  7. 애니메이션을 적용한다.

  8. Bodymovin으로 Export한다. (메뉴 바 Window > Extensions > Bodymovin)

로티 파일 테스트하기

  1. Lottiefiles.com에 업로드해 웹뷰에서 확인

  2. 로티 파일 미리보기 앱을 다운받아 QR코드로 확인

기타 참고 플러그인

Inspector Spacetime

  • 모션을 변환하지 않고 바로 모션 스펙을 코드로 추출하는 플러그인이다.

참고 링크 🔗

Previous가변 서체와 파라메트릭 서체Next개발 환경별 애니메이션 지원 속성

Last updated