affaan-m/motion-ui

motion-ui은(는) 무엇을 하나요?

React/Next.js용 프로덕션 준비 UI 모션 시스템입니다. 애니메이션, 전환 또는 모션 패턴을 구현할 때 사용하세요.

주요 기능

• 진입/퇴장 애니메이션: 요소가 마운트되거나 언마운트될 때 부드러운 애니메이션
• 레이아웃 전환: 요소의 레이아웃 변경 시 자동 애니메이션
• 제스처 인터랙션: 드래그, 호버, 탭, 팬, 핀치 등의 제스처 지원
• 모션 값 최적화: 성능 최적화를 위한 모션 값 시스템
• 접근성 지원: prefers-reduced-motion 설정 자동 감지 및 적용
• Next.js SSR 지원: 서버 사이드 렌더링과 완벽한 호환
• 타입스크립트 지원: 완전한 타입 정의 제공

설치

npm install framer-motion @affaan-m/motion-ui

또는 Yarn 사용 시:

yarn add framer-motion @affaan-m/motion-ui

사용 예제

기본 진입 애니메이션

import { MotionDiv } from '@affaan-m/motion-ui'

export default function MyComponent() {
  return (
    <MotionDiv
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <h1>안녕하세요, 모션 UI!</h1>
    </MotionDiv>
  )
}

레이아웃 전환

import { LayoutGroup, MotionDiv } from '@affaan-m/motion-ui'

export default function LayoutTransition() {
  return (
    <LayoutGroup>
      <MotionDiv layout>
        {/* 레이아웃 변경 시 자동 애니메이션 */}
      </MotionDiv>
    </LayoutGroup>
  )
}

제스처 기반 애니메이션

import { MotionDiv } from '@affaan-m/motion-ui'

export default function GestureExample() {
  return (
    <MotionDiv
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
    >
      드래그 가능한 요소
    </MotionDiv>
  )
}

API 참조

구성 요소/훅	설명
MotionDiv	애니메이션이 적용된 div 요소
MotionSpan	애니메이션이 적용된 span 요소
LayoutGroup	레이아웃 애니메이션 그룹화
AnimatePresence	진입/퇴장 애니메이션 관리
useMotionValue	모션 값 생성 훅
useSpring	스프링 기반 모션 값
useTransform	모션 값 변환 훅

접근성

Motion UI는 접근성을 우선시합니다. 사용자가 운영체제에서 prefers-reduced-motion을 설정한 경우, 모든 애니메이션을 자동으로 비활성화합니다:

import { useReducedMotion, MotionDiv } from '@affaan-m/motion-ui'

function AccessibleComponent() {
  const shouldReduceMotion = useReducedMotion()

  const variants = {
    hidden: { opacity: shouldReduceMotion ? 1 : 0 },
    visible: { opacity: 1 }
  }

  return (
    <MotionDiv
      variants={variants}
      initial="hidden"
      animate="visible"
    />
  )
}

Next.js 통합

Next.js App Router와 완전히 호환됩니다. 클라이언트 컴포넌트로 사용해야 합니다:

'use client'

import { MotionDiv } from '@affaan-m/motion-ui'

export default function Page() {
  return (
    <MotionDiv
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
      내 페이지 콘텐츠
    </MotionDiv>
  )
}

성능 최적화

Motion UI는 성능을 위해 설계되었습니다:

• GPU 가속 애니메이션: 가능한 경우 transform 및 opacity 속성을 사용
• 트리 셰이킹: 사용하지 않는 기능은 최종 번들에서 제외
• 메모이제이션: 불필요한 리렌더링 방지

라이선스

MIT