HRD×AI 라운지 · 자료 004

AI에게 3D를 시키는 법
— 검증된 프롬프트 9선

2026년 9월, 한 달도 안 되는 사이에 쏟아진 실제 사례만 모았습니다. 지어낸 예시가 하나도 없습니다. 누가 만들었는지, 어떤 문장을 넣었는지, 그 결과가 지금도 열리는지까지 하나하나 확인해 실었습니다.

검증일 2026-09-14 · 원문 프롬프트 9건 · 지금 열리는 결과물 3건 · 공개 소스코드 4건
들어가며

왜 갑자기 3D가 손에 잡히게 되었나

교육담당자에게 3D는 늘 «견적 받고 포기하는 것»이었습니다. VR 장비, 외주 제작비, 몇 달의 기간. 그런데 2026년 들어 전제가 바뀌었습니다.

  • AI가 3D 코드를 기본으로 뱉습니다. 요즘 AI에게 «3D로 만들어줘»라고 하면 대부분 Three.js 코드가 나옵니다. 웹 3D의 사실상 표준입니다.
  • 결과물이 그냥 웹페이지입니다. 앱 설치도, 장비도 필요 없습니다. 링크를 열면 휴대폰에서도 돌아갑니다.
  • 프롬프트가 짧아도 됩니다. 아래 사례 중 가장 짧은 것은 127자입니다. 두 문장입니다.

아래 9건은 전부 2026년 9월 5일 ~ 9월 10일 사이에 공개된 것들입니다. 딱 한 주 사이의 기록입니다.

먼저 눈으로

말보다 이걸 먼저 열어보십시오

설명을 읽기 전에 아래 셋을 눌러보시길 권합니다. 지금 이 순간 열리는 실제 결과물이고, 전부 프롬프트로 만들어진 것입니다. 휴대폰으로도 됩니다.

열어보셨습니까. 저 셋을 만든 문장이 아래에 그대로 있습니다.

사례

9건 — 프롬프트 원문과 결과물

각 사례마다 제작자가 실제로 입력한 문장을 원문 그대로 실었습니다. 번역해 싣지 않은 이유는, AI에 넣을 때는 원문이 더 잘 먹히기 때문입니다. 복사 버튼으로 그대로 가져가시고 명사만 우리 것으로 바꾸시면 됩니다.

CASE 01

서울을 통째로 3D로

Interactive miniature of Seoul · 제작 synabreu

결과물 바로 실행2026-09-06프롬프트 211자

공개 지도 데이터만으로 도시를 세웁니다. 프롬프트가 네 문장입니다.

서울 3D 아틀라스 · 제작자 서버에서 직접 불러옵니다새 창 ↗

화면 안에서 마우스로 끌어 돌리고 휠로 확대할 수 있습니다. 무거우면 «새 창»으로 여십시오.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Build a Three.js miniature of Seoul from open map data. Add district navigation, landmark fly-throughs, day and night modes and touch controls. Disclose simplified buildings, estimated heights and data licenses.
우리말 옮김 (뜻 확인용)
공개 지도 데이터를 이용해 서울의 미니어처를 Three.js로 만들어라.
구(區) 단위 이동, 랜드마크 플라이스루(비행 시점 이동), 낮·밤 모드, 터치 조작을 넣어라.
건물이 단순화되었다는 점, 높이는 추정치라는 점, 사용한 데이터의 라이선스를 명시하라.
우리 교육에 옮긴다면

우리 사업장·캠퍼스를 같은 방식으로 세울 수 있습니다. 신입 온보딩 «우리 회사 지도», 전국 사업장 배치 소개에 그대로 옮겨집니다.

CASE 02

광장 하나를 복셀로

Cluj-Napoca Union Square in voxels · 제작 Dan Manastireanu

결과물 바로 실행소스코드 공개2026-09-05프롬프트 148자

두 문장짜리 프롬프트. 소스코드와 라이브 데모가 모두 공개되어 재현 검증이 가능합니다.

