바이브코딩으로 3D 메타버스 웹사이트 만들기

요즘 3D 공간을 걸어 다니는 웹사이트가 많이 보이죠. 이런 사이트는 개발을 몰라도 프롬프트 한 번으로 만들 수 있어요. 아래 프롬프트 5개는 저희가 Claude Code에 그대로 붙여넣어서 실제로 만든 결과예요. 사진도 전부 그 결과 화면이에요.

이런 사이트는 어떻게 만들어지나요

프롬프트를 붙여넣기 전에, 이 사이트가 무엇으로 이루어져 있는지 먼저 보면 결과를 고칠 때 훨씬 쉬워요. 화제가 된 온라인 절 사이트를 리버스 엔지니어링 도구(REA)로 뜯어 보고, 저희 데모와 나란히 정리했어요.

부품	저희 데모	원본 사이트
3D 그리기	three.js	three.js
3D 모델	기본 도형 조합	모델 파일(glb)
걷기·카메라	직접 작성	직접 작성
소리	Web Audio 합성	음원(mp3)
빌드	필요 없음	Vite
함께 있기	실시간 서버(추가 프롬프트)	실시간 서버

• three.js: 브라우저 안에 3D 공간을 그리는 도구예요
• 기본 도형 조합 vs 모델 파일: 저희 데모는 상자·원기둥·구를 쌓아 건물과 캐릭터를 만들어서 파일이 필요 없어요. 원본은 3D 프로그램으로 만든 모델 파일을 압축해 불러와서 더 정교해요
• 빌드(Vite): 코드 파일이 많을 때 하나로 묶는 도구예요. 파일 하나짜리에는 필요 없어요
• 함께 있기: 다른 사람이 같은 공간에 보이려면 서로의 위치를 계속 주고받아야 해요. 원본처럼 Cloudflare Workers에 실시간 서버(Durable Objects + WebSocket)를 두면 돼요. 아래 「원본처럼 여러 명이 함께 걷게 하기」에 프롬프트가 있어요

핵심은 three.js 하나예요. 나머지는 그 위에 "무엇을 그리고, 어떻게 움직이고, 어떤 소리를 낼지"를 얹는 일이고, 이걸 AI에게 말로 시키는 거예요.

개발 순서

AI도 사람도 이 순서로 쌓아요. 결과가 이상하면 어느 단계에서 틀어졌는지 보고, 그 단계만 다시 시키면 돼요.

1. 공간 — 바닥·하늘·조명을 깔아요. 해 질 녘인지 밤인지가 여기서 정해져요
2. 캐릭터와 조작 — 내 캐릭터를 세우고 키보드·조이스틱으로 움직이게 해요
3. 카메라 — 캐릭터 뒤에서 부드럽게 따라오게 해요. 화면이 어지러우면 이 단계 문제예요
4. 장소 꾸미기 — 건물·소품을 놓고, 통과하지 못하게 막아요
5. 동작 버튼 — 앉기·기도하기·춤추기처럼 특정 위치에서 뜨는 버튼을 붙여요
6. 소리 — 배경음과 효과음을 붙여요
7. 휴대폰 맞춤 — 세로 화면·조이스틱·성능을 맞춰요
8. 함께 걷기 — 실시간 서버를 붙여 다른 사람의 위치를 주고받아요
9. 인터넷에 올리기 — 링크 하나로 누구나 들어오게 해요

아래 프롬프트의 앞부분(공통 규칙)이 1~3·6·7단계를, [장소: …] 부분이 4·5단계를 맡아요.

시작하기 전에

프롬프트, 언제 어디에 붙여넣나요

• 어디에 — Claude Code(또는 Cursor 같은 코딩 에이전트) 채팅창이에요. 바탕화면에 빈 폴더를 하나 만들고, 그 폴더를 연 채로 붙여넣어요. AI가 그 폴더에 index.html 파일을 직접 만들어야 해서, 파일을 만들 수 없는 ChatGPT 웹 채팅창에서는 안 돼요
• 언제 — 빈 폴더를 연 직후, 첫 메시지로 붙여넣어요. 한 폴더에 장소 하나예요
• 순서 — 아래 5개 중 하나를 골라 붙여넣기 → 완성될 때까지 기다리기 → 폴더에 생긴 index.html을 더블클릭해서 브라우저로 열기 → 마음에 안 드는 곳을 같은 채팅창에 말로 고치기

