원본에서 달라진 점
원본은 기본 설정 그대로 쓰면 장면을 작성자 서버(kubai.design)에서 불러옵니다. 그래서 내 사이트에 넣기만 해도 방문자의 가, 경우에 따라 보고 있던 페이지 주소까지 작성자 서버로 전달됩니다. 설정 패널은 에서, 데모 폰트는 Google Fonts에서 받아 옵니다.
- 장면을 작성자 서버(kubai.design) 대신, 설치한 사이트 안에서 불러옵니다
- 설정 패널(Tweakpane)을 jsDelivr에서 받지 않고 저장소에 함께 넣었습니다
- 데모 폰트를 Google Fonts에서 받지 않고 저장소에 함께 넣었습니다
- Embed 버튼이 주는 코드도 지금 보고 있는 사이트 주소를 가리킵니다
추천하는 이유
맥북 프로 XDR 배경화면 같은 빛의 실을 셰이더로 실시간 그립니다. 스크립트 한 줄로 어느 사이트에나 넣을 수 있어 랜딩 페이지 첫 화면 배경으로 좋습니다. A부터 Z까지 실로 짠 글자, 3D 장면 다섯 개, 팔레트 아홉 개가 들어 있어 쓸 데가 많습니다.
AI 에이전트로 설치하기
준비물
- 배경을 넣을 내 웹사이트 프로젝트
- Claude Code나 Cursor 같은
약 10분
- 아래 프롬프트를 에 붙여 넣기 ( 파일을 내 사이트 에 복사해 줍니다)
- <script type="module" src="/pro-threads/embed.js"> 한 줄이 들어갔는지 확인
- <pro-threads scene="ring"> 태그가 섹션 배경에 깔렸는지 확인
Claude Code나 Cursor 같은 코딩 에이전트에 붙여 넣으세요. ChatGPT 채팅창에서는 명령이 실행되지 않습니다.
내 웹사이트 첫 화면 배경에 PRO Threads 장면을 넣어 줘. - github.com/Nam128/pro-threads 저장소를 받아서, README의 Self-hosting 안내대로 실행 파일을 내 사이트 정적 파일 폴더의 pro-threads/ 에 복사해 줘. - 첫 화면 섹션에 <script type="module" src="/pro-threads/embed.js"></script> 와 <pro-threads scene="ring"></pro-threads> 를 넣고, 섹션을 꽉 채우는 배경으로 깔아 줘. 글자가 잘 읽히게 어두운 그라데이션도 덮어 줘. - 끝나면 브라우저 개발자 도구 Network 탭에서 다른 도메인으로 나가는 요청이 없는지 확인해 줘. 시작하기 전에 이미 설치된 것과 포트 충돌을 확인해 줘. 명령을 실행하기 전마다 무엇을 하는지 한 줄로 설명하고, 삭제·덮어쓰기·외부 공개가 필요한 작업은 실행 전에 꼭 물어봐 줘.
