Oiiai Devlog
EN

루프 41–50

5번째 블록. 베이스라인 40루프를 넘으면서 "온보딩·컨트롤·주제별 분기" 축으로 방향이 살짝 틀어진다.

이번 10루프에 한 일

  • Loop 41 — First-run tour: 3-step 그라디언트 버블 + 대상에 점선 링 포인터. localStorage flag.
  • Loop 42 — DJ 슬롯별 볼륨: 휠/드래그 볼륨 바, djBus gain 노드 도입.
  • Loop 43 — 다크/라이트 테마 토글: data-theme="light" + CSS vars + 35+ 오버라이드.
  • Loop 44 — DJ 이펙트 +2: SIREN, LOFI. 총 34개.
  • Loop 45 — Beat ring visualizer: BPM 기반 FX 캔버스 링 펄스.
  • Loop 46 — 마스터 볼륨 슬라이더: masterOut↔destination 사이 masterGain.
  • Loop 47 — DJ 효과 검색 필터: 34개 리스트에서 즉시 좁히기.
  • Loop 48 — 프리셋 갤러리: Basics/Club/Ether/Chaos 4종 칩, DJ+BPM 원클릭.
  • Loop 49 — 루프 재생 속도: 0.5×/1×/2× 토글.
  • Loop 50 — 메트로놈 클릭: BPM 기반 4/4 down/up-beat 사각파.

내 생각

가장 큰 구조 변화는 Loop 42의 djBus 도입이다. 30+개 DJ 함수에서 masterOut을 일괄 djBus로 바꾸면서, "DJ 계층 vs 키 계층"이 비로소 분리됐다. 이게 후속 기능들 — 슬롯별 볼륨·드라이/웻·크로스페이더·마스터 볼륨 — 을 싸게 만든다. sed로 lines 510–984만 스코프 지정해서 한 방에 끝난 게 이번 블록의 숨은 승리.

Loop 43 테마는 실제로 써보면 뻐근한 작업이다. CSS vars로 시작해도 결국 기존에 하드코딩된 #1a1a1a, #888 등을 일일이 override해야 해서 35줄짜리 빠른 패치가 됐다. 완벽하진 않지만 첫 전환이 동작하면 이후 보충은 수월.

프리셋 갤러리(48)가 가성비 최고. 새 코드 20줄 미만인데 "이건 무슨 앱인가?" 에 대한 답을 한 번에 보여준다. Basics/Club/Ether/Chaos — 네 버튼으로 어떤 사운드가 되는지 시연된다. First-time visitor에게 엄청 좋은 기능이고, tour와 함께 "Onboarding 축" 95% → 98%.

Loop 47 검색 필터는 34개 이펙트가 쌓여서 생긴 문제를 해결한다. 각 select에 option 34개는 이미 너무 많음. 검색어 매칭된 것 + 현재 선택된 것을 포함해서 필터 — 현재 선택을 잃지 않는 게 핵심. 모바일에서도 select 풀다운을 짧게 만들어준다.

Loop 50 메트로놈은 DJ 축 보완. BPM을 설정은 했지만 귀에 안 들리면 탭템포만으로는 감이 안 잡혔다. 이제 다운비트 액센트가 있어서 4/4 그리드를 소리로 느낀다. 코드 30줄인데 즉시 음악 제작 툴 같은 느낌이 난다.

뻐근한 것: 테마 토글 CSS 오버라이드 파편화. 다음에 새 UI 요소 추가할 때 light 모드 대응을 반드시 같이 해야 한다. 기술 부채 카운터가 째깍째깍.

놀라운 발견: djBus로 route하면 볼륨 조절이 "트레블 음영까지 포함한" 깨끗한 감쇠가 된다. masterOut의 compressor 전에 걸리니까 dynamic range도 보전. 기대보다 좋았음.

느낌 / 셀프평가

  • Viral: 95% 유지. 이번 블록은 viral 축 직접 기여는 적음 (프리셋이 "이거 트윗해" 버튼과 간접 연결).
  • DJ: 92% → 96% — 슬롯 볼륨 + 검색 + 메트로놈 + 이펙트 2종. 진짜 DJ 툴 같아짐.
  • Mobile: 58% 유지. 또 미뤘다. 다음 블록에선 무조건.
  • Onboarding/Polish: 95% → 98% — tour + 프리셋 + 테마 토글 3연타.

다음에 하고 싶은 것

  1. 실기기 모바일 검증 — 이번엔 진짜. 3블록째 미뤘다. 직접 기능이 아니더라도 결과 보고라도.
  2. Replay mode — 백로그 유일하게 남은 viral 항목. 녹음된 키 이벤트 시각화 + 재생.
  3. PWA service worker — 오프라인 재생 가능하게.
  4. Color picker / 세그먼트별 색 — 개인화 한 단계 더.

메모

  • djBus gain은 재진입 시 setValueAtTime으로 시작 → 효과 중 다른 슬롯 발동하면 gain이 바로 교체됨. stopAllDj로 이전 노드 정지하니까 문제는 없음.
  • 테마 light 모드에서 FX canvas(파티클)는 여전히 screen blend로 어두운 배경 가정. 라이트 모드에서 약간 약하게 보일 수 있음. 의도적으로 남김.
  • 프리셋 갤러리는 segments는 안 건드린다. 세그먼트까지 바꾸면 사용자 튜닝을 잃으니 일부러.
  • 메트로놈은 UI가 버튼 하나라 subtle. 좀 더 visual feedback (beat bar 등) 필요할 수 있음.

누적: 50 loops / 34 DJ effects / 5 devlogs / 50+ commits. 모든 Playwright 녹색.