웹 3D 게임
설치 없이 링크로 친구에게 보여주고 싶은 사람
- 도구
- Claude Code + Three.js (+ Blender)
- 비용
- Claude 요금제만
- 결과
- 브라우저에서 돌아가는 3D 게임
- 난이도
- ★★☆
Claude Opus 5.5로 만든 게임 영상들이 X에서 줄줄이 터졌어요. 설치 없이 웹에서 도시를 날아다니는 3D 게임(조회 183만), 보스전까지 있는 다크소울풍 액션 RPG(60만), 필살기 연출까지 있는 로블록스 대전 게임(46만). 셋 다 사람이 코드를 짠 게 아니라, 무엇을 만들지 말로 설명하고 결과를 보면서 고쳐 나갔어요. 처음 해보는 사람도 그대로 따라 할 수 있게 준비물, 연결 순서, 프롬프트 전문을 정리했어요.
코드는 Claude가 쓰고, 나는 "무엇을 만들지"와 "어디가 이상한지"만 말해요
이렇게 작동해요
Claude Code는 내 컴퓨터에서 파일을 만들고 프로그램을 실행할 수 있는 Claude예요. 게임을 한 문단으로 설명하면 코드를 짜고, 3D 모델은 Blender 스크립트로, 텍스처는 이미지 생성으로 만들고, 직접 실행해서 화면을 확인하며 고쳐요. 로블록스는 스튜디오에 들어 있는 MCP 연결 기능으로 Claude가 스튜디오를 직접 조작해요. 나는 해보고 "점프가 너무 낮아"처럼 말만 하면 돼요.
처음이면 A부터 — 결과를 바로 브라우저에서 볼 수 있어요
설치 없이 링크로 친구에게 보여주고 싶은 사람
친구들과 같이 할 게임, 바로 공개하고 싶은 사람
전투·보스 연출까지 욕심나는 사람
브라우저에서 바로 돌아가는 3D 액션 게임을 처음부터 만들어줘.
[게임 한 문단]
주인공이 (도시 / 숲 / 우주 정거장) 위를 (거미줄로 날아다니며 / 제트팩으로 날며 / 파쿠르로 뛰어다니며) 목표 지점까지 가는 3인칭 게임이야. 조작은 WASD 이동, 스페이스 점프, 마우스 시점, 왼쪽 클릭 (스윙/대시). 분위기는 (맑은 오후의 대도시 / 비 오는 밤 네온).
[기술]
- Vite + Three.js(WebGL2)로 만들고, npm run dev로 바로 실행되게 해줘.
- 도시·지형은 절차적으로 생성해서 넓게. 건물 수천 개도 끊기지 않게 최적화(인스턴싱, LOD).
- 캐릭터·소품 모델은 Blender Python 스크립트로 만들어서 glTF로 내보내고, 텍스처·간판 이미지는 이미지 생성으로.
- 그림자, 블룸, 모션 블러, 낮/밤 프리셋을 넣어 실제 게임처럼 보이게.
- 화면에 미니맵, 조작 안내(H키) 넣기.
[진행 방식]
1) 먼저 계획(파일 구조, 단계)을 짧게 보여주고 바로 시작해.
2) 단계마다 실행해서 스크린샷으로 스스로 확인하고, 이상하면 고쳐.
3) 완성되면 내가 직접 해볼 수 있게 실행 방법을 알려줘.다크소울 느낌의 3인칭 액션 RPG 데모를 만들어줘. 브라우저에서 돌아가게 Vite + Three.js로.
[게임 한 문단]
기사 한 명이 무너진 성(이름: 재의 관문)을 올라가며 지역 3곳을 지나고, 마지막에 대검을 든 보스와 싸우는 15분짜리 데모야.
[꼭 넣을 것]
- 타이틀 화면(새 게임 / 조작법 / 종료)
- 이동·구르기·약공격·강공격·방패 막기, 스태미나 바와 체력 바
- 지역에 들어가면 화면 가운데 지역 이름 표시 (예: 바깥 성곽)
- 회복 약병, 쉼터(모닥불)에서 부활
- 보스: 이름과 체력 바가 화면 아래에, 공격 패턴 3가지, 체력 절반에서 2페이즈
- 보스를 이기면 "보스 처치" 문구가 금색으로 크게
- 돌 질감, 따뜻한 햇빛, 먼지 파티클로 분위기
[진행 방식]
먼저 전투 하나(이동·공격·보스 1패턴)만 되는 최소 버전을 만들어서 내가 해보게 해줘. 그다음 지역·연출을 하나씩 늘려가.지금 열려 있는 로블록스 스튜디오에 2인 대전 격투 게임을 만들어줘.
[게임 한 문단]
밤의 네온 도시 거리에서 1대1로 싸우는 스매시브라더스 방식 게임이야. 맞을수록 % 피해가 쌓이고, 높을수록 멀리 날아가. 화면 밖으로 날아가면 목숨 1개 감소, 3개 다 잃으면 패배.
[꼭 넣을 것]
- 캐릭터 선택 화면 (내가 만든 오리지널 캐릭터 4명, 이름·기술 설명)
- 카운트다운 3-2-1 → GO!
- 기본 공격, 강공격, 필살기 1개씩. 필살기는 화면이 멈추고 기술 이름이 크게 뜨는 연출
- 화면 아래에 두 캐릭터 얼굴과 % 표시
- 승리 화면 (WINNER! + 결과표)
- 컴퓨터(CPU) 상대 모드
[진행 방식]
Toolbox의 무료 에셋을 써도 돼. 스크립트는 ServerScriptService·StarterPlayer에 나눠서 넣고, 다 만들면 플레이 모드로 직접 테스트해서 오류를 고쳐줘.방금 해봤어. 고칠 점 3개야.
1) (증상) → (원하는 느낌)
2) (증상) → (원하는 느낌)
3) (증상) → (원하는 느낌)
하나씩 고치고, 고칠 때마다 실행해서 스크린샷으로 확인해줘. 다른 부분은 건드리지 마.누르면 바로 복사돼요 · 상황별로 골라 쓰세요
영어로 넣고 싶을 때 — 괄호 부분만 바꾸세요
Build a third-person 3D action game that runs in the browser, from scratch.
Game in one paragraph: the hero (web-swings / jetpacks / parkours) across a (city / forest / space station) to reach goals. Controls: WASD to move, Space to jump, mouse to look, left click to (swing / dash). Mood: (sunny afternoon metropolis / rainy neon night).
Tech: Vite + Three.js (WebGL2), runnable with npm run dev. Procedurally generate a large city/terrain and keep it smooth (instancing, LOD). Build character and prop models with Blender Python scripts exported as glTF; generate textures and billboard art with an image model. Add shadows, bloom, motion blur and day/night presets so it looks like a real game. Add a minimap and an in-game controls panel (H).
Process: show a short plan first, then start. After each step, run it, take screenshots, check them yourself and fix problems. When done, tell me how to run it.방법 A
Make a Dark Souls-style third-person action RPG demo that runs in the browser (Vite + Three.js).
One paragraph: a knight climbs a ruined castle ("The Ashen Gate") through three areas and fights a greatsword boss at the end. About a 15-minute demo.
Must have: title screen (New Game / Controls / Quit); move, roll, light/heavy attack, shield block, stamina and health bars; area name shown center-screen when entering an area; healing flasks and a bonfire checkpoint; boss name + health bar at the bottom, 3 attack patterns, phase 2 at half health; a big gold "VANQUISHED" banner on victory; stone textures, warm sunlight and dust particles.
Process: first build a minimal vertical slice (movement, attacks, one boss pattern) so I can play it, then add areas and polish one at a time.방법 C
Build a 1v1 platform fighter in the Roblox Studio place I have open.
One paragraph: Smash-style fights on a neon city street at night. Damage builds up as %, higher % means you fly farther; get knocked off-screen to lose a stock, lose 3 stocks and you lose.
Must have: character select (4 original characters with names and move descriptions); 3-2-1 countdown then GO!; light attack, heavy attack and one special per character, where the special freezes the screen and shows the move name big; both fighters' portraits and % at the bottom; WINNER! screen with a results table; a vs-CPU mode.
Process: free Toolbox assets are fine. Split scripts between ServerScriptService and StarterPlayer, then test in play mode yourself and fix errors.방법 B
해보고 이렇게 말하세요
Claude 앱만 있어도 5분 맛보기는 돼요
HTML 파일 하나로 바로 할 수 있는 3D 게임을 만들어줘. Three.js를 써서, 하늘에 떠 있는 섬들 사이를 점프해서 별 10개를 모으는 게임이야. 방향키 이동, 스페이스 점프, 남은 별 개수와 타이머를 화면에 표시해줘. 색감은 파스텔, 귀엽게.자주 막히는 부분을 모았어요
네. 원작자들도 코드를 직접 쓰지 않고 말로 지시했어요. 다만 "npm run dev" 같은 실행 명령은 Claude가 알려주는 대로 한 줄 입력해야 해요.
앱은 대화창 안에서 HTML 하나짜리 게임까지 돼요. Claude Code는 내 컴퓨터에서 파일 수백 개, Blender, 로블록스 스튜디오까지 다룰 수 있어서 영상 속 게임 수준은 Claude Code로 만들어요.
Claude Code를 먼저 설치하고 로블록스 스튜디오를 완전히 껐다 켜세요. 그래도 없으면 공식 문서의 JSON 설정이나 명령어 방식으로 연결할 수 있어요.
Claude에게 "브라우저 콘솔 오류를 확인하고 고쳐줘"라고 하세요. 오류 메시지를 복사해서 붙여넣어도 돼요.
내 캐릭터·내 에셋으로 만든 건 괜찮지만, 스파이더맨·애니메이션 캐릭터처럼 남의 캐릭터를 쓴 게임은 공개·판매하면 안 돼요.
처음엔 "최소 버전"부터. 움직이고 공격하는 것만 되게 만든 뒤 하나씩 붙이세요.
게임 스크린샷 같은 참고 이미지를 주면 분위기가 훨씬 정확해져요.
"단계마다 실행해서 스크린샷으로 확인해"를 꼭 넣으세요. Claude가 스스로 오류를 찾아 고쳐요.
잘 될 때마다 "커밋해줘"로 저장해 두면 실험이 무섭지 않아요.
처음 보는 단어가 있다면
릴스에 나온 영상과 글의 원본이에요
노래 한 곡 + 프롬프트 하나로 Claude가 뮤직비디오를 끝까지 — 3가지 방법과 실제 프롬프트 전문
한 문장 쇼릴 프롬프트 + 평범하게 안 나오는 4단계 (레퍼런스 · Remotion · 21st.dev · 스토리보드)
펜으로 가리키면 실사가 2D 만화로 — 영상 프롬프트 · Claude + 애프터이펙트
얼굴 기준 시트 → 같은 얼굴로 새 장소 → 영상으로 꾸준히
사진 한 장·단어 하나로 광고컷, 퍼스널컬러, 수채화, 3D 지도까지
보고서·메일·회의·엑셀·기획·커리어 복붙 프롬프트