Framer Motion Next.js 사용법, 매끄러운 UX 만드는 법

반응형 웹사이트, 왜 '움직임'이 UX를 바꾸는가?

안녕하세요, 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자입니다 :)

3줄 요약

1. Framer Motion(현재 공식 명칭은 Motion)은 React·Next.js에서 선언형 코드 몇 줄로 마이크로 인터랙션을 구현하는 애니메이션 라이브러리입니다.

2. Next.js App Router에서는 모션 컴포넌트가 브라우저 API를 쓰기 때문에 반드시 클라이언트 컴포넌트(use client)로 분리해야 에러 없이 동작합니다.

3. 스크롤·타임라인 중심 연출은 GSAP, UI 상태 전환은 Framer Motion, 단순 호버는 CSS — 목적에 맞게 나눠 쓰는 것이 성능과 유지보수에 유리합니다.

웹사이트를 디자인할 때 대부분은 레이아웃이나 색감에 집중합니다. 하지만 사용자 기억에 남는 사이트는 결국 '움직임이 자연스러운 사이트' 입니다.

특히 모바일-데스크탑 대응이 중요한 반응형 웹에서는 마이크로 인터랙션과 자연스러운 애니메이션이 UX의 품질을 완전히 바꿔놓습니다. 버튼을 눌렀을 때 아무 반응이 없는 화면과, 0.2초짜리 눌림 피드백이 있는 화면은 같은 기능이라도 전혀 다른 제품처럼 느껴지죠.

마이크로 인터랙션의 역할은 크게 세 가지로 정리됩니다.

• 상태·피드백 전달: 지금 무슨 일이 벌어지고 있는지 알려준다 (로딩 스피너, 저장 완료 체크)

• 결과 확인: 내 액션이 반영됐다는 확신을 준다 (좋아요 하트가 튀는 모션)

• 조작 유도: 다음에 무엇을 하면 되는지 시선을 안내한다 (CTA 호버, 스크롤 리빌)

오늘은 이 '작은 움직임'을 Next.js 환경에서 어떻게 구현하는지, Framer Motion 사용법을 실무 기준으로 정리해보겠습니다.

Framer Motion이란? (지금은 'Motion'이라고 부릅니다)

Framer Motion은 React에서 사용할 수 있는 오픈소스 애니메이션 라이브러리입니다. 기존 CSS 애니메이션이나 GSAP보다 더 직관적이고, 반응형 UI를 유연하게 애니메이션 처리할 수 있습니다.

먼저 알아두면 좋은 최신 변화가 하나 있습니다. Framer Motion은 Framer에서 독립하면서 프로젝트명이 Motion으로 바뀌었습니다. 패키지 이름도 framer-motion에서 motion으로, import 경로도 motion/react로 변경됐습니다. 기존 framer-motion 패키지는 여전히 동작하지만 신규 개발은 motion 쪽으로 진행되고 있으니, 새 프로젝트라면 처음부터 motion으로 시작하는 편이 좋습니다.

# 신규 프로젝트 (권장)
npm install motion

# 기존 프로젝트
npm install framer-motion

// 신규
import { motion, AnimatePresence } from "motion/react";

// 기존 (동작하지만 유지보수 모드)
import { motion, AnimatePresence } from "framer-motion";

이 글의 예제는 이해를 위해 framer-motion 기준으로 쓰되, 경로만 motion/react로 바꾸면 그대로 동작합니다.

Framer Motion 주요 특징

• React와 100% 호환

• 선언형 코드로 간단하게 애니메이션 설정

• 마이크로 인터랙션 구현 용이

• 반응형 디자인에도 유연하게 대응

• 드래그, 제스처, 뷰포트 인식 기능 내장

• 컴포넌트가 사라질 때의 exit 애니메이션 지원 (AnimatePresence)

• 레이아웃 변화를 자동으로 보간하는 레이아웃 애니메이션

