3D 웹사이트 팩토리

3D 웹사이트 팩토리은(는) 무엇을 하나요?

S는 이 파일이 있는 폴더입니다. 필수 사항: Chrome, Python 3, Node 22+. 영상 제작을 위해서는 ffmpeg도 필요합니다.

파이프라인

           ┌──> 조각가 (3D 객체) ──┐
정찰병 ─────┤                            ├──> 건축가 (통합) ──> 비평가 ──┐
(계획)     └──> 애니메이터 (모션) ──────┘        ^                         │
   ^ 사용자가 계획 승인                      └──── 수정, 최대 3회 ┘

역할	설명	결과물
정찰병	roles/scout.md	계획: 사실, 골드 스탠다드 참고 사이트의 디자인 시스템, 화면, 3D 객체 목록
조각가	roles/sculptor.md	각 3D 객체별 three.js 모듈 1개 (또는 Spline 씬)
애니메이터	roles/animator.md	설명 루프, 스크롤 연출, 등장 효과
건축가	roles/builder.md	웹사이트, 모든 요소 통합, 사용자 상호작용 연결
비평가	roles/critic.md	10가지 고정 질문에 대한 합격/불합격, 수정 사항 포함

역할들은 작업 공간의 파일을 통해서만 소통합니다. 계획은 _work/<slug>/에, 코드는 sites/<slug>/에 저장됩니다. 따라서 각 역할을 개별적으로 다시 수행할 수 있습니다 ("3D를 더 반짝이게"는 조각가 작업이며, 이후 건축가와 비평가만 다시 실행).

역할 실행. 사용 중인 도구가 서브 에이전트를 시작할 수 있다면 (Claude Code, Codex, Cursor 등), 역할당 하나씩 다음 프롬프트로 시작하고, 조각가와 애니메이터는 동시에 실행하세요:

당신은 3D 웹사이트 팩토리의 <역할>입니다. <S>/roles/<role>.md와 <S>/references/taste.md를 읽고, 작업 공간 <절대 경로>에서 사이트 <slug>에 대한 역할을 수행하세요. 스킬 폴더는 <S>입니다. 작성한 내용과 수행하지 못한 사항을 보고하세요.

서브 에이전트를 시작할 수 없다면, 각 브리핑을 시작 직전에 읽으면서 순서대로 직접 역할을 수행하세요. 어느 쪽이든 당신은 지휘자입니다: 사용자와 대화하고, 각 핸드오프가 제대로 이루어졌는지 확인하며, 게이트에서 멈춥니다.

사용자가 결정하는 게이트: 정찰병의 인터뷰와 그 요약(참고 사이트, 디자인 방향, 히어로 콘셉트, 화면, 비용을 포함한 객체)은 유료 작업 전에, 그리고 최종 결과물에서 사용자에게 확인을 받습니다. 그 외 모든 작업은 묻지 않고 진행됩니다.

진행 상황. 빌드는 한 시간 정도 걸릴 수 있습니다. 각 역할을 시작하기 전에 사용자에게 한 줄로 무엇을 하는지 알리고 ("조각가: 점토 로고 제작 중, 무료"), 완료 후에는 무엇을 만들었는지 알려주세요.

작업

사용자 요청	작업
"설정", 첫 사용, 또는 작업 공간이 없음	A. 설정
"이걸로 만들어 줘", "X 사이트를 만들어 줘"	B. 빌드
"내 웹사이트를 3D로 만들어 줘", "이 사이트에 3D를 추가해 줘"	C. 기존 사이트 업그레이드
"로봇이 커서를 따라다니게 해 줘", "3D를 바꿔 줘", 빌드된 사이트 변경	D. 변경
"영상을 추가해 줘", "비디오 추가"	E. 영상 (references/film.md)

A. 설정

sh "$S/scripts/init.sh"        # ./website-factory 폴더 생성, 기존 파일 덮어쓰지 않음

사용자에게 평이한 말로 알려주세요: 단어는 content/에, 로고는 assets/logo/에 (SVG가 가장 좋으며, 3D로 만들 수 있습니다), 이미지는 assets/images/에, 3D 모델은 assets/models/에, 마음에 드는 사이트는 assets/style/에 넣으라고 합니다. 그런 다음 "이걸로 웹사이트를 만들어 줘"라고 말하세요. 콘텐츠가 있거나 사용자가 데모를 요청하기 전까지는 빌드하지 마세요.

B. 빌드

content/의 각 파일당 하나의 사이트를 만듭니다 (_로 시작하는 이름과 sites/에 이미 폴더가 있는 파일은 재빌드 요청이 없으면 건너<0xEB><0x9B><0x84>). slug = 파일 이름을 케밥-케이스로 변환한 값입니다. 전체 파이프라인을 실행합니다. 마지막에 sites/<slug>/REPORT.md를 작성하고 사용자에게 다음을 알려주세요: 각 3D 객체와 모션의 설명, 사용자가 열어둔 선택지 중에서 내린 결정, 복사본 변경 사항 (copy.md), 사용된 크레딧, 비평가의 평가, 아직 열려 있는 사항, 미리보기 방법: python3 -m http.server 8080 --directory sites/<slug>. 그런 다음 게시 제안 (게시 섹션 참조).

C. 기존 사이트 업그레이드

사용자의 기존 웹사이트 폴더 안에서 실행합니다. 사이트는 그대로 유지됩니다: 동일한 디자인, 동일한 문구.

