Master Plan · 상용화 로드맵

2D 캐릭터 생성 → 관절 모션 → 가상오피스 동선 생활 연출

누끼 없는 멀티파츠 리그 — 네모 박스 대신 파츠 PNG 부착가벼운 FK 관절 모션 — 키프레임 보간 + 경로 이동 동시 재생오피스 빌딩 % 좌표 바인딩 — 부서별 생활 동선일반 사용자 5분 온보딩 — 템플릿 → 경로 → 저장 → 오피스 확인

전체 태스크 진행26/26 (100%)

6 Phase 실행 계획

Phase 1

리소스 분석 & 업그레이드 기획

HF·GitHub·Kaggle 자료를 큐레이션하고 상용화 갭 분석·로드맵 확정

완료

산출물

· 외부 리소스 목록 (master-plan.ts)
· 7단 프로덕션 파이프라인 정의
· 기능 매트릭스 (done/partial/missing)
· 로드맵 UI (/anistudio/roadmap)
· 인간 개입 대기 큐 (/anistudio/waiting)

태스크

✓ 오픈소스·HF·Kaggle 리소스 큐레이션
✓ 현재 코드베이스 갭 분석
✓ 7단 파이프라인 UX 설계
✓ 로드맵·대기 큐 페이지
✓ Phase 2~6 상세 WBS 문서화

완료 기준

로드맵 페이지에서 6개 페이즈·리소스·파이프라인 확인 가능
인간 개입 항목이 대기 큐에 분류됨

Phase 2

파이프라인 & 인터페이스 구현

스튜디오·오피스 end-to-end 멀티파츠 리그 재생 + 핵심 UX 결함 수정

완료

산출물

· 오피스 RigCharacterDom (멀티파츠+키프레임)
· building binding rig 스냅샷 export
· 키프레임 삭제·보간 캡처 수정
· 저장 실패·미저장 이탈 경고
· scale 오피스 반영
· 10파츠 템플릿 (11본 정합)
· 프로젝트 삭제 UI

태스크

✓ BuildingRouteBinding rig 확장
✓ 오피스 DOM 리그 렌더러
✓ 타임라인 키프레임 삭제
✓ 저장 에러 UX + beforeunload
✓ 템플릿 11본↔10파츠 정합
✓ 프로젝트 삭제·메타 편집 UI

완료 기준

오피스에서 단일 img가 아닌 멀티파츠 리그 재생
키프레임 추가·삭제·scrub 정상
저장 실패 시 사용자에게 메시지 표시

Phase 3

일반 사용자 UX (프론트엔드)

5분 온보딩·가이드·텍스트 설명으로 비전문가도 캐릭터+동선 완성

완료

산출물

· 스튜디오 온보딩 7단계 패널
· 대시보드 Phase 진행률·빠른 시작
· 모드별 컨텍스트 도움말
· 프로젝트 마법사 (이름·템플릿·부서 한 화면)
· 오피스 좌표 격자 오버레이

태스크

✓ StudioOnboarding 패널
✓ 대시보드 로드맵 링크·Phase 배지
✓ 프로젝트 생성 마법사
✓ 빈 파츠 검증 경고 (네모 박스 방지 가이드)
✓ 오피스 좌표 보정 오버레이

완료 기준

신규 사용자가 온보딩만 따라 1개 프로젝트 완성
빈 슬롯 시 업로드 유도 메시지

Phase 4

검증 & 디버깅 (QA)

실사용자 관점 접속·재생·저장·오피스 연동 전 구간 검증

진행 중

산출물

· QA 체크리스트 (waiting 큐 연동)
· 빌드·lint 통과
· 알려진 버그 수정 로그

태스크

✓ npm run build 검증
✓ 네모 박스(빈 파츠) 재현 테스트
✓ 오피스 % 좌표 정합 (격자 스냅)
✓ Neon/FS 저장 회귀 테스트

완료 기준

production build 성공
QA 체크리스트 critical 항목 100%

Phase 5

AI 캐릭터 생성 파이프라인

See-Through·HF lonex·Kaggle 에셋 연동으로 자동 파츠 분해

완료

산출물

· HF Space / API 연동 (See-Through)
· 레이어→본 슬롯 휴리스틱 매핑
· 로컬 10파츠 crop fallback
· 에셋 패널 자동 리그 적용

