소리꽃 KeyBloom

이 글은 소리꽃 KeyBloom 시리즈의 1번째 기록입니다. (총 21개)

요약

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

제작 동기

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

목표 설정

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

주요 작업

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

결과

무료 버전을 웹으로 출시(keybloom.pages.dev). 비주얼 엔진·큐/시퀀서·실시간 연주(웹)·프로젝트 저장·고화질 오프라인 MP4 내보내기까지 완성
오디오는 합성음에서 실제 피아노 샘플로 갈아타 서스테인·백그라운드 재생까지 반영, 내보낸 영상에도 연주 소리를 담음
남긴 것: 저지연 라이브 연주와 투명 배경(알파) 내보내기는 유료·네이티브 앱 몫. 알파를 담는 WebM이 재생 호환성이 떨어져, 무료 웹은 MP4 1080p로 정리했다

Series: 소리꽃 KeyBloom

요약

제작 동기

목표 설정

주요 작업

결과

Series: 소리꽃 KeyBloom

Suggested Posts