마이크로인터랙션 & 애니메이션 | 클로드로 디자인하기

이번 강에서 배울 것

마이크로인터랙션이란 무엇이고 왜 중요한가
CSS transition vs animation 차이
호버, 클릭, 로딩 효과 구현
스크롤 기반 등장 애니메이션 (Intersection Observer)
prefers-reduced-motion 접근성 처리

마이크로인터랙션이란?

마이크로인터랙션은 사용자 행동(클릭, 호버, 스크롤)에 반응하는 작은 애니메이션입니다. 없어도 기능은 동작하지만, 있으면 "이 사이트는 뭔가 다르다"는 느낌을 만듭니다.

상황	마이크로인터랙션 예시	효과
버튼 클릭	살짝 눌리는 효과 (scale 0.97)	물리적 피드백
카드 호버	위로 살짝 뜨기 (-translateY(4px))	클릭 가능 암시
로딩 중	스피너 or 스켈레톤 UI	기다림 인식 개선
성공/오류	체크 아이콘 팝업, 흔들기	즉각적 피드백
스크롤 등장	아래에서 페이드인	시선 유도

CSS Transition vs Animation

/* Transition: 상태 변화에 반응 (A -> B) */
.btn {
  background: #16a34a;
  transform: scale(1);
  transition: background 0.2s, transform 0.15s;
}
.btn:hover { background: #15803d; transform: scale(1.03); }
.btn:active { transform: scale(0.97); }

/* Animation: 자동으로 반복 실행 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.loading-dot { animation: pulse 1.5s ease-in-out infinite; }

실습 1 — 버튼 & 카드 인터랙션

실습 프롬프트 1

다음 마이크로인터랙션을 CSS로 구현해줘.

1. 버튼 인터랙션:
   - 호버: 배경색 어두워짐 + 살짝 위로 (-2px) + 그림자 강해짐
   - 클릭: scale(0.97) 눌리는 효과
   - 클릭 후 파급 효과 (ripple): 클릭 위치에서 원이 퍼져나감

2. 카드 인터랙션:
   - 호버: -translateY(6px) + 그림자 심화
   - 이미지 호버: scale(1.05) 확대 (overflow hidden으로 잘림)

3. 링크 호버:
   - 텍스트 아래에 왼쪽에서 오른쪽으로 밑줄 그어짐
   - CSS only (::after + scaleX 트릭)

실습 2 — 스크롤 등장 애니메이션

실습 프롬프트 2

Intersection Observer API를 사용한 스크롤 등장 애니메이션을 만들어줘.

효과 종류:
- fade-up: 아래에서 위로 올라오며 페이드인
- fade-left: 왼쪽에서 나타남
- fade-right: 오른쪽에서 나타남
- zoom-in: 작게 시작해서 정상 크기로

사용법: HTML에 data-animate="fade-up" 속성만 추가하면 자동 적용
딜레이: data-delay="200" 속성으로 순차 등장 가능

접근성: prefers-reduced-motion이 on이면 애니메이션 비활성화

실습 3 — 폼 피드백 애니메이션

실습 프롬프트 3

회원가입 폼의 UX 피드백 애니메이션을 만들어줘.

1. 입력 필드 focus: 테두리 색상 변화 + label 위로 올라감 (floating label)
2. 유효성 오류: 필드가 좌우로 흔들리는 shake 애니메이션
3. 성공: 초록 체크 아이콘이 팝업
4. 제출 버튼: 클릭 시 "제출 중..." 텍스트 + 스피너로 변경 (1.5초 후 "완료!" + 체크 아이콘)

애니메이션은 "주목을 끌기 위한 것"이 아니라 "사용자의 행동에 자연스러운 반응을 주기 위한 것"입니다. 0.15~0.3초 사이의 짧고 가벼운 효과가 가장 좋습니다. 0.5초를 넘으면 답답함을 줍니다.

강의 핵심 요약

transition은 상태 변화 반응, animation은 자동 반복 실행
Intersection Observer = 스크롤 기반 등장 애니메이션의 표준
애니메이션은 0.15~0.3초가 황금 시간대
prefers-reduced-motion 항상 처리 (접근성)
다음 강: 이미지와 아이콘을 Claude로 완성하기

관련 검색어 · CSS 마이크로인터랙션, 스크롤 애니메이션, Intersection Observer, CSS transition animation 차이, ripple 효과, 호버 효과 CSS