3D 모델 파일이나 음원 파일은 따로 구할 필요가 없어요. 프롬프트에 "기본 도형을 조합해서 직접 만들어줘", "소리는 직접 합성해줘"를 넣어 두었기 때문에, 파일 하나만으로 건물·캐릭터·배경음까지 다 만들어져요.

장소별 프롬프트

다섯 개 모두 앞부분(걸어 다니기·조작·소리 같은 공통 규칙)은 같고, 뒤의 [장소: …] 부분만 달라요.

① 산속의 절

index.html 파일 하나로 걸어 다닐 수 있는 3D 웹사이트를 만들어줘.

- three.js를 CDN(importmap)으로 불러와서, 설치 없이 브라우저에서 파일만 열면 바로 되게 해줘.
- 3D 모델은 외부 파일을 쓰지 말고 three.js 기본 도형(상자·원기둥·구·원뿔 등)을 조합해서 직접 만들어줘. 너무 정교하지 않아도 되지만, 한눈에 무엇인지 알아볼 수 있게.
- 내 캐릭터가 있고 3인칭 시점으로 걸어 다녀. PC는 WASD·방향키, 휴대폰은 화면 왼쪽 아래 조이스틱. 카메라는 캐릭터 뒤에서 부드럽게 따라와. 걸을 때 팔다리가 흔들리게.
- 장소 밖으로 못 나가게 경계를 두고, 건물·큰 물체는 통과하지 못하게 해줘.
- 배경음은 음원 파일 없이 Web Audio로 직접 합성해줘. 첫 클릭·터치 때 재생을 시작하고, 오른쪽 위에 소리 켜기/끄기 버튼.
- 화면 위쪽 가운데에 장소 이름을 작게 띄워줘.
- 휴대폰 세로 화면에서도 잘 보이고 부드럽게 돌아가게(그림자·조명은 적당히).

[장소: 산속의 절]
- 기와지붕을 얹은 법당, 돌계단, 석등, 소나무 숲, 멀리 겹겹이 보이는 산과 옅은 안개. 해 질 녘 따뜻한 빛.
- 내 캐릭터는 동자승(동그란 머리, 회색 승복).
- 법당 안 불상 앞 방석 근처에 가면 '앉기' 버튼이 떠. 누르면 방석에 앉아 합장하고, 목탁 소리가 일정한 박자로 울려. 다시 누르면 일어나.
- 배경음: 낮은 바람 소리와 가끔 울리는 풍경(처마 끝 종) 소리.

② 언덕 위 작은 예배당

index.html 파일 하나로 걸어 다닐 수 있는 3D 웹사이트를 만들어줘.

- three.js를 CDN(importmap)으로 불러와서, 설치 없이 브라우저에서 파일만 열면 바로 되게 해줘.
- 3D 모델은 외부 파일을 쓰지 말고 three.js 기본 도형(상자·원기둥·구·원뿔 등)을 조합해서 직접 만들어줘. 너무 정교하지 않아도 되지만, 한눈에 무엇인지 알아볼 수 있게.
- 내 캐릭터가 있고 3인칭 시점으로 걸어 다녀. PC는 WASD·방향키, 휴대폰은 화면 왼쪽 아래 조이스틱. 카메라는 캐릭터 뒤에서 부드럽게 따라와. 걸을 때 팔다리가 흔들리게.
- 장소 밖으로 못 나가게 경계를 두고, 건물·큰 물체는 통과하지 못하게 해줘.
- 배경음은 음원 파일 없이 Web Audio로 직접 합성해줘. 첫 클릭·터치 때 재생을 시작하고, 오른쪽 위에 소리 켜기/끄기 버튼.
- 화면 위쪽 가운데에 장소 이름을 작게 띄워줘.
- 휴대폰 세로 화면에서도 잘 보이고 부드럽게 돌아가게(그림자·조명은 적당히).

