버튼을 누르거나 토글을 바꾸는 순간, 저장·오류·완료·새 알림에 짧은 청각 피드백을 얹고 싶을 때. 기존 UI를 바꾸지 않고 data-foley-press/release/hover/toggle/type 속성을 붙이는 방식이라 UI 키트와 별개로 얹기 좋다. 저장된 Kobra처럼 UI와 사운드를 함께 보는 키트와는 다르게 소리 레이어만 가져올 수 있다. 사이트의 플레이그라운드는 누름/놓음, 입력, 슬라이더·스테퍼와 음높이 연결을 보여 주므로 큐 목록보다 실제 조작 예시를 먼저 보는 편이 용도 판단에 도움이 된다.
저장된 Cuelume과 목적은 겹친다. Foley를 고를 이유는 단순 클릭음보다 7군 28종의 팔레트, 테마·전조·리버브·공간 배치, 커스텀 레이어와 sound set을 이용한 음색 설계, WAV/스프라이트 내보내기까지 한 곳에서 다룰 수 있다는 점이다. Soundz는 내장 음원과 React 재생 래퍼를 보는 항목이고, Foley는 브라우저 합성이라 추가 음원 요청 없이 음높이·음색을 바꿀 수 있다. audiocn은 마이크·페이더·믹서·파형 같은 오디오 조작 화면을 만드는 UI/훅 모음이므로 효과음을 붙이는 이 라이브러리와 역할이 다르다. 언제 어떤 소리를 낼지 판단하는 자료는 기존 Velvet UI 메모와 함께 보면 좋다.
설치는 npm install @foleyjs/core. bind()는 위임 리스너이고 멱등이라 나중에 추가한 마크업도 커버한다. observe()는 별도 선택 기능이며 첫 렌더를 소리 내지 않고 호출 이후의 등장·퇴장·aria 상태 변경을 감지한다. 클래스 변경 전체를 감시하는 방식은 아니다. React에서는 @foleyjs/react의 useFoley, Vue에서는 @foleyjs/vue의 FoleyPlugin/v-foley를 쓸 수 있으며 각 래퍼는 코어와 해당 프레임워크를 피어 의존성으로 요구한다. 프레임워크 바인딩까지 의존성 0이라고 읽으면 안 된다.
실무에서 유용한 제어는 마스터 리미터, 큐별 60 ms 쿨다운, 음높이 ±30 cents·음량 ±8% 변화, 반복 재생의 stop 핸들, 다른 미디어가 재생될 때의 ducking이다. 배경 탭에서는 반복음만 조용해지고 단발 알림음은 계속 재생될 수 있다는 점이 중요하다. 브라우저 오디오 정책상 클릭·키 입력 등 사용자 제스처로 오디오가 해제된 뒤 동작한다고 전제해야 한다. 앱에서 옵트인과 항상 접근 가능한 음소거를 제공하고, 소리를 유일한 성공/실패 표시로 쓰지 않는 편이 좋다.
사이트의 Cue Designer는 WAV/JSON·공유 링크를 만들고 여러 큐의 변경을 sound set으로 묶을 수 있다. 웹 외에 Figma 시안·영상·네이티브 앱에 쓸 소리를 뽑는 용도도 있다. 키보드 단축키와 MIDI 입력은 사이트의 시청각 도구 기능이며 코어가 모든 앱에 MIDI UI를 자동으로 붙여 주는 기능으로 읽지 말 것. 사이트 후기는 스스로 “100% synthesized”라고 표시한 농담이므로 실제 고객 도입 사례로 보지 않는다.
2026-10-04 확인. npm 2.9.0과 저장소 README·src/foley.js·LICENSE를 대조했다. 기존 설명의 GitHub 별 수는 변화가 잦고 기능 판단에 필요하지 않아 제거했다. AI 코딩 에이전트용 agents.md도 저장소에 있다.
근거: https://usefoley.dev/ · https://github.com/eakbulut/foley · https://www.npmjs.com/package/@foleyjs/core · https://www.npmjs.com/package/@foleyjs/react · https://www.npmjs.com/package/@foleyjs/vue