🎨 애니메이션 라이브러리 – Framer-Motion

이번 프로젝트에서는 애니메이션 라이브러리로 Framer Motion을 선택했다.
특히 로그인 화면과 랜딩 페이지처럼 단순하지만 완성도가 중요한 UI에 적합해서다.


아래에서는


1. 왜 사용하는지
2. 어떻게 설치하고
3. 실제로 어떻게 적용하는지
까지 공식 문서 기반으로 따라 하기 형식으로 정리해본다.

---

1) 왜 Framer Motion을 쓰는가

로그인 폼과 랜딩 페이지에서는 화려한 애니메이션보다
사용자의 시선을 자연스럽게 안내하는 가벼운 모션이 더 중요하다.


또한 이 프로젝트는 Next.js의 SSR/SSG 환경을 적극적으로 활용하기 때문에,
SSR에서도 안정적으로 동작하고 클라이언트에서만 실행되는 애니메이션이 필요했다.
Framer Motion은 이 흐름과 가장 잘 맞는 라이브러리다.

SSR 단계에서는 단순히 HTML만 렌더링하고,
브라우저가 하이드레이션된 뒤에 initial → animate 모션이 실행되기 때문에
SSG/SSR 환경에서도 문제 없이 자연스러운 애니메이션을 구현할 수 있다.


Framer Motion은 이런 목적에 특히 잘 맞는 이유가 있다.

• 컴포넌트에 initial, animate, exit만 선언하면 자동으로 동작
• 스크롤 등장(페이드인), 순차 등장 같은 기본 모션을 쉽게 구현
• 버튼 hover·tap, 카드 등장 등 작은 인터랙션에 강함
• React 상태 변화와 자연스럽게 연결됨
• 유지보수가 쉬움 (요소 위치/레이아웃 바뀌어도 자동 보간)
  
  
  즉,
  “부드러움은 챙기고, 복잡함은 줄이는”
  UI 완성도를 위한 선택.

---

2) 설치하기 (Next.js 또는 React 프로젝트 기준)

터미널에 아래 한 줄만 입력하면 끝이다.

pnpm add framer-motion
# 또는
npm install framer-motion
# 또는
yarn add framer-motion

Next.js(App Router) 환경에서도 특별한 설정은 필요 없다.
SSR을 자동으로 우회하기 때문에 클라이언트에서만 알아서 동작한다.

---

3) 기본 사용법 – 단 3개의 props로 완성

Framer Motion의 가장 큰 장점은 초보자도 심리적 장벽 없이 쓰기 쉽다는 것.


대표 컴포넌트인 motion을 import하고,
그 안에서 initial, animate, transition만 지정하면 된다.

"use client";

import { motion } from "framer-motion";

export default function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}   // 초기 상태
      animate={{ opacity: 1, y: 0 }}    // 애니메이션 끝 상태
      transition={{ duration: 0.5 }}     // 전환 시간

      Hello Motion!
    </motion.div>
  );
}

이 한 줄로 “아래에서 위로, 페이드인”이 만들어진다.

---

4) 로그인 폼에 적용하기 (실무에서 가장 많이 쓰는 패턴)

로그인 폼은 등장 타이밍이 중요하다.
너무 갑자기 나타나면 어색하고, 너무 느리면 성가시다.

아래는 0.2초 정도의 부드러운 등장을 적용한 예시다.

"use client";

import { motion } from "framer-motion";

export default function LoginForm() {
  return (
    <motion.form
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      className="flex gap-10">
      <input type="email" placeholder="이메일" className="border border-[var(--color-gray-300)]" />
      <input
        type="password"
        placeholder="비밀번호"
        className="border border-[var(--color-gray-300)]"
      />

      <motion.button
        whileHover={{ scale: 1.02, backgroundColor: "black", color: "white" }}
        whileTap={{ scale: 0.98 }}
        className="border border-[var(--color-gray-300)]">
        로그인
      </motion.button>
    </motion.form>
  );
}

여기서 포인트는 2개
1. form 전체는 부드럽게 등장
2. 버튼은 hover/tap 모션만 살짝 적용


로그인 폼처럼 심플한 UI는 이렇게 “작지만 명확한 인터랙션”만 있어도 훨씬 안정감 있다.

---

마무리

Framer Motion은 진입 장벽은 낮고,
로그인 페이지부터 랜딩 페이지까지 한 라이브러리로 일관된 애니메이션 시스템을 구성할 수 있다.


덕분에

• UI 흐름은 자연스럽고,
• 유지보수는 쉽고,
• 코드도 간결한

애니메이션 구조를 만들 수 있다.
기본개념을 자세히 보고싶으면!
공식문서
framer-motion 옵션 설명