핵심 문법은 네 가지 속성만 이해하면 됩니다. initial(시작 상태), animate(도달할 상태), exit(사라질 때의 상태), transition(속도·지연·이징). "어떻게 움직여라"가 아니라 "어떤 상태가 되어라"만 선언하면 나머지는 라이브러리가 계산합니다.

Framer Motion을 한 번 써보면 "애니메이션을 더 이상 어렵게 만들 필요가 없다" 는 생각이 들 정도로, 쉽고 강력한 도구입니다.

Framer Motion vs GSAP vs CSS, 언제 뭘 써야 할까?

실무에서 가장 많이 받는 질문입니다. 결론부터 말하면 하나만 고르는 문제가 아니라, 목적에 따라 나눠 쓰는 문제입니다.

정리하면 이렇습니다.

• 버튼 호버, 색 전환 정도라면 굳이 라이브러리를 넣지 마세요. CSS transition이 가장 가볍습니다.

• 모달이 열리고 닫히거나, 탭이 전환되거나, 리스트 항목이 추가·삭제되는 UI라면 Framer Motion이 압도적으로 편합니다. 특히 "사라질 때의 애니메이션"은 CSS만으로는 사실상 구현이 번거롭습니다.

• 랜딩 페이지 전체가 스크롤 연출로 이어지는 브랜딩 사이트라면 GSAP의 타임라인·ScrollTrigger가 더 강력합니다. 요소가 수십 개씩 동시에 움직일 때는 리렌더를 유발하지 않는 GSAP이 프레임 안정성에서 유리하다는 벤치마크도 있습니다.

똑똑한개발자가 프로덕트를 만들 때도 UI 상태 전환은 Framer Motion, 히어로 섹션의 대형 스크롤 연출은 GSAP 로 역할을 나눠 쓰는 경우가 많습니다.

Next.js에서 Framer Motion 쓰면 왜 에러가 날까?

Next.js App Router로 넘어온 뒤 가장 많이 부딪히는 지점입니다. 분명 문서대로 썼는데 빌드가 깨지거나 런타임 에러가 납니다.

원인은 명확합니다. App Router의 컴포넌트는 기본이 서버 컴포넌트입니다. 반면 Framer Motion의 모션 컴포넌트는 DOM 노드와 window 같은 브라우저 API에 접근해야 동작합니다. 서버에는 DOM이 없으니 충돌하는 것이죠.

해결책은 애니메이션이 필요한 부분만 클라이언트 컴포넌트로 떼어내는 것입니다.

// components/FadeIn.tsx
"use client";

import { motion } from "motion/react";

export default function FadeIn({ children, delay = 0 }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

이렇게 래퍼를 하나 만들어두면, 서버 컴포넌트인 페이지 안에서도 마음 편히 쓸 수 있습니다.

// app/page.tsx (서버 컴포넌트 그대로 유지)
import FadeIn from "@/components/FadeIn";

export default function Page() {
  return (
    <FadeIn>
      <h1>반응형 웹사이트에 어울리는 자연스러운 진입 애니메이션!</h1>
    </FadeIn>
  );
}

여기서 중요한 포인트가 있습니다. 페이지 전체에 use client를 붙이는 것으로 해결하지 마세요. 그러면 서버 컴포넌트의 이점(번들 축소, 데이터 페칭 최적화)을 통째로 버리는 셈입니다. Next.js에서 Framer Motion을 쓸 때의 원칙은 "움직이는 껍데기만 클라이언트, 내용물은 서버" 입니다.

Framer Motion 예제: 실무에서 가장 많이 쓰는 3가지

Framer Motion은 단순히 Fade-in 수준의 효과에 그치지 않습니다. 스크롤 인터랙션, 모바일 드래그, 탭 전환, 모달 애니메이션 등 다양한 상황에 활용됩니다.

1. 슬라이드 인 (진입 애니메이션)

원문에서 소개했던 가장 기본 형태입니다.

"use client";
import { motion } from "motion/react";

export function Banner() {
  return (
    <motion.div
      initial={{ x: -100, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      반응형 웹사이트에 어울리는 자연스러운 진입 애니메이션!
    </motion.div>
  );
}

간단한 속성 몇 개만 넣어주면 사용자에게 부드럽고 몰입감 있는 UI를 제공할 수 있습니다.

2. 스크롤 리빌 (뷰포트 진입 시 등장)

랜딩 페이지에서 가장 수요가 많은 패턴입니다. whileInView 하나로 끝납니다.

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  스크롤이 여기 닿으면 한 번만 등장합니다.
</motion.section>

once: true를 빼먹으면 스크롤을 올렸다 내릴 때마다 계속 재생돼 산만해집니다. 실무에서는 거의 항상 once를 켭니다.

3. 모달 등장·퇴장 (AnimatePresence)

CSS만으로는 까다로운 "사라질 때"의 애니메이션입니다. 이게 Framer Motion을 쓰는 가장 큰 이유라고 봐도 좋습니다.

<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.96 }}
      transition={{ duration: 0.2 }}
    >
      모달 내용
    </motion.div>
  )}