복셀 광장 · 제작자 서버에서 직접 불러옵니다새 창 ↗

화면 안에서 마우스로 끌어 돌리고 휠로 확대할 수 있습니다. 무거우면 «새 창»으로 여십시오.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Create an interactive voxel world of Piața Unirii in Cluj-Napoca. Adapt the square's recognizable layout and landmarks into an explorable miniature.
우리말 옮김 (뜻 확인용)
클루지나포카의 우니리 광장을 인터랙티브 복셀 월드로 만들어라.
광장의 알아볼 수 있는 배치와 랜드마크를, 돌아다닐 수 있는 미니어처로 옮겨라.
우리 교육에 옮긴다면

«짧게 시작해도 된다»는 증거입니다. 첫 시도는 이 길이로 충분합니다. 강의장 배치도, 워크숍 공간 배치를 이 정도 문장으로 만들어 보십시오.

CASE 03

스마트폰 분해 조립

Interactive Smartphone Exploded View · 제작 Zaira Laraib

2026-09-06프롬프트 464자

슬라이더로 분해·재조립하고, 부품을 클릭하면 그 부품이 무슨 일을 하는지 설명이 뜹니다.

결과물 보는 법

이 사례는 페이지 안에서 바로 실행할 수 없습니다. 제작자가 라이브 데모를 열어두지 않았기 때문입니다. 아래 「제작자 원글 보기」를 누르시면 제작자가 직접 올린 실제 작동 영상과 화면을 보실 수 있습니다.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Build an interactive 3D exploded-view visualization of a modern smartphone. Separate the device into its major components and let me explode/reassemble it with a slider. Clicking a component should isolate it and explain what it does. Include the battery, cameras, SoC, memory, display layers, speakers, sensors, antennas and logic board. Prioritize a beautiful Apple-like interface and satisfying interactions. Build, run, inspect and fix the complete experience.
우리말 옮김 (뜻 확인용)
최신 스마트폰의 인터랙티브 3D 분해도(exploded view)를 만들어라.
기기를 주요 부품 단위로 분리하고, 슬라이더로 분해·재조립할 수 있게 하라.
부품을 클릭하면 그 부품만 따로 보이면서 무슨 역할을 하는지 설명이 뜨게 하라.
배터리, 카메라, SoC, 메모리, 디스플레이 적층, 스피커, 센서, 안테나, 메인보드를 포함하라.
애플 제품처럼 아름다운 인터페이스와 만족스러운 조작감을 최우선으로 하라.
전체 결과물을 만들고, 실행하고, 점검하고, 고쳐라.
우리 교육에 옮긴다면

제품교육의 정답에 가깝습니다. «스마트폰»을 우리 제품·설비·공정으로 바꾸면 신입 제품 이해 과정이 하루 만에 나옵니다.

CASE 04

인체 해부 아틀라스

Interactive 3D atlas of the human head and brain · 제작 BuBBliK

소스코드 공개2026-09-10프롬프트 2622자

수백 개 구조를 계층으로 파고듭니다. 머리 → 계통 → 부위 → 개별 구조. 검색·분해 슬라이더·단면까지 있습니다.

결과물 보는 법

이 사례는 페이지 안에서 바로 실행할 수 없습니다. 제작자가 라이브 데모를 열어두지 않았기 때문입니다. 아래 「제작자 원글 보기」를 누르시면 제작자가 직접 올린 실제 작동 영상과 화면을 보실 수 있고, 「소스코드 받기」로 내려받아 직접 돌려보실 수도 있습니다.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Build a complete interactive 3D atlas of the human head and brain. Deliver a working application, not a mockup. Make reasonable decisions independently, implement it, test it, and visually verify the result.

Use Three.js and real, appropriately licensed Z-Anatomy / BodyParts3D meshes. Include the skull, teeth, facial muscles, brain, eyes, cranial nerves, arteries, veins, and available supporting membranes. Preserve their original anatomical relationships. Aim for hundreds of individually selectable structures, report the actual imported count, and retain source attribution.