태스크

✓ See-Through API 래퍼
✓ 레이어→본 슬롯 휴리스틱
✓ HF 토큰·쿼터 human queue

완료 기준

단일 PNG 업로드 → 6파츠 이상 자동 리그 (80% 정확도)

Phase 6

고객 납품 & 상용화

export 번들·문서·SLA·Vercel 프로덕션 안정화

완료

산출물

· JSZip 납품 번들 (PNG+JSON+README)
· 프로덕션 DATABASE_URL 가드
· storage health API
· 고객 납품 체크리스트 (waiting)

태스크

✓ ZIP export (PNG+JSON)
✓ 프로덕션 DATABASE_URL 가드
✓ 고객 납품 체크리스트

완료 기준

고객이 ZIP 하나로 오피스+스튜디오 재현 가능

7단 프로덕션 파이프라인

일반 사용자가 따라 할 작업 순서

1
캐릭터 준비
사용자: 5종 템플릿 선택 또는 파츠 PNG 업로드 (머리·몸·팔·다리)
시스템: applyTemplateToProject · image-utils data URL 변환 · 본 슬롯 매핑
→ rig.parts[] + character.spriteUrl
2
리그 조정
사용자: 「리그」 모드에서 본 회전·파츠 위치·피벗 조정
시스템: worldBonePos FK · Konva PartSprite 렌더
→ 검증: 네모 박스 없이 파츠만 표시
3
관절 모션
사용자: 타임라인 scrub → 포즈 → +키프레임 (2~4개 walk cycle)
시스템: interpolateBonePoses · captureCurrentPoses
→ rig.keyframes[]
4
동선 설계
사용자: 「경로」 모드에서 웨이포인트 클릭·드래그 · 루프·속도 설정
시스템: Catmull-Rom sampleRoute · facingAngle
→ route.points[] + durationMs
5
오피스 배경
사용자: 빌딩 PNG 업로드 또는 960×600 기본 · 부서 선택
시스템: exportBuildingBinding % 정규화 · rig 스냅샷 포함
→ building + departmentSlug
6
저장·검증
사용자: 저장 → /office 에서 부서 캐릭터 확인
시스템: Neon JSONB 또는 FS · bindings API 15s poll
→ 빌딩 위 멀티파츠+경로 재생
7
납품 export
사용자: skel2d / DragonBones JSON 다운로드
시스템: exportSkel2dJson · exportDragonBonesJson
→ 고객 전달용 애니메이션 데이터

외부 리소스 큐레이션

Hugging Face · GitHub · Kaggle · 참조

이름	출처	용도	우선순위	상태
react-konva / Konva	github	스튜디오 캔버스·본·파츠 렌더링 코어	critical	integrated
skel2d	github	2D 스켈레톤 export 포맷 참조 (lonex-skel2d-v1)	high	integrated
DragonBonesJS	github	armature JSON export (런타임은 자체 DOM/Konva)	medium	integrated
See-Through (레이어 분해 SOTA)	huggingface	단일 일러스트 → PSD 레이어 자동 분해 → 파츠 리그 입력	high	planned
Stretchy Studio	github	AI 오토리깅·메시 변형 워크플로 참조	high	evaluating
Animate.GenaiGalaxy	github	GenAI 캐릭터 애니메이션 파이프라인 참조	medium	evaluating
Spine / Live2D (상용 참조)	reference	키프레임·슬롯·메시 UX 벤치마크	medium	evaluating
Firebound Proscenio	github	컷아웃 리깅 파이프라인 (Photoshop→Blender→Godot)	low	evaluating
Kaggle 2D Sprite / Character Datasets	kaggle	템플릿·파츠 학습 데이터·벤치마크 에셋	medium	planned
Hugging Face lonex 컬렉션	huggingface	브랜드 일관 캐릭터·스타일 모델 연동	high	planned

6 Phase 실행 계획

리소스 분석 & 업그레이드 기획

파이프라인 & 인터페이스 구현

일반 사용자 UX (프론트엔드)

검증 & 디버깅 (QA)

AI 캐릭터 생성 파이프라인

고객 납품 & 상용화

7단 프로덕션 파이프라인

캐릭터 준비

리그 조정

관절 모션

동선 설계

오피스 배경

저장·검증

납품 export

외부 리소스 큐레이션