이번 블로그 포스트에서는 자바스크립트와 GreenSock을 사용하여 드래그 앤 드롭 효과와 함께 팝업 창을 구현하는 방법을 소개하겠습니다.

GreenSock(GSAP)이란?

GreenSock Animation Platform(GSAP)은 HTML5/JavaScript 애니메이션을 만들기 위한 강력한 라이브러리입니다. GSAP은 훌륭한 애니메이션 도구를 제공하며, 특히 드래그 앤 드롭 효과를 구현하고자 할 때 매우 유용합니다.

팝업 창 구현 방법

HTML 마크업 준비

먼저 팝업 창을 위한 HTML 마크업을 준비해야 합니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다:

<div class="popup">
  <div class="popup-content">
    <h2>팝업 제목</h2>
    <p>팝업 내용</p>
    <button class="close-btn">닫기</button>
  </div>
</div>

CSS 스타일 작성

팝업 창에 CSS 스타일을 적용하여 디자인을 정의합니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다:

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.popup-content {
  text-align: center;
}

.close-btn {
  margin-top: 20px;
}

드래그 앤 드롭 효과 구현

이제 자바스크립트 코드를 사용하여 드래그 앤 드롭 효과를 구현해보겠습니다. GreenSock(GSAP) 라이브러리를 사용하여 애니메이션을 적용할 수 있습니다.

// 팝업 요소 선택
const popup = document.querySelector('.popup');

// 드래그 앤 드롭 효과 적용
Draggable.create(popup, {
  type: 'x,y',
  edgeResistance: 0.65,
  bounds: window,
});

// 팝업 닫기 버튼 클릭 이벤트 핸들러
const closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', () => {
  // 팝업 창 숨김 처리
  popup.style.display = 'none';
});

위의 자바스크립트 코드는 Draggable 객체를 생성하여 팝업 창에 드래그 앤 드롭 효과를 적용합니다. 이렇게 하면 사용자가 팝업 창을 마음대로 이동할 수 있습니다. 또한, 팝업 창의 “닫기” 버튼 클릭 시 팝업이 숨겨지도록 처리되므로 UX를 개선할 수 있습니다.

결론

이번 포스트에서는 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 사용한 팝업 창을 구현하는 방법을 알아보았습니다. GSAP은 훌륭한 애니메이션 라이브러리로서 다양한 상황에서 유용하게 활용될 수 있습니다. 자세한 내용은 GreenSock 공식 문서를 참조하시기 바랍니다.