</AnimatePresence>

반응형 웹사이트에 Framer Motion을 어떻게 활용할까?

Framer Motion은 뷰포트 사이즈에 따라 애니메이션을 다르게 설정하거나, 모바일에서만 드래그가 가능하도록 제어할 수도 있습니다.

Framer Motion 적용 예시

• 모바일 메뉴 슬라이드

• 카드 컴포넌트 드래그 삭제

• 이미지 갤러리 줌 인/아웃

• 탭 전환 시 자연스러운 페이드 효과

• 스텝 폼의 단계 전환 (진행 방향에 따라 좌/우로 슬라이드)

뷰포트별로 다르게 움직이게 하기

데스크탑에서는 시원한 이동 폭이 좋지만, 좁은 모바일 화면에서 같은 값을 쓰면 요소가 화면 밖에서 튀어 들어와 어지럽습니다. 뷰포트 상태에 따라 값 자체를 바꿔주는 편이 안전합니다.

"use client";
import { motion } from "motion/react";
import { useMediaQuery } from "@/hooks/useMediaQuery";

export function Card({ children }) {
  const isMobile = useMediaQuery("(max-width: 768px)");

  return (
    <motion.div
      initial={{ opacity: 0, x: isMobile ? 0 : -80 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: isMobile ? 0.25 : 0.5 }}
      drag={isMobile ? "x" : false}
    >
      {children}
    </motion.div>
  );
}

모바일에서는 이동 대신 페이드 위주로, 지속 시간은 더 짧게. 이것만 지켜도 체감 품질이 크게 올라갑니다.

특히 요즘은 UX 중심의 웹사이트, 브랜딩 사이트, 모바일 우선 설계가 중요해지고 있기 때문에, 애니메이션이 있는 UI는 단순히 멋져 보이는 것을 넘어 브랜드 인지도를 높이고 전환율을 끌어올리는 무기가 되어 줍니다.

웹 애니메이션이 버벅일 때 확인할 것

애니메이션을 넣고 나서 "왜 이렇게 무겁냐"는 피드백을 받는 경우가 많습니다. 대부분 아래 몇 가지에서 걸립니다.

부드러움의 기준은 60fps, 즉 프레임 하나당 약 16.6ms 안에 모든 계산이 끝나야 한다는 뜻입니다. 이 예산을 넘기면 사용자는 즉시 '끊김'으로 인식합니다.

• transform과 opacity만 애니메이션할 것. 이 두 속성은 브라우저 컴포지터에서 처리되어 레이아웃 재계산을 유발하지 않습니다. 반대로 width, height, top, left, margin을 움직이면 매 프레임 레이아웃이 다시 계산됩니다.

• 동시에 움직이는 요소 수를 줄일 것. 리스트 전체를 한 번에 stagger로 띄우기보다, 화면에 보이는 항목만 whileInView로 처리하세요.

