버튼 클릭 시 애니메이션 구현 가이드｜GSAP & CSS Transition 실습

글쓴이 /

버튼 클릭 시 자연스러운 애니메이션은 사용자의 시선을 끌고 클릭 만족도를 높이는 핵심 UI 요소입니다.
이번 글에서는 CSS Transition으로 간단히 구현하는 방법부터, GSAP을 사용한 세밀한 제어까지 다룹니다.
실무에서 바로 적용할 수 있는 예제 코드와 함께 인터랙티브 버튼을 완성해보세요.

왜 버튼 애니메이션이 중요한가

  • 클릭 후 즉각적인 피드백 제공 → UX 향상
  • 단순 클릭에서 브랜드 아이덴티티 강조 가능
  • 사용자 참여도 증가 및 체류시간 증가로 SEO에도 긍정적

📌 TIP: 버튼 애니메이션은 과하지 않게, 사용자의 흐름을 방해하지 않는 수준으로 설계하는 것이 중요합니다.

CSS Transition으로 간단하게 구현하기

CSS만으로도 버튼 클릭 시 애니메이션을 간단히 만들 수 있습니다.

HTML 예시

<button class="btn-transition">Click Me</button>
HTML

CSS 예시

.btn-transition {
  background-color: #3b82f6;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-transition:active {
  transform: scale(0.95);
  background-color: #2563eb;
}
CSS

설명:

  • transition을 통해 클릭 시 부드러운 축소 효과 구현
  • :active 상태에서 색상과 크기가 살짝 변해 즉각적 피드백 제공

📌 TIP: CSS Transition은 성능이 우수하고 간단, 모바일에서도 안정적으로 작동합니다.

GSAP으로 고급 애니메이션 구현

GSAP(GreenSock Animation Platform)은 강력하고 부드러운 JavaScript 애니메이션 라이브러리입니다.
CSS만으로 한계가 있는 복잡한 타이밍 제어나 연속 애니메이션에 적합합니다.

HTML 예시

<button class="btn-gsap">Click Me</button>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
HTML

CSS 예시

.btn-gsap {
  background-color: #10b981;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
CSS

JavaScript 예시

const button = document.querySelector('.btn-gsap');

button.addEventListener('click', () => {
  gsap.fromTo(button, 
    { scale: 1 },
    { scale: 0.9, duration: 0.1, yoyo: true, repeat: 1, ease: "power1.inOut" }
  );

  // 클릭 후 색상 변화를 함께 추가
  gsap.to(button, { backgroundColor: "#059669", duration: 0.3, yoyo: true, repeat: 1 });
});
JavaScript

예제 실행

설명:

  • fromTo를 사용해 버튼 크기가 작아졌다 돌아오는 효과 구현
  • 동시에 배경색 변경을 통해 시각적인 클릭 효과 강화
  • ease 옵션으로 애니메이션의 가속도 제어 가능
  • 예시 코드와 실행 코드는 동일하지 않습니다.

📌 TIP: GSAP은 연속 애니메이션, 시퀀스 제어, SVG 애니메이션에 특히 강력합니다.

CSS Transition vs GSAP 비교

비교 항목CSS TransitionGSAP
구현 난이도쉬움중간 ~ 어려움
성능우수우수
제어 범위제한적매우 다양
복잡한 애니메이션한계 있음가능
의존성없음JS 라이브러리 필요

결론:

  • 간단한 효과 → CSS Transition
  • 복잡하고 세밀한 애니메이션 → GSAP

실무 활용 팁

  • 모바일에서 과도한 애니메이션은 성능 저하 우려 → 적정 수준 유지
  • 클릭 피드백은 즉각성이 핵심 → 0.1~0.2초 이내
  • prefers-reduced-motion 미디어 쿼리로 모션 최소화 사용자 대응
@media (prefers-reduced-motion: reduce) {
  .btn-transition,
  .btn-gsap {
    transition: none !important;
    animation: none !important;
  }
}
CSS

마무리

버튼 애니메이션은 UX를 한층 높여주는 핵심 요소입니다.

  • CSS Transition → 간단하고 가벼운 효과에 적합
  • GSAP → 세밀한 제어와 고급 애니메이션 구현 가능
    상황에 맞게 두 가지 방식을 선택해, 웹사이트의 사용자 경험을 풍부하게 만들어보세요.

Summary in English

Learn how to create engaging button click animations using CSS Transition and GSAP.
This guide covers simple CSS-based effects and advanced JavaScript-powered animations with practical examples.session duration.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의charlesdeluvio

위로 스크롤