Create a clean, light interface with a pale grey background, white rounded panels, restrained blue-grey accents, and readable typography. Keep the model large, with a structure panel on the left, camera tools on the right, search at the top, and an explosion slider below. Use English throughout.

Make the anatomy progressively explorable:
Head → system → region → individual named structures.
For example: Brain → Cerebrum → Left hemisphere → Frontal lobe → individual structures.

Animate assembly and disassembly. Preserve source positions when assembled; arrange exploded groups in clearly separated layouts with readable labels. Indicate normalized scale and paginate large collections.

Include:
- Free rotation, wheel/pinch zoom, and camera presets.
- Disassembly slider and Shift + wheel control.
- Independent visibility switches for groups and individual parts.
- Group opacity, undo, restore all, and reset.
- Anatomical search, click-to-inspect, focus, isolation, and parent navigation.
- Anatomical colours, porcelain, wireframe, and transparent modes.
- Adjustable sagittal, axial, and coronal clipping planes with reverse direction.
- Labels, automatic exploration, fullscreen, and PNG export.
- A guided journey from the complete head into the brain and its networks.

Keep hidden structures hidden across layout and material changes. Explain that clipping planes produce open display cuts, not medical scans. Do not invent anatomy or claim clinical validation.

Deliver a standalone HTML containing the application and processed geometry, working offline without a server. Also provide clean source files, pinned dependencies, a lockfile, portable build scripts, an English README, and required licences and attribution. Exclude credentials, local machine paths, dependencies, and unrelated files.

Test geometry integrity, hierarchy membership, visibility, undo, and layout spacing. Inspect the running application in a browser, exercise the controls, check for console errors, and fix visual overlaps before delivering.
우리말 옮김 (뜻 확인용)
사람의 머리와 뇌에 대한 완전한 인터랙티브 3D 아틀라스를 만들어라.
목업이 아니라 실제로 작동하는 애플리케이션을 내놓아라.
합리적인 판단은 스스로 내리고, 구현하고, 테스트하고, 결과를 눈으로 확인하라.

Three.js와 라이선스가 확인된 실제 해부 메시(Z-Anatomy / BodyParts3D)를 사용하라.
두개골, 치아, 얼굴 근육, 뇌, 눈, 뇌신경, 동맥, 정맥, 확보 가능한 막 구조를 포함하라.
원래의 해부학적 위치 관계를 그대로 유지하라.
개별 선택 가능한 구조가 수백 개가 되도록 하고, 실제로 가져온 개수를 보고하고, 출처 표기를 유지하라.

연회색 배경, 흰색 라운드 패널, 절제된 청회색 강조색, 읽기 좋은 서체로
깔끔하고 밝은 인터페이스를 만들어라.
모델은 크게 두고, 왼쪽에 구조 패널, 오른쪽에 카메라 도구,
위쪽에 검색, 아래쪽에 분해 슬라이더를 배치하라. 전체를 영어로 하라.

해부 구조를 단계적으로 파고들 수 있게 하라.
  머리 → 계통 → 부위 → 개별 명명 구조
  예: 뇌 → 대뇌 → 좌반구 → 전두엽 → 개별 구조

조립·분해를 애니메이션으로 보여라. 조립 상태에서는 원래 위치를 유지하고,
분해 시에는 그룹을 명확히 떨어뜨려 읽기 쉬운 라벨과 함께 배치하라.
정규화된 축척을 표시하고, 항목이 많으면 페이지를 나눠라.

다음을 포함하라.
- 자유 회전, 휠·핀치 줌, 카메라 프리셋
- 분해 슬라이더와 Shift+휠 조작
- 그룹·개별 부위의 독립적인 표시/숨김 스위치
- 그룹 투명도, 실행취소, 전체 복원, 초기화
- 해부학 검색, 클릭 조회, 초점 이동, 단독 표시, 상위 구조로 이동
- 해부학적 색상, 자기(porcelain), 와이어프레임, 반투명 모드
- 시상면·수평면·관상면 절단면 조절(방향 반전 포함)
- 라벨, 자동 탐색, 전체화면, PNG 내보내기
- 머리 전체에서 뇌와 신경망까지 이어지는 가이드 투어

