상태 머신 준비

상태 머신은 고정된 타임라인의 dotLottie 파일을 인터랙티브한 경험으로 바꿉니다. Webflow에서는 페이지 사용자 지정 코드가 있는 고급 플레이어를 사용하므로 파일, 컨테이너, 페이지, 게시된 런타임이 모두 맞아야 합니다.

상태 머신 미리 보기

1. 상태 머신이 들어 있는 dotLottie 파일을 엽니다.

2. 미리 보기에서 상태 머신 모드를 켭니다.

3. 파일에 상태 머신이 여러 개라면 사용할 항목을 선택합니다.

4. 포인터 인터랙션과 공개된 입력값을 사용해 중요한 전환을 모두 테스트합니다.

5. 같은 시나리오를 반복하기 전에 상태 머신을 다시 시작합니다.

페이지 컨테이너 준비

Div block처럼 자식 요소를 포함할 수 있는 Webflow 요소를 선택합니다. 앱은 해당 컨테이너 안에 <dotlottie-wc> 플레이어를 추가하고 고유한 스타일을 지정한 뒤 플레이어 초기화에 필요한 페이지 스크립트를 추가합니다.

디자인 캔버스에는 이 요소의 정적인 썸네일이 표시될 수 있습니다. 실제 상태 머신은 Webflow Preview와 스테이징 URL에서 테스트하세요.

프로덕션 확인 사항

• 필요한 곳에서 포인터 인터랙션이 마우스와 터치로 동작하는지

• 애니메이션이 주변 페이지 컨트롤에 필요한 입력을 가로채지 않는지

• 첫 인터랙션 전에 초기 상태가 보이는지

• 페이지를 다시 열면 의도한 상태로 돌아오는지

• 상태 머신이 시작된 뒤에도 선택한 하위 애니메이션과 테마가 적용되는지

관련 문서

• 멀티 애니메이션 파일 사용

• 사이트 게시