마이크로 인터랙션

마이크로 인태랙션이란?

"사용자의 작은 행동에 반응한느 애니메이션 및 상호작용을 의미"

쉽게 말하면, 사용자가 버튼을 클릭하거나, 스크롤하거나, 입력할 때 나타나는 작은 애니메이션 효과

---

애니메이션과 인터렉션의 차이

• 애니메이션(Animation) : 단순히 요소를 움직이거나 변형하는 것
• 인터랙션(Interation) : 사용자의 행동에 따라 반응하는 것

즉, 모든 인터랙션에는 애니메이션이 포함될 수 있지만, 모든 애니메이션이 인터랙션은 아님

---

마이크로 인터랙션의 4가지 요소

요소	설명
트리거(Trigger)	사용자가 클릭, 터치, 스크롤 등 특정 행동을 했을 때 실행됨
규칙(Rules)	애니메이션이 어떻게 동작할지 정의(버튼 크기 변경, 색 변화 등)
피드백(Feedback)	애니메이션이 발생하면서 사용자가 시각적으로 변화를 인식
반복 및 모드(Loops & Modes)	애니메이션이 반복되거나 특정 조건에서만 실행

---

마이크로 인터랙션 예제

1) 버튼 클릭 시 물결 효과

.button {
  position: relative;
  overflow: hidden;
  background-color: #007aff;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

.button:active::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: scale(2);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}