프롬프트 하나로 30초 만에 3D 웹사이트 만들기: 직접 테스트한 6가지

3D 웹사이트 프롬프트를 찾다 보면 프롬프트 문구는 유료로 팔거나, 데모 영상만 보여주고 정작 텍스트는 공개하지 않는 경우가 많다. 그래서 이번에는 완성된 프롬프트 6개를 그대로 공개한다. Claude에 그대로 붙여 넣어도 되고, 한 줄 정도만 바꾸면 Lovable, Bolt, Cursor에서도 활용할 수 있다. 여섯 개 모두 실제 모델로 생성해 봤으며, 그중 다섯 개는 작동하는 Three.js 페이지로 돌아왔다. 아래 스크린샷도 목업이 아니라 실제 생성 결과다.

지금 바로 복사해 쓸 수 있는 3D 웹사이트 프롬프트 6개

모든 프롬프트는 CDN에서 Three.js를 불러오는 단일 HTML 파일을 만들도록 요청한다. 이 제약에는 이유가 있다. 파일 하나만 있으면 어느 브라우저에서나 로컬로 바로 열 수 있고, 개발자에게 넘기거나 커스텀 코드 블록에 붙여 넣기도 쉽다. 무엇보다 모델이 import를 프로젝트 곳곳에 흩뿌리지 않고, 장면을 한 파일 안에서 완결하도록 만든다.

1. 파티클 은하 히어로

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

생성에는 27초, 출력에는 3,692토큰이 들었다. 은하는 회전하고 드래그로 시점을 돌리는 기능도 정상 작동했으며, 오버레이 위의 버튼도 클릭할 수 있었다. 다만 실제 문제가 하나 있었다. 서브라인이 밝은 은하 중심부 위에 놓여 가독성이 떨어진다. 해결 방법은 아래 테스트 노트에서 다룬다.

2. 스크롤 연동 제품 쇼케이스

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

정상 작동한 다섯 사례 중 가장 무거웠지만, 결과물도 가장 인상적이었다. 생성 시간은 63초, 출력은 7,023토큰이었다. 스크롤에 맞춰 카메라가 오브젝트 주위를 돌고, 각 섹션마다 재질 색상도 요청한 대로 바뀐다.

감쇠감을 주는 lerp 보간도 제대로 반영됐다. 스크롤을 억지로 낚아채는 슬라이드쇼가 아니라, 에이전시 사이트 같은 묵직하고 고급스러운 움직임에 가깝다.

3. GLSL 유체 그라데이션 배경

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete
HTML file in a single code block.

31초, 3,830토큰으로 첫 시도에 통과했다. 여기서 single quad, no postprocessing passes라는 문구는 성능을 지키는 안전장치다. 이를 빼면 모델은 EffectComposer와 bloom 패스를 꺼내 드는 경향이 있고, 내장 GPU에서는 프레임 레이트가 크게 떨어질 수 있다.

4. 3D 포트폴리오 플라이스루: 가장 까다로웠던 사례

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

이 프롬프트는 세 번 실행했지만 아직 배포 가능한 수준이 아니다. 그럼에도 공개하는 이유는 위 스크린샷에 명확히 드러난다. 카드는 렌더링됐지만 카메라가 카드 뒤에 있어서 제목이 거울처럼 뒤집혀 보인다. 첫 실행은 파일 중간에서 16,000토큰 출력 한도를 넘겼다. 두 번째 실행에서는 프롬프트에 keep the code compact를 넣었다. 그래서 이 문구가 지금 프롬프트에 포함돼 있다. 카드는 나왔지만 카메라가 그대로 카드를 통과했다. 세 번째 실행은 관통 문제를 고쳤으나 카메라와 스크롤의 연결을 잃었다. 카메라 경로를 안무처럼 설계하고 카드별 텍스처까지 처리하는 일은 위 장면들보다 모델에 훨씬 어렵다. 디버깅 시간을 따로 잡거나, 정적인 곡선형 그리드에 hover 상태만 더하는 편이 낫다.

5. 인터랙티브 제품 뷰어

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

첫 시도에 통과했고, 생성 시간은 66초, 출력은 7,719토큰이었다. 스와치와 메탈·매트 토글은 재질을 실시간으로 바꿨다. 모델은 요청하지 않은 작은 디테일까지 추가했다. 제품 구도를 유지하기 위해 회전이 수평 축으로 제한된다는 설명을 각주로 넣었다.

6. 원페이지 3D 비즈니스 사이트

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62초, 7,419토큰이 들었다. 모델은 스튜디오 이름을 직접 만들고 네 개 섹션을 구성했으며, 요청한 자리에는 로우폴리 이코사헤드론을 띄웠다. 이 프롬프트의 첫 시도는 8,000토큰 출력 한도에 걸려 중간에 잘렸다. API로 모델을 호출한다면, 전체 페이지 프롬프트에는 출력 한도를 16,000토큰 이상으로 설정하는 편이 좋다.

실제 실행 결과: 어디까지 됐고, 어디서 막혔나

