여러 애니메이션 파일 다루기

.lottie(dotLottie) 파일은 하나의 번들 안에 둘 이상의 애니메이션을 담을 수 있습니다. 이 페이지는 플러그인이 여러 애니메이션 파일을 감지하는 방식, 삽입할 애니메이션을 고르는 방법, 단일 파일 가져오기와 여러 애니메이션 워크플로가 어떻게 다른지 다룹니다.

여러 애니메이션의 의미

표준 .lottie 파일은 하나의 Lottie 애니메이션을 감쌉니다. 여러 애니메이션 .lottie 파일은 두 개 이상을 감싸며, 번들에는 이름으로 인덱싱된 여러 애니메이션이 들어 있습니다. 보통 다음에 사용됩니다.

관련 아이콘 세트(success / error / loading 변형).
여러 개의 구분된 애니메이션을 가진 캐릭터(idle, hover, click).
같은 애니메이션의 테마 변형(light / dark mode).

여러 애니메이션 감지

여러 애니메이션 .lottie를 Import 탭에 드롭하거나 붙여넣으면 플러그인이 감지하고 미리 보기를 단일 플레이어 대신 carousel 모드로 전환합니다.

보이는 항목:

위쪽의 더 큰 미리 보기 영역에서 재생되는 활성 애니메이션 하나.
현재 애니메이션 번호와 이름을 보여주는 counter pill.
번들의 각 애니메이션을 나타내는 애니메이션 썸네일 행.
항목 사이를 스크롤하고 선택하는 컨트롤.

선택하고 삽입하기

carousel의 썸네일을 클릭해 미리 보기를 해당 애니메이션으로 전환합니다.
미리 보기가 원하는 것과 맞으면 Insert를 클릭합니다.
플러그인은 선택한 애니메이션만 컴포지션의 새 레이어로 삽입합니다.

같은 .lottie에서 여러 애니메이션을 삽입하려면:

첫 번째를 삽입합니다.
Import 탭을 벗어나지 않은 상태에서 다음 썸네일을 선택하고 다시 삽입합니다.
각 삽입은 새 레이어를 배치합니다.

상태 머신이나 테마가 있을 때

여러 애니메이션 .lottie에 상태 머신이나 테마(고급 dotLottie 기능)가 포함되어 있으면 플러그인은 미리 보기 영역에 추가 정보를 표시합니다.

상태 머신 — 목록으로 표시되지만 보통 AE 플러그인 미리 보기 안에서는 구동되지 않습니다. 상태 머신은 목적지 런타임에서 활성화됩니다.
테마 — 플러그인이 미리 보기 중 테마 변형 전환을 허용할 수 있습니다.

이 기능은 목적지에서 dotLottie를 지원하는 런타임이 필요합니다. 런타임 고려 사항은 렌더링 → 형식 선택을 참고하세요.

모션/제품 디자이너를 위한 팁

디자인 시스템에는 여러 애니메이션 .lottie가 유용합니다. 관련 아이콘이나 상태를 하나의 파일로 묶으면 팀원은 한 번 가져와 전체 세트를 받을 수 있습니다.
출시 전에 목적지 런타임이 여러 애니메이션을 지원하는지 확인하세요. 일반 lottie-web은 .lottie의 첫 번째 애니메이션만 읽습니다. 전체 multi-animation 지원에는 dotlottie-web 또는 이에 준하는 런타임이 필요합니다.

.lottie 안의 애니메이션 이름을 명확히 지으세요. carousel은 내부 이름으로 애니메이션에 라벨을 붙입니다. "Animation 1" 같은 일반 이름은 팀원이 고르기 어렵게 만듭니다.

문제 해결

여러 애니메이션이라고 예상한 .lottie에 carousel이 나타나지 않음 — LottieFiles Creator 또는 다른 inspector에서 .lottie가 실제로 여러 애니메이션을 포함하는지 확인하세요. 일부 번들은 여러 개라고 말하지만 실제로는 하나만 들어 있습니다.
선택한 애니메이션이 미리 본 것과 다르게 삽입됨 — 삽입하기 전에 썸네일을 다시 선택해 미리 보기를 새로 고치세요.