드럼 모드 · 1 / 4
초기 건반 UI와 마우스·키보드·터치 입력, 사운드 재생을 직접 구현했습니다. 누름·해제 이벤트를 나누고 연속 입력 시 소리가 겹치는 문제를 수정했으며, 이후 AI를 활용해 기능을 확장했습니다.
주요 기능
- 마우스·키보드·터치 입력으로 런치패드를 누를 때마다 사운드 재생
- 피아노와 드럼을 포함한 두 가지 사운드 모드 제공
작업 흐름
입력
누름누르고 있는 구간뗌
처리
재생 요청입력 해제 처리
사용 기술
언어·프레임워크
Next.jsTypeScript
화면·인터랙션
Tailwind CSS
입력과 소리의 재생 시점
연속 클릭 시 사운드 중첩 문제
onClick으로 사운드를 재생하면 빠르게 연속 클릭할 때 소리가 끊기지 않고 겹쳤습니다. 마우스를 누를 때와 뗄 때의 이벤트를 분리하고 모바일 Touch 이벤트도 별도로 처리해 재생 시점을 제어했습니다. 같은 패드를 다시 누르면 재생 중인 사운드를 멈춘 뒤 새로 재생하도록 처리했습니다.