3D Studio은(는) 무엇을 하나요?
3D 웹 스킬 세트를 하나의 워크플로우로 실행합니다. 요청은 $ARGUMENTS에 있습니다. 에이전트가 해당 플레이스홀더를 채우지 않은 경우, 요청은 사용자가 이 스킬과 함께 작성한 내용입니다.
1. 스킬 선택
다음 각각은 별도의 스킬입니다. 에이전트가 스킬을 로드하는 방식(Claude Code의 Skill 도구, Codex 및 Antigravity에서 SKILL.md 읽기)으로 정확히 표시된 이름 아래 로드하세요. 그런 다음 해당 스킬의 지침이 이 워크플로우와 함께 적용됩니다. 섹션 4에는 폴더 위치가 나와 있습니다.
다음 세 가지는 항상 로드하세요: taste-skill (아트 디렉션, design-taste-frontend로 설치되어 있을 수 있음), apple-design (유동적인 물리적 모션, 재료 및 깊이), threejs-fundamentals (씬, 카메라, 렌더러, 루프).
요청에 필요할 때 행을 추가하세요:
| 요청 내용 | 로드할 항목 |
|---|---|
| 움직이는 모든 것 | animate, threejs-animation |
| 코드로 빌드된 도형, 인스턴싱, 다수의 객체 | threejs-geometry |
| 표면, 나무, 금속, 광택 | threejs-materials, threejs-textures |
| 조명, 그림자, 반사 | threejs-lighting |
| 클릭, 드래그, 궤도 이동, 부분 선택 | threejs-interaction |
| 사용자 정의 시각 효과 | threejs-shaders, threejs-postprocessing |
| 3D 모델 파일 로드 또는 압축 | threejs-loaders, threejs-asset-pipeline |
| Blender에서 모델링 또는 내보내기 | blender-mcp (먼저 Blender가 설치되어 있는지 확인) |
| React 프로젝트 | threejs-react-three-fiber, r3f-fundamentals |
| 느림, 끊김, 빈 캔버스, 메모리 문제 | threejs-performance, threejs-debug-profiler |
| 등각 투영 도형, 다이어그램 또는 작동 방식을 설명하는 설명자료, 또는 A4 포스터 | anatomy |
| 렌더링된 필름 또는 비디오 | Remotion, 섹션 3 참조 |
이러한 스킬은 합쳐서 수천 줄에 달하며, 모두 로드하면 빌드에 필요한 작업 메모리를 소모합니다. 이것이 테이블 형태가 기본값인 이유입니다.
--all사용 시, 요청과 관계없이 테이블의 모든 스킬을 로드합니다.--plan사용 시, 로드할 스킬과 그 이유를 나열하고, 더 이상 로드하지 않고 중지합니다.
로드 중인 스킬을 한 줄로 말하세요. 스킬이 로드되지 않으면 이름을 지정하고 중단하지 않고 나머지 작업을 계속 진행하세요.
이 워크플로우가 필요로 하는 시점에 각 스킬을 로드하세요. 스킬이 설정 단계로 시작하거나 작업을 중단시키는 인사를 요구하는 경우 해당 부분은 건너뛰세요.
2. 다음 순서로 작업하세요
- 아이디어 결정. 아트 디렉션을 위해
taste-skill을 따르세요: 브리핑을 읽고, 방향을 그리고, 카피를 작성하세요. 아이디어는 주제에서 나와야 합니다. - 로직을 3D 밖으로 유지하세요. 실제 규칙(산술, 시뮬레이션, 가격 책정)이 있는 모든 것은 Three.js 없이 일반 모듈에 넣고 테스트로 커버하여 렌더링 없이도 신뢰할 수 있도록 하세요.
- 3D를 상태의 함수로 빌드하세요. 지오메트리 코드는 포즈에서 부품을 배치하고 규칙에 대해 알지 못합니다. 모션은 진행률의 순수 함수여야 하므로, 역방향으로 실행되거나, 중간에 반전되거나, 축소된 모션을 위해 끝으로 점프할 수 있습니다.
- 요청 시 렌더링하세요. 무언가 움직였을 때만 그리고, 화면 밖에서는 전혀 그리지 않아서 유휴 페이지는 비용이 들지 않고 휴대폰이 시원하게 유지됩니다.
- 완전히 사용 가능하게 만드세요. 캔버스 옆에 실제 버튼, 키보드 사용, 축소된 모션, WebGL이 없을 때의 폴백, 그리고 휴대폰 너비에서 작동하는 레이아웃이 필요합니다.
3. Remotion
이 세트에는 Remotion 스킬이 포함되어 있지 않으므로, 프로젝트에서 직접 remotion 패키지를 사용하세요.
- 사이트에서 사용하는 동일한 씬 빌딩 코드를 가져와 렌더링하여, 필름과 사이트가 분리되지 않도록 하세요.
- 각 프레임은 프레임 번호의 순수 함수여야 합니다. 이전 프레임에 의존하는 타이머나 스프링을 사용하지 마세요.
remotion render <entry> <composition> <out.mp4> --gl=angle --codec=h264 --crf=24로 렌더링하세요.- 변경된 씬은 이미 렌더링된 필름을 변경하지 않습니다. 다시 렌더링하거나 사용자에게 만료되었음을 알리세요.
4. 완료했다고 판단하기 전에 확인하세요
검사는 두 스킬 내의 스크립트를 사용합니다. 각 스킬의 폴더를 찾으려면 프로젝트의 .claude/skills/ 및 .agents/skills/에서, 그다음 ~/.claude/skills/, ~/.agents/skills/ 및 ~/.gemini/config/skills/에서 해당 이름을 순서대로 찾으세요. 아래에서 <anatomy> 및 <taste>는 해당 폴더를 나타냅니다. <taste>는 taste-skill 또는 design-taste-frontend라는 이름입니다.
node <anatomy>/scripts/drive.mjs <url> --actions steps.json을 사용하여 실제 브라우저를 실제 클릭 및 드래그로 구동하세요. 두 스크립트 모두 Node 22 이상과 설치된 Chrome, Edge 또는 Chromium이 필요합니다.
- 정지 이미지와 흐름은 별도 실행입니다.
shot액션은 다음 캡처까지 애니메이션을 고정할 수 있습니다.--reduced를 사용하여 정지 이미지를 촬영하면 최종 상태로 점프하며, 애니메이션 흐름은 실행 중간에 스크린샷 없이eval검사로 테스트하세요. 프레임이 비어 있거나 오래된 경우, 버그로 처리하기 전에 다시 촬영하세요. - 실제 컨트롤을 테스트하세요. 상태를 직접 설정하는 것보다 실제 버튼을 클릭하는 것을 선호하고, 중간에 애니메이션을 반전 및 중단하는 것을 포함하세요.
- 디자인을 확인하세요.
node <taste>/scripts/inspect.mjs <url> --widths 1440,390을 실행한 다음 스크린샷을 직접 살펴보세요. 인스펙터를 통과하는 것은 최소 기준일 뿐이며, 최종 평가가 아닙니다. - 테스트를 실행하고 콘솔을 읽으세요. 그런 다음 개발 서버뿐만 아니라 프로덕션 빌드에서도 주요 흐름을 반복하세요.
검증된 것과 검증되지 않은 것(실제 기기, 소리, 최대 속도에서의 모션 등은 일반적으로 여기서 테스트하기 어렵습니다)을 명확히 보고하세요.
5. 새로운 것 설치하기
테이블의 스킬이 누락된 경우, 사용자는 npx github:mithulpranav24012008/3d-studio로 전체 세트를 설치할 수 있습니다. 작업에 필요한 다른 스킬이나 도구의 경우, 사용자에게 명령을 제공하고 직접 실행하도록 하여 보안 요약을 볼 수 있게 하세요. 확인을 건너뛰기 위해 -y를 사용하지 마세요.