diff --git a/STEP5-IDEAS.md b/STEP5-IDEAS.md new file mode 100644 index 0000000..70f1249 --- /dev/null +++ b/STEP5-IDEAS.md @@ -0,0 +1,958 @@ +# 단계 5: 에이전트/커맨드/스킬/훅 아이디어 상세 제안 + +> 이 문서는 Claude Code의 에이전트, 커맨드, 스킬, 훅을 설계하기 위한 아이디어를 상세히 정리한 것입니다. +> 단계 6에서 정확한 포맷으로 구현될 밑그림입니다. + +--- + +## 📊 전체 구조도 + +``` +사용자 + ↓ +커맨드 입력 + ├─ /step-X + ├─ /convert (병렬) + ├─ /validate + ├─ /deploy + └─ /report + ↓ +Orchestrator (조율) + ├─ 병렬/순차 작업 관리 + ├─ 체크포인트 저장 + └─ 오류 복구 + ↓ +4개 에이전트 (병렬 실행) + ├─ Agent-Research (DXF 분석) + ├─ Agent-Pipeline (3D 생성) + ├─ Agent-WebUI (웹앱) + └─ Agent-Deploy (배포) + ↓ +스킬 & 훅 (자동화) + ├─ /dxf-analyze + ├─ /3d-validate + ├─ /web-dev + └─ [자동 훅들] +``` + +--- + +## 🤖 에이전트 상세 정의 + +### 1️⃣ Agent-Research: DXF 도면 분석 & 설정 파일 생성 + +#### 기본 정보 +``` +이름: Research +설명: 2D DXF 도면을 분석하여 3D 변환을 위한 설정 파일 생성 +역할: 파이프라인의 시작 단계 +입력: DXF 파일 (RAG 폴더) +출력: src/drawings/gasiseol.mjs (설정 파일 + 조립 로직) +``` + +#### 주요 담당 작업 +``` +1️⃣ DXF 파일 기본 분석 + - 엔티티 타입별 개수 (LINE, CIRCLE, ARC, TEXT 등) + - 좌표 범위 (min/max X, Y, Z) + - 레이어 목록 및 구분 + - 도형 바운딩 박스 + +2️⃣ 기준점(Datum) 검출 + - 기준선 자동 감지 (도로 계획고, 토공 계획고 등) + - 텍스트 라벨과 선 대응 + - 기준점 좌표 확정 + - 다른 뷰와 교차검증 + +3️⃣ 뷰 분리 및 매핑 + - 제목 텍스트로 뷰 식별 (평면도, 단면도 등) + - 뷰별 기하 클러스터링 + - 뷰 bounding box 계산 + - 앵커(u0, v0, flip, swapUV) 결정 + +4️⃣ 프로파일 추출 + - 각 뷰의 폐곡선 목록 추출 + - 치수 텍스트와 기하 대응 + - 원/호 감지 및 처리 + - 자기교차 검출 & 경고 + +5️⃣ 설정 파일 생성 + - src/drawings/gasiseol.mjs 작성 + - 뷰별 설정 (kind, plane, anchors) + - 조립 로직 (assemble 함수) + - 재질 매핑 (레이어 → 재질) +``` + +#### 사용할 도구 & 기술 +``` +도구: + - Read: DXF 파일 읽기 + - Grep: 특정 패턴 검색 + - Bash: Node.js 스크립트 실행 + - Edit: 설정 파일 작성 + +기술: + - DXF 파싱 (기존 src/core/parse.mjs) + - 기하학 계산 (좌표 변환) + - 정규식 (텍스트 분석) + - 데이터 구조화 (JSON/JS 객체) +``` + +#### 성공 기준 +``` +✅ DXF 로드 성공 +✅ 기준점이 도면 치수 2개 이상과 일치 +✅ 뷰 폭·높이가 도면 표기와 ±2% 이내 +✅ 폐곡선 4개(평면), 8개(단면) 등 예상과 일치 +✅ 자기교차 없음 +✅ src/drawings/gasiseol.mjs 생성 완료 +``` + +#### 입출력 예시 +``` +입력: + RAG/가시설_평면.dxf + RAG/가시설_단면.dxf + RAG/가시설_상세1~4.dxf + +출력: + src/drawings/gasiseol.mjs + { + drawings: { + gasiseol: { + dwgPath: 'RAG/가시설_평면.dxf', + unitMm: 1000, // 1 DWG unit = 1000mm + titles: { + views: [ + { kind: 'plan', name: '평 면 도', title_h: 0.35 }, + { kind: 'cross', name: '단 면 A-A', title_h: 0.35 }, + ... + ] + }, + anchors: { + '평 면 도': { u0: 0, v0: 0, plane: 'XY' }, + '단 면 A-A': { u0: 0, v0: -5000, plane: 'XZ' }, + ... + }, + assemble: function(ir) { ... } // 부재 조립 로직 + } + } + } +``` + +--- + +### 2️⃣ Agent-Pipeline: 3D 생성 & 검증 + +#### 기본 정보 +``` +이름: Pipeline +설명: DXF 설정을 이용해 IR 생성, 3D 모델 생성, 검증 +역할: 핵심 변환 파이프라인 +의존: Agent-Research 완료 필수 +입력: src/drawings/gasiseol.mjs +출력: out/gasiseol.obj, out/gasiseol.ifc, volumes.json +``` + +#### 주요 담당 작업 +``` +1️⃣ IR (중간 표현) 생성 + - 폐곡선 → 프로파일 + - 프로파일 → 3D 부재 (extrude, loft 등) + - 부재 조합 (union, difference) + - 최종 형상 구성 + +2️⃣ 검증 (자동화) + - 폐곡선 폐쇄성 검사 + - 기하학 타당성 확인 + - 부피 계산 (IR 기준) + - 기준값과 비교 (±0.5%) + +3️⃣ 3D 모델 생성 + - EGModeler 명령 생성 + - Polyline, Extrude, Loft, Boolean 등 + - 모델 조립 및 순서 관리 + - 부피 측정 (실제 모델) + +4️⃣ 검증 완료 + - IR 부피 vs 실제 모델 부피 비교 + - 이상 감지 및 보고 + - 기준값 저장 (baselines/) + +5️⃣ 출력 생성 + - OBJ 파일 (웹 렌더링) + - IFC 파일 (BIM 표준) + - 검증 리포트 +``` + +#### 사용할 도구 & 기술 +``` +도구: + - Bash: Node.js 스크립트 실행 + - Read: 설정 파일 읽기 + - Write: 검증 리포트 작성 + +기술: + - src/build.mjs (IR 생성) + - src/run_egm.py (3D 생성) + - src/measure.mjs (부피 측정) + - 기준값 관리 (baselines/) +``` + +#### 성공 기준 +``` +✅ IR 생성 성공 +✅ 기하학 검증 통과 (폐곡선 닫힘) +✅ 부피 오차 < 0.5% (IR vs 실제) +✅ 3D 모델 생성 성공 +✅ OBJ, IFC 파일 생성 +✅ 검증 리포트 완성 +``` + +#### 입출력 예시 +``` +입력: + src/drawings/gasiseol.mjs + +중간 과정: + out/gasiseol.ir.json (IR 중간 표현) + +출력: + out/gasiseol.obj (3D 모델 - 웹용) + out/gasiseol.ifc (IFC - BIM용) + baselines/gasiseol.volumes.json + { + "irVolume": 245.823, // IR 기준 부피 + "realVolume": 245.756, // 모델러에서 측정한 부피 + "error": 0.027, // 오차 (%) + "status": "PASS", // 검증 결과 + "timestamp": "2026-10-16T14:30:00Z" + } +``` + +--- + +### 3️⃣ Agent-WebUI: 웹앱 & 3D 뷰어 + +#### 기본 정보 +``` +이름: WebUI +설명: React 웹앱 + Three.js 3D 뷰어 개발 +역할: 사용자 인터페이스 +병렬: Agent-Research와 동시 진행 가능 +입력: 3D 모델 (OBJ 파일), UI 요구사항 +출력: src/web/ (React 프로젝트) +``` + +#### 주요 담당 작업 +``` +1️⃣ 프로젝트 구조 생성 + - React + Vite + TypeScript 보일러플레이트 + - 폴더 구조 (components, pages, styles, utils) + - ESLint, Prettier 설정 + - 의존성 설치 + +2️⃣ UI 컴포넌트 개발 + - FileUpload: DXF 파일 선택 및 업로드 + - Viewer3D: Three.js 기반 3D 렌더링 + - PropertyPanel: 부재 정보 표시 + - Controls: 뷰 전환, 줌, 회전 조작 + - StatusBar: 변환 진행률 + +3️⃣ Three.js 통합 + - OBJ 로더 (models/gasiseol.obj) + - 카메라 설정 (자동 줌) + - 라이팅 (기본 조명) + - 그리드 & 축 표시 + - 마우스 조작 (OrbitControls) + +4️⃣ 상호작용 구현 + - 부재 선택 (클릭) → 정보 표시 + - 부재 하이라이트 (색상 변경) + - 레이어별 필터링 + - 단면 표시 (slicing) + - 측정 기능 (거리, 면적) + +5️⃣ 배포 최적화 + - 번들 최소화 (Tree shaking) + - 이미지 압축 + - 지연 로딩 (3D 모델) + - 성능 모니터링 +``` + +#### 사용할 도구 & 기술 +``` +도구: + - Edit: 코드 작성 + - Write: 설정 파일 생성 + - Bash: npm 명령 실행 + +기술: + - React 18+ + - Vite (번들러) + - Three.js + react-three-fiber + - TypeScript + - TailwindCSS (스타일) + - Zustand (상태 관리) +``` + +#### 성능 목표 +``` +✅ 초기 로딩: < 3초 +✅ 3D 렌더링: 60fps 유지 +✅ 번들 크기: < 500KB (압축) +✅ 모바일 지원: 반응형 + 터치 제스처 +``` + +#### 주요 페이지/컴포넌트 +``` +src/web/ +├── pages/ +│ ├── index.tsx 메인 페이지 (업로드 + 뷰어) +│ └── api/convert.ts 백엔드 API (DXF → 3D) +│ +├── components/ +│ ├── Viewer3D.tsx Three.js 뷰어 +│ ├── FileUpload.tsx 파일 업로드 +│ ├── PropertyPanel.tsx 부재 정보 +│ ├── Controls.tsx UI 컨트롤 +│ └── StatusBar.tsx 진행 상황 +│ +├── hooks/ +│ ├── useThreeJS.ts Three.js 초기화 +│ ├── useModel.ts 모델 로드/관리 +│ └── useSelection.ts 부재 선택 상태 +│ +└── styles/ + └── globals.css 전역 스타일 +``` + +--- + +### 4️⃣ Agent-Deploy: CI/CD & 배포 + +#### 기본 정보 +``` +이름: Deploy +설명: GitHub Actions CI/CD, Vercel 배포, 무료 도메인 설정 +역할: 자동화된 배포 파이프라인 +의존: Agent-WebUI, Agent-Pipeline 완료 후 +입력: 웹앱 소스 코드, git 푸시 +출력: 배포된 웹사이트 (URL 제공) +``` + +#### 주요 담당 작업 +``` +1️⃣ GitHub Actions 워크플로우 설정 + - 린트 & 포맷 체크 (ESLint, Prettier) + - 타입 체크 (TypeScript) + - 단위 테스트 실행 + - 빌드 테스트 + - 도면 검증 (node src/build.mjs --validate) + +2️⃣ Vercel 배포 설정 + - Vercel 프로젝트 생성 + - 환경 변수 설정 + - 빌드 커맨드 구성 (npm run build) + - 프리뷰 URL 자동 생성 + +3️⃣ 무료 도메인 설정 + - Freenom에서 도메인 등록 (.tk/.ml/.ga 등) + - DNS 레코드 구성 (CNAME → Vercel) + - SSL 인증서 (Vercel 자동) + +4️⃣ 모니터링 & 알림 + - 배포 성공/실패 알림 + - 성능 모니터링 (Core Web Vitals) + - 오류 로깅 (Sentry 선택사항) + +5️⃣ 배포 문서 작성 + - 배포 절차 가이드 + - 롤백 방법 + - 환경 변수 관리 +``` + +#### 사용할 도구 & 기술 +``` +도구: + - Write: 워크플로우 파일 작성 (.github/workflows/) + - Bash: CLI 커맨드 실행 + +기술: + - GitHub Actions (CI/CD) + - Vercel CLI + - npm 스크립트 + - 환경 변수 (.env) +``` + +#### 워크플로우 예시 +``` +.github/workflows/ci-cd.yml + +name: CI/CD + +on: + push: + branches: [ main, develop ] + pull_request: + branches: [ main ] + +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: '18' + + - name: Install dependencies + run: npm ci + + - name: Lint + run: npm run lint + + - name: Type check + run: npm run type-check + + - name: Test + run: npm run test + + - name: Build + run: npm run build + + - name: Validate DXF + run: node src/build.mjs gasiseol --validate + + deploy: + needs: test + runs-on: ubuntu-latest + if: github.ref == 'refs/heads/main' + + steps: + - uses: actions/checkout@v3 + - uses: vercel/action@master + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} +``` + +#### 배포 성공 기준 +``` +✅ 모든 테스트 통과 +✅ Vercel 배포 성공 +✅ 도메인 연결 확인 +✅ 웹사이트 접속 가능 +✅ 3D 모델 렌더링 확인 +``` + +--- + +## 🎯 커맨드 상세 정의 + +### 커맨드 1: /step-X (단계별 워크플로우) + +```yaml +이름: step +트리거: /step-1, /step-2, ..., /step-9 +설명: 현재 단계의 완전한 워크플로우 실행 + +작동 방식: + 1. PLAN.md에서 현재 단계 내용 읽기 + 2. 작업 리마인드 (이 단계에서 할 것) + 3. 에이전트 호출 + 4. 결과 검증 + 5. 다음 단계 예고 + +예시: + /step-4 + → PROGRESS.md 읽기 + → PLAN.md 단계 4 확인 + → Agent-Research + Agent-Pipeline 병렬 실행 + → 검증 실행 + → PROGRESS.md 업데이트 +``` + +### 커맨드 2: /convert (통합 변환) + +```yaml +이름: convert +트리거: /convert +설명: DXF → 3D 전체 파이프라인 (병렬 처리) + +작동 방식 (병렬): + Stage 1: Agent-Research (DXF 분석) + ├─ 도면 분석 + ├─ 기준점 검출 + └─ 설정 파일 생성 + + Stage 2: Agent-Pipeline (3D 생성) + ├─ IR 생성 + ├─ 3D 모델 생성 + └─ 검증 + + Stage 3: Agent-WebUI (웹앱 준비) + ├─ 모델 로드 + ├─ 3D 뷰어 업데이트 + └─ 배포 준비 + + Stage 4: 병합 (모든 완료 대기) + ├─ 최종 검증 + └─ 결과 리포트 + +예시: + /convert 가시설 + + 실행: + [Stage 1] Research... (진행 중) + [Stage 2] Pipeline... (대기 중) + [Stage 3] WebUI... (병렬) + + 완료: + ✅ 설정 파일: src/drawings/gasiseol.mjs + ✅ 3D 모델: out/gasiseol.obj + ✅ 검증 리포트: baselines/gasiseol.volumes.json + ✅ 웹앱 업데이트 완료 +``` + +### 커맨드 3: /validate (검증) + +```yaml +이름: validate +트리거: /validate [<도면명>] +설명: 도면 & 3D 모델 자동 검증 + +검증 항목: + Level 1: 기본 파싱 + ✓ DXF 로드 성공 + ✓ 엔티티 수 > 0 + ✓ 기준점 감지 + + Level 2: 기하학 + ✓ 뷰 폭/높이 ±2% 이내 + ✓ 폐곡선 수 일치 + ✓ 자기교차 없음 + + Level 3: 3D + ✓ 부피 오차 < 0.5% + ✓ manifold 체크 + ✓ 면 무결성 + + Level 4: 시각화 + ✓ 웹 렌더링 성공 + ✓ 부재 정보 표시 + ✓ 조작 가능 + +출력: + ✅ 검증 통과 (모든 항목 초록색) + ⚠️ 경고 (일부 항목 노랑색) + ❌ 검증 실패 (빨간색 표시) +``` + +### 커맨드 4: /deploy (배포) + +```yaml +이름: deploy +트리거: /deploy [--dry-run] +설명: 웹앱을 Vercel에 배포 + +작동: + 1. 모든 테스트 실행 (/validate) + 2. 빌드 생성 (npm run build) + 3. Vercel에 배포 (vercel deploy) + 4. 도메인 연결 확인 + 5. 최종 URL 제공 + +옵션: + --dry-run: 실제 배포 없이 확인만 + --preview: 프리뷰 URL 생성 (CI/CD) + --prod: 프로덕션 배포 + +출력: + 🌐 배포 완료! + URL: https://dxf-to-3d.tk + Preview: https://dxf-to-3d-preview-12345.vercel.app +``` + +### 커맨드 5: /report (리포트) + +```yaml +이름: report +트리거: /report [--format=md|html|json] +설명: 진행 상황 & 검증 결과 리포트 + +포함 내용: + ✅ 완료된 단계 + 🔄 진행 중인 단계 + ⏳ 예정 단계 + + 도면 검증 현황 + 3D 모델 부피 + 배포 상태 + 성능 지표 + + 다음 단계 로드맵 + +형식: + --format=md: Markdown (기본) + --format=html: HTML 리포트 + --format=json: JSON 데이터 +``` + +--- + +## 🎨 스킬 상세 정의 + +### 스킬 1: /dxf-analyze + +```yaml +이름: dxf-analyze +트리거: /dxf-analyze +설명: DXF 파일 상세 분석 + +기능: + 1. 기본 정보 + - 파일 크기 + - 엔티티 총 개수 + - DWG 버전 + + 2. 좌표 분석 + - 범위 (min/max X, Y, Z) + - 중심점 + - 스케일 + + 3. 도형 분석 + - LINE: 개수, 길이 통계 + - CIRCLE: 개수, 반지름 통계 + - ARC: 개수 + - POLYLINE: 개수, 닫힘 여부 + + 4. 레이어 분석 + - 레이어 목록 + - 레이어별 도형 수 + - 색상 분포 + + 5. 텍스트 분석 + - 텍스트 총 개수 + - 높이별 분포 + - 주요 텍스트 추출 + +출력 형식: + ``` + DXF 분석: 가시설_평면.dxf + ═══════════════════ + + 📊 기본 정보 + - 파일 크기: 575 KB + - 엔티티 수: 2,145개 + - DWG 버전: DWG 2018 + + 📍 좌표 범위 + - X: 0 ~ 50,000 mm + - Y: -10,000 ~ 40,000 mm + - Z: -5,000 ~ 0 mm + + 🔷 도형 분포 + - LINE: 1,234개 (평균 길이 1,500mm) + - CIRCLE: 45개 (반지름 100~500mm) + - POLYLINE: 89개 (폐쇄: 78개) + + 📝 레이어 (상위 5개) + 1. 000-구조물실선: 456개 + 2. -전력구: 345개 + 3. 1-보조선: 234개 + 4. 치수: 178개 + 5. 텍스트: 156개 + ``` +``` + +### 스킬 2: /3d-validate + +```yaml +이름: 3d-validate +트리거: /3d-validate +설명: 3D 모델 상세 검증 + +기능: + 1. 기하학 검증 + - 폐면 여부 (manifold) + - 면 법선 방향 (일관성) + - 중복 면 검사 + - 자기 교차 검사 + + 2. 부피 검증 + - 계산된 부피 + - 기준값과 비교 + - 오차율 (%) + - 부위별 부피 + + 3. 정점 분석 + - 총 정점 수 + - 총 면 수 + - 경계 정보 (면 수) + - 복잡도 평가 + + 4. 성능 분석 + - 렌더링 시간 (추정) + - 메모리 사용량 (추정) + - 최적화 제안 + +출력 형식: + ``` + 3D 모델 검증: gasiseol.obj + ═══════════════════════════ + + ✅ 기하학 + - Manifold: YES + - 법선 일관성: 98.5% + - 자기교차: 없음 + + ✅ 부피 + - 계산: 245.823 m³ + - 기준값: 245.756 m³ + - 오차: -0.027% ✓ (< 0.5%) + + 📊 복잡도 + - 정점: 15,234개 + - 면: 28,567개 + - 경계 면: 0개 + + ⚡ 성능 (추정) + - 렌더링 시간: ~45ms (60fps 유지) + - 메모리: ~180MB (최악의 경우) + - 최적화: "잘 최적화됨" + ``` +``` + +### 스킬 3: /web-dev + +```yaml +이름: web-dev +트리거: /web-dev [--port=3000] +설명: 웹앱 개발 서버 실행 + +기능: + 1. 로컬 개발 서버 시작 + - Vite 핫 모듈 교체 + - 실시간 수정 반영 + - 브라우저 자동 새로고침 + + 2. 개발 도구 제공 + - React DevTools + - 네트워크 탭 + - 콘솔 로그 + + 3. 모델 로드 + - 로컬 3D 모델 (out/) + - API 엔드포인트 (로컬) + + 4. 성능 모니터링 + - 번들 크기 + - 로드 시간 + - 프레임 레이트 + +명령: + /web-dev 기본 포트 3000 + /web-dev --port=8080 사용자 포트 + /web-dev --build 빌드만 (배포용) + /web-dev --analyze 번들 분석 + +출력: + ``` + 🚀 웹앱 개발 서버 시작 + ════════════════════ + + Local: http://localhost:3000 + + 📦 번들 정보 + - 크기: 245 KB (압축: 78 KB) + - 파일: 12개 + - 최적화: 우수 + + 🔄 감시 중: src/**/* + + 💡 팁: + /web-dev --analyze 번들 시각화 + Ctrl+C 중지 + ``` +``` + +--- + +## 🔧 훅 자동화 규칙 + +### 훅 1: Git 커밋 후 자동 검증 + +```yaml +이름: post-commit-validate +트리거: git commit (모든 커밋) +설명: 도면 파일이 변경되면 자동 검증 + +규칙: + 1. 커밋된 파일 확인 + 2. DXF 또는 설정 파일 변경 감지 + 3. 자동 검증 실행 (/validate) + 4. 문제 발생 시: + - 경고 메시지 출력 + - PROGRESS.md에 자동 기록 + - 필요시 커밋 취소 제안 + +설정 (settings.json): + { + "hooks": { + "post-commit": { + "run": "node src/measure.mjs --validate", + "alert": "always", + "on_error": "warn" + } + } + } +``` + +### 훅 2: PROGRESS.md 수정 후 상태 반영 + +```yaml +이름: progress-update +트리거: PROGRESS.md 수정 +설명: 진행 상황 변경을 시스템에 반영 + +규칙: + 1. PROGRESS.md 변경 감지 + 2. 다음 세션 에이전트에 알림 + 3. 체크포인트 생성 + 4. 깃 태그 자동 생성 + +설정: + { + "hooks": { + "watch:PROGRESS.md": { + "run": "git tag -a v$(grep 'Current:' PROGRESS.md) -m 'Progress update'", + "auto_commit": false + } + } + } +``` + +### 훅 3: 배포 전 최종 확인 + +```yaml +이름: pre-deploy-check +트리거: git push --tags (배포 전 신호) +설명: 배포 전 모든 검증 실행 + +검사 항목: + 1. ESLint 통과 + 2. TypeScript 타입 체크 통과 + 3. 모든 테스트 통과 + 4. DXF 검증 통과 + 5. 3D 모델 검증 통과 + 6. 번들 크기 < 500KB + +실패 시: + - 배포 중단 + - 에러 메시지 상세 출력 + - 수정 가이드 제시 + +설정: + { + "hooks": { + "pre-deploy": { + "scripts": [ + "npm run lint", + "npm run type-check", + "npm run test", + "node src/build.mjs --validate" + ], + "on_error": "abort" + } + } + } +``` + +### 훅 4: 이상 감지 시 자동 알림 + +```yaml +이름: anomaly-alert +트리거: 지속적 모니터링 +설명: 부피 오차, 렌더링 오류 등 감지 시 알림 + +감지 항목: + 1. 부피 오차 > 1% + 2. 새로운 자기교차 링 발견 + 3. 폐곡선 개수 변경 + 4. 웹 렌더링 오류 + 5. 배포 실패 + +알림: + - 콘솔 경고 (빨강/주황) + - PROGRESS.md 자동 기록 + - 선택사항: 이메일/Slack 알림 + +설정: + { + "hooks": { + "monitor": { + "interval": "after:every:commit", + "checks": [ + "volume_error < 0.5%", + "self_intersections == 0", + "web_render_success == true" + ], + "alert": "console+log" + } + } + } +``` + +--- + +## 📋 구현 체크리스트 + +### 아이디어 검증 +- [ ] 4개 에이전트 설명 검토 ✅ +- [ ] 4개 커맨드 스펙 검토 ✅ +- [ ] 3개 스킬 기능 검토 ✅ +- [ ] 4개 훅 자동화 검토 ✅ + +### 다음 단계 (단계 6) +- [ ] Claude Code 공식 포맷 학습 +- [ ] .claude/ 폴더 구조 생성 +- [ ] agents/*.md 파일 작성 (4개) +- [ ] commands/*.yaml 파일 작성 (4개) +- [ ] skills/*.yaml 파일 작성 (3개) +- [ ] settings.json 훅 설정 +- [ ] 모든 파일 테스트 + +--- + +## 질문 및 검토 포인트 + +1. **4개 에이전트가 적절한가?** + - 병렬 처리 가능 여부 + - 의존성 명확성 + - 역할 중복 여부 + +2. **커맨드 구조가 직관적인가?** + - /step-X vs /convert + - 병렬 처리 신호 명확성 + - 오류 처리 방식 + +3. **스킬의 자동화 수준이 적절한가?** + - 사용자 개입 필요 여부 + - 결과물 형식 + - 재활용성 + +4. **훅이 과하지 않은가?** + - 자동화 vs 통제의 균형 + - 거짓 양성(오경고) 위험 + - 사용자 불편 정도 + +--- + +## 변경 이력 + +| 버전 | 날짜 | 내용 | +|------|------|------| +| 1.0 | 2026-10-16 | 초안 작성 (단계 5) | +