Figma에서 바로 Lottie로 내보낼 수 있는데, 왜 After Effects와 Premiere를 함께 쓰나요?

Adobe After Effects와 Premiere는 Dynamic Link로 연결하면 모션 수정 내용을 중간 영상 파일로 다시 내보내지 않고 영상 편집에 반영할 수 있습니다. 같은 모션을 Lottie와 프로모션 영상에 함께 쓰는 작업이라면, 앱 전환 횟수와 함께 수정 후 재출력·재가져오기가 얼마나 반복되는지를 살펴봐야 해요. Adobe 앱 연동 안내

작업 흐름은 (1) After Effects 그래프 편집기로 기준 모션을 조정하고, (2) Lottie 지원 범위 안에서 같은 원본을 앱용·영상용으로 활용한 뒤, (3) Dynamic Link로 영상의 반복 수정을 연결하는 세 가지로 나눌 수 있습니다.

Figma에서도 LottieFiles 플러그인으로 애니메이션을 만들고 Lottie로 내보낼 수 있어요. 다만 질문처럼 프로모션 영상까지 제작한다면, Lottie를 내보낸 이후의 영상 편집과 수정 반영 과정까지 비교해야 합니다. Figma의 Lottie 내보내기 자체가 영상 작업과의 자동 연동을 뜻하지는 않기 때문이에요.

아래는 질문자처럼 앱용 모션과 프로모션 영상을 함께 만드는 경우의 작업 경로 비교입니다.

1. Adobe After Effects 그래프 편집기로 기준 모션의 속도 곡선을 조정합니다

Adobe After Effects 그래프 편집기는 키프레임 사이의 속도 변화와 가감속을 그래프로 조절하는 기능입니다.

로딩 아이콘의 감속이나 버튼이 멈추는 타이밍을 앱과 프로모션 영상에서 함께 맞춰야 한다면, 먼저 기준 모션의 움직임을 구체적으로 정해 두는 것이 중요해요.

• 속도 곡선 제어: After Effects의 속도 그래프에서는 방향 핸들로 키프레임에 들어오고 나가는 속도와 영향 범위를 조절합니다. 로딩 아이콘이 끝에서 천천히 감속하거나 버튼이 빠르게 나타난 뒤 부드럽게 멈추는 움직임을 다듬는 데 활용할 수 있어요. Adobe 속도 제어 안내
• 그래프 편집 경로: After Effects에서 조정할 속성의 키프레임 선택 → Shift+F3으로 그래프 편집기 전환 → ‘그래프 유형 및 옵션 선택’ 메뉴에서 ‘속도 그래프 편집’ 선택 → 방향 핸들로 가속·감속 조정 순서로 작업합니다. Adobe 단축키 안내, Adobe 속도 그래프 안내

따라서 로딩 아이콘의 감속이나 버튼이 멈추는 타이밍을 앱과 영상에서 함께 맞춰야 한다면, After Effects에서 기준 모션을 먼저 다듬는 방식이 유용합니다. 그래프 편집기로 움직임을 조절하고, 완성한 컴포지션을 앱용·영상용 작업의 공통 출발점으로 삼을 수 있기 때문이에요.

2. Adobe After Effects 원본을 Lottie 출력과 Premiere 영상 편집에 활용합니다

Adobe After Effects의 Lottie 출력·Premiere 연계 워크플로우는 기준 컴포지션을 외부 확장 프로그램으로 앱용 Lottie로 내보내고, 영상 편집에도 활용하는 작업 방식입니다.

질문자처럼 동일한 로딩 아이콘을 앱과 프로모션 영상에 함께 넣는다면, 결과물마다 모션을 새로 만드는 대신 공통 원본을 기준으로 작업 경로를 나눌 수 있어요.

• 앱용 출력: After Effects에서는 LottieFiles for After Effects 같은 외부 확장 프로그램을 사용해 Lottie JSON·dotLottie 파일을 출력합니다.
• 영상용 활용: After Effects에서 만든 기준 컴포지션은 Premiere의 프로모션 영상에 연결해 사용할 수 있습니다. 앱용 Lottie 파일을 다시 영상으로 변환하는 대신, After Effects 컴포지션을 영상 편집의 소스로 활용하는 경로예요. Adobe 앱 연동 안내
• Lottie 재생 검수: After Effects에서 정상적으로 보이는 모션도 Lottie 출력 후에는 대상 앱의 플레이어와 버전에 따라 다르게 재생될 수 있습니다. LottieFiles 플러그인의 미리 보기와 실제 앱의 재생 환경을 확인해, 지원되지 않는 기능이나 표현 차이를 점검해야 합니다.

After Effects에 기준 원본을 두면 결과물의 용도가 갈라져도 공통 움직임의 수정 기준을 유지하기 쉽습니다. 따라서 동일한 디자인을 앱 UI와 프로모션 영상에 함께 쓰는 작업에서는, After Effects를 중심으로 두 결과물의 공통 모션을 관리하는 방식이 유용합니다.

3. Adobe After Effects·Premiere Dynamic Link로 반복 수정의 파일 왕복을 줄입니다

Adobe Dynamic Link는 After Effects 컴포지션을 Premiere에 연결해 변경 내용을 반영하는 기능입니다.

프로모션 영상 피드백에서 “로딩 아이콘이 멈추는 타이밍을 바꿔 달라”는 수정이 반복된다면, 연결된 컴포지션을 편집하는 경로를 활용할 수 있어요.

• 중간 파일 전달 생략: Dynamic Link로 연결한 컴포지션은 After Effects 수정 내용을 Premiere에 반영하므로, 수정본을 중간 영상 파일로 재출력하고 다시 가져오는 전달 단계를 생략합니다.
• 연결 조건과 처리 시간: Dynamic Link를 사용하려면 After Effects와 Premiere의 버전을 맞춰야 합니다. 복잡한 컴포지션으로 재생이 무거워지면 Premiere에서 렌더링 및 바꾸기로 렌더본으로 전환해 편집 속도를 유지합니다. Adobe Dynamic Link 안내

상황별 연결·수정 경로는 다음과 같습니다.

Adobe 컴포지션 연결·수정 안내

따라서 영상 피드백에 따라 모션을 반복 수정하는 작업에서는 After Effects와 Premiere의 Dynamic Link로 파일 전달 단계를 줄일 수 있습니다. After Effects에서 연결된 컴포지션을 수정하면 Premiere에 변경 내용이 반영되므로, 중간 영상 파일을 다시 내보내고 가져오는 과정을 생략할 수 있기 때문이에요.

같은 모션을 앱용 Lottie와 프로모션 영상에 함께 쓴다면, Adobe After Effects와 Premiere를 연결한 작업 방식은 모션 제작부터 결과물별 활용, 반복 수정까지 이어집니다. After Effects에서 세밀하게 다듬은 모션을 공통 원본으로 두고, 앱용은 Lottie로 출력·검수하며 영상용은 Premiere에 연결해 활용할 수 있어요.

툴을 넘나드는 시간은 앱 전환이 아니라 재출력과 재가져오기 왕복에서 생기고, After Effects와 Premiere를 Dynamic Link로 연결하면 이 왕복이 사라지는 게 가장 큰 시간 단축입니다.