[javascript] GSAP와 쇼핑 카트 애니메이션 및 이커머스 구현 방법

27 Nov 2023

javascript

쇼핑 카트 애니메이션은 이커머스 웹사이트에서 매우 중요한 역할을 합니다. 사용자가 상품을 장바구니에 추가할 때 애니메이션 효과를 제공하면, 사용자 경험을 향상시킬 수 있습니다. 이번 블로그 포스트에서는 GSAP(TweenMax) 라이브러리를 사용하여 쇼핑 카트 애니메이션을 구현하는 방법을 알아보겠습니다.

GSAP 소개

GSAP(GreenSock Animation Platform)은 HTML5 및 JavaScript 애니메이션 라이브러리로 널리 사용되는 라이브러리입니다. GSAP는 애니메이션 및 상호작용을 구현하는 데 필요한 다양한 기능과 효과를 제공합니다. TweenMax는 GSAP 라이브러리 중 하나로, 트윈(Tween) 애니메이션을 생성하는 데 사용됩니다.

쇼핑 카트 애니메이션 구현하기

GSAP 설치하기

GSAP를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 GSAP를 설치합니다.
```
npm install gsap
```
HTML 구조 설정하기

쇼핑 카트 애니메이션을 구현하기 위해서는 먼저 애니메이션을 적용할 요소들을 HTML 구조에 포함해야 합니다. 예를 들어, 상품 이미지 및 장바구니 아이콘 등을 포함할 요소들을 HTML에서 정의합니다.
```
<div class="product">
  <img src="product-image.jpg" alt="Product Image">
  <button class="add-to-cart">Add to Cart</button>
</div>

<div class="cart">
  <img src="cart-icon.png" alt="Cart Icon">
  <span class="cart-count">0</span>
</div>
```

GSAP 애니메이션 설정하기

GSAP를 사용하여 애니메이션을 설정합니다. 예를 들어, “Add to Cart” 버튼을 클릭했을 때 상품 이미지가 애니메이션으로 장바구니 아이콘으로 이동하는 효과를 구현해보겠습니다.

import { TweenMax } from 'gsap';

const addToCartButton = document.querySelector('.add-to-cart');
const productImage = document.querySelector('.product img');
const cartIcon = document.querySelector('.cart img');
const cartCount = document.querySelector('.cart-count');

addToCartButton.addEventListener('click', () => {
  const productImageRect = productImage.getBoundingClientRect();
  const cartIconRect = cartIcon.getBoundingClientRect();

  TweenMax.to(productImage, 0.5, {
    x: cartIconRect.left + cartIconRect.width / 2 - productImageRect.left,
    y: cartIconRect.top + cartIconRect.height / 2 - productImageRect.top,
    opacity: 0,
    onComplete: () => {
      // 애니메이션이 완료되면 카트 아이콘의 개수를 업데이트합니다.
      const currentCount = parseInt(cartCount.textContent);
      cartCount.textContent = currentCount + 1;
    }
  });
});

위의 코드에서 addToCartButton은 “Add to Cart” 버튼을 나타내며, productImage는 상품 이미지 요소를 나타냅니다. 이벤트 리스너를 추가하여 addToCartButton을 클릭하면 애니메이션이 시작되고, productImage가 cartIcon 위치로 애니메이션됩니다. 애니메이션이 완료되면 cartCount를 업데이트하여 장바구니에 추가된 상품의 개수를 표시합니다.

스타일 추가하기

애니메이션을 시각적으로 보여주기 위해 CSS 스타일을 추가해야 합니다. 적절한 스타일을 설정하여 요소들이 애니메이션 동안 움직이는 것을 시각적으로 확인할 수 있습니다.

예를 들어, product 클래스와 cart 클래스에 대한 스타일을 다음과 같이 설정할 수 있습니다.
```
.product {
  position: relative;
}

.cart {
  position: absolute;
  top: 20px;
  right: 20px;
}
```

결론

이렇게 GSAP를 사용하여 쇼핑 카트 애니메이션을 구현할 수 있습니다. GSAP는 강력한 애니메이션 라이브러리로 다양한 애니메이션 효과와 상호작용을 제공합니다. 이를 활용하여 이커머스 웹사이트에서 더 나은 사용자 경험을 제공할 수 있습니다.

더 자세한 정보를 원하신다면, GSAP 공식 문서를 참고하시기 바랍니다.