1. 정찰병이 코드를 스캔하고 계획을 작성합니다. 제안: 어떤 객체가 어디에 배치될지, 무엇이 움직일지, 어떤 파일이 변경될지. 승인을 기다리세요.
2. Git 저장소라면 브랜치를 만듭니다. 가능한 한 적은 파일만 변경합니다. 스타일 변경, 문구 변경, 순서 변경 또는 종속성 업그레이드는 하지 않습니다.
3. 조각가와 애니메이터가 자신의 파트를 만듭니다. 건축가는 사이트의 기본 방식으로 추가합니다:
   • 일반 HTML: roles/builder.md에 따라.
   • React, Next, Vue, Svelte, Astro: 마운트 후 박스를 렌더링하고 객체 모듈을 임포트하는 클라이언트 전용 컴포넌트를 만듭니다. stage.js와 모듈은 프레임워크가 사용하는 정적 또는 소스 폴더에 넣습니다. 프로젝트가 이미 three.js나 react-three-fiber를 사용한다면, import map 대신 그것을 사용합니다.
   • WordPress: 차일드 테마 또는 커스텀 HTML 블록. 절대 부모 테마나 라이브 사이트를 수정하지 마세요.
4. 게이트: 사이트 자체의 빌드와 테스트가 여전히 통과해야 합니다. 개발 서버를 실행 중인 상태에서, 변경 전에 node "$S/scripts/probe.mjs" <url> _work/before를, 변경 후에 _work/after를 실행합니다 (_work/는 git에 포함시키지 마세요). 비평가가 비교합니다. check.py는 작업 B 페이지에만 사용됩니다.
5. 차이점(diff)과 미리보기 방법을 보여줍니다. 사용자가 요청하지 않으면 푸시하거나 배포하지 마세요 (게시 섹션 참조).

D. 변경

변경 사항을 소유한 역할을 찾아 해당 역할의 부분만 다시 실행한 후, 건축가의 게이트와 비평가를 실행합니다.

Spline 씬

Spline 씬은 여러 3D 소스 중 하나입니다 (roles/sculptor.md 참조).

• 커뮤니티 씬 (무료, 계정 불필요): sh "$S/scripts/browser.sh" embed <커뮤니티-URL>을 실행하면 임베드 가능한 URL이 출력됩니다. Spline의 전체 편집기를 로드하며, 첫 방문 시 약 15초와 어두운 화면이 나타납니다. 데모에는 적합합니다. 실제 사이트에서는 사용자가 무료 Spline 계정에서 열고, 리믹스한 후, 내보내기 > 공개 URL을 통해 my.spline.design/... 링크를 얻으면 1-2초 내에 로드됩니다.
• 페이지에서: <div class="f-3d" data-spline="URL" data-title="설명" style="height:100vh"></div>. factory.js가 지연 로드하고, 페이드인하며, 뷰어의 버튼을 숨기기 위해 크기를 키웁니다.
• 씬의 라이선스가 요구하는 경우에만 푸터에 씬 작성자를 표시합니다.
• 페이지는 커서가 위에 있어도 계속 스크롤되어야 합니다 (probe.mjs가 테스트합니다). 그렇지 않으면 data-shield를 추가하세요.
• Spline 커넥터 (claude mcp add --transport http spline https://mcp.spline.design/mcp)로 새 씬을 만들 수 있습니다. 일일 호출 제한이 있으므로 사용자가 요청할 때만 사용하고, 사용한 호출 수를 알려주세요.

에셋과 비용

3D, 이미지 및 영상의 출처, 사용할 제공자 (Higgsfield 커넥터 또는 CLI, 기타 연결된 생성기, 또는 무료 수동 경로), 유료 생성 규칙: references/assets.md 참조.

게시

사용자가 요청할 때만 수행합니다. 연결된 것을 사용하세요: 호스팅 커넥터 (Hostinger, Netlify, Vercel 등은 배포 도구를 제공), GitHub Pages용 GitHub CLI, 또는 사용자에게 업로드할 폴더를 알려줍니다. 첫 배포 전에 대상 (도메인 또는 저장소)을 확인하세요. 이후에는 요청 시에만 변경 사항을 재배포합니다.

항상 유지되는 규칙

• 비용. 코드로 만든 3D, Spline 커뮤니티 씬, 모션은 무료입니다. 유료 항목 (AI 이미지, 비디오 또는 3D, Spline 요금제)은 이 대화에서 인용된 비용에 대한 사용자의 동의가 매번 필요합니다. 먼저 한 화면을 시범 운영하세요.
• 진실. 사용자의 사실만 사용합니다. 숫자, 가격, 고객, 인용문, 수상 내역 또는 로고를 절대 지어내지 마세요.
• 취향. references/taste.md의 '슬롭' 목록에 있는 것은 사용하지 마세요.
• 접근성. 모션 감소 설정에는 완성된 정적 페이지를 제공합니다. 이미지에는 대체 텍스트를 추가합니다. 텍스트는 가독성 있는 대비를 유지합니다.
• 타인의 작업. 참고 사이트의 단어, 이미지 또는 코드를 절대 복사하지 마세요. 에셋의 라이선스가 요구하는 저작자 표시는 유지하고, 다른 저작자 표시는 추가하지 마세요.
• 정리. 시작한 모든 서버와 브라우저를 중지하세요.