지그재그, 기획전 페이지 애니메이션 편집 기능 개발!

기획전 페이지의 애니메이션 편집 기능 개발을 통해 기획자들의 프로모션 페이지 제작 시간 단축

Framer Motion을 활용하여 독립적인 애니메이션 효과를 적용하고, 애니메이션 씬, 그룹, 클립으로 계층화

IntersectionObserver를 활용, 직관적인 타이밍 설정을 제공하여 개발자 의존성을 줄이고 유연한 기획전 운영 가능

애니메이션 모듈 아키텍처 설계

애니메이션 씬, 그룹, 클립으로 계층화하여 복잡한 애니메이션을 효율적으로 관리한다. Framer Motion을 사용하여 독립적인 애니메이션 효과를 적용하고, FilterOverlap과 MotionOverlap 레이어를 통해 효과 간의 충돌을 방지한다. 따라서 유지보수성과 확장성을 동시에 확보했다.

직관적인 애니메이션 타이밍 설정

IntersectionObserver를 활용하여 스크롤 시 애니메이션 발생 시점을 제어한다. 미리보기 영역을 통해 편집 내용을 즉시 확인 가능하며, 굵은 선으로 애니메이션 발생 타이밍을 시각적으로 제공한다. 결과적으로 개발자 의존성 감소와 기획자 친화적인 환경을 구축했다.

Framer Motion을 활용한 효과 중첩

Framer Motion을 사용하여 다양한 애니메이션 효과를 쉽게 구현하고, 독립적인 레이어 구조를 통해 효과 간의 충돌을 방지한다. FilterOverlap과 MotionOverlap 레이어를 분리하여 유지보수성을 높이고, 새로운 효과 추가 시 테스트 부담을 줄였다. 따라서 애니메이션 효과의 유연성을 확보했다.