숨긴 구조는 배치나 재질이 바뀌어도 계속 숨겨진 상태를 유지하라.
절단면은 의료 영상이 아니라 표시용 단면임을 설명하라.
해부 구조를 지어내지 말고, 임상적으로 검증되었다고 주장하지 마라.

서버 없이 오프라인에서 열리는, 애플리케이션과 가공된 형상이 들어 있는
독립 실행 HTML 하나로 내놓아라.
아울러 정리된 소스 파일, 버전 고정된 의존성, 락파일, 이식 가능한 빌드 스크립트,
영문 README, 필요한 라이선스와 출처 표기를 함께 제공하라.
자격증명, 로컬 경로, 의존성 폴더, 무관한 파일은 빼라.

형상 무결성, 계층 소속, 표시 상태, 실행취소, 배치 간격을 테스트하라.
브라우저에서 실제로 실행해 조작해 보고, 콘솔 오류를 확인하고,
화면이 겹치는 문제를 고친 뒤에 내놓아라.
우리 교육에 옮긴다면

«계층 구조를 가진 무엇»이면 전부 적용됩니다. 조직도, 설비 계통도, 생산 라인, 직무 체계. 이 프롬프트의 계층 설계 방식만 가져다 쓰십시오.

CASE 05

입자 가속기

Interactive 3D particle collider · 제작 BuBBliK

소스코드 공개2026-09-09프롬프트 936자

6단계로 분해되고, 스크롤로 조립·역조립합니다. 결과물이 «오프라인에서 열리는 단일 HTML 파일»입니다.

결과물 보는 법

이 사례는 페이지 안에서 바로 실행할 수 없습니다. 제작자가 라이브 데모를 열어두지 않았기 때문입니다. 아래 「제작자 원글 보기」를 누르시면 제작자가 직접 올린 실제 작동 영상과 화면을 보실 수 있고, 「소스코드 받기」로 내려받아 직접 돌려보실 수도 있습니다.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Build a detailed, interactive 3D particle collider inspired by CERN’s LHC and the ATLAS detector using Three.js.

Create three views: a detector with thousands of individually animated parts, an accelerator ring with counter-rotating beams, and a synthetic collision display.

Make the detector unfold in six stages - from large end-cap wheels and magnets down to individual sensor modules. Include scroll-controlled disassembly, 30/60/90-second playback, pause, and reverse assembly.

Add per-system visibility switches, component counts, educational descriptions, and a camera flight around the ring.

Use a premium dark interface, metallic materials, subtle gold accents, and cinematic lighting. Keep parts readable and avoid excessive overlap.

Consult official CERN references. Clearly label simplified geometry and synthetic events.

Deliver one self-contained HTML file that works offline, plus portable source code and a README.
우리말 옮김 (뜻 확인용)
CERN의 LHC와 ATLAS 검출기에서 착안한, 정교하고 인터랙티브한
3D 입자 충돌기를 Three.js로 만들어라.

세 가지 화면을 만들어라. 수천 개 부품이 개별로 움직이는 검출기,
서로 반대로 도는 빔이 있는 가속기 링, 그리고 합성 충돌 장면.

검출기는 6단계로 펼쳐지게 하라. 큰 엔드캡 휠과 자석에서 시작해
개별 센서 모듈까지 내려가도록. 스크롤로 조절하는 분해,
30/60/90초 재생, 일시정지, 역순 조립을 넣어라.

계통별 표시 스위치, 부품 개수, 교육용 설명, 링 주변을 도는 카메라 비행을 추가하라.