프롬프트별로 하나의 모델에서 세 번 실행한 결과는 벤치마크가 아니라 일종의 현장 점검이다. 2026년 중반 기준 프롬프트 기반 3D 생성이 어느 정도까지 왔는지 참고하는 용도로 보는 편이 맞다. 테스트는 2026년 7월 17일 claude-sonnet-5를 API 기본 설정으로 호출해 진행했다. 시스템 프롬프트는 사용하지 않았고, Apple-silicon MacBook의 데스크톱 Chrome에서 1280×720으로 결과를 렌더링했다. 성공한 실행에서 모델은 자체 판단으로 공개 CDN의 Three.js r128 UMD 빌드를 선택했다.

작동한 다섯 페이지에서 확인된 시각적 결함은 하나였다. 프롬프트 1의 서브라인이 은하에서 가장 밝은 지점에 놓여 거의 읽히지 않는다. 후속 요청 한 줄로 해결됐다. Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. 이번 테스트에서 반복적으로 보인 패턴도 여기 있다. 3D 장면 자체는 대체로 제대로 만들어지며, 반복 작업은 타이포그래피와 오버레이 대비, 그리고 포트폴리오 사례처럼 카메라 안무에 집중된다.

이 정도 규모에서는 비용도 문제가 되지 않는다. 포트폴리오 재시도까지 포함한 전체 테스트는 총 아홉 번의 생성, 약 46,000 출력 토큰이었고 비용은 1달러보다 훨씬 적었다. 우리는 공식 토큰당 가격의 5분의 1 수준으로 Claude API 접근을 재판매하는 AIReiter를 통해 실행했다. 따라서 잘 안 풀리는 반복 작업도 잔돈 수준의 비용으로 진행할 수 있다.

나만의 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 토큰 한도 안에 출력을 넣는 데 도움이 된다. 아홉 번의 실행 중 두 번은 코드 품질 문제가 아니라 출력 한도를 넘겨 중단됐다.

평면적인 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 컴포넌트, 현재 빌드 환경, 섹션 구조 등 사용 중인 스택에 맞춰 옮긴다. 보통 가장 번거로운 작업이 바로 이 통합 과정이다. Builder.io는 50,000개 파티클로 만든 행성 애니메이션을 예시로 이 방법을 소개했으며, 같은 pointer-events: none 레이어링 수정법도 가이드에 담았다.

수상작 사이트 같은 완성도를 원할 때는 이 접근이 가장 효율적이다. 셰이더 수학은 이미 사람 손으로 다듬어진 결과물을 쓰고, AI는 통합만 맡기면 된다.

이 프롬프트를 받을 수 있는 도구

위 여섯 프롬프트는 특정 도구에 묶여 있지 않다. HTML/JS를 작성하고 미리 볼 수 있는 도구라면 모두 실행할 수 있다. 차이는 출력 형태와 코드 소유권에 있다. 아래 정보는 2026년 7월 17일 기준이다.

이 중 두 가지는 짚고 넘어갈 만하다. VULK는 반복 영상 헤더가 아니라 인터랙티브 WebGL 장면을 만드는 실제 React Three Fiber 코드를 생성한다는 점을 내세우며, 쇼케이스 사이트도 이를 뒷받침한다. 실제 코드 출력인지 영상 헤더인지의 차이는 어떤 "AI 3D 웹사이트 빌더"에 돈을 내기 전 반드시 확인해야 할 부분이다. 프롬프트를 직접 쓰기보다 찾아보고 싶다면 MotionSites가 Lovable, Bolt, Cursor, Claude용으로 분류한 라이브러리를 운영한다. 일부는 무료로 복사할 수 있고, 나머지는 구독 뒤에 제공된다.

프롬프트만으로는 넘기 어려운 한계

r/lovable과 r/web_design의 스레드에서 반복되는 질문이 있다. 좋은 프롬프트만 있으면 mont-fort.com이나 Noomo Agency labs 페이지 같은 사이트를 재현할 수 있느냐는 것이다. 솔직한 답은 아니다. 그런 사이트는 커스텀 GLTF 모델, 아트 디렉션이 들어간 조명, 맞춤형 셰이더 작업을 바탕으로 한다. 텍스트 프롬프트만으로는 이런 에셋을 만들어낼 수 없다. 프롬프트가 해주는 일은 플레이스홀더 지오메트리를 활용해 그런 사이트의 동작 방식, 즉 스크롤 연동 카메라·셰이더 배경·감쇠 모션 등을 구현하는 것이다. 실제 모델 파일을 넣으면 격차 일부를 줄일 수 있지만, 조명·재질·모바일 폴백은 여전히 제대로 된 디자인 작업이 필요하다. 앞서 포트폴리오 플라이스루가 실패한 것도 작은 규모에서 같은 교훈을 보여준다. 프롬프트가 안무가 필요한 다중 오브젝트 장면에 가까워질수록 사람의 반복 작업이 더 많이 필요하다.

깨진 생성 결과 대부분은 세 가지 유형으로 나뉘며, 각각 한 줄의 수정 지시로 대응할 수 있다.

• 오류는 안 보이고 화면만 검다. 대개 ES 모듈과 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 카드 위 텍스트가 좌우 반전된다. 카메라가 평면의 뒷면을 보고 있는 상태다. 수정 프롬프트: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

무료 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는 주로 페이지가 추가로 불러오는 요소에 좌우된다.