[장소: 언덕 위 작은 예배당]
- 하얀 벽과 뾰족한 종탑의 예배당, 안에는 긴 나무 의자 여러 줄, 강대상과 십자가, 촛불, 스테인드글라스 창으로 들어오는 색색의 빛. 밖은 잔디밭과 나무, 맑은 오후 하늘.
- 내 캐릭터는 단정한 옷차림의 사람.
- 강대상 앞에 가면 '기도하기' 버튼이 떠. 누르면 무릎 꿇고 손을 모으고, 다시 누르면 일어나.
- 배경음: 잔잔하게 이어지는 오르간 화음, 가끔 멀리서 울리는 종소리.

③ 해 질 녘 바닷가

index.html 파일 하나로 걸어 다닐 수 있는 3D 웹사이트를 만들어줘.

- three.js를 CDN(importmap)으로 불러와서, 설치 없이 브라우저에서 파일만 열면 바로 되게 해줘.
- 3D 모델은 외부 파일을 쓰지 말고 three.js 기본 도형(상자·원기둥·구·원뿔 등)을 조합해서 직접 만들어줘. 너무 정교하지 않아도 되지만, 한눈에 무엇인지 알아볼 수 있게.
- 내 캐릭터가 있고 3인칭 시점으로 걸어 다녀. PC는 WASD·방향키, 휴대폰은 화면 왼쪽 아래 조이스틱. 카메라는 캐릭터 뒤에서 부드럽게 따라와. 걸을 때 팔다리가 흔들리게.
- 장소 밖으로 못 나가게 경계를 두고, 건물·큰 물체는 통과하지 못하게 해줘.
- 배경음은 음원 파일 없이 Web Audio로 직접 합성해줘. 첫 클릭·터치 때 재생을 시작하고, 오른쪽 위에 소리 켜기/끄기 버튼.
- 화면 위쪽 가운데에 장소 이름을 작게 띄워줘.
- 휴대폰 세로 화면에서도 잘 보이고 부드럽게 돌아가게(그림자·조명은 적당히).

[장소: 해 질 녘 바닷가]
- 모래사장, 계속 출렁이는 파도(물결이 움직이는 바다), 야자수, 파라솔과 비치체어, 멀리 등대. 하늘은 주황·분홍 노을, 수평선에 지는 해.
- 내 캐릭터는 반바지와 티셔츠 차림의 사람.
- 비치체어 근처에 가면 '눕기' 버튼이 떠. 누르면 의자에 누워 노을을 바라보는 시점으로 카메라가 바뀌고, 다시 누르면 일어나.
- 배경음: 밀려왔다 빠지는 파도 소리, 가끔 갈매기 소리.

④ 밤의 클럽

index.html 파일 하나로 걸어 다닐 수 있는 3D 웹사이트를 만들어줘.

- three.js를 CDN(importmap)으로 불러와서, 설치 없이 브라우저에서 파일만 열면 바로 되게 해줘.
- 3D 모델은 외부 파일을 쓰지 말고 three.js 기본 도형(상자·원기둥·구·원뿔 등)을 조합해서 직접 만들어줘. 너무 정교하지 않아도 되지만, 한눈에 무엇인지 알아볼 수 있게.
- 내 캐릭터가 있고 3인칭 시점으로 걸어 다녀. PC는 WASD·방향키, 휴대폰은 화면 왼쪽 아래 조이스틱. 카메라는 캐릭터 뒤에서 부드럽게 따라와. 걸을 때 팔다리가 흔들리게.
- 장소 밖으로 못 나가게 경계를 두고, 건물·큰 물체는 통과하지 못하게 해줘.
- 배경음은 음원 파일 없이 Web Audio로 직접 합성해줘. 첫 클릭·터치 때 재생을 시작하고, 오른쪽 위에 소리 켜기/끄기 버튼.
- 화면 위쪽 가운데에 장소 이름을 작게 띄워줘.
- 휴대폰 세로 화면에서도 잘 보이고 부드럽게 돌아가게(그림자·조명은 적당히).

