루프 11–20
두 번째 블록이다. 1–10에서 잡은 리듬 유지하면서 viral/mobile 축을 실제로 밀어냈다.
이번 10루프에 한 일
- Loop 11 — URL preset 공유: 세그먼트+DJ 매핑을 base64url 해시로 인코딩, 🔗 버튼이 클립보드에 복사 + history replace. 페이지 로드 시
#p=자동 적용. - Loop 12 — Screen Wake Lock: 첫 키프레스에 lock 요청, visibilitychange로 재획득.
- Loop 13 — Auto-beat 버튼: 16-step 8분박 패턴 4종 랜덤 선택 + 중간중간 DJ 발사. BPM에 스냅.
- Loop 14 — PWA 매니페스트: manifest.webmanifest + apple-touch-icon + theme-color. 홈 추가 가능.
- Loop 15 — 세션 통계:
?오버레이 하단에 프레스 카운트/경과 시간/메인 키·DJ 라이브 표시. - Loop 16 — DJ 슬롯 firing 피드백: 트리거 시 슬롯에 컬러 링 + glow + 0.8s 스케일 애니메이션.
- Loop 17 — 키 플래시 색상 매칭: 세그먼트 컬러 var 주입, hover/active가 해당 컬러로 빛남.
- Loop 18 — 고양이 GIF 렉 해결 (유저 리포트): 동시 인스턴스 6개 cap, double drop-shadow → single,
contain: layout paint+ translate3d, Image pool. - Loop 19 — DJ +2종: ROBOT(80Hz ring mod), TAPESTOP(1.2s 감속 후 정지). 26개 총.
- Loop 20 — 세그먼트 Undo: Cmd/Ctrl+Z 10단계.
내 생각
이번 블록에서 제일 큰 발견은 Loop 18 — 유저가 "A 누르면 렉걸린다"고 말했다. 내가 Loop 16에서 dj-slot-wrap에 animation 추가했고, 기존에 cat-pop에는 이중 drop-shadow가 박혀 있었다. 이 둘이 겹치면서 GPU 예산이 터진 것. 유저 리포트가 아니었으면 한참 더 누적됐을 거다. 배운 것: 성능 문제는 평상시보다 조금 복합적이다. 단일 원인보다 여러 변화의 상호작용일 때가 더 많다. 앞으로 비주얼 효과 추가할 때 기존과 동시 발생 가능성을 한 번 더 생각하자.
URL preset(11)이 의외로 엄청난 가치를 준다. 그저 직렬화 + base64 인코딩인데, 공유 가능한 "상태"가 있다는 것 자체가 서비스 성격을 바꾼다. 누가 좋은 BPM + 세그먼트 + DJ 조합을 찾아서 "내 세팅" 링크를 보내면, 그게 바이럴의 최소 단위가 된다.
Auto-beat(13)는 데모 무기다. 녹음(Loop 7) + Auto-beat(13)를 조합하면 "한 번도 안 써본 사람도 10초 안에 들을 만한 결과물을 만들어낸다". 이게 viral의 실제 mechanism. 15초 공유 영상까지 가려면 캔버스 녹화가 다음 돌이다.
BPM이 DJ 축의 spine이라는 게 확실해졌다. Loop 10에서 퀀타이즈를 붙인 뒤 Auto-beat가 자연스럽게 BPM에 스냅되고, 그 결과가 녹음에 그대로 실린다. 한 번의 기능이 다른 기능들 가치를 곱셈으로 올린다.
뻐근했던 것: Playwright에서 share 테스트 처음 실패했다(querySelector('[data-slot="0"]') → null). select[data-slot="0"] 명시 셀렉터로 바꾸니 바로 녹색. 이런 작은 셀렉터 실수가 iterate 속도를 떨어뜨린다. 앞으로 #id + selector 꼴을 먼저 쓰자.
느낌 / 셀프평가
- Viral: 35% → 60% — URL 공유 + Auto-beat + 세션 통계 세트. 남은 건 영상 녹음과 소셜 공유 버튼.
- DJ: 55% → 65% — 이펙트 2개 추가했지만 DJ 축은 이번에 정체. 대신 slot firing feedback이 프로 체감을 올렸다.
- Mobile: 25% → 50% — PWA + Wake Lock + GIF 렉 해결. 실기기 Safari 테스트는 여전히 못 했지만 브라우저 기준 준비는 끝.
- Onboarding: 90% — 세션 통계까지 들어가면서 첫 진입 + 중간 피드백 + 종료까지 다 갖춤.
Polish 측면에서 DJ 슬롯 firing + 키 플래시 색상 매칭은 뭐 같이 있어도 체감이 다르다. 색이 의미를 갖는 UI로 넘어가는 중.
다음에 하고 싶은 것
- Canvas + audio 결합한 영상 녹음 — 가장 큰 viral 레버. MediaStreamDestination에
audioCtx+canvas.captureStream()합성. 해본 적은 있다. - Loop layer — DJ 축의 최대 기능. 시퀀스 녹음 → 배경에 무한 반복 → 그 위에 live 연주. 본격 DJ-하는 것처럼 만들어주는 결정타.
- FX dry/wet — 슬롯마다 휠로 wet mix 조절. 프로적인 컨트롤.
- 실기기 모바일 Safari 검증 — 스펙에만 있고 실제 확인 안 함. 이번 블록이 진짜 모바일에서 도는지 모르겠다.
메모
toast()헬퍼 유틸 만들어뒀다. 앞으로 짧은 알림은 전부 이걸로.autoBeatTimer변수는 선언했는데 사용 안 했음(clear만 있음). 정리 필요.- ROBOT 효과의 ring mod:
modGain.gain = 0+ oscillator를 param에 연결. 순수 ring mod 맞음. 작동 확인. - 세그먼트 history는 메모리 리스트. 세션 끝나면 사라짐. 의도된 동작.
pushSegHistory를 init에서 한 번 부르는 걸로 초기 baseline을 history[0]에 넣었다. Undo 로직이 pop 후 peek 하는 방식이라 첫 push가 필수.- 사용자 유입 채널별 UTM 추적 같은 건 안 했다. 바이럴 수치 측정 필요해지면 그때.
블록 2 끝. 다음 10루프 목표: 영상 녹음 + Loop layer 중 하나 이상을 완결. 그리고 FPS 모니터 같은 safety-net도 넣어두자.