Framer에 삽입

준비한 애니메이션을 Framer 캔버스에 LottieFiles 플레이어 컴포넌트로 삽입하세요.

플러그인은 애니메이션을 비디오나 GIF로 변환하는 대신 재사용할 수 있는 플레이어 코드 컴포넌트를 추가합니다.

삽입 위치 선택

  • 특정 컨테이너 안에 컴포넌트를 삽입하고 중앙에 배치하려면 Frame을 선택합니다.

  • 자식 요소를 선택하면 해당 요소의 부모 Frame을 삽입 컨테이너로 사용할 수 있습니다.

  • 적절한 선택 없이 캔버스에 삽입하면 캔버스 루트에 추가됩니다.

애니메이션 삽입

  1. 준비한 Explore 또는 Workspace 미리 보기를 엽니다.

  2. 현재 하위 애니메이션, 테마, 상태 머신, 배경, 렌더러를 확인합니다.

  3. Insert animation을 선택합니다.

  4. 새 컴포넌트가 선택될 때까지 기다립니다.

  5. Framer 캔버스 컨트롤로 크기와 위치를 조정합니다.

Framer 캔버스에 애니메이션 삽입하기
Framer 캔버스에 애니메이션 삽입하기

큰 애니메이션은 처음 삽입한 컴포넌트를 다루기 쉽도록 비율을 유지한 채 축소됩니다. 삽입된 크기를 프로덕션 기본값으로 사용하지 말고 실제 레이아웃에 맞게 조정하세요.

삽입한 뒤

계속 작업하기 전에 Framer Preview를 여세요. 정적인 캔버스에서는 올바르게 보여도 실제 페이지에서 반복, 테마, 상태 머신이 다르게 동작할 수 있습니다.

관련 문서

마지막 업데이트: 2026년 9월 11일 오후 12:08Common.editThisPage