고급스러운 다크 인터페이스, 금속 재질, 은은한 금색 포인트, 영화적인 조명을 써라.
부품이 읽히도록 하고 과도하게 겹치지 않게 하라.

CERN 공식 자료를 참고하라. 단순화한 형상과 합성 데이터임을 분명히 표시하라.

오프라인에서 열리는 독립 실행 HTML 파일 하나와,
이식 가능한 소스코드, README를 함께 내놓아라.
우리 교육에 옮긴다면

사내망만 되는 환경, 보안상 외부 접속이 막힌 공장에서 결정적입니다. 파일 하나만 USB로 옮기면 교육장에서 돕니다.

CASE 06

공장 라인 시뮬레이션

Live 3D factory launch-pad simulation · 제작 Konstantin Saifoulline

2026-09-09프롬프트 127자

«린 생산 책을 학습한 뒤 공장 콘셉트를 설계하고, 그걸 3D 시뮬레이션으로 만들어라».

결과물 보는 법

이 사례는 페이지 안에서 바로 실행할 수 없습니다. 제작자가 라이브 데모를 열어두지 않았기 때문입니다. 아래 「제작자 원글 보기」를 누르시면 제작자가 직접 올린 실제 작동 영상과 화면을 보실 수 있습니다.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
study @AirsupHQ lean production books, and develop a concept for a factory with 10 launch pads, and build a live 3D simulation.
우리말 옮김 (뜻 확인용)
@AirsupHQ 의 린 생산(lean production) 서적을 학습한 뒤,
발사대 10개를 갖춘 공장의 콘셉트를 설계하고, 실시간 3D 시뮬레이션으로 만들어라.
우리 교육에 옮긴다면

AI에게 이론서를 먼저 읽히고 그 이론대로 공간을 설계하게 하는 방식입니다. 낭비 제거·흐름 생산 교육에서 «말로 설명하던 것»을 눈앞에서 돌립니다.

CASE 07

중국식 정원 걸어 다니기

Interactive Chinese Courtyard · 제작 Larus Canus

2026-09-07프롬프트 829자

WASD로 걸어 다니고, 낮·밤을 바꾸고, 지붕을 벗겨 내부를 봅니다.

결과물 보는 법

이 사례는 페이지 안에서 바로 실행할 수 없습니다. 제작자가 라이브 데모를 열어두지 않았기 때문입니다. 아래 「제작자 원글 보기」를 누르시면 제작자가 직접 올린 실제 작동 영상과 화면을 보실 수 있습니다.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Build an interactive Chinese courtyard using Blender and Three.js that I can explore in a browser.

Include white walls, dark tiled roofs, a moon gate, pine trees, a pond, and a rock garden, with a living room, tea room, and bedroom. Use Python to run Blender in the background, generate the models, and export GLB files. Use Three.js for lighting, reflections, animation, and interaction.

Support orbit controls, zoom, WASD navigation, day/night switching, and a roof toggle. Gradually add flowing water, koi, hopping frogs, dragonflies, a courtyard cat, sparrows, and nighttime fireflies. Keep movements subtle and natural.

Create an original interface that leaves the scene unobstructed. Build in stages, inspect the results in the browser, fix issues, and deliver the runnable project, source files, and setup instructions.
우리말 옮김 (뜻 확인용)
브라우저에서 돌아다닐 수 있는 인터랙티브 중국식 정원을
Blender와 Three.js로 만들어라.

흰 담장, 짙은 기와지붕, 월동문(月洞門), 소나무, 연못, 석가산을 넣고,
거실·다실·침실을 포함하라.
Python으로 Blender를 백그라운드 실행해 모델을 생성하고 GLB로 내보내라.
조명, 반사, 애니메이션, 상호작용은 Three.js로 처리하라.

궤도 회전, 줌, WASD 이동, 낮·밤 전환, 지붕 열기/닫기를 지원하라.
흐르는 물, 잉어, 뛰는 개구리, 잠자리, 마당 고양이, 참새,
밤의 반딧불을 단계적으로 추가하라. 움직임은 은은하고 자연스럽게 하라.

