소리꽃 KeyBloom

소리꽃 KeyBloom 바로가기 ↗

소리꽃 KeyBloom YouTube에서 보기 ↗

요약

MIDI 파일을 넣으면 하단 88건반이 타이밍에 맞춰 눌리고, 그 건반 위치에서 파티클이 피어오르는 연주 이펙트 비주얼라이저. 8종 파티클 움직임(피어오름·방사형 개화·상승 후 흐트러짐·나선형 토네이도·나선 기둥·물고기 유영·불꽃·분수)에 파티클·건반 공용 5종 색 모드(단색·Min~Max 그라데이션·파스텔·무지개·팔레트)·모양·광택을 조절하고, 곡 구간마다 다른 비주얼을 “큐”로 지정해 시퀀서 타임라인에 배치한다. MIDI 파일 재생 외에 Web MIDI 건반이나 컴퓨터 키보드로 실시간 연주도 가능. 오디오는 내 파일·샘플 피아노·무음 중에 고르고, 프로젝트는 오디오 원본까지 한 파일(.kbloom)로 저장·복원하며, 결과를 16:9 영상으로 저장한다. 무료 웹은 서버 없이 브라우저 안에서 완결되고, 저지연 실시간 연주(ASIO)·투명 배경(알파) 출력·4K는 유료 데스크톱 앱(plus, Windows)에서 제공한다.

---

제작 동기

피아노 연주 영상을 만들 때 건반 위로 이펙트가 피어오르는 비주얼을 직접 만들고 싶었다. 실질적으로 원하는 건 실시간 연주 — 건반을 치는 그 순간 해당 건반 위로 이펙트가 피어오르는 것이다. 다만 실시간은 상태가 복잡해지니, 먼저 미리 만들어 둔 MIDI를 타임라인으로 재생하며 이펙트를 입히는 버전부터 만들었다. 비주얼 엔진(건반·파티클·이펙트)을 파일 재생으로 먼저 다져 두고, 나중에 노트 입력만 실시간으로 바꿔 얹는 순서가 안전하다고 봤다. 기존에 쓰던 TypeScript + Vite + Canvas 조합으로 새 인프라 학습 없이, 서버 없는 정적 사이트로 완결하는 걸 목표로 했다.

---

목표 설정

• 작업 기간: 2026.07.03. ~ 2026.08.10. (출시)
• 버전 방향
  • MVP = 무료 버전 출시(웹). 고화질 오프라인 MP4 내보내기(1080p) 포함, 내보낸 영상엔 워터마크. 투명 배경은 제외
  • 유료·네이티브 = 워터마크 제거 + 4K 내보내기 + 저지연 실시간 연주 + 투명 배경(알파) 내보내기 — 웹 오디오/코덱 한계 돌파
• 최종 목표: 실시간 연주 — 웹 MVP를 구현하고, 저지연(연주감)은 웹 오디오 한계라 네이티브에서 완성. 저지연 라이브(ASIO)를 갖춘 데스크톱 앱을 출시함
• 완료 단계: 비주얼 엔진(파일 재생) → 큐·시퀀서(구간별 비주얼) → 실시간 연주(웹) → 프로젝트 저장/불러오기 → 고화질 오프라인 내보내기 → 무료 웹 출시 → 유료 데스크톱 앱(plus) 출시(저지연 라이브·알파·4K, 자동 업데이트)

---

주요 작업

1. 환경 셋업 (Vite + TypeScript + Canvas 2D) ✅
2. MIDI 파싱(@tonejs/midi) + 여러 트랙 병합/선택 ✅
3. 88건반 렌더 + 재생 타이밍에 눌림 동기화 ✅
4. 파티클 시스템 — 데이터 주도 모션 8종(피어오름·방사형 개화·상승 후 흐트러짐·나선형 토네이도·나선 기둥·물고기 유영·불꽃·분수) ✅
5. 색(velocity 편향 랜덤 lerp)·모양(다중 선택 랜덤)·광택(스페큘러 + 가산 글로우)·건반 눌림 색 ✅
6. 오디오 — 사용자 오디오 파일 싱크 재생, 없으면 실제 피아노 샘플(Salamander Grand)로 연주 + 서스테인 페달·백그라운드 재생 ✅
7. 스프라이트 아틀라스로 대량 파티클 렌더 최적화(밀집 구간 60fps) ✅
8. 영상 저장 — canvas.captureStream + MediaRecorder로 WebM 추출(해상도·배경·오디오 옵션) ✅
9. 큐(Cue) + 시퀀서 — 구간별 비주얼 프리셋을 타임라인에 배치, 재생 시 구간 따라 전환(큐별 아틀라스로 옛 파티클 색 유지) ✅
10. 실시간 연주 모드 — Web MIDI 장치 + 컴퓨터 키보드(Musical Typing), noteOn/noteOff 공통 핸들러로 비주얼 엔진 재사용 ✅
11. 프로젝트 저장/불러오기 — 큐·시퀀스·MIDI(base64)를 JSON 한 파일로 ✅
12. 편집 UX — Undo/Redo, 스크럽 큐 미리보기, 마그넷 스냅, 큐 이름 인라인 편집 ✅
13. 고화질 오프라인 MP4 내보내기 — 프레임 단위 렌더 + 브라우저 내장 하드웨어 인코더(ffmpeg.wasm 없이 추가 다운로드 0), 연주 소리 포함. 무료 1080p·4K는 유료 ✅
14. 무료 버전 워터마크 — 미리보기·내보내기에 상시 표시(화면 녹화 우회 차단) ✅
15. 출시 채비 — 영어 지원(브라우저 언어 자동 감지 + 토글)·인앱 도움말·OG 공유 카드·앱 아이콘·크레딧 ✅
16. Cloudflare Pages 배포 + 카카오 애드핏 광고 → 무료 버전 출시 ✅
17. (유료·네이티브) Tauri 데스크톱 앱(Windows) 출시 — 저지연 라이브 연주(ASIO/네이티브 오디오)·투명 배경(알파) 출력(ProRes 호환 .mov·PNG 시퀀스)·4K 내보내기, plus 라이선스(Creem MoR, 앱 전용)·자동 업데이트·.kbloom 파일 연결(전용 아이콘) ✅
18. 출시 후 정리 — 오디오 클리핑 방지 리미터, 라이브 서스테인·큐 넘기기 키, 웹 배포 브랜치 분리, 버전별 changelog까지 다듬어 0.1.4까지 냄 ✅

---

결과

• 무료 웹(keybloom.pages.dev)과 유료 데스크톱 앱(plus, Windows)을 둘 다 출시. 현재 0.1.4
• 무료 웹: 비주얼 엔진·큐/시퀀서·실시간 연주·프로젝트 저장·1080p MP4 내보내기까지 완성
• 유료 앱(plus): 저지연 라이브 연주(ASIO)·투명 배경(알파) 출력·4K를 웹 오디오/코덱 한계를 넘어 제공. 라이선스는 Creem(MoR)로 결제, 앱 전용. 자동 업데이트·.kbloom 파일 연결도 갖춤
• 오디오는 합성음에서 실제 피아노 샘플(Salamander Grand)로 갈아타 서스테인·백그라운드 재생까지 반영, 내보낸 영상에도 연주 소리를 담고 클리핑 방지 리미터로 다듬음
• 출시 후에도 라이브 연주 키·데모곡 밸런스·업데이트 진행 표시 등을 이어 다듬는 중

---

---

Series: 소리꽃 KeyBloom

---

Suggested Posts