**프로젝트명**: Artifex.AI Studio Pro
Sign in to like and favorite skills
프로젝트명: Artifex.AI Studio Pro
버전: 0.0.0
타입: AI 기반 멀티미디어 콘텐츠 생성 플랫폼
기술 스택: React 19 + TypeScript + Vite + Google Generative AI
현재 날짜: 시스템
date# 개발 시작 시 날짜 확인 (필수) date '+%Y년 %m월 %d일 %A'
⚠️ 주의사항:
graph TD A[React App] --> B[Components Layer] B --> C[Services Layer] C --> D[AI Providers] D --> E[Google Gemini] D --> F[OpenAI] D --> G[Anthropic] D --> H[Local Models] B --> I[State Management] I --> J[Local State] I --> K[IndexedDB] B --> L[UI Components] L --> M[Input Forms] L --> N[Display Components] L --> O[Modals & Dialogs]
artifex.ai-studio-pro/ ├── App.tsx # 메인 애플리케이션 ├── components/ # React 컴포넌트 │ ├── storyboard/ # 스토리보드 관련 │ ├── icons/ # 아이콘 컴포넌트 │ └── ... # 기타 UI 컴포넌트 ├── services/ # 비즈니스 로직 │ ├── aiProviders/ # AI 제공업체별 서비스 │ ├── characterGeneration/ # 캐릭터 생성 서비스 │ │ └── codexrk/ # 🆕 Professional Mode (CODEXRK v3.7.0) │ ├── geminiService.ts # Google Gemini 통합 │ ├── db.ts # IndexedDB 관리 │ └── ... # 기타 서비스 ├── i18n/ # 다국어 지원 │ └── translations/ # 번역 파일 ├── docs/ │ ├── ai-models/ # AI 모델 문서 │ │ ├── AI_MODEL_INTEGRATION_PLAN.md │ │ └── MODEL_CHANGELOG.md │ └── features/ # 기능별 상세 문서 │ ├── CHARACTER_CONSISTENCY_SYSTEM.md # 캐릭터 일관성 시스템 │ ├── IMAGE_3D_CHARACTER_GENERATION_CODEXRK.md # 🆕 CODEXRK v3.7.0 스펙 │ ├── CODEXRK_PROMPT.txt # 🆕 구현 지시문 │ ├── TASKS_CODEXRK.md # 🆕 백로그 (A-00 ~ A-13) │ ├── INTEGRATION_GUIDE.md # 🆕 통합 패턴 가이드 │ └── CODEXRK_IMPLEMENTATION_CHECKLIST.md # 🆕 구현 체크리스트 ├── scripts/ # 유틸리티 스크립트 └── Models/ # 로컬 AI 모델 (gitignored)
CODEXRK는 기존 Character Creator에 통합되는 Enterprise급 캐릭터 생성 시스템입니다. Basic Mode의 모든 기능을 유지하면서 Professional Mode를 통해 고급 기능을 제공합니다.
// constants/slo.constants.ts export const SLO_REQUIREMENTS = { SUCCESS_RATE_WEEKLY: 0.97, // 97% 이상 (필수) P95_CONCEPT_TO_3D_MIN: 4, // 4분 이하 (필수) CONSISTENCY_P50: 0.95, // 중앙값 95% CONSISTENCY_P90: 0.92, // 90 백분위 92% (필수) UE5_IMPORT_PASS: 1.0, // 100% 성공 (필수) AVG_COST_USD_PER_CHAR: 2.5 // $2.5 이하 (필수) } as const; // SLO 미달 시 자동 롤백 if (!checkSLOCompliance()) { await rollback(); throw new Error("SLO violation - deployment blocked"); }
components/CharacterCreator.tsx (탭 래퍼) ├── Basic Mode (기존 100% 유지) │ └── CharacterCreatorBasic.tsx ├── Professional Mode (신규) │ ├── CharacterCreatorPro.tsx │ ├── CharacterConsistencyPanelPro.tsx │ └── CharacterUE5ExporterPro.tsx └── SLO Dashboard (신규) └── CharacterSLOMonitorPro.tsx services/characterGeneration/ ├── aiCharacterGenerator.ts [수정 금지] ├── gaussianSplattingRenderer.ts [수정 금지] ├── [기타 기존 파일들 - 수정 금지] └── codexrk/ (신규 - 완전 격리) ├── orchestrator/ │ ├── CharacterOrchestrator.ts │ ├── JobManager.ts │ └── SLOEnforcer.ts ├── adapters/ │ ├── image/ (MidjourneyAdapter, FluxAdapter, etc.) │ ├── video/ (VeoAdapter, RunwayAdapter, etc.) │ ├── model3d/ (CSMAdapter, MeshyAdapter, etc.) │ └── gaussian/ (GaussianAdapter) ├── consistency/ │ └── ConsistencyEngine.ts ├── exporters/ │ └── UE5Exporter.ts ├── rights/ │ ├── C2PAService.ts │ └── WatermarkService.ts └── telemetry/ └── OpenTelemetry.ts
| Task | 내용 | 우선순위 | 상태 |
|---|---|---|---|
| A-00 | 기존 코드 보호 (CharacterCreatorBasic.tsx) | P0 | 🔴 대기 |
| A-01 | 디렉토리 구조 생성 + 탭 UI | P0 | 🔴 대기 |
| A-02 | Orchestrator API 구현 | P1 | 🔴 대기 |
| A-03 | Image Adapters (Mock 우선) | P1 | 🔴 대기 |
| A-04 | 3D Model Adapters | P1 | 🔴 대기 |
| A-05 | Video Adapters | P2 | 🔴 대기 |
| A-06 | Gaussian Service 통합 | P2 | 🔴 대기 |
| A-07 | Consistency Engine 2.0 | P1 | 🔴 대기 |
| A-08 | UE5 Exporters | P1 | 🔴 대기 |
| A-09 | Rights Management | P2 | 🔴 대기 |
| A-10 | Registry & Telemetry | P2 | 🔴 대기 |
| A-11 | E2E & Benchmark | P0 | 🔴 대기 |
| A-12 | Security & Cost | P0 | 🔴 대기 |
| A-13 | Documentation | P1 | 🔴 대기 |
codexrk//api/v1/character/professional# Phase 0: 사전 준비 (필수) git checkout -b feature/codexrk-integration npm test # 기존 테스트 100% 통과 확인 cp components/CharacterCreator.tsx components/character/CharacterCreatorBasic.tsx # Phase 1: 기반 작업 mkdir -p services/characterGeneration/codexrk/{orchestrator,adapters,consistency,exporters,rights,telemetry} mkdir -p components/character touch constants/slo.constants.ts # Phase 2: Core 구현 (Mock 우선) # 1. Orchestrator API 구현 # 2. Mock Adapters 구현 # 3. Basic UI 통합 # 개발 중 필수 체크 npm run lint # 0 errors npm run typecheck # 0 errors npm test # 100% pass
⚠️ 절대 수정 금지 파일:
services/characterGeneration/aiCharacterGenerator.tsservices/characterGeneration/gaussianSplattingRenderer.tscomponents/character/CharacterManager.tsx✅ 신규 생성만 허용:
services/characterGeneration/codexrk/*components/character/*Pro.tsxconstants/slo.constants.ts# 1단계: 최신 모델 확인 npm run check-ai-models # 2단계: SDK 버전 확인 npm run check-sdk-versions # 3단계: 전체 통합 체크 npm run full-update-check # 4단계: 업데이트 필요시 실행 npm run update-ai-models # 모델 문서 업데이트 npm run update-sdks # SDK 패키지 업데이트 # 5단계: 변경사항 확인 cat docs/ai-models/MODEL_CHANGELOG.md | head -30
gantt title AI Integration Roadmap dateFormat YYYY-MM-DD section Text AI OpenAI GPT-5 통합 :2025-09-21, 3d Anthropic Claude 4 통합 :2025-09-24, 3d Mistral 통합 :2025-09-27, 2d section Image AI DALL-E 3 통합 :2025-09-29, 2d Stable Diffusion 통합 :2025-10-01, 3d section Video AI Sora Turbo API 연동 :2025-10-04, 3d Veo 3 통합 :2025-10-07, 3d
📌 핵심 원칙: "기존 코드는 절대 건드리지 않는다" ✅ 해야 할 일: 1. docs/features/CODEXRK_PROMPT.txt v2.0 읽고 지시사항 따르기 2. docs/features/TASKS_CODEXRK.md v2.0에서 백로그 확인 3. services/characterGeneration/codexrk/ 하위에만 코드 작성 4. components/character/*Pro.tsx 패턴으로 UI 생성 5. SLO 상수는 constants/slo.constants.ts에 하드코딩 ❌ 하지 말아야 할 일: 1. aiCharacterGenerator.ts 수정 금지 2. gaussianSplattingRenderer.ts 수정 금지 3. 기존 Character Creator 파일 수정 금지 4. IndexedDB 스키마 변경 금지 5. 기존 API 엔드포인트 변경 금지
When working on AI model features, ALWAYS reference:
Check AI_MODEL_INTEGRATION_PLAN.md for:
Check MODEL_CHANGELOG.md for:
Check CHARACTER_CONSISTENCY_SYSTEM.md for:
npm run check-ai-modelsflowchart TD A[개발 시작] --> B{일일 체크 완료?} B -->|No| C[npm run check-ai-models] B -->|Yes| H[개발 진행] C --> D[WebSearch/WebFetch로 확인] D --> E{업데이트 있음?} E -->|Yes| F[MODEL_CHANGELOG.md 업데이트] E -->|No| H F --> G[필요시 코드 수정] G --> H
각 제공업체의 최신 정보는 아래 URL에서 확인:
# 개발 서버 실행 npm run dev # 빌드 npm run build # 프리뷰 npm run preview
# 모델 업데이트 체크 npm run check-ai-models # SDK 버전 체크 npm run check-sdk-versions # 전체 통합 체크 (모델 + SDK) npm run full-update-check # 문서 업데이트 npm run update-ai-docs # SDK 패키지 업데이트 npm run update-sdks # 상세 보고서 생성 npm run ai-model-report # 테스트 실행 npm test
# .env 파일 VITE_OPENAI_API_KEY=sk-... VITE_ANTHROPIC_API_KEY=sk-ant-... VITE_GEMINI_API_KEY=... VITE_MISTRAL_API_KEY=... VITE_STABILITY_API_KEY=... VITE_REPLICATE_API_KEY=...
절대적 원칙: 모델 자동 대체/치환 금지
예시:
2025년 9월 20일 Gemini 2.5 Flash 사건에서 배운 교훈
대충 판단하고 쉬운 방법으로 우회하기
근거 없는 추측으로 해결하기
표면적 증상만 보고 빠른 해결책 찾기
중요: Google의 Imagen 4.0과 Gemini Flash Image 모델들은 실제로 API를 통해 사용 가능합니다!
Imagen 4.0 시리즈
imagen-4.0-generate-001imagen-4-fastimagen-4-ultraGemini Flash Image
gemini-2.5-flash-image-preview// Imagen 4.0 사용 const model = genAI.getGenerativeModel({ model: "imagen-4.0-generate-001" }); // Gemini Flash Image 사용 const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-image-preview" });
1:14:33:416:99:16📚 상세 문서: GOOGLE_IMAGE_GENERATION_API.md
| 오류 | 원인 | 해결 방법 |
|---|---|---|
| API Key Error | 잘못된 키 | .env 파일 확인 |
| Rate Limit | 과도한 요청 | Retry 로직 추가 |
| Model Not Found | 구버전 사용 | 최신 모델로 업데이트 |
| Timeout | 네트워크 지연 | 타임아웃 증가 |
| Empty Response (Gemini 2.5) | MAX_TOKENS 도달 | maxTokens를 8192 이상으로 증가 |
| Thinking Mode Issues | 토큰 소비 과다 | Gemini 2.5의 thinking 기능 고려한 토큰 설정 |
# 모든 테스트 npm test # 단위 테스트만 npm run test:unit # 통합 테스트만 npm run test:integration # E2E 테스트 npm run test:e2e
<type>(<scope>): <subject> <body> <footer>
feat(ai): Add OpenAI GPT-5 integration - Implemented OpenAI service provider - Added model selection in UI - Updated aiRouter to handle OpenAI models Refs: docs/ai-models/AI_MODEL_INTEGRATION_PLAN.md
Error: Failed to resolve import "@google/genai"
해결: 올바른 패키지명 사용 (
@google/generative-aiError: API key not found
해결:
.envVITE_Error: CORS policy blocked
해결:
즉시 실행 (Today - Phase 0):
feature/codexrk-integration단기 (Week 1 - Phase 1-2):
중기 (Week 2-3 - Phase 3):
장기 (Week 4 - Phase 4):
이 문서는 Artifex.AI Studio Pro의 핵심 개발 가이드입니다. 개발자는 프로젝트 시작 시 이 문서를 참조하여 전체 맥락을 파악해야 합니다. 최종 업데이트: 2025년 9월 27일 일요일