첫 애니메이션

첫 워크플로에서는 애니메이션이 하나만 들어 있는 단순한 Lottie를 사용하세요. Webflow의 네이티브 Lottie 경로를 따르므로 사용자 지정 코드나 고급 dotLottie 설정이 필요하지 않습니다.

1. 삽입 위치 선택

애니메이션을 배치할 페이지를 엽니다. 사용할 위치 근처에 Div block이나 다른 적절한 페이지 요소를 추가하거나 선택하세요.

2. 애니메이션 찾기

1. Apps에서 LottieFiles를 실행합니다.

2. Explore를 엽니다.

3. loading, success, scroll처럼 용도를 검색합니다.

4. 무료 결과를 열고 전체 애니메이션을 재생합니다.

3. 페이지에 추가

첫 테스트에서는 기본 렌더러, 투명 배경, 반복, 속도를 그대로 둡니다. 삽입할 요소가 선택되어 있는지 확인하고 Insert animation을 선택하세요.

앱이 Webflow Asset을 만들고 네이티브 Lottie 요소를 삽입합니다. 페이지와 Navigator에서 새 요소를 찾은 뒤 Webflow 컨트롤로 크기와 레이아웃을 설정하세요.

4. 사이트 미리 보기

Webflow Preview에서 사용할 브레이크포인트를 확인합니다. 다음 사항을 테스트하세요.

• 애니메이션이 보이고 부모 요소에 잘리지 않는지

• 원래 비율을 유지하는지

• 의도한 시점에 시작하고 반복되는지

• 주변 링크나 컨트롤을 가로막지 않는지

5. 게시 후 확인

먼저 webflow.io 스테이징 도메인에 게시합니다. 스테이징 URL을 새 브라우저 탭에서 열고 재생 및 반응형 동작을 다시 확인한 뒤 프로덕션 도메인에 게시하세요.

프로덕션 체크리스트는 사이트 게시를 참고하세요.

관련 문서

• 미리 보기 및 커스터마이즈

• 플레이어 설정