소리꽃 KeyBloom 20

소리꽃 KeyBloom 바로가기 ↗

오늘 한 일

• 결제·라이선스 백본 — 검증 시크릿(결제사 API 키)을 앱이 아닌 클라우드(Cloudflare Worker)에 숨기는 프록시 + 앱 쪽 실검증(활성화·재검증·해제, 오프라인 유예)
• 자동 업데이터 — Tauri plugin-updater 배선 + 서명 키쌍 생성·공개키 등록(새 버전이 나오면 앱이 확인·설치·재시작)
• 브랜드 색을 로즈핑크(#ff1763)로 — 강조색·삭제(빨강으로 분리)·파티클 기본 그라데·건반 눌림 색까지
• 투명 배경(알파) 영상 내보내기 완성 — PNG 이미지 시퀀스(ffmpeg 불필요) + 단일 파일 Ut Video(ffmpeg가 그 PNG를 묶음) + 라이브 모드도 같은 경로. WebM(편집툴이 못 읽음)은 제거
• 안 쓰게 된 실시간 녹화(WebM) 경로의 죽은 코드 정리(-81줄)
• 로딩·저장 진행 표시 개선(멈춰 보이는 구간에 계속 도는 shimmer + 단계 문구), PRO는 광고가 없으니 그 자리를 시퀀서에 줌
• 버그 정리 — 프로젝트 저장 팝업, 큐 재정렬 시 첫 구간 번호, 빈 팔레트 크래시 방어
• 다듬기 — PRO 잠금 배지 컴포넌트화, 흰 배경 위 발광 색 유지, 크레딧을 버튼 토글로

---

막힌 부분

편집툴이 읽는 투명 영상을 브라우저 인코더 없이 뽑기

편집툴이 네이티브로 읽는 알파(투명) 포맷은 사실상 ProRes뿐인데, 브라우저엔 그 인코더가 없다. 유료 제품이라 미인가 코덱을 쓰기도 부담스러웠다. 그래서 두 갈래로 풀었다.

먼저 ffmpeg 없이 확실한 폴백 — 각 프레임을 투명 PNG로 폴더에 쓰고 오디오는 옆에 WAV로. 편집툴에서 이미지 시퀀스로 임포트한다.

그다음 단일 파일 — 백로그의 “raw 프레임을 stdin으로 스트리밍” 대신, 이미 쓰고 있는 PNG를 ffmpeg가 다시 읽어 무손실 알파 Ut Video로 묶게 했다. 거대한 RGBA를 IPC로 흘려보낼 필요가 없어 훨씬 간단하다.

const args = ["-y", "-framerate", "60", "-i", `${dir}/frame_%06d.png`];
if (hasAudio) args.push("-i", `${dir}/audio.wav`);
args.push("-c:v", "utvideo", "-pix_fmt", "gbrap"); // gbrap = 무손실 planar RGBA(알파 보존)
const cmd = Command.sidecar("binaries/ffmpeg", args);

• 해결: PNG 시퀀스(옵션) + Ut Video 단일 파일(주력). 인코딩엔 코덱 설치 불필요(ffmpeg 내장 utvideo), 시청 PC에만 Ut Video 코덱 안내
• 확인: Vegas에서 알파가 실제로 살아있는 것까지 확인(임포트 후 Alpha Channel을 Straight로)

네이티브에서 프로젝트 저장이 매번 대화상자가 뜬다

불러온 프로젝트를 저장할 때마다 “다른 이름으로 저장” 창이 떴다. 원인은 네이티브 웹뷰(WebView2)의 File System Access가 불안정해, 파일 핸들 방식이 안 먹히고 다운로드 폴백(대화상자)으로 떨어져서였다.

• 해결: 네이티브는 FSA 대신 Tauri 다이얼로그로 경로를 받아 기억하고, 저장은 그 경로에 픽커 없이 덮어쓴다(파일 읽기용 read_file Rust 커맨드 추가). 내보내기 저장과 같은 방식

큐 순서를 바꿔도 시퀀서 첫 구간 번호가 안 바뀐다

큐를 드래그로 재정렬하면 번호가 위치대로 다시 매겨지고, 시퀀서의 큐 구간들도 따라 바뀐다. 그런데 첫 큐포인트 이전(기본 구간)만 번호가 안 바뀌었다. 코드에서 그 구간을 “항상 큐 1”로 하드코딩해 뒀기 때문이다.

// 있던 코드 — 기본 구간이 항상 1
const segs = [{ start: 0, id: 1 }];
// 고친 코드 — 기본 구간 큐를 상태로 추적
let defaultCueId = 1; // 재정렬 시 remap.get(defaultCueId)로 따라감

• 해결: 기본 구간 큐를 defaultCueId 상태로 두고 재정렬·삭제·되돌리기·저장/복원·내보내기에 모두 전파. 연출은 그대로, 번호만 따라감

흰 배경 이미지 위 건반 발광이 하얗게 날아간다

건반 발광은 가산 블렌드(lighter)라 어두운 배경 위에선 빛이 겹겹이 밝아져 예쁘다. 근데 밝은 배경 이미지 위에선 “흰색 + 색 = 흰색”이 돼 색을 잃는다.

• 해결: 배경 이미지가 실제로 깔릴 때만 발광을 일반 블렌드(source-over)로 전환 — 밝은 배경서도 색 유지. 기본(배경 없음=검정)은 가산 그대로라 원래 룩 불변

---

다음에 할 일

• Ut Video·자동 업데이터 첫 릴리스 — 로컬 서명 빌드 후 KeyBloom-releases에 업로드해 업데이트 작동시키기
• Mac 네이티브 앱 + ProRes 알파
• Creem 결제 Worker 배포 + 인앱 활성화(라이선스 키 입력) UI
• 첫 방문자용 샘플 데모 MIDI 자동 로드(자작곡 1곡 + 쇼팽 녹턴)
• 커스텀 파티클 모양 실루엣 재작업(투명 PNG 기준)
• 프로젝트 “다른 이름으로 저장”(Save As)
• 비-나선 파티클 가로 퍼짐(폭) 슬라이더 검토
• 실시간 연주 데모 영상 — 손+화면 동시로 실제 연주임을 보이기

---

Series: 소리꽃 KeyBloom

---

Suggested Posts