Framer Motion으로 패럴랙스 이미지 그리드 만들기

내용

포트폴리오 홈 섹션에서 개인적인 이미지들을 단순히 나열하는 것이 아니라, 스크롤에 따라 역동적으로 움직이는 인터랙티브한 갤러리를 구현하고 싶었습니다.

해결 과정

1. 스크롤 기반 Transform 설정

const { scrollY } = useScroll()
const yOffset = useTransform(scrollY, [0, 1000], [0, (index % 2 === 0 ? -120 : 100)])
const xOffset = useTransform(scrollY, [0, 1000], [0, (index % 4 === 0 ? -80 : index % 4 === 1 ? 80 : index % 4 === 2 ? -60 : 60)])
const rotation = useTransform(scrollY, [0, 1000], [0, (index % 3 === 0 ? -8 : index % 3 === 1 ? 8 : -4)])

2. 동적 Motion 스타일

<motion.div
  style={{ 
    y: yOffset, 
    x: xOffset,
    rotate: rotation,
    willChange: 'transform',
    backfaceVisibility: 'hidden',
    perspective: '1000px'
  }}
>

3. 호버 시 설명 표시

<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
  <p className="text-white text-center font-light px-4 text-sm leading-relaxed">
    {img.alt}
  </p>
</div>

핵심 포인트

• 다양한 움직임 패턴: 인덱스 기반으로 4가지 X축, 2가지 Y축, 3가지 회전 패턴 적용
• GPU 가속: willChange, backfaceVisibility 속성으로 성능 최적화
• 감성적 스토리텔링: 호버 시 이모지와 함께 개인적인 이야기 표시

배운 점

Framer Motion의 useScroll과 useTransform을 조합하면 복잡한 패럴랙스 효과도 선언적으로 구현할 수 있습니다. 성능 최적화를 위한 CSS 속성들도 함께 적용하는 것이 중요했습니다.