소리꽃 KeyBloom 3

소리꽃 KeyBloom 바로가기 ↗

소리꽃 KeyBloom YouTube에서 보기 ↗

오늘 한 일

• 큐(Cue) 시스템 — 비주얼 파라미터 전체를 큐(1~6)로 저장. 비주얼 탭 안의 큐 서브탭에서 큐마다 이펙트·건반을 따로 편집. 큐 번호 우클릭으로 복제/삭제, 드래그로 순서 변경(위치대로 번호 재정렬)
  • 이유: 연주 라인이나 리듬에 따라 표현하고 싶은 이펙트가 달라서, 원하는 타이밍에 원하는 파티클 이펙트로 바꿀 수 있게 하고 싶었다
• 시퀀서 — 좌하단에 타임라인 캔버스. 룰러(줌/스크롤), MIDI 트랙, 오디오 트랙(파형), 비주얼 트랙. 펜으로 특정 시각에 큐를 배치하면 재생 시 그 구간부터 해당 큐가 적용
  • 이유: 영상 편집하듯, DAW에서 MIDI 작업하듯 다루는 방식이 익숙해서
• 큐별 비주얼 유지 — 재생 중 큐가 바뀌어도 이미 떠 있는 파티클은 원래 큐 색을 유지(파티클이 자기 큐를 기억, 큐별 아틀라스)
• 비주얼 트랙 편집 — 마커를 드래그해 경계 이동(구간 크기조절), 드래그 중 시각 표시. 구간 우클릭(펜 모드 무관)으로 수정/삭제/위치 입력/큐 변경 메뉴. 위치는 mm:ss:cs로 직접 타이핑
  • 이유: 이 앱에선 윈도우 기본 우클릭 메뉴가 필요 없고, 마커에 걸 기능(수정·삭제·위치·큐 변경)을 둘 자리가 필요해서 우클릭을 자체 메뉴로 바꿈
• 스페이스바 재생/일시정지
  • 이유: 나도 모르게 습관처럼 스페이스바를 누르게 돼서
• 클린코드 라운드 — 두 벌이던 우클릭 메뉴를 공용 헬퍼 하나로, 완전 동일하던 함수 통합, CSS 색·폰트를 변수로

---

막힌 부분

• 큐가 바뀌면 이미 떠 있던 파티클까지 새 큐 색으로 바뀌었다 — 아틀라스(미리 구운 스프라이트)가 하나뿐이라. 파티클이 태어난 cueId를 들고, 렌더러가 cueId별 아틀라스를 캐시해 각자 자기 큐로 그리게 해결
• 큐를 재정렬하면 번호만 바뀌는 게 아니라 비주얼 트랙 큐포인트·화면의 파티클·선택 큐가 옛 번호를 가리켜 깨졌다 — 옛→새 번호 맵으로 참조를 일괄 remap(아틀라스 캐시도 폐기)
• MIDI를 안 불러왔는데도 비주얼 트랙에 큐가 찍혔고, 그 상태에서 위치를 입력하니 마커가 사라졌다(곡 길이 0이라 0으로 클램프) — 곡이 없으면 시퀀스 상호작용을 통째로 비활성(펜 버튼 disabled)
• 눈금 시각 표기가 한 줄에서 0:05.0과 0:23처럼 섞였다 — 소수 자리를 초 값이 아니라 눈금 간격(줌) 기준으로 결정하게 수정

---

다음에 할 일

• 프로젝트 저장/불러오기 — 큐·큐포인트·트랙·MIDI(base64 임베드)를 JSON 한 파일로
• 실시간 연주 모드 (Web MIDI) — 비주얼 엔진은 그대로, 노트 입력 소스만 교체(실질적 최종 목표)
• 고화질 오프라인 인코딩(ffmpeg.wasm), 모양별 색 지정, 합성음 피아노틱하게(조사)

---

---

Series: 소리꽃 KeyBloom

---

Suggested Posts