토스의 인터랙티브 효과 훔쳐보기 (feat. framer-motion, matter.js)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자_중간~고급

핵심 요약

• Scroll 기반 헤더 애니메이션 구현: useState와 useEffect를 활용하여 스크롤 위치 및 진행률을 계산하고, translateY로 헤더 이동 효과 적용
• framer-motion으로 FAQ 애니메이션 구현: AnimatePresence, motion.div를 사용해 initial, animate, exit 상태로 부드러운 펼침/접힘 효과 제공
• matter.js 기반 물리 시뮬레이션: Engine, Render, World, Body 모듈을 활용하여 중력, 반발력, 마찰을 적용한 도형 움직임 구현

섹션별 세부 요약

###1. Scroll 기반 헤더 애니메이션 구현

• useState로 scrollY와 progress 상태 관리
• useEffect로 스크롤 이벤트 리스너 등록 및 해제
• handleScroll 함수로 스크롤 위치 및 진행률 계산
• translatedY 계산을 통해 헤더의 transform: translateY 적용

###2. framer-motion으로 FAQ 애니메이션 구현

• AnimatePresence 컴포넌트로 애니메이션 종료 시 exit 효과 적용
• motion.div의 initial, animate, exit 속성으로 애니메이션 상태 정의
• height: auto 사용으로 콘텐츠 높이 자동 계산 및 애니메이션 처리
• transition 속성을 통해 애니메이션 지속 시간(0.3초) 설정

###3. matter.js 기반 물리 시뮬레이션

• Engine 모듈로 물리 엔진 생성 및 중력값(engine.gravity.y = 1.2) 설정
• Render 모듈로 캔버스 렌더링 설정(크기, 배경, 와이어프레임 등)
• World에 ground, ceiling, wall 등 정적 객체 추가
• Body 모듈로 circle, rectangle 등 물리 객체 생성 및 속성(restitution, friction) 설정

결론

• 실무에서는 useState, useEffect, framer-motion, matter.js의 핵심 API(Engine, Render, World, Body)를 활용해 흥미로운 인터랙티브 요소를 구현할 수 있으며, 물리 시뮬레이션의 경우 restitution과 friction 값을 조정해 자연스러운 움직임을 구현하는 것이 중요하다.