Next.js 기초 <14. Next.js 15에서 애니메이션과 인터랙션 (Framer Motion, GSAP, Tailwind Animation)>

넥스트 Next.js

14. Next.js 15에서 애니메이션과 인터랙션 (Framer Motion, GSAP, Tailwind Animation) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 애니메이션이 중요한 이유

애니메이션은 웹사이트의 사용자 경험(UX)을 개선하고, 시각적 피드백을 제공하는 중요한 요소이다.
Next.js 15에서는 CSS 애니메이션, Framer Motion, GSAP, Tailwind CSS 등을 활용하여 부드러운 인터랙션을 구현할 수 있다.

📌 Next.js 15에서 애니메이션을 적용하는 주요 방식
✔ CSS 애니메이션 → 기본적인 애니메이션 효과 (transition, keyframes)
✔ Framer Motion → React 기반 애니메이션 라이브러리 (컴포넌트 기반)
✔ GSAP (GreenSock) → 고급 애니메이션 및 타임라인 제어 가능
✔ Tailwind CSS 애니메이션 → 유틸리티 기반 애니메이션 효과 제공

✅ 애니메이션 방식 비교

방식설명장점단점추천 사용 예시

CSS 애니메이션	transition, @keyframes 사용	✅ 간단하고 가벼움	❌ 복잡한 애니메이션 구현 어려움	기본적인 UI 효과
Framer Motion	React 전용 애니메이션 라이브러리	✅ 직관적이고 코드 재사용 가능	❌ 고급 타임라인 제어 부족	컴포넌트 기반 UI 애니메이션
GSAP	고급 애니메이션 엔진	✅ 강력한 타임라인 & 제어 기능	❌ 상대적으로 무거움	스크롤 애니메이션, 고급 UI
Tailwind Animation	Tailwind에서 제공하는 애니메이션 유틸리티	✅ 빠르고 쉬운 적용	❌ 복잡한 애니메이션 구현 어려움	기본적인 인터랙션

📌 Next.js 15에서는 "Framer Motion + Tailwind" 조합이 가장 많이 사용됨!

---

2. Next.js 15에서 기본적인 CSS 애니메이션 적용하기

✅ 1) CSS transition을 활용한 버튼 효과 (app/components/AnimatedButton.module.css)

.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: #005bb5;
}

📌 transition을 활용하여 부드러운 버튼 색상 변경 적용 가능!

✅ 2) @keyframes를 활용한 로딩 애니메이션 (app/components/Spinner.module.css)

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #ddd;
  border-top: 4px solid #0070f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

📌 CSS @keyframes을 활용하여 로딩 애니메이션 적용 가능!

---

✅ 여기까지 Next.js 15에서 CSS를 활용한 기본 애니메이션 적용 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 Framer Motion을 활용한 애니메이션은 어떻게 적용할까?"
✅ 2부에서 Framer Motion을 활용한 컴포넌트 기반 애니메이션을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

 

1. Framer Motion이란?

Framer Motion은 React 기반의 애니메이션 라이브러리로,
CSS보다 더 강력하고 직관적인 애니메이션을 구현할 수 있다.

✅ 1) Framer Motion 설치

$ npm install framer-motion

📌 Framer Motion을 설치하면 motion 컴포넌트를 활용하여 애니메이션 적용 가능!

✅ 2) 버튼에 애니메이션 적용 (app/components/FramerButton.tsx)

"use client";
import { motion } from "framer-motion";

export default function FramerButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      className="bg-blue-500 text-white px-4 py-2 rounded"
    >
      클릭하세요
    </motion.button>
  );
}

📌 Framer Motion을 활용하여 버튼의 hover, 클릭 시 크기 변화 애니메이션 적용 가능!

✅ 3) 리스트 아이템 애니메이션 (app/components/FramerList.tsx)

"use client";
import { motion } from "framer-motion";

const items = ["Item 1", "Item 2", "Item 3"];

export default function FramerList() {
  return (
    <motion.ul initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
      {items.map((item, index) => (
        <motion.li key={index} whileHover={{ scale: 1.1 }}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

📌 리스트 아이템이 나타날 때 부드러운 애니메이션 효과 적용 가능!

---

2. GSAP을 활용한 고급 애니메이션

GSAP(GreenSock)은 타임라인 기반의 애니메이션을 구현할 때 강력한 기능을 제공하는 라이브러리이다.
Next.js 15에서도 GSAP을 활용하여 다양한 애니메이션을 적용할 수 있다.

✅ 1) GSAP 설치

$ npm install gsap

📌 GSAP을 설치하면 고급 타임라인 애니메이션 구현 가능!

✅ 2) GSAP을 활용한 스크롤 애니메이션 (app/components/GsapScroll.tsx)

"use client";
import { useEffect, useRef } from "react";
import gsap from "gsap";

export default function GsapScroll() {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(boxRef.current, { opacity: 0, y: 100 }, { opacity: 1, y: 0, duration: 1 });
  }, []);

  return (
    <div ref={boxRef} className="bg-green-500 text-white p-5">
      GSAP 애니메이션 적용됨!
    </div>
  );
}

📌 GSAP을 활용하여 컴포넌트가 화면에 나타날 때 애니메이션 적용 가능!

---

3. Tailwind CSS 애니메이션 적용

✅ 1) Tailwind CSS 애니메이션 활용 (app/components/TailwindAnimation.tsx)

export default function TailwindAnimation() {
  return (
    <div className="animate-bounce bg-red-500 text-white p-5 rounded">
      Tailwind CSS 애니메이션!
    </div>
  );
}

 

📌 Tailwind CSS에서 제공하는 animate-bounce 클래스를 활용하여 간단한 애니메이션 적용 가능!

---

✅ 여기까지 Next.js 15에서 Framer Motion, GSAP, Tailwind CSS를 활용한 애니메이션 적용 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 웹 소켓(WebSocket)과 실시간 데이터 처리는 어떻게 할까?"
✅ 다음 회차에서 Next.js 15에서 WebSocket을 활용한 실시간 데이터 처리를 배워봅시다!