Lottie 기초부터 웹 인터랙션까지
공개
로그인 없이 누구나 시청 가능한 강좌입니다.
After Effects에서 제작한 모션을 Lottie로 변환하고, Figma와 웹사이트에 적용해 실제 UI 인터랙션으로 활용하는 방법을 배우는 강좌입니다. 먼저 Lottie가 무엇이고 UI 디자인에서 왜 활용되는지 이해한 뒤, 개발 환경을 준비하고 After Effects와 Bodymovin을 이용해 애니메이션을 Lottie 파일로 출력하는 과정을 살펴봅니다.
출력된 코드의 구조를 이해하고 불필요한 부분을 정리하면서 웹에서 Lottie 애니메이션이 어떻게 동작하는지도 익힙니다. 또한 LottieFiles를 활용해 Figma에서 모션을 확인하고 디자인 과정에 적용하는 방법까지 살펴봅니다.
후반부에서는 JavaScript를 이용해 Lottie 애니메이션을 직접 제어합니다. 특정 영역을 클릭했을 때 애니메이션을 실행하거나 재생 속도를 조절하고, 멈추거나 역방향으로 재생하는 방법을 배우며 스크롤 위치에 따라 애니메이션 프레임을 제어하는 인터랙션까지 구현합니다. 마지막에는 Lottie Interactivity를 활용해 실제 웹사이트에서 볼 수 있는 스크롤 기반 인터랙션을 만들어보며, 모션 디자인을 정적인 결과물이 아닌 실제 제품 경험으로 연결하는 방법을 익힙니다.
이런 분들이 들으면 좋아요
- UI에 모션을 적용하고 싶은 UX/UI 디자이너
- After Effects 결과물을 웹과 앱에서 활용하고 싶은 분
- Lottie를 처음 배우는 디자이너와 개발자
- 웹사이트에 가벼운 인터랙티브 애니메이션을 적용하고 싶은 분
- 디자인과 개발 사이의 모션 전달 과정을 이해하고 싶은 분
이런 지식이 있으면 좋아요
- After Effects의 기본적인 사용 경험이 있으면 도움이 됩니다.
- 웹 인터랙션 파트에서는 JavaScript의 아주 기본적인 개념을 알고 있으면 좋습니다.
강좌 커리큘럼
강좌에서 배울 내용을 확인해 보세요.
13개 수업
1시간 35분