메뉴
ChatterBox 이모트 Lottie 자산 파이프라인 — 옐로/앰버 라운드 이모트를 프로그래매틱 저작 → lottie_light 헤드리스 몽타주 육안 검증 → LOTTIE_BY_ID 배선 → 게이트/인룸 E2E. "이모트 추가", "새 이모트", "이모트 애니메이션", "옐로 이모트", "이모트 Lottie", "리액션 이모트 만들어" 요청 시. 2026-07-10 기본 8종 저작 세션에서 밟은 함정을 고정.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
ChatterBox 허브 맵 파이프라인 — 광장/구역 블록·내부 관(館) 원화 생성→핫스팟·앵커 캘리브레이션→manifest 배선→유도 3단 인터랙션→E2E. 새 맵(밤 variant·신규 구역 블록·새 내부 관·다른 씬 허브)을 만들 때 사용. 화풍 고정 생성은 scene-pipeline 참조.
ChatterBox 씬 에셋 파이프라인 — 화풍 고정 이미지 생성(gpt-image edits+레퍼런스)→WebP→매니페스트 등재, 입장 영상(Seedance i2v→Topaz 업스케일→WebM). 새 씬/시간대 variant/씬 영상을 만들 때 사용.
Vtube AUTORIG rig 를 ChatterBox 아바타로 배포(Storage 업로드 + 매니페스트 등록)하고 네이티브 렌더러로 실렌더 검증하는 하네스. character.json+mini_rig.json 병합·_mini_rig 렌더필수·헤드리스 same-origin 스테이징 등 매번 재발견하던 함정을 고정. "아바타 배포/추가/넣기/Vtube 아바타 온보딩/새 캐릭터 슬롯" 요청 시.
Vtube AUTORIG rig 를 ChatterBox 아바타로 배포(Storage 업로드 + 매니페스트 등록)하고 네이티브 렌더러로 실렌더 검증하는 하네스. character.json+mini_rig.json 병합·_mini_rig 렌더필수·헤드리스 same-origin 스테이징 등 매번 재발견하던 함정을 고정. "아바타 배포/추가/넣기/Vtube 아바타 온보딩/새 캐릭터 슬롯" 요청 시.
ChatterBox 음원 자산 파이프라인 — BGM/앰비언트/SFX 를 프롬프트로 생성(fal Stable Audio 2.5 · CassetteAI SFX) → 주인님 청취 게이트 → loudnorm+AAC → public/sounds/ 안착. "BGM 만들어", "음원 생성", "효과음 뽑아", "앰비언트", "사운드 추가" 요청 시. 2026-07-13 G6 BGM 3곡 세션에서 밟은 함정을 고정.
구현 완료 슬라이스를 프로덕션에 올리고 라이브로 실증한 뒤 문서·커밋까지 닫는 일괄 마감 절차 — db push(서울 pooler)·함수 deploy(재시도·실측)·CF Pages·프로드 통합/2탭 E2E·백로그 §0/GAP/drift 문서 마감. "배포하고 라이브테스트", "라이브로 올려", "페이즈 마감", "배포 몰아치기" 요청 시.
| name | emote-lottie |
| description | ChatterBox 이모트 Lottie 자산 파이프라인 — 옐로/앰버 라운드 이모트를 프로그래매틱 저작 → lottie_light 헤드리스 몽타주 육안 검증 → LOTTIE_BY_ID 배선 → 게이트/인룸 E2E. "이모트 추가", "새 이모트", "이모트 애니메이션", "옐로 이모트", "이모트 Lottie", "리액션 이모트 만들어" 요청 시. 2026-07-10 기본 8종 저작 세션에서 밟은 함정을 고정. |
이모트 비주얼은 데이터 주도라 컴포넌트를 건드리지 않는다. 자산 1파일 + 매핑 1줄이 전부고, 나머지는 저작 품질과 검증이다.
src/features/reaction/reactionCatalog.ts EMOTE_CATALOG 1행({id, emoji, label}) — id 가 안정 키(파일명·매핑 키·역색인 전부 이 id).public/lotties/emotes/<id>.json — 96×96 · fr60 · ip0/op120(2s) · 심리스 루프 · 투명배경, 개당 1.5~5KB.src/features/reaction/lottieEmoteMap.ts LOTTIE_BY_ID 1줄. 빈 항목 = emoji 폴백(정상 동작).tests/unit/lottieEmoteMap.test.ts 가 고아 매핑·자산 누락·필수 키(v/fr/ip/op/w/h/layers)를 잡는다.EmoteGlyph.tsx 단일 지점(lottie_light 지연 청크·성능 가드 내장) — 손대지 말 것.#FFC53D / 포인트·외곽 #FF8C2A(fire-amber) / 이목구비 #5C3A00 / 하이라이트 #FFE08A / 눈물·글린트 #FFF5E0 계열.faceShapes()(66px 원 + 글로스 + 3px 앰버 외곽), 심볼형 = 앰버 fill+스트로크. 신규도 이 헬퍼 재사용해 톤 유지.npx 를 재작성 — 생성 도구 설치·실행은 절대경로 /opt/homebrew/bin/npx. ("skills CLI 미존재" 오판의 진범. text-to-lottie 스킬은 이미 설치됨 — Lottie 문법·모션 레퍼런스는 그쪽 references/ 참조.)o+i 둘 다 — lottie-web 실측. (lottie-spec 문구 "i 는 도착 kf"와 다름 — 렌더러 기준을 따른다.)h:1) kf 로 사이클 리셋 — hold 는 자기 s 를 다음 kf 까지 유지 후 점프컷. 점프는 불투명도 0 구간에 숨긴다.structuredClone — lottie 가 데이터를 변이함(EmoteGlyph 는 이미 처리).waitForFunction options 는 3번째 인자 — 2번째에 넣으면 arg 로 먹혀 기본 30s 적용(E2E 쪽, supabase-slice-verify 함정 20 참조).templates/gen-emotes.mjs 를 scratch 로 복사 — 헬퍼(anim/gr/el/rc/sh/fl/stk/layer/doc·팔레트·이징)는 그대로, 신규 이모트 블록만 추가.node gen-emotes.mjs → templates/build-harness.mjs(대상 id·프레임 수정) → 헤드리스 Chrome --screenshot → Read 로 육안 판정(프레임 0/8/16/45/100 그리드, 몽타주 1장). 오독·비접촉·분리는 지오메트리 수정 후 재몽타주 — 2~3라운드가 정상. 하네스는 lottie_light min.js+JSON 인라인 file:// 단일 페이지라 서버·CORS 불요, 렌더러 = 앱과 동일(ground truth).LOTTIE_BY_ID 1줄(+신규 이모트면 EMOTE_CATALOG 1행).npm run type-check && npm run lint && npx vitest run && npm run build.templates/emote-room-e2e.mjs — dev 프론트(프로드 백엔드)+헤드리스 Chrome, 콘솔 슬롯 svg·발사→플로트 svg·지연청크·콘솔에러 실측. supabase-slice-verify 함정(소셜우선 로그인·버튼 disabled 대기) 준수, 테스트 방·계정 finally 삭제.lottieEmoteMap 계약 통과 · 자산 개당 ≤5KB.window.__err 확인(콘솔 에러 수집됨).