---
id: UX-MICRO-INT-001
category: Dev
confidence_score: 1.0
tags: [ux, [[Micro-interactions|Micro-interactions]], [[Feedback-Loops|Feedback-Loops]], animation, user-engagement, delightful-ux, [[State|State]]-feedback]
last_reinforced: 2026-04-26
---

# Micro-interactions and Feedback Loops (마이크로 인터랙션과 피드백 루프)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "사용자의 아주 작은 동작(클릭, 호버, 스크롤)에도 제품이 살아있음을 느끼게 하는 미세한 반응을 설계하고, 시스템의 현재 상태를 우아하게 전달하여 심리적 안정감과 즐거움을 선사하라" — 사용자 경험의 디테일을 완성하는 마이크로 디자인 요소.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Trigger-Action-Feedback Loop" — 사용자의 입력(Trigger)에 대해 시스템이 규칙(Rule)에 따라 반응하고, 그 결과(Feedback)를 시각적/청각적/촉각적 애니메이션으로 즉각 전달하는 패턴.
- **마이크로 인터랙션의 4단계 구조:**
    - **Trigger:** 사용자가 행동을 시작하는 신호 (버튼 클릭 등).
    - **Rules:** 트리거 발생 시 시스템이 어떻게 작동할지 결정하는 논리.
    - **Feedback:** 사용자가 일어난 일을 알 수 있게 하는 반응 (버튼 색상 변화, 로딩 스피너).
    - **Loops & Modes:** 인터랙션의 메타 규칙 (반복 여부, 환경에 따른 변화).
- **효과:** 사용자가 시스템을 제어하고 있다는 확신 제공, 작업 완료 확인, 긍정적인 브랜드 이미지 형성, 사용자 이탈 방지.
- **의의:** 기능적 완성을 넘어 '사랑받는 제품'으로 나아가는 감성적 UX의 정수.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 애니메이션을 리소스 낭비로 보기도 했으나, 현대 정책은 '적절한 애니메이션은 정보 전달의 필수 정책'으로 간주함. 다만, 의미 없는 과도한 애니메이션은 지양해야 함.
- **정책 변화:** Antigravity 프로젝트는 모든 상호작용 요소(버튼, 링크, 폼)에 대해 0.1초 이내의 즉각적인 피드백 애니메이션 정책을 시행하며, 접근성을 고려하여 애니메이션 감소(Reduced Motion) 옵션 대응 정책을 필수로 함.

## 🔗 지식 연결 (Graph)
- [[UX-Design-Principles|UX-Design-Principles]], User-Centered-Design-Approach, [[Inclusive-Design-and-UX|Inclusive-Design-and-UX]], [[Mobile-First-Responsive-Design-Principles|Mobile-First-Responsive-Design-Principles]]
- **Raw Source:** 00_Raw/Micro-interactions.md