장면을 가리지 않는 독창적인 인터페이스를 만들어라.
단계를 나눠 만들고, 브라우저에서 결과를 확인하고, 문제를 고치고,
실행 가능한 프로젝트와 소스 파일, 설치 안내를 함께 내놓아라.
우리 교육에 옮긴다면

«지붕 토글»이 핵심입니다. 도면을 3D로 세운 뒤 지붕을 걷어내면 그게 곧 사옥 투어이자 대피 동선 교육장입니다.

CASE 08

건물을 코드로만

Temple of Heaven Hall of Prayer for Good Harvest — TypeScript + Three.js WebGL Project · 제작 govin.eth \| G哥

2026-09-08프롬프트 2051자

외부 3D 모델 파일을 일절 쓰지 않고 코드만으로 건축물을 생성하도록 못 박았습니다.

결과물 보는 법

이 사례는 페이지 안에서 바로 실행할 수 없습니다. 제작자가 라이브 데모를 열어두지 않았기 때문입니다. 아래 「제작자 원글 보기」를 누르시면 제작자가 직접 올린 실제 작동 영상과 화면을 보실 수 있습니다.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Create a complete, runnable WebGL project of Beijing’s Temple of Heaven Hall of Prayer for Good Harvest using TypeScript + Three.js. All architectural geometry, textures, and animations must be generated procedurally by code at runtime. Do not load external models such as .glb, .gltf, .obj, or .fbx.

Architectural details:
Three tiers of blue glazed-tile domed roofs with different sizes and heights, a gilded finial, red columns, a circular hall body, blue, green, and gold painted details, dougong brackets, and doors and windows.
Use curved profiles, surfaces of revolution, or custom geometry for the roofs to create broad, gently upturned eaves; do not replace them with simple cones.
Create a three-tier circular platform in white Han white jade, with a central staircase, balustrades, and posts. Keep the overall proportions harmonious and the structure clearly layered.
Generate tile textures and decorative details procedurally. Prefer InstancedMesh for repeated components.

Scene and interaction:
Use a Beijing-blue sky, a plaza ground plane, and a small amount of greenery. Combine DirectionalLight with AmbientLight/HemisphereLight, and enable shadows, ambient occlusion, and moderate cinematic tone mapping.
Support rotation and zoom with OrbitControls, along with an optional slow automatic orbit showcase.
Add a button to toggle “explode/reassemble”: the roofs, columns, dougong brackets, walls, doors and windows, balustrades, and platform should smoothly spread apart by hierarchy, then return precisely to their original positions. Drive the animation with code, use staggered timing, and avoid teleporting.

Deliver the complete project and startup instructions directly. The page should respond to the window size, provide high-quality visuals and smooth interaction, and maintain performance in ordinary desktop browsers through instancing, appropriate geometric detail, and rendering optimizations. Keep the code modular and easy to extend. Verify the build and core features, and clearly state anything that was not verified.
우리말 옮김 (뜻 확인용)
베이징 천단 기년전(祈年殿)의 완전히 실행 가능한 WebGL 프로젝트를
TypeScript + Three.js로 만들어라.
모든 건축 형상·텍스처·애니메이션은 실행 시점에 코드로 절차적으로 생성해야 한다.
.glb, .gltf, .obj, .fbx 같은 외부 모델 파일을 불러오지 마라.

건축 세부:
크기와 높이가 다른 청색 유리기와 3층 원형 지붕, 도금 보주, 붉은 기둥,
원형 전각 몸체, 청·녹·금 단청, 두공(斗栱), 문과 창.
지붕은 곡면 프로파일, 회전체, 또는 커스텀 지오메트리로 만들어
넓고 완만하게 들린 처마를 표현하라. 단순 원뿔로 대체하지 마라.
한백옥(漢白玉) 3단 원형 기단을 만들고, 중앙 계단·난간·동자기둥을 두어라.
전체 비례는 조화롭게, 구조는 층위가 분명하게 하라.
기와 텍스처와 장식은 절차적으로 생성하라. 반복 부재는 InstancedMesh를 우선 사용하라.

