[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 효과를 사용한 드럼 패드 구현 방법

29 Nov 2023

javascript

드럼 패드는 웹 애플리케이션에서 많이 사용되는 인터랙티브한 요소 중 하나입니다. 사용자가 패드를 클릭하고 드래그하여 소리를 발생시킬 수 있는 효과를 생성할 수 있습니다. 이번 기술 블로그에서는 자바스크립트와 GreenSock(TweenMax) 라이브러리를 사용하여 드래그 앤 드롭 효과를 적용한 드럼 패드를 구현하는 방법을 알아보겠습니다.

1. HTML 구조 설정하기

먼저 드럼 패드를 표현하기 위해 HTML 구조를 설정해야 합니다. 다음은 간단한 드럼 패드 HTML 구조의 예입니다.

<div class="drum-pad">
  <div class="pad" id="pad1"></div>
  <div class="pad" id="pad2"></div>
  <div class="pad" id="pad3"></div>
  <!-- 나머지 패드들 -->
</div>

이 예시에서는 .drum-pad 클래스로 감싸진 여러 개의 .pad 클래스를 가진 패드 요소들을 생성합니다. 패드의 개수는 필요에 따라 늘리거나 줄일 수 있습니다.

2. 드래그 앤 드롭 효과 구현하기

자바스크립트와 GreenSock(TweenMax)를 이용하여 드래그 앤 드롭 효과를 구현합니다. 아래는 간단한 예제 코드입니다.

// 드래그 앤 드롭 기능을 적용할 요소들을 선택합니다.
const pads = document.querySelectorAll(".pad");

// 각각의 패드에 이벤트 리스너를 등록합니다.
pads.forEach((pad) => {
  // 패드를 클릭했을 때 이벤트 처리 함수
  pad.addEventListener("mousedown", startDrag);

  // 패드를 마우스를 떼었을 때 이벤트 처리 함수
  pad.addEventListener("mouseup", endDrag);
});

// 드래그 시작 시 실행되는 함수
function startDrag(event) {
  // 드래그 시작점의 좌표를 저장합니다.
  this.startX = event.clientX;
  this.startY = event.clientY;

  // 패드를 드래그 중이라는 상태로 변경합니다.
  this.isDragging = true;
}

// 드래그 종료 시 실행되는 함수
function endDrag(event) {
  // 패드가 드래그 중이 아닌 경우에는 함수를 종료합니다.
  if (!this.isDragging) {
    return;
  }

  // 드래그 종료점의 좌표를 저장합니다.
  const endX = event.clientX;
  const endY = event.clientY;

  // 드래그 이동 거리를 계산합니다.
  const distanceX = endX - this.startX;
  const distanceY = endY - this.startY;

  // 드래그 이동 거리에 따라 패드를 움직입니다.
  TweenMax.to(this, 0.3, { x: distanceX, y: distanceY });

  // 패드를 드래그 중이 아니라는 상태로 변경합니다.
  this.isDragging = false;
}

이 예제 코드에서는 .pad 클래스를 가진 각 패드 요소들에 대해 mousedown 이벤트와 mouseup 이벤트 리스너를 등록합니다. 패드를 클릭했을 때는 startDrag 함수가 실행되고, 마우스를 떼었을 때는 endDrag 함수가 실행됩니다.

startDrag 함수에서는 패드를 드래그 중인 상태로 변경하고, 클릭한 좌표를 저장합니다. endDrag 함수에서는 드래그 종료 시 좌표를 계산하여 패드를 애니메이션 효과와 함께 움직입니다.

3. 드럼 소리 출력하기

드럼 패드를 클릭하고 드래그하는 것 외에도 드럼 소리를 출력할 수 있도록 구현해봅시다. 이를 위해 HTML 요소에 data 속성으로 드럼 소리 파일의 경로를 저장하고, 드래그 종료 시 해당 소리를 재생하도록 수정할 수 있습니다.

<div class="drum-pad">
  <div class="pad" id="pad1" data-sound="sounds/drum1.wav"></div>
  <div class="pad" id="pad2" data-sound="sounds/drum2.wav"></div>
  <div class="pad" id="pad3" data-sound="sounds/drum3.wav"></div>
  <!-- 나머지 패드들 -->
</div>

// 드래그 종료 시 실행되는 함수
function endDrag(event) {
  // 패드가 드래그 중이 아닌 경우에는 함수를 종료합니다.
  if (!this.isDragging) {
    return;
  }

  // 드래그 종료점의 좌표를 저장합니다.
  const endX = event.clientX;
  const endY = event.clientY;

  // 드래그 이동 거리를 계산합니다.
  const distanceX = endX - this.startX;
  const distanceY = endY - this.startY;

  // 드래그 이동 거리에 따라 패드를 움직입니다.
  TweenMax.to(this, 0.3, { x: distanceX, y: distanceY });

  // 드럼 소리 재생
  const sound = new Audio(this.getAttribute("data-sound"));
  sound.play();

  // 패드를 드래그 중이 아니라는 상태로 변경합니다.
  this.isDragging = false;
}

위의 예제 코드에서는 패드의 HTML 요소에 data-sound 속성을 추가하여 드럼 소리 파일의 경로를 저장합니다. endDrag 함수에서는 드래그 종료 시 해당 소리 파일을 로드하고 재생합니다.

결론

이번 포스팅에서는 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 적용한 드럼 패드를 구현하는 방법을 알아보았습니다. 위의 코드를 활용하여 웹 애플리케이션에 있는 다양한 인터랙티브 요소들을 구현할 수 있습니다.

추가적인 자세한 내용 및 참고자료는 아래의 링크를 참조하시기 바랍니다.

GreenSock 공식 문서: https://greensock.com/
드래그 앤 드롭 관련 자바스크립트 APIs: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API