[장소: 밤의 클럽]
- 어두운 실내, 벽의 네온사인, 천장에서 돌아가는 레이저와 색색 조명, 반짝이는 디스코볼, DJ 부스, 박자에 맞춰 색이 바뀌는 댄스 플로어 바닥 타일.
- 내 캐릭터는 야광 포인트가 있는 옷을 입은 사람. 플로어 위에 같이 춤추는 사람 몇 명.
- 댄스 플로어 위에 서면 '춤추기' 버튼이 떠. 누르면 내 캐릭터가 박자에 맞춰 춤추고, 다시 누르면 멈춰.
- 배경음: Web Audio로 만든 4박자 하우스 비트(킥·하이햇·베이스). 조명과 바닥이 이 박자에 맞춰 움직여.

⑤ 치이카와 동산

index.html 파일 하나로 걸어 다닐 수 있는 3D 웹사이트를 만들어줘.

- three.js를 CDN(importmap)으로 불러와서, 설치 없이 브라우저에서 파일만 열면 바로 되게 해줘.
- 3D 모델은 외부 파일을 쓰지 말고 three.js 기본 도형(상자·원기둥·구·원뿔 등)을 조합해서 직접 만들어줘. 너무 정교하지 않아도 되지만, 한눈에 무엇인지 알아볼 수 있게.
- 내 캐릭터가 있고 3인칭 시점으로 걸어 다녀. PC는 WASD·방향키, 휴대폰은 화면 왼쪽 아래 조이스틱. 카메라는 캐릭터 뒤에서 부드럽게 따라와. 걸을 때 팔다리가 흔들리게.
- 장소 밖으로 못 나가게 경계를 두고, 건물·큰 물체는 통과하지 못하게 해줘.
- 배경음은 음원 파일 없이 Web Audio로 직접 합성해줘. 첫 클릭·터치 때 재생을 시작하고, 오른쪽 위에 소리 켜기/끄기 버튼.
- 화면 위쪽 가운데에 장소 이름을 작게 띄워줘.
- 휴대폰 세로 화면에서도 잘 보이고 부드럽게 돌아가게(그림자·조명은 적당히).

[장소: 치이카와 동산]
- 치이카와처럼 작고 동글동글한 귀여운 캐릭터들이 사는 파스텔톤 동산. 초록 언덕, 꽃밭, 버섯, 작은 오두막, 무지개, 뭉게구름.
- 내 캐릭터는 하얗고 동그란 몸에 작은 귀, 볼이 발그레한 캐릭터.
- 다른 귀여운 친구 캐릭터 몇 명이 돌아다니다가 가끔 통통 튀어. 가까이 가면 머리 위에 말풍선으로 인사해.
- 배경음: 오르골 같은 짧고 귀여운 멜로디 반복.

원본처럼 여러 명이 함께 걷게 하기

혼자 걷는 공간이 완성됐으면, 원본 온라인 절처럼 실시간 서버를 붙여 여러 명이 함께 걸어 다니게 할 수 있어요. 서버를 올리면 친구에게 보낼 링크도 같이 생겨요.

준비물

• Cloudflare 무료 계정 — cloudflare.com에서 가입만 해 두면 돼요. 카드 등록은 필요 없어요
• 컴퓨터에 Node.js가 없으면 Claude가 설치부터 안내해요

① 서버판으로 바꾸기 — 같은 채팅창에 이어서

원본 온라인 절 사이트처럼 실시간 서버를 붙여서, 여러 명이 같은 공간을 함께 걸어 다니게 해줘. 인터넷에 올릴 수 있게 준비까지 해줘.

