--- id: UX-MICRO-INT-001 category: "10_Wiki/πŸ’‘ Topics/AI" confidence_score: 1.0 tags: [ux, micro-interactions, feedback-loops, animation, user-engagement, delightful-ux, 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