• 애니메이션 값을 state로 관리하지 말 것. 매 프레임 리렌더가 발생합니다. Framer Motion의 모션 값(useMotionValue, useTransform)을 쓰면 React 리렌더 없이 값을 갱신합니다.

• 지속 시간은 0.2~0.5초 사이로. 1초가 넘는 진입 애니메이션은 '고급스러움'보다 '느림'으로 읽힙니다.

• 이미지·폰트 로딩과 애니메이션이 겹치지 않게. 초기 진입 애니메이션이 리소스 로딩과 경쟁하면 첫 프레임부터 끊깁니다.

모든 사용자가 '움직임'을 원하는 건 아닙니다

놓치기 쉬운 부분입니다. 애니메이션은 어떤 사용자에게는 불편이나 통증이 됩니다. 눈이 쉽게 피로해지는 사용자, 저시력 사용자, 인지 장애가 있는 사용자, 광과민성 발작·편두통이 유발될 수 있는 사용자, 그리고 저사양 기기 사용자입니다.

그래서 OS의 '동작 줄이기' 설정을 존중해야 합니다. Framer Motion은 이를 위한 훅을 기본 제공합니다.

"use client";
import { motion, useReducedMotion } from "motion/react";

export function Hero({ children }) {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 40 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.5 }}
    >
      {children}
    </motion.div>
  );
}

움직임을 완전히 없애는 게 아니라, 이동은 제거하고 페이드만 남기는 것이 실무 정석입니다. 접근성과 연출을 동시에 지킬 수 있습니다.

Framer Motion 도입 4단계 체크리스트

처음 도입한다면 이 순서로 가는 걸 권합니다.

1. 움직일 대상을 목록으로 만든다. "멋있게"가 아니라 "어떤 피드백이 부족한가"에서 출발합니다. 클릭 후 반응 없는 버튼, 갑자기 나타나는 모달, 로딩 상태가 안 보이는 영역.

2. 재사용 래퍼를 3개만 먼저 만든다. FadeIn, ScrollReveal, ModalTransition. 페이지마다 인라인으로 모션을 쓰기 시작하면 6개월 뒤 통일성이 무너집니다.

3. 모바일 값을 따로 정의한다. 이동 폭과 지속 시간을 데스크탑의 절반 수준으로 잡습니다.

4. 접근성과 성능을 검수한다. useReducedMotion 적용, transform·opacity 외 속성 사용 여부 점검, 저사양 기기에서 실제 스크롤 테스트.

'움직임'이 만드는 사용자 경험

멋진 웹사이트는 콘텐츠만으로 완성되지 않습니다. 작고 부드러운 움직임이 전체 경험을 이끕니다.

오늘 소개한 Framer Motion은 바로 그 '작은 움직임'을 최대한 자연스럽게, 효율적으로 구현할 수 있게 도와주는 도구입니다. Next.js 환경이라면 클라이언트 컴포넌트 분리 원칙만 지키고, 성능은 transform·opacity 중심으로, 접근성은 useReducedMotion으로 챙기면 됩니다. 반응형 웹사이트에서 유저 경험을 극대화하고 싶은 분이라면 꼭 시도해보셨으면 좋겠습니다 :)

더 정교하고 감각적인 애니메이션을 원하신다면?

IT 개발사 똑똑한개발자팀과 함께하는 걸 추천드립니다 😊

✔️ 인터랙션 중심의 UX 기획

✔️ Framer Motion 기반의 반응형 UI 구현

✔️ 브랜드에 딱 맞는 감성 디자인

똑똑한개발자 | 기업 AX 전환 전문 개발사

제미나이, GPT, 클로드를 활용해 AI Agent 탑재 및 AX 전환의 전문성을 갖춘 IT 프로덕트 에이전시.

https://www.toktokhan.dev/?utm_source=landing&utm_medium=Framer-Motion&utm_campaign=Framer-Motion&utm_term=Framer-Motion