Oiiai Devlog
EN

루프 21–30

3번째 블록. DJ 축이 비로소 "도구" 영역으로 넘어갔다.

이번 10루프에 한 일

  • Loop 21 — Make Clip: Auto-beat + 자동 녹음 콤보 원클릭 버튼. ~11초 WebM 즉시 다운로드.
  • Loop 22 — DJ 셔플: 26개 이펙트에서 9슬롯 랜덤 재매핑.
  • Loop 23 — FPS 모니터 + 자동 품질: 우상단 FPS 표시, 50/40 이하 시 burst 강도 자동 0.75x/0.5x.
  • Loop 24 — 𝕏 트윗 공유: 현재 세팅 URL로 트윗 작성 창 직결.
  • Loop 25 — BPM 직접 입력: BPM 값 더블클릭 → prompt로 정확한 BPM 입력.
  • Loop 26 — GLITCH: 랜덤 오프셋/길이/피치/50% 역재생 스터터.
  • Loop 27 — PHASER: 4단 allpass + 0.5Hz LFO 주파수 변조.
  • Loop 28 — 루프 레이어 (가장 큰): 🔁 버튼 3-state. 키/DJ 이벤트를 시간축 기록 → 자동 반복, 그 위에 live 연주.
  • Loop 29 — 루프 클리어: Shift-click 🔁로 정리.
  • Loop 30 — 안티앨리어싱: 고배속 playback(CHIP/SCRATCH/POWERUP/LASER)에 pre-lowpass 체인.

내 생각

Loop 28 (루프 레이어)가 이번 블록의 중심이다. 이걸 넣기 전까지 이 앱은 "단발 키 누르기" 수준이었다. 루프가 생기면서 완전히 다른 게임이 됐다. 배경에 ㅜㅣㅣㅏ 반복을 깔고 그 위에 DJ 슬롯을 찍으면, 이제 진짜로 "한 사람 세션"처럼 들린다. 구현은 의외로 단순했다 — 이벤트를 {t, type, arg}로 배열에 모으고 setTimeout으로 재생하는 것뿐. 키/DJ 경로 양쪽에 loopRec() 한 줄씩만 꽂으면 된다. 오디오를 녹음하는 게 아니라 입력을 녹음하는 접근이 이만큼 깔끔하게 풀린 이유는 pressKey/playDjSlot이 이미 side-effect-free한 트리거로 설계되어 있었기 때문. 초기에 이 구조를 가지고 간 것이 이제 와서 빛을 봤다.

Make Clip (21)은 viral 축의 무기다. 10초짜리 완성형 트랙이 한 클릭에 나간다. Auto-beat + 녹음을 따로 만들어두고 이번에 엮은 것뿐인데, 기존 부품을 조합해서 새 가치를 만든 대표 사례. 이 패턴을 Loop layer에도 적용해서 "루프 + 녹음" 조합도 할 수 있겠다.

BPM 직접 입력(25)에서 작은 해프닝: 내가 bpm-value span에 click 리스너를 걸었는데, 그게 TAP 버튼 child라서 테스트가 깨졌다. dblclick으로 바꿔서 해결. UI 이벤트의 전파/위치는 항상 한 번 더 생각해야 하는 지점. 앞으로 자식 요소에 click 붙이기 전에 부모 영향 점검.

안티앨리어싱(30)은 귀 민감한 사람이 알아차릴 음질 개선. CHIP이 전보다 덜 "찢어진다". 수치상으론 큰 변화 아니지만 DJ가 듣기엔 차이가 난다. 한번 넣어두면 영원히 자산.

뻐근했던 것: PHASER를 만들며 allpass 체인 구성이 살짝 헷갈렸다. lfo → lfoGain → ap.frequency를 4번 반복 연결하는 게 맞는지 검증 — 결과적으로 의도대로 LFO가 4개 스테이지 모두 변조. Web Audio의 AudioParam이 여러 source를 받으면 합산된다는 사실을 새삼 확인.

느낌 / 셀프평가

  • Viral: 60% → 80% — Make Clip이 결정타. 트윗 버튼도 엄청 작은 부분 하나를 풀었다.
  • DJ: 65% → 85% — 루프 레이어가 임팩트 크다. GLITCH/PHASER로 이펙트 다양성도 확보.
  • Mobile: 50% → 55% — 이번 블록은 데스크탑 중심. FPS 자동 품질은 모바일에도 의미 있지만 실기기 검증은 여전히 미루고 있음.
  • Polish: 전반적으로 상승. 셔플·커스텀 BPM·클리어 등 작은 UX가 두꺼워졌다.

다음에 하고 싶은 것

  1. 실기기 모바일 Safari 실전 검증 — 이 앱이 진짜로 iPhone에서 돌아가는지 더 미룰 수 없다. 터치·오디오 언락·wake lock·PWA 설치 전부 실증 필요.
  2. Canvas + 오디오 합친 영상 녹음 — Make Clip을 WebM 영상으로 업그레이드. canvas.captureStream() + audioCtx stream 합성. 어떤 캔버스를 녹화할지 (FX canvas만 vs waveform 포함) 결정이 필요.
  3. FX dry/wet 노브 — DJ 슬롯에 휠로 wet mix 조절.
  4. Waveform 줌 in/out — 파형이 짧은 구간 튜닝할 때 너무 좁음. 휠 확대 + 드래그 팬.

메모

  • 루프 레이어와 녹음은 서로 직교. 녹음 중 루프 재생하면 녹음에 루프가 자연히 섞여 들어간다 (마스터 스트림에서 잡히므로). 확인 안 했지만 원리상 맞다.
  • 루프 레이어 이벤트는 메모리에만. 새로고침 시 사라짐. 의도됨 — 지나친 persistence는 UX 복잡하게 함.
  • FPS 품질 저감은 burst 경로만. drop과 고양이는 별도 — 드롭은 극적 순간이라 죽이지 말자는 판단.
  • dj-slot-wrap:nth-child(n+1) 셀렉터로 슬롯 flash — render 후 첫 자식이라 유효. 렌더 순서 바뀌면 깨진다. 리팩터 시 주의.
  • 이펙트 수 28개 도달. 9개 슬롯 대비 3x. 셔플 버튼이 유의미해지는 지점.

다음 블록 목표: viral 80 → 95, mobile 55 → 75. 실기기 검증이 진짜 필요하다.