장면과 상호작용:
베이징의 푸른 하늘, 광장 지면, 약간의 녹지를 쓰라.
DirectionalLight와 AmbientLight/HemisphereLight를 조합하고,
그림자·앰비언트 오클루전·적당한 시네마틱 톤매핑을 켜라.
OrbitControls로 회전과 줌을 지원하고, 느리게 자동 회전하는 쇼케이스 모드를 선택적으로 넣어라.
「분해/재조립」 토글 버튼을 추가하라. 지붕, 기둥, 두공, 벽체, 문·창, 난간, 기단이
계층 순서에 따라 부드럽게 벌어졌다가 원래 위치로 정확히 되돌아가야 한다.
애니메이션은 코드로 구동하고, 시차를 두어 순차적으로 움직이게 하며, 순간이동은 피하라.

완성된 프로젝트와 실행 방법을 바로 내놓아라.
창 크기에 반응하고, 고품질 화면과 매끄러운 조작을 제공하며,
인스턴싱·적절한 형상 디테일·렌더링 최적화로 일반 데스크톱 브라우저에서
성능을 유지해야 한다.
코드는 모듈화해 확장하기 쉽게 하라. 빌드와 핵심 기능을 검증하고,
검증하지 못한 부분은 분명히 밝혀라.
우리 교육에 옮긴다면

모델 파일 구매·제작 없이 간다는 뜻입니다. 라이선스 문제도, 용량 문제도 사라집니다. 사내 배포에 가장 안전한 방식입니다.

CASE 09

블렌더에서 만들어 웹으로

Interactive dual-ring energy core · 제작 ruofeng

결과물 바로 실행소스코드 공개2026-09-06프롬프트 159자

블렌더로 만들고 재질까지 three.js 뷰어로 내보냅니다. 회전·줌·자동 궤도까지.

듀얼링 에너지 코어 · 제작자 서버에서 직접 불러옵니다새 창 ↗

화면 안에서 마우스로 끌어 돌리고 휠로 확대할 수 있습니다. 무거우면 «새 창»으로 여십시오.

실제 사용된 프롬프트 (원문 · 이대로 넣으십시오)
Model an energy core, two rings and a metal base in Blender. Export the materials to a Three.js viewer with rotation, zoom, automatic orbit and pulse controls.
우리말 옮김 (뜻 확인용)
Blender에서 에너지 코어와 두 개의 링, 금속 받침대를 모델링하라.
재질까지 Three.js 뷰어로 내보내고, 회전·줌·자동 궤도·펄스 조작을 넣어라.
우리 교육에 옮긴다면

이미 3D 파일(설비 도면, 제품 CAD)을 갖고 계신 회사라면 이 경로가 빠릅니다. 있는 자산을 웹 교육용으로 바꾸는 흐름입니다.

패턴

9건에서 공통으로 나온 여섯 가지

프롬프트들을 나란히 놓고 보면 반복되는 문장이 보입니다. 이것만 챙겨도 실패 확률이 크게 떨어집니다.

패턴실제 문장왜 필요한가
1. 목업 말고 작동하는 것Deliver a working application, not a mockup.안 쓰면 «보기만 그럴싸한 껍데기»가 나옵니다
2. 만들고 → 돌려보고 → 고쳐라Build, run, inspect and fix the complete experience.AI가 스스로 오류를 잡습니다. 효과가 가장 큽니다
3. 부품을 따로따로individually selectable structures덩어리로 만들면 클릭·설명을 붙일 수 없습니다
4. 조작 방법을 지정orbit controls, zoom, WASD navigation, day/night switching, a roof toggle교육생이 무엇을 할 수 있는지가 여기서 결정됩니다
5. 파일 하나로 묶기one self-contained HTML file that works offline사내망·공장처럼 막힌 환경에서 유일한 답입니다
6. 출처와 한계를 밝히게Disclose simplified buildings, estimated heights and data licenses.교육자료는 «어디까지가 사실인지»가 생명입니다

