대부분의 3D 웹사이트 프롬프트 라이브러리는 프롬프트 텍스트 자체에 대해 요금을 부과하거나 데모 비디오만 보여주고 정작 문구는 공개하지 않습니다. 여기 완전한 프롬프트 6개가 있습니다: 그대로 Claude에 붙여 넣거나, 한 줄만 수정해 Lovable, Bolt, Cursor에 적용하세요. 6개 모두 실제 모델을 거쳤고, 그중 5개는 작동하는 Three.js 페이지로 돌아왔으며, 아래의 모든 스크린샷은 목업이 아니라 그런 렌더링 중 하나입니다.
지금 바로 복사할 수 있는 3D 웹사이트 프롬프트 6가지
각 프롬프트는 CDN에서 로드된 Three.js를 사용하는 단일 파일 HTML 페이지를 요청합니다. 이 제약은 중요합니다. 단일 파일은 어떤 브라우저에서도 로컬로 열 수 있고, 개발자에게 전달하거나 사용자 정의 코드 블록에 붙여넣기 쉽습니다. 또한 모델이 프로젝트 전반에 걸쳐 import를 흩뿌리지 않고 씬을 자체 포함형으로 유지하도록 강제합니다.
1. 입자 은하 히어로
Three.js( CDN에서 로드 )를 사용해 대화형 3D 파티클 은하 히어로 섹션이 있는 단일 파일 HTML 페이지를 만드세요. 요구사항: 약 50,000개의 파티클이 나선형 은하를 이루며 천천히 회전할 것; 파티클 색상은 중심부의 따뜻한 앰버에서 바깥 가장자리의 바이올렛으로 변할 것; 방문자가 드래그하여 회전하고 확대/축소할 수 있도록 OrbitControls를 추가할 것; "Build Beyond Flat"이라고 적힌 중앙 정렬 히어로 헤드라인과 짧은 서브라인, CTA 버튼을 오버레이할 것; 은하가 텍스트 뒤에서 계속 드래그 가능하도록 오버레이 컨테이너에는 pointer-events: none을, CTA 버튼에는 pointer-events: auto를 설정할 것; 어두운 배경 #0a0616; window resize를 처리할 것. 완전한 HTML 파일 전체를 단일 코드 ब्ल록으로 ONLY 출력할 것.
27초와 3,692개의 출력 토큰으로 생성되었습니다. 은하는 회전하고, 드래그하여 궤도 이동이 작동하며, 버튼은 오버레이를 통해서도 계속 클릭할 수 있습니다. 한 가지 실제 결함은 서브라인이 밝은 은하 중심부에 놓여 읽기 어렵다는 점입니다. 해결 방법은 아래 테스트 노트에 있습니다.
2. 스크롤 기반 제품 쇼케이스
CDN에서 로드된 Three.js를 사용하여 스크롤 구동형 3D 제품 쇼케이스를 만드는 단일 파일 HTML 페이지를 생성하세요. 요구사항: 고정된 전체 화면 캔버스 중앙에 떠 있는 크롬 토러스-매듭; 페이지에는 4개의 전체 화면 스크롤 섹션이 있으며, 사용자가 스크롤할 때 카메라가 물체 주위를 360도 완전히 회전하고 물체의 재질 색상은 섹션마다 부드럽게 전환됩니다(실버, 딥 블루, 에메랄드, 구리); 각 섹션은 캔버스 위 왼쪽에 고정된 헤드라인과 한 줄짜리 문구를 표시해야 합니다; 움직임이 감쇠된 것처럼 느껴지도록 스크롤에 부드러운 보간(lerp); 두 개의 컬러 스포트라이트와 부드러운 바닥 그림자가 있는 어두운 스튜디오 느낌; 크기 변경을 처리하세요. 단일 코드 블록 안에 완전한 HTML 파일만 출력하세요.
이것은 다섯 개의 작업 생성물 중 가장 무거운 것(63초, 7,023 output tokens)이자 가장 인상적인 결과였습니다. 스크롤링이 카메라를 객체 주위로 이동시키고, 재질이 요청한 대로 섹션별로 정확히 다시 색칠됩니다:
감쇠된 lerp 보간도 제대로 반영되었으며, 움직임은 스크롤을 강제로 가로채는 슬라이드쇼가 아니라 에이전시 사이트 특유의 무겁고 고급스러운 느낌을 준다.
3. GLSL 유체 그라디언트 배경
CDN에서 로드한 Three.js와 사용자 정의 GLSL fragment shader를 사용하여 전체 화면 애니메이션 WebGL 유체
그라디언트 배경이 있는 단일 파일 HTML 페이지를 만드세요. 요구사항: 시간 uniform과 fragment shader의
simplex 스타일 노이즈에 의해 구동되는, 짙은 파란색,
보라색, 코랄이 블렌딩되는 느리게 움직이는 유기적 블롭; shader에 미묘한 필름 그레인 추가; 중앙에 배치된
glass card(backdrop blur) 오버레이, 흰색 헤드라인 "Ship Immersive Sites", 하나의
서브라인, 그리고 두 개의 버튼; 애니메이션은 노트북에서 부드럽게 유지되어야 함(single
quad, no postprocessing passes); resize 처리. 완전한
HTML 파일만 단일 코드 블록으로 출력하세요.
31초, 3,830 토큰, 첫 시도 통과. "single quad, no postprocessing passes"라는 문구는 성능 가드레일입니다. 이 문구가 없으면 모델은 대개 EffectComposer와 bloom 패스를 사용하려 들며, 이는 통합 GPU에서 프레임 속도를 크게 떨어뜨립니다.
4. 3D 포트폴리오 플라이스루(반격해온 그 녀석)
단일 파일 HTML 페이지를 만드세요: CDN의 Three.js를 사용하는 3D 포트폴리오.
6개의 떠 있는 프로젝트 카드(둥근 모서리의 평면, 플레이스홀더 그라디언트 텍스처 및 카드 텍스처에 렌더링된 프로젝트 제목 포함)를 3D 공간에서 완만한 곡선을 따라 배치합니다. 사용자가 스크롤하면 카메라는 곡선을 따라 앞으로 이동하며 각 카드를 한 번에 하나씩 포커스에 넣습니다. 카메라는 항상 포커스된 카드를 충분한 여백과 함께 화면 안에 완전히 유지해야 하며, 절대로 카드를 통과해서는 안 됩니다. 포커스된 카드는 약간 확대됩니다. 이웃한 카드들은 깊이를 위해 부분적으로 보이도록 유지합니다. 미묘한 안개, 어두운 배경, 감쇠된 스크롤 보간을 추가하세요. 포커스된 카드를 클릭하면 링크가 열립니다. 리사이즈를 처리하세요. 코드는 간결하게 유지하세요: 하나의 카드 생성 함수를 재사용하고, 주석은 넣지 마세요.
출력은 단일 코드 블록 안에 완전한 HTML 파일만 포함해야 합니다.
이건 세 번의 실행이 걸렸는데도 아직 출시할 수 없고, 위 스크린샷은 우리가 그럼에도 이를 공개하는 이유를 보여줍니다: 카드 자체는 렌더링되지만 카메라가 그 뒤에 위치해서 제목이 거꾸로 읽힙니다. 첫 번째 실행은 파일 중간에서 16,000 토큰 출력 한도를 초과했습니다. 두 번째 실행은("코드를 간결하게 유지"라는 문구와 함께, 그래서 그 문구가 프롬프트에 들어간 것입니다) 카드를 렌더링했지만 카메라를 그대로 그 안을 통과시켰습니다. 세 번째 실행은 클리핑 문제를 고쳤지만 카메라의 스크롤 연동을 잃었습니다. 카메라 경로 연출과 카드별 텍스처는 위의 장면들보다 모델에게 진짜로 더 어렵습니다. 디버깅 세션을 위한 예산을 잡거나, 호버 상태가 있는 정적인 곡선 그리드로 단순화하세요.
5. 대화형 제품 뷰어
CDN의 Three.js를 사용한 대화형 3D 제품 뷰어가 포함된 단일 파일 HTML 페이지를 만드세요. 받침대 위에 와이어프레임이 없는 스타일화된 기하학적 제품 대체물(모서리가 둥근 큐브 또는 캡슐)을 중앙에 배치하세요. 오른쪽 패널에는 3개의 색상 스와치와 메탈/매트 토글을 두어 재질이 실시간으로 업데이트되게 하세요. OrbitControls는 수평 회전으로만 제한하세요. 부드러운 3점 스튜디오 조명과 접촉 그림자를 적용하세요. 캔버스 위에 평범한 HTML/CSS 오버레이로 패널을 유지하세요. 크기 조정을 처리하세요. 단일 코드 블록 안에 완전한 HTML 파일만 출력하세요.
첫 시도 통과, 66초, 7,719 토큰. 스와치와 금속/무광 토글이 재질을 실시간으로 업데이트하며, 모델은 프롬프트에 없던 배려도 추가했습니다: 제품이 프레임 안에 유지되도록 회전이 수평 축으로 고정되어 있다는 각주입니다.
6. 원페이지 3D 비즈니스 사이트
CDN에서 Three.js를 사용하는 디자인 스튜디오용 원페이지 사이트인 단일 파일 HTML 페이지를 만드세요. 섹션: hero, services, work, contact. 하나의
로우 폴리 추상형 도형이 hero의 오른쪽 상단에 떠 있으며 천천히 회전합니다. 사용자가 각 섹션으로 스크롤하면 도형의 크기와 색상이
해당 섹션의 강조 색상에 맞게 변형됩니다. 그 외의 섹션은 깔끔한 HTML/CSS를 사용하세요
(섹션마다 무거운 3D는 사용하지 않음) 그래서 페이지가 빠르게 유지됩니다. 부드러운 스크롤, 모바일
친화적, 리사이즈 처리. 완전한 HTML 파일만 하나의
코드 블록으로 출력하세요.
62초, 7,419 토큰. 모델은 스튜디오 이름을 지어냈고, 네 개의 섹션을 만들었으며, 요청한 정확한 위치에 로우 폴리 이코사면체를 띄웠습니다. 이 프롬프트에 대한 우리의 첫 시도는 8,000토큰 출력 한도에 걸려 잘린 채 도착했습니다 — API를 통해 모델을 호출한다면, 전체 페이지 프롬프트의 경우 출력 한도를 16,000토큰 이상으로 설정하세요.
우리가 그것들을 실행했을 때 무슨 일이 일어났는가
프롬프트당 하나의 모델에 대해 세 번 실행한 것은 벤치마크가 아니라 일화일 뿐이며, 2026년 중반 시점에서 prompt-to-3D generation의 현주소를 점검하는 스폿 체크로 읽어야 한다. 방법 메모: claude-sonnet-5를 2026년 7월 17일 API를 통해, 기본 설정으로, system prompt 없이 사용했으며, 결과는 Apple-silicon MacBook의 desktop Chrome에서 1280×720으로 렌더링했다; 성공한 실행에서는 모델이 공용 CDN에서 Three.js r128 UMD 빌드를 스스로 선택했다.
| Prompt | Output tokens | Time | Result |
|---|---|---|---|
| Particle galaxy hero | 3,692 | 27.4s | 첫 시도에 작동; 서브라인 대비가 너무 낮음 |
| Scroll-driven showcase | 7,023 | 63.4s | 첫 시도에 작동, 4개 색상 단계 모두 정확함 |
| GLSL fluid gradient | 3,830 | 31.6s | 첫 시도에 작동, 테스트용 MacBook에서 드롭된 프레임이 보이지 않음 |
| Portfolio fly-through | 3 runs | 84–163s | 출시 불가: 토큰 초과, 그다음 카메라 클리핑, 그다음 제목 미러링 |
| Product viewer | 7,719 | 65.8s | 첫 시도에 작동, 실시간 머티리얼 전환 |
| One-page business site | 7,419 | 62.4s | 더 높은 출력 토큰 한도로 한 번 재실행한 뒤 작동 |
작동하는 다섯 페이지 중 유일한 시각적 결함은 prompt 1의 서브라인이 은하의 가장 밝은 부분 위에 놓여 거의 읽을 수 없게 된다는 점입니다. 후속 한 줄로 해결되었습니다 — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. 이게 이 실행들 전반에 걸친 패턴입니다: 3D 장면 자체는 대체로 제대로 나오는 편이고, 반복 예산은 타이포그래피, 오버레이 대비, 그리고 (포트폴리오의 경우) 카메라 연출에 쓰입니다.
이 규모에서는 비용이 문제가 되지 않습니다. 전체 테스트 실행 — 포트폴리오 재시도를 포함한 9세대, 약 46,000개의 출력 토큰 — 의 비용은 1달러도 훨씬 안 들었습니다. 우리는 이를 AIReiter를 통해 실행했는데, AIReiter는 Claude API 접근을 공식 토큰당 가격의 5분의 1 수준으로 재판매하므로, 고집스러운 반복 세션도 여전히 잔돈 수준에 머뭅니다.
자신만의 3D 웹사이트 프롬프트를 작성하는 방법
통과한 프롬프트에는 다섯 가지 부분이 공통적으로 있습니다. 이 다섯 가지를 모두 유지하면 첫 시도 통과 확률이 크게 올라갑니다.
1. 하나의 장면 주제. 은하, 토러스 매듭, 그래디언트 필드. 우리의 실행과 대부분의 공유된 커뮤니티 예시에서, 한 페이지에서 서로 관련 없는 여러 3D 기능을 요구하는 프롬프트는 모델이 요구사항을 빠뜨리기 시작하는 지점입니다. 2. 모션 드라이버. 시간(slowly rotates, driven by a time uniform) 또는 스크롤(as the user scrolls, the camera orbits) 중 하나. 어떤 것인지 명시적으로 말하세요. "animated"만 쓰면 모델이 지루한 것을 선택할 수 있습니다. 포트폴리오 실패 사례에서의 메모: *오브젝트*를 스크롤로 구동하는 것은 안정적이지만, *오브젝트들 사이의 경로를 따라 카메라를* 스크롤로 구동하는 것은 문제가 발생하는 지점입니다. 3. 인터랙션. 드래그해서 회전하는 OrbitControls는 우리의 테스트에서 성공한 모든 실행에서 작동했습니다. 캔버스 위에 텍스트를 오버레이한다면, 오버레이 컨테이너에는 pointer-events: none을, 버튼에는 pointer-events: auto를 요청하세요 — 그렇지 않으면 텍스트 레이어가 장면을 위한 드래그와 클릭을 가로챕니다. 4. 오버레이 콘텐츠. 큰 제목 텍스트를 따옴표로 정확히 지정하세요. 모델은 명시되지 않은 카피를 결국 바꿔야 할 일반적인 슬로건으로 채웁니다. 5. 성능 및 크기 가드레일. 파티클 수, single quad, no postprocessing, 또는 low-poly는 페이지를 빠르게 유지해 줍니다; keep the code compact는 출력이 API 토큰 한도 내에 들어가도록 유지해 줍니다 — 우리의 9번 실행 중 2번은 어떤 코드 품질 문제도 나타나기 전에 출력 한도에 걸려 실패했습니다.
평면적인 CSS 모방이 아니라 실제 3D로 모델을 이끄는 어휘: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. 이 단어들이 중요한 이유는 실제 API 이름에 대응하기 때문에, 모델이 즉흥적으로 꾸며내는 대신 학습 중에 본 라이브러리를 대상으로 코드를 작성하게 되기 때문입니다.
붙여넣기 코드 단축키
설명할 수 있는 범위를 넘어서는 효과에는 두 번째 기법이 있습니다. CodePen에서 완성된 Three.js 효과를 찾고, 원시 코드를 AI 도구에 붙여넣은 다음, Add this 3D animation to the hero.만 프롬프트로 입력하세요. 모델은 해당 스니펫을 여러분의 스택 — React components, 빌드 설정, 섹션 구조 — 으로 변환해 주는데, 보통 가장 번거로운 부분이 바로 이것입니다. Builder.io는 50,000개 파티클의 행성 애니메이션과 동일한 pointer-events: none 레이어링 수정까지 포함해 이 기법을 their walkthrough에서 문서화했습니다.
수상작 사이트 수준의 세련됨을 원할 때 이것이 가장 레버리지가 큰 경로입니다: 셰이더 수학은 이를 조정한 인간이 제공하고, AI는 통합만 수행합니다.
어떤 도구가 이러한 프롬프트를 사용하나요
위의 여섯 개 프롬프트는 도구에 구애받지 않습니다. HTML/JS를 작성하고 미리 볼 수 있는 어떤 도구에서도 실행할 수 있습니다. 도구 간 차이는 출력 형식과 코드 소유권입니다(2026년 7월 17일 확인):
| 도구 | 무료 경로 | 제공되는 것 | 코드 소유권 |
|---|---|---|---|
| Claude (chat or Claude Code) | 무료 요금제 | 원시 단일 파일 HTML 또는 전체 저장소 | 귀하의 것, 전체 소스 |
| Lovable | 무료 요금제 | 호스팅된 React 앱 | 내보내기 가능 |
| Bolt | 무료 요금제 | 호스팅된 풀스택 앱 | 내보내기 가능 |
| Cursor | 무료 요금제 | 자신의 저장소에 있는 코드 | 귀하의 것, 전체 소스 |
| VULK | 없음 — €3.99부터 3일 체험, 요금제는 €19.99/월부터 | 생성된 React Three Fiber 사이트, PostgreSQL 백엔드 | GitHub로 전체 내보내기 |
| Spline Omma | 대기자 명단/제한적 | 기존 사이트 위에 추가된 3D 레이어 | 플랫폼 호스팅 |
이들 중 두 가지는 주목할 만합니다. VULK의 핵심은 실제 React Three Fiber 코드를 생성한다는 점입니다. 즉, 반복 재생되는 비디오 헤더가 아니라 인터랙티브한 WebGL 장면을 만든다는 것이며, 그 쇼케이스 사이트들이 이를 뒷받침합니다. 실제 코드 출력과 비디오 헤더의 차이는 어떤 "AI 3D website builder"에 비용을 지불하기 전에 반드시 확인해야 할 정확한 구분입니다. 그리고 프롬프트를 직접 작성하기보다 둘러보고 싶다면, MotionSites는 Lovable, Bolt, Cursor, Claude를 대상으로 한 분류된 라이브러리를 유지하고 있습니다. 일부는 무료로 복사할 수 있고, 나머지는 구독 뒤에 있습니다:
프롬프트가 한계에 도달하는 지점
r/lovable 및 r/web_design 스레드에서 반복적으로 나오는 질문은 올바른 프롬프트만으로 mont-fort.com이나 Noomo Agency labs 페이지 같은 사이트를 재현할 수 있는지 여부입니다. 솔직히 말하면: 프롬프트만으로는 불가능합니다. 그런 사이트들은 커스텀 GLTF 모델, 아트 디렉션된 조명, 그리고 맞춤형 셰이더 작업으로 구축되며 — 텍스트 프롬프트가 만들어낼 수 없는 자산들입니다. 프롬프트가 제공하는 것은 자리표시자 기하 구조와 함께 그런 사이트의 *메커니즘* (스크롤 기반 카메라, 셰이더 배경, 감쇠 모션)입니다. 실제 모델 파일을 넣으면 그 격차의 일부는 줄어들지만, 조명, 재질, 그리고 이를 위한 모바일 폴백은 여전히 실제 디자인 작업으로 남습니다. 위의 우리 포트폴리오 플라이스루 실패 사례도 같은 교훈을 작은 규모로 보여줍니다: 프롬프트가 안무된 다중 객체 장면에 더 가까워질수록, 더 많은 인간의 반복 작업이 필요합니다.
세 가지 실패 모드는 대부분의 잘못된 생성 결과를 포괄하며, 각각 한 줄짜리 수정으로 해결할 수 있습니다:
- 검은 화면, 눈에 보이는 오류 없음. 보통 ES module/CDN import 불일치입니다. 수정 프롬프트:
Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps.(r128은 우리의 테스트 실행이 별도 지시 없이 선택한 버전이며, 여전히 작동합니다. 더 최신의 Three.js 버전들은 UMD 경로를 제거했기 때문에, 버전을 고정하면 불일치를 피할 수 있습니다.) - 데스크톱에서는 부드럽지만, 휴대폰에서는 버벅입니다. 노트북에서는 괜찮았던 파티클 수입니다. 수정 프롬프트:
Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2. - 3D 장면은 작동하지만 페이지의 어떤 것도 클릭되지 않습니다. 캔버스나 오버레이가 이벤트를 가로채고 있습니다. 수정 프롬프트:
Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.
그리고 저희 자체 실행에서 나온 사례 하나: 3D 카드의 텍스트가 거울처럼 반대로 렌더링됩니다. 카메라는 평면의 뒷면을 보고 있습니다. 수정 프롬프트: 카드 재질을 양면으로 만들고 텍스처가 올바르게 반영되도록 하거나, 항상 카메라를 향하도록 카드를 회전하세요.
자주 묻는 질문
무료 3D 웹사이트 프롬프트가 있나요?
네. 이 글의 여섯 개는 완전하고 자유롭게 복사할 수 있으며, DocsBot과 MotionSites의 무료 요금제에서도 더 많은 것을 제공합니다. 유료 라이브러리는 주로 양과 사전 테스트된 다양성을 제공할 뿐, 다른 종류의 프롬프트를 제공하는 것은 아닙니다.
이 프롬프트들은 Lovable 또는 Bolt에서 작동하나요?
네, 한 가지 조정이 필요합니다: 해당 플랫폼들이 React 프로젝트를 스캐폴딩하므로 "single-file HTML" 요구사항은 제외하세요. 그 외에는 모두 그대로 유지됩니다 — 장면 주제, 모션 드라이버, 상호작용, 그리고 성능 가드레일은 그대로 직접 이전됩니다.
3D 웹사이트 프롬프트를 사용하려면 Three.js를 알아야 하나요?
생성용으로는 아니지만, 반복 작업용으로는 약간 유용합니다. 위의 프롬프트들은 필요한 Three.js 용어를 담고 있습니다. OrbitControls가 무엇인지, 또는 프래그먼트 셰이더가 무엇인지 알면, 무작정 다시 생성시키는 대신 정확한 변경을 요청하는 데 도움이 됩니다.
3D 웹사이트를 위한 최고의 AI 도구는 무엇인가요?
단일 파일 효과나 히어로 섹션의 경우, Claude를 직접 사용하세요: 소스를 유지하고 토큰당 비용을 지불합니다. 백엔드가 있는 호스팅 사이트의 경우, 무료 요금제의 Lovable 또는 Bolt를 사용하거나, 특히 내보낸 React Three Fiber 코드가 필요하다면 VULK를 사용하세요.
3D 히어로가 성능이나 SEO에 악영향을 줄까요?
허용해야만 가능합니다. 3D는 하나의 장면에만 유지하고, 위의 모바일 가드레일을 추가하며, 여섯 개의 프롬프트 모두가 하듯 캔버스 위에 헤드라인과 본문 카피를 실제 HTML로 유지하세요. 크롤러는 텍스트 레이어를 읽고, Core Web Vitals는 주로 페이지가 추가로 로드하는 다른 요소들에 달려 있습니다.