소리꽃 KeyBloom 24

소리꽃 KeyBloom 바로가기 ↗

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

오늘 한 일

하루에 온보딩·오디오·프로젝트 관리·내보내기·코드 정리를 폭넓게 손봤다.

첫 방문자를 위한 5단계 가이드 투어를 만듦 — 처음 열면 환영 모달을 띄우고, 데모곡을 자동으로 올린 뒤 재생·이펙트·큐·내보내기·직접 올리기를 순서대로 스포트라이트로 짚어준다
큐를 놓는 방법이 안 보인다는 문제 때문에 투어가 ✏️ 펜 버튼을 직접 가리키게 함
데모곡은 쇼팽 녹턴 midi 파일을 만들어 임시로 번들(퍼블릭 도메인). [파일] 탭에 “튜토리얼 다시 보기”도 추가
샘플 피아노에 룸 리버브를 추가 — 임펄스 응답을 지수 감쇠 노이즈로 즉석 생성해 외부 파일 없이 컨볼루션 리버브를 건다
리버브 양감이 애매해서 룸 사이즈 슬라이더로 조절하게 함(라이브·오프라인 내보내기가 같은 값을 공유)
스타카토(짧은 음)가 뭉툭해서 노트 엔벨로프를 다듬음
새 프로젝트, 다른 이름으로 저장을 추가하고 단축키(Ctrl+N·O·S·Shift+S)를 붙임
저장 안 한 변경이 있으면 새 프로젝트 전에 저장할지 물어봄
빈 상태에서는 새 프로젝트 버튼을 비활성으로, 재생 중에 새 프로젝트·불러오기·저장을 누르면 재생을 멈춤
리버브 여운을 끝까지 살리는 옵션을 넣음(샘플 피아노)
첫 노트가 잘리지 않게 앞에 짧은 무음(lead-in)을 넣음
알파 PNG 시퀀스의 오디오가 영상과 어긋나던 것을 고침
오디오가 MIDI보다 길면 프리뷰도 오디오 끝까지 재생·표시하게 함
프리뷰에서 첫 노트가 잘리던 것을 고침
alphaExporter로 대체된 죽은 렌더 경로(pngSequence)를 통째로 삭제
base64·타임스탬프·저장 폴더 계산의 중복을 하나로 모음
프리뷰와 내보내기가 손으로 맞춰오던 “시각 t의 활성 큐” 규칙을 공용 모듈로 뽑음
반복되던 버튼·체크박스·슬라이더 생성을 헬퍼로 묶고, 색·폰트를 CSS 변수로 정리
영어 화면에서 설정 패널에 생기던 가로 스크롤을 없앰

막힌 부분

프리뷰에서 첫 노트가 잘렸다

곡 맨 앞에서 샘플 피아노를 재생하면 첫 노트가 오디오 시계의 “지금 이 순간”에 정확히 예약된다. 버퍼를 정확히 지금 시작하면 컨텍스트가 아주 살짝 늦게 시작해 어택이 잘린다.

해결: 재생 시작에 짧은 리드인을 줘서 타임라인 시각이 잠깐 음수가 되게 했다. 그러면 첫 노트가 미래에 예약돼 어택이 온전하고, 오디오와 비주얼이 같은 시계를 써서 함께 밀리므로 싱크는 유지된다. 시퀀서 바에는 안 보인다.

내보내기 tail이 파티클 기준이라 리버브가 잘렸다

내보내기는 곡이 끝나도 파티클이 다 사라질 때까지 렌더를 이어가고, 오디오도 그 길이에 맞춘다. 그런데 tail이 끝나는 기준이 파티클이라, 파티클이 리버브보다 먼저 사라지면 리버브 여운이 잘렸다.

해결: 리버브 감쇠와 노트 릴리스 길이만큼은 파티클이 없어도 렌더를 유지하게 해서, 오디오가 -shortest(ffmpeg에서 가장 짧은 트랙 길이에 맞춰 자르는 옵션)로 잘리지 않게 했다.

window.confirm이 WebView에서 안 떴다

새 프로젝트 전에 저장할지 window.confirm으로 물었는데, 앱(WebView2)에서 이 창이 안정적으로 안 떠서 확인 없이 그냥 저장으로 넘어갔다.

해결: 저장 / 저장 안 함 / 취소 3버튼을 직접 그린 DOM 모달로 바꿔 확실히 뜨게 했다.

스타카토가 뭉툭했다

지속음 샘플만 있어 짧은 음을 잘라 인공 페이드로 끄는 구조라 스타카토가 부자연스러웠다
해결: 온셋에 짧은 어택 램프를 줘 클릭을 줄이고, 노트-오프를 고정 길이 페이드 대신 자연 지수 감쇠 댐퍼로 바꿔 완화. 근본 개선(건반 뗄 때 릴리스 샘플)은 백로그로 남김

다음에 할 일

Creem 활성화 UI와 결제 Worker 배포
plus 가격 확정과 LOGSTONE 판매 페이지
첫 서명 릴리스(자동 업데이터 작동)
크로마키 출력(plus 다음 업데이트) — 실시간 투명 합성용, 진짜 알파는 미래 네이티브(Stage) 영역
보류한 내보내기 구조 리팩터(config 통합 등)는 실기 검증 후
Mac 네이티브 앱 + ProRes 알파
비-나선 파티클 가로 퍼짐(폭) 슬라이더 검토
실시간 연주 데모 영상 — 손+화면 동시로 실제 연주임을 보이기

Series: 소리꽃 KeyBloom