특히 2번을 빼먹지 마십시오. 이 한 줄이 있고 없고에 따라, 열었을 때 까만 화면이 뜨느냐 아니냐가 갈립니다.

따라하기

오늘 저녁에 첫 결과물까지

  1. 도구를 엽니다. 자료 003에서 설치하신 Claude Code나 Codex면 가장 매끄럽습니다. 아직이시면 웹 챗 화면에서도 됩니다 — 결과 코드를 메모장에 붙여 .html로 저장하면 그대로 열립니다.
  2. CASE 02(복셀 광장)의 프롬프트를 복사합니다. 148자짜리입니다. 지명만 우리 사업장 이름으로 바꾸십시오.
  3. 끝에 이 두 줄을 붙입니다.
    Deliver a working application, not a mockup.
    Build, run, inspect and fix the complete experience.
  4. 열어보고 한 가지씩만 고칩니다. «건물이 너무 낮다», «클릭하면 이름이 뜨게». 한 번에 하나씩 말해야 망가지지 않습니다.

첫 시도는 반드시 작게. CASE 04(해부 아틀라스)는 프롬프트가 2,600자가 넘습니다. 처음부터 저걸 따라 하면 십중팔구 실패합니다. 127자짜리 CASE 06부터 시작해 한 문장씩 늘리는 편이 훨씬 빠릅니다.

적용

기업교육에 옮기는 세 갈래

쓰는 곳가져올 사례바꿀 것
안전·의무교육CASE 07 정원(지붕 토글) + CASE 05 가속기(단일 HTML)정원 → 우리 작업장. 지붕을 벗겨 내부를 보여주고 위험요소를 클릭 대상으로 심습니다. 공장 반입은 파일 하나로
제품·직무교육CASE 03 스마트폰 분해스마트폰 → 우리 제품·설비. 부품을 클릭하면 기능 설명이 뜨는 구조를 그대로 씁니다
신입 온보딩CASE 01 서울 + CASE 07 정원도시 → 사옥·캠퍼스. 층별 부서, 회의실, 동선을 얹으면 «첫날 길 잃는 문제»가 사라집니다

공통점이 하나 있습니다. 교육생은 아무것도 설치하지 않습니다. 링크 하나, 또는 파일 하나. 기존 VR 교육과 결정적으로 다른 지점입니다.

주의

덮어두지 않고 말씀드립니다

정밀도를 기대하면 안 됩니다. 이 방식으로 나오는 건 «개념을 이해시키는 모형»입니다. 실제 설비 치수나 공정 정확도가 필요한 교육이라면 CAD 자산을 쓰셔야 합니다(CASE 09의 경로).

도면·CAD를 AI에 올리기 전에 보안 확인. 사업장 도면은 대부분 대외비입니다. 사내 반입이 허용된 도구인지 먼저 확인하십시오. 막혀 있다면 손그림·개략 배치도로 시작해도 교육 효과는 충분합니다.

아래 프롬프트는 각 제작자의 것입니다. 학습·참고 목적으로 인용했고 출처를 모두 밝혔습니다. 사내 교육에 변형해 쓰시는 것은 자유롭게 하시되, 원문 그대로 외부에 재배포하지는 마십시오.

모델에 따라 결과가 다릅니다. 아래 사례는 GPT-6 Astra로 만들어진 것들입니다. 다른 AI에서는 같은 문장이 다른 품질로 나옵니다. 잘 안 나오면 프롬프트가 아니라 모델을 먼저 바꿔 보십시오.

출처

확인하실 수 있게

이 자료의 사례는 전부 아래 공개 큐레이션에서 가져왔고, 각 사례의 원글·소스·데모 링크를 2026년 9월 14일에 직접 열어 생존을 확인했습니다.