사운드 효과
모든 파일은 kit/sfx/에 있습니다 (각 프로젝트의 sfx/ 폴더로 복사). 코드로 생성되며 라이선스 문제가 없습니다.
종이 세트는 tools/make-paper-sfx.ps1 (FFmpeg 합성)로 생성되며, 사운드를 조정하려면 다시 실행하면 됩니다.
| 파일 | 적용 위치 |
|---|
tick.wav | 각 목록 항목 / 체크 표시가 나타날 때 (깔끔한 스타일) |
counter.wav | 숫자가 롤링되는 동안 (카운트업 시작 시) |
chime.wav | 마지막 카드 / 엔드 카드 |
pop.wav | 알약, 배지, 스티커, 캘린더 칩이 튀어나올 때 |
snap.wav | 스크린샷 또는 카드가 제자리에 스냅될 때 |
star.wav · switch.wav · fill.wav · success.wav | 하이라이트 · 전후 토글 · 막대 채우기 · 목표 달성 |
paper-flip.wav | 페이지 넘김: 리프레임 인/아웃, 장면 전환 |
paper-drop.wav | 종이 카드가 착지할 때 |
tape-rip.wav | 테이프 조각으로 카드 고정 (조각당 한 번이 아닌 카드당 한 번) |
paper-rustle.wav | 랜섬노트 글자 / 칩이 한꺼번에 나올 때 |
marker-tick.wav | 목록 행에 마커 체크 표시 |
marker-scribble.wav | 연속된 여러 개의 X / 낙서 (약 0.85초) |
stamp.wav | 고무 도장, "VS" 슬랩, 카운터 카드 슬랩 |
paper-slide.wav | 카드가 옆에서 슬라이드되어 들어올 때 |
thump.wav | 핵심 라인에 펀치인 |
크리스프 UI / 글라스 세트 (tools/make-crisp-sfx.ps1 [-Project projects\<n>]) — 사용자가 "좀 더 선명하게" 요청할 때 사용
| 파일 | 적용 위치 |
|---|
crisp-click | 카드 / 패널 착지 |
crisp-pop | 알약, 칩, 배지, 재생 버튼 |
crisp-tick | 목록 행, 작은 등장, 막대 시작 |
glass-tap | 액체-유리 타일 / 앱 로고 등장 |
type-burst | 타이핑 (0.6초) |
count-roll | 카운트업 (1초) |
whoosh | 리프레임 인/아웃, 큰 줌 |
hit | 펀치인 |
alert · switch-on · send · sparkle · ding | 제한/오류 · 토글/스위치 · 전송 버튼 · 별/하이라이트 · 성공/엔드 카드 |
규칙
- 키트 기본값 (제작자 기본): 슬라이드인/아웃에 소리 없음, 우쉬 없음, 음성 대비 약 -20dB, 소수 효과.
- 종이 컷 스타일 (사용자가 선명한 종이 소리 요청): 모든 착지 / 테이프 / 틱 / 스탬프 / 뒤집기에 소리 적용; 여전히 캡션이나 나가기 동작에는 소리 없음.
- 트윈 시작 시점이 아니라 비주얼 이벤트가 착지하는 프레임에 동기화.
종이 컷 템플릿 오프셋 (kit/templates/paper-cut-vertical.html에서)
| 구성 요소 | 사운드 |
|---|
headline(t0) | paper-drop t0+0.35 · tape-rip t0+0.42 |
ransom(t0) | paper-rustle t0 |
checklist(items) | paper-drop items[0].t−0.10 · tape-rip items[0].t−0.05 · marker-tick 각 item.t+0.08 |
counter(t0) | stamp t0+0.17 (볼륨 0.25) · counter t0+0.2 · tape-rip t0+0.25 |
versus(t0, right.t) | paper-slide t0 · paper-slide right.t · stamp right.t+0.52 |
calendar(t0, crossAt, glowAt, stamp) | paper-drop t0+0.35 · tape-rip t0+0.42 · marker-scribble crossAt · pop glowAt+0/0.12/0.24 · stamp stamp.t |
reframe(t0, t1) | paper-flip t0 · paper-flip t1 |
punch(t0) | thump t0 |
| 마지막 카드 | chime 착지 후 약 0.5초 |
방법 (하나의 목록 → HTML + 빠른 믹싱)
projects/<name>/sfx.json 작성: [[시간, "사운드-이름", 볼륨?], ...] (볼륨 선택 사항, 기본값은 tools/sfx.mjs에 있음).node tools/sfx.mjs projects/<name> 실행 → index.html의 <!-- sfx:start --> / <!-- sfx:end --> 사이에 <audio> 태그(고유 ID, 실제 길이, 겹치지 않는 트랙)를 자동으로 작성하여 모든 향후 렌더링에 포함시킵니다.- 이미 렌더링되었는가? 다시 렌더링하지 마세요 (렌더링 속도 느림):
node tools/sfx.mjs projects/<name> --mix renders/with-cards.mp4 renders/with-sfx.mp4 명령으로 FFmpeg를 사용하여 기존 오디오에 사운드를 믹싱하고 비디오 스트림을 복사합니다 (3분 분량 약 10초). 리미터가 클리핑을 방지합니다.
npx hyperframes lint 실행 (오류 0개 예상). 레벨 확인: ffmpeg -ss <t> -t 1 -i out.mp4 -af volumedetect -f null NUL.- 결과를
exports/에 복사합니다. sfx.json을 편집하고 3단계를 다시 실행하여 조정합니다 (몇 초 소요).
절대로 <video> 오디오를 건드리지 마세요. VS Code 내장 플레이어는 AAC를 재생할 수 없습니다. 완성된 비디오는 VLC / 기본 플레이어로 미리 보세요.