- 서버는 Cloudflare Workers와 Durable Objects로 만들어줘. 무료 플랜에서 돌아가야 하니 SQLite 기반 Durable Object와 WebSocket Hibernation API를 써줘.
- 지금 index.html은 public 폴더로 옮기고, Worker 하나가 화면 파일과 실시간 연결(/ws)을 함께 맡게 해줘.
- 방 하나는 Durable Object 하나야. 한 방에 30명이 차면 다음 방으로 자동으로 보내줘. 주소 끝에 ?room=이름 을 붙이면 그 방으로 들어가게 해줘.
- 다른 사람 캐릭터는 내 캐릭터와 같은 모양에 옷 색만 다르게 하고, 머리 위에 닉네임을 띄워줘. 닉네임은 처음 들어올 때 장소에 어울리게 자동으로 지어줘.
- 위치·바라보는 방향·동작(걷기, 앉기 같은 버튼 동작)을 1초에 10번쯤 보내고, 받는 쪽은 끊기지 않게 부드럽게 따라 움직이게 해줘.
- 누가 나가면 그 캐릭터는 사라지게 해줘. 화면 위쪽에 '지금 N명 함께 있어요'를 띄워줘.
- 서버 연결이 끊기면 몇 초 뒤 자동으로 다시 연결하고, 그동안에도 혼자 걷기는 그대로 되게 해줘.
- 내 컴퓨터에서 먼저 실행해 볼 수 있게 해주고(npx wrangler dev), 브라우저 창 두 개로 서로 보이는지 확인해줘.

저희가 산속의 절에 붙였을 때 6분 27초 걸렸어요. 끝나면 Claude가 내 컴퓨터에서 서버를 띄우고, 브라우저 창 두 개로 서로 보이는지 확인까지 해 줘요.

② 인터넷에 올리기 — ①이 끝난 뒤 같은 채팅창에

이제 인터넷에 올려줘. Cloudflare 계정은 만들어 뒀어. 로그인이 필요하면 브라우저 승인 창을 띄워 주고, 내가 승인하면 이어서 올려줘. 다 올라가면 친구에게 보낼 주소를 알려줘.

브라우저에 Cloudflare 승인 창이 뜨면 로그인하고 Authorize를 누르는 것만 내가 하면 돼요. 올리는 건 10초도 안 걸리고, https://(이름).(내 계정).workers.dev 같은 주소가 나와요. 그 주소를 친구에게 보내면 같은 공간에서 만나요.

무료로 어디까지 되나요

• Cloudflare 무료 플랜은 하루 요청 10만 건까지예요. 실시간으로 주고받는 메시지는 20개가 1건으로 계산돼요
• 한 사람이 쉬지 않고 걸으면 1초에 10번 위치를 보내니까, 모두 합쳐 하루 약 55시간 분량의 걷기가 무료예요. 가만히 있으면 아무것도 보내지 않아서 실제로는 더 넉넉해요
• 한도를 넘으면 그날은 함께 걷기만 멈추고, 다음 날 아침 9시(한국 시간)에 다시 돼요

나만의 장소로 바꾸기

마음에 드는 프롬프트를 하나 골라서 [장소: …] 아래 줄만 바꾸면 다른 공간이 돼요. 무엇이 있는지(건물·소품·배경), 내 캐릭터 모습, 버튼을 누르면 일어나는 일, 배경음 — 이 네 가지만 적으면 돼요.

[장소: 겨울 밤의 캠핑장]
- 눈 덮인 숲속 공터, 텐트 몇 동, 타닥타닥 타는 모닥불, 별이 가득한 밤하늘, 멀리 보이는 산.
- 내 캐릭터는 패딩을 입은 사람.
- 모닥불 근처에 가면 '불 쬐기' 버튼이 떠. 누르면 모닥불 앞에 앉아 손을 내밀고, 다시 누르면 일어나.
- 배경음: 장작 타는 소리와 가끔 부는 바람 소리.

다 만든 뒤에 고치기

결과가 마음에 안 들면 처음부터 다시 하지 말고, 같은 채팅창에 이어서 말로 고쳐요. 예를 들면 이렇게요.

캐릭터가 너무 작아 보여. 1.5배 크게 하고, 카메라를 조금 더 가까이 붙여줘.

낮 버전도 보고 싶어. 오른쪽 위에 낮/밤 바꾸기 버튼을 추가해줘.

휴대폰에서 열었더니 버벅거려. 그림자와 소품 개수를 줄여서 휴대폰에서도 부드럽게 돌아가게 해줘.