소리꽃 KeyBloom 7

소리꽃 KeyBloom 바로가기 ↗

소리꽃 KeyBloom YouTube에서 보기 ↗

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

오늘 한 일

4K 유료 잠금 — 무료 빌드는 내보내기 1080p까지. 해상도 드롭다운의 4K 항목은 2160p (4K) 👑 PRO로 보이되 선택 불가. UI만이 아니라 내보내기 시작 지점에도 가드
- 이유: 어제 정한 버전 방향(무료=웹·1080p, 유료=네이티브·4K)을 실제 빌드에 반영. 잠그되 유료 티어가 있다는 건 보이게 하고 싶었다
Ctrl+S 저장 — 처음 한 번만 저장 위치를 고르고, 이후 Ctrl+S는 창 없이 같은 파일에 덮어씀. 불러온 파일에도 바로 덮어쓰기. 프로젝트 확장자는 .kbloom
- 이유: 편집하며 수시로 저장하는데 매번 위치를 묻는 게 번거로웠다. 여둘까(office layout)에서 쓰던 기법을 그대로 가져옴
오디오 경로 저장 — 프로젝트에 오디오 파일명을 남기고 파일 핸들을 브라우저에 보관해, 다시 열면 오디오가 자동으로 붙음. 못 찾으면 다른 파일로 대체할지 물어봄
MIDI 재로드 시 비주얼 트랙 유지 — 곡을 고쳐서 다시 불러와도 만들어둔 큐·시퀀스가 남음. 오디오는 유지할지 물어봄
- 이유: 같은 곡을 조금씩 수정해 다시 넣는 게 주 워크플로인데, 그때마다 시퀀스가 날아갔다
재생 중 오디오 교체 시 자동 일시정지
광고 자리 — 시퀀서 왼쪽에 250×250 자리 확보(플레이스홀더만, 실제 카카오 애드핏은 배포 후)
건반 색에 Min~Max 그라데이션 추가 — 세게 칠수록 Max 색(파티클 그라데이션과 같은 velocity 규칙)
건반도 first-in 규칙 — 큐가 바뀌어도 이미 눌려 있는 건반의 색·광택은 안 변하고, 새로 눌리는 건반만 새 큐
- 이유: 파티클은 이미 “태어난 큐의 색을 유지”인데 건반만 현재 큐를 따라가서 큐 경계에서 어긋나 보였다

막힌 부분

4K 잠금 표기 — 처음엔 왕관 PRO 뱃지를 SVG로 굽고 해상도를 버튼 그룹으로 바꿨다(드롭다운 <option>엔 이미지를 못 넣어서). 실제로 보니 드롭다운이 나아서 되돌리고, 옵션 텍스트에 👑 PRO를 넣는 쪽으로 정리. 뱃지 파일은 유료 빌드에서 쓸 수 있으니 남겨둠
프로젝트 불러오기·오디오 열기 버튼이 두 개씩 보였다 — 미지원 브라우저용 폴백 버튼에 hidden을 줬는데 .file-btn의 display: block이 [hidden]을 덮어써서. .file-btn[hidden]으로 명시(전에 .ctl-row·.mode-bar에서도 겪은 함정이라 이번엔 바로 알아챔)
광고 자리를 넣자 시퀀서 툴바 버튼이 찌그러졌다 — 폭이 250px 줄면서 flex 아이템 기본값(shrink)대로 버튼이 눌린 것. flex: none으로 고정하고, 아주 좁으면 줄바꿈되게 변경

다음에 할 일

Cloudflare Pages 배포 — 무료 버전 출시. 이후 카카오 애드핏 부착
고화질 4K 오프라인 인코딩(ffmpeg.wasm, 유료)
합성음 피아노틱하게

Series: 소리꽃 KeyBloom

오늘 한 일

막힌 부분

다음에 할 일

Series: 소리꽃 KeyBloom

Suggested Posts