After Effects용 Bodymovin 설정

Bodymovin은 웹사이트에 포함하고 앱에 통합하기 위해 After Effects 컴포지션을 JSON documents로 내보낼 수 있는 무료 개방형 확장 프로그램입니다. Bodymovin 확장 프로그램을 초기화하는 과정을 살펴보겠습니다.

우리는 이를 네 가지 간단한 단계로 달성할 것입니다:

1. Bodymovin 확장 프로그램 획득
2. After Effects 설정 확인
3. 애니메이션 생성
4. 애니메이션을 웹사이트에 통합

1. Bodymovin 확장 프로그램 획득

Adobe Exchange를 방문하여 무료 Bodymovin 확장 프로그램을 다운로드하세요.

참고: 여러 구독이 있는 경우 후속 단계에서 확장 프로그램을 쉽게 찾을 수 있도록 올바른 Creative Cloud 계정에 로그인했는지 확인하십시오.

2. After Effects 설정 확인

After Effects를 실행하고 창 > 확장 메뉴에서 Bodymovin을 찾으세요.

Bodymovin이 표시되지 않으면 After Effects를 다시 시작해 보십시오.

적절한 파일 액세스 권한을 확인하려면 After Effects > 환경 설정 > 스크립팅 및 표현식(Windows에서는 편집 > 환경 설정 > 스크립팅 및 표현식)으로 이동합니다.

위치하고 있다 스크립트가 파일을 쓰고 네트워크에 액세스하도록 허용 활성화되어 있는지 확인하세요. 

3. 애니메이션 생성

Bodymovin을 사용하여 컴포지션을 내보내 보겠습니다.

After Effects에서 애니메이션을 열고 창 > 확장 > Bodymovin에 액세스하여 렌더링할 다른 컴포지션과 함께 애니메이션을 내보냅니다. 

참고: 컴포지션에 래스터화된 이미지가 포함된 경우 설정 메뉴에서 압축을 활성화하십시오. 

Render를 클릭하여 내보내기 전 지정된 폴더를 확인하고 JSON 파일을 저장하세요.

렌더링 프로세스가 완료되면 이제 지정된 폴더에 JSON 파일이 있어야 합니다. 다음으로 웹사이트에 애니메이션을 삽입하겠습니다. 

4. 애니메이션을 웹사이트에 통합

이 단계에서는 Webflow를 활용하지만 수동 코딩이든 대체 플랫폼 활용이든 접근 방식은 일관되게 유지됩니다. 

왼쪽 패널의 자산 섹션에서 애니메이션을 레이아웃으로 드래그합니다. 

그게 다야! 게시, 내보내기 또는 미리보기 시 애니메이션이 자동으로 재생됩니다. 

아직 살펴보지 않으셨다면 포괄적인 After Effects & Lottie in Webflow 과정을 살펴보세요. 

방문하다 에어비앤비 로티 사이트 지원되는 After Effects 기능의 현재 목록을 보려면