[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(2)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git
📌Preview

whileHover={{ y: -6, scale: 1.02, boxShadow: "0 18px 40px rgba(0,0,0,0.18)", }}
whileTap={{ scale: 0.98, y: -2 }}
transition={{ type: "spring", stiffness: 320, damping: 26 }}

→ 이런 간단한 프로퍼티만으로 호버시 떠오르는 효과, 눌리는 효과를 구현할 수 있다는게 정말 편리합니다!
 

---

 

Week 1 — Step 2: 인터랙션 (whileHover / whileTap)

목표: “사용자 입력에 반응하는” 마이크로 인터랙션을 정확히 쓰는 법.
 

개념 핵심

• whileHover: 마우스를 올린 동안 유지되는 상태.
• whileTap: 클릭/터치로 누르고 있는 동안 유지되는 상태.
• initial/animate와 동시에 써도 된다. (입장 애니메이션 + 인터랙션 공존)

 

 

바로 붙여 넣는 실습 컴포넌트

// Step2_HoverTap.tsx
import { MotionConfig, motion } from "framer-motion";

export default function Step2_HoverTap() {
  return (
    <MotionConfig reducedMotion="never">
      <div style={{ padding: 24, display: "grid", gap: 24, maxWidth: 960, margin: "0 auto" }}>
        {/* 1) 버튼: hover/tap 기본 */}
        <section>
          <h3 style={{ marginBottom: 8, fontWeight: 600 }}>1) 버튼 마이크로 인터랙션</h3>
          <motion.button
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            whileHover={{ y: -2, scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            transition={{ type: "spring", stiffness: 380, damping: 24 }}
            style={{
              padding: "12px 18px",
              borderRadius: 12,
              background: "#111",
              color: "#fff",
              border: "1px solid #222",
              cursor: "pointer",
            }}
          >
            Hover & Tap me
          </motion.button>
          <p style={{ marginTop: 8, color: "#6b7280", fontSize: 14 }}>
            hover(올려놓는 동안), tap(누르고 있는 동안)만 적용됨. 손 떼면 즉시 원래 상태로 복귀.
          </p>
        </section>

        {/* 2) 카드: hover 시 그림자/떠오름 + tap 시 살짝 눌림 */}
        <section>
          <h3 style={{ marginBottom: 8, fontWeight: 600 }}>2) 카드 인터랙션</h3>
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            whileHover={{ y: -6, scale: 1.02, boxShadow: "0 18px 40px rgba(0,0,0,0.18)" }}
            whileTap={{ scale: 0.98, y: -2 }}
            transition={{ type: "spring", stiffness: 320, damping: 26 }}
            style={{
              height: 120,
              borderRadius: 16,
              background: "#f3f4f6",
              boxShadow: "0 6px 14px rgba(0,0,0,0.08)",
              padding: 16,
            }}
          >
            카드 콘텐츠
          </motion.div>
          <p style={{ marginTop: 8, color: "#6b7280", fontSize: 14 }}>
            hover로 살짝 떠오르고, tap으로 눌림. 시각적 깊이를 주는 기본 패턴.
          </p>
        </section>

        {/* 3) 아이콘: transform-origin 바꿔서 자연스러운 스케일 */}
        <section>
          <h3 style={{ marginBottom: 8, fontWeight: 600 }}>3) 아이콘 스케일(기준점 지정)</h3>
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            whileHover={{ scale: 1.1, rotate: 2 }}
            whileTap={{ scale: 0.95 }}
            transition={{ type: "spring", stiffness: 420, damping: 22 }}
            style={{
              width: 56,
              height: 56,
              borderRadius: 12,
              background: "#a78bfa",
              display: "grid",
              placeItems: "center",
              transformOrigin: "center", // ← 기준점
              fontWeight: 700,
              color: "#fff",
            }}
          >
            ★
          </motion.div>
          <p style={{ marginTop: 8, color: "#6b7280", fontSize: 14 }}>
            transformOrigin으로 스케일 기준점을 조정. (보통 center, 버튼은 top/left도 유효)
          </p>
        </section>
      </div>
    </MotionConfig>
  );
}

 

손풀기 미션(5분)

1. 버튼 whileHover에 rotate: 1.5 추가해 미세 회전 감각 익히기.
2. 카드 whileHover의 y: -6 → -10, boxShadow를 조금 강하게 바꿔보기.
3. 아이콘 transformOrigin: "left top"으로 바꿔 “기준점 차이” 눈으로 확인.

 

자주 막히는 포인트 (빠른 해결)

• 왜 안 변해? → hover/tap은 “올려놓는 동안/누르는 동안”만 유지됨. 손 떼면 돌아가는 게 정상.
• 움직임이 과해 → 스프링이면 damping↑, 트윈이면 easeOut 계열로.
• 레이아웃이 출렁 → margin/top 대신 y/scale/boxShadow 같은 transform/paint 중심으로.
• 모바일에서 hover 없음 → 모바일은 보통 whileTap만 체감됨. (필요 시 onTouchStart로 상태 전환하여 animate로 연출)

 

체크리스트

• hover/tap이 “유지되는 동안만” 적용된다는 개념이 잡혔다.
• transform 중심(특히 y/scale/rotate)으로 설계하면 부드럽고 안전하다는 걸 체감했다.
• 데스크톱/모바일 차이를 이해했다.

OK면, Week 1 — Step 3: Variants & Stagger & AnimatePresence(퇴장)로 넘어가기!