🎞️ 51. React Native 애니메이션 완전 정리 — Animated, Reanimated, Lottie 비교와 예시

---

앱의 사용자 경험에서 애니메이션은 감성이다.
버튼을 누르고, 화면이 전환되고, 로딩 스피너가 돌아가는 모든 순간이
유저에게 “이 앱 부드럽고 정교하네?”라는 인상을 줄 수 있다.

이번 글은 React Native에서 사용할 수 있는 주요 애니메이션 도구들을 정리하고
어떤 상황에 어떤 방식이 적합한지 정리한 글이다.

---

✅ 1. Animated API (기본 제공)

React Native에서 기본 제공하는 애니메이션 시스템

🔧 예제: 투명도 조절

const fadeAnim = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }).start();
}, []);

return (
  <Animated.View style={{ opacity: fadeAnim }}>
    <Text>애니메이션 컴포넌트</Text>
  </Animated.View>
);

✅ 간단한 애니메이션에 적합
✅ useNativeDriver: true로 GPU 기반 성능 확보 가능
❌ 복잡한 연산, 제스처와의 연동에는 한계

---

🔁 2. Reanimated 2

성능이 중요하거나, 제스처/스크롤 연동이 필요할 때 선택

npm install react-native-reanimated

• 완전한 JS-to-Native bridge 최적화
• useSharedValue, withTiming, useAnimatedStyle 등을 사용

🔧 예제: 위치 이동

const offset = useSharedValue(0);

const animatedStyles = useAnimatedStyle(() => ({
  transform: [{ translateY: offset.value }],
}));

return (
  <Animated.View style={animatedStyles} />
);

✅ 성능 최고
✅ 제스처 핸들링, 스크롤 연동에 강함
❌ 러닝 커브 있음, 설치 복잡

---

🎨 3. Lottie

디자이너가 만든 JSON 애니메이션 파일을 그대로 앱에서 재생

npm install lottie-react-native

import LottieView from 'lottie-react-native';

<LottieView
  source={require('./animation.json')}
  autoPlay
  loop
/>

✅ 고퀄리티 일러스트 애니메이션 구현
✅ 로딩 인디케이터, 성공 애니메이션 등에 유리
❌ 사용자 인터랙션과는 다소 분리됨 (동기화 어렵)

---

📊 상황별 선택 기준

목적	추천 도구
버튼 누를 때 효과	Animated
제스처 기반 슬라이드	Reanimated
스크롤 따라 움직이는 컴포넌트	Reanimated
로딩/성공 애니메이션	Lottie
복잡한 전환 애니메이션	Reanimated + react-native-gesture-handler

---

🧠 실전 팁

항목	전략
리렌더 방지	useRef 또는 useSharedValue 사용
성능 최적화	useNativeDriver: true는 항상 고려
비동기 시작 시점	Animated.sequence, delay() 등 조합
모달 애니메이션	열기/닫기 애니메이션 분리 구현 추천

---

📝 내가 느낀 점

처음엔 그냥 opacity 정도만 줘도 충분하다고 생각했는데
화면 전환, 스와이프, 드래그, 탭 반응성 등
앱의 고급스러운 느낌은 애니메이션이 책임지고 있다는 걸 알게 됐다.

지금은 버튼 효과 → Animated,
제스처 → Reanimated,
로딩/성공 → Lottie
이런 구조로 쓰고 있고,
UI 퀄리티가 눈에 띄게 좋아졌다는 피드백도 종종 받는다.

---

🎬 “애니메이션은 기능이 아니라, 감동이다.”

---