첫 애니메이션

첫 워크플로에서는 애니메이션이 하나만 들어 있는 단순한 파일을 사용하세요. 테마, 상태 머신, 멀티 애니메이션 번들은 다음 단계에서 다룹니다.

1. 삽입 위치 선택

애니메이션을 배치할 페이지를 엽니다. 새 컴포넌트를 특정 Frame 안에 넣고 중앙에 배치하려면 해당 Frame을 선택하세요.

2. 애니메이션 찾기

1. Plugins에서 LottieFiles를 엽니다.

2. Explore에서 Free animations를 선택합니다.

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

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

3. 삽입하기

첫 테스트에서는 기본 렌더러, 투명 배경, 반복, 속도를 그대로 두고 Insert animation을 선택합니다.

플러그인이 LottieFiles 플레이어 컴포넌트를 추가하고 선택한 뒤 Framer 화면을 결과 위치로 이동합니다. Framer 캔버스 컨트롤로 컴포넌트의 크기와 위치를 조정하세요.

4. 페이지 미리 보기

Framer Preview를 열고 사용할 데스크톱 및 모바일 너비에서 페이지를 테스트합니다. 다음 사항을 확인하세요.

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

• 원래 비율을 유지하는지

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

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

5. 게시 후 확인

생성된 framer.app 도메인이나 팀의 스테이징 환경에 게시합니다. 게시된 URL을 새 브라우저 탭에서 열고 재생 및 반응형 동작을 다시 확인하세요.

실제 페이지에서 올바르게 동작해야 게시가 끝난 것입니다. 프로덕션 체크리스트는 사이트 게시를 참고하세요.

관련 문서

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

• 플레이어 설정