한 사람이 AI로 사흘 만에 만든 스파이더맨 게임
클로드로 3D 게임 만들기, 한국어 부탁 글 한 번에 줄 쏘아 빌딩 사이를 나는 게임
2026년 10월 29일 올림 · 10월 28일 확인
1단계: 채팅 AI에 이 부탁 글 붙여 넣기
[ ] 한 군데만 바꾸면 돼요. 괄호 안 예시(노을 지는 한강 옆 빌딩 숲)를 지우고 내가 아는 장소를 한 줄로(예: '비 오는 밤 부산 해운대 고층 빌딩 사이'). 저희는 아래 글을 괄호까지 그대로 넣어 돌렸어요.
너는 게임 개발자야. 브라우저에서 바로 하는 '줄 타고 빌딩 사이 날아다니기' 3D 게임을 HTML 파일 한 장으로 만들어 줘. 무대는 아래 [ ] 안 장소이고, 주인공은 손목에서 줄을 쏘는 빨간 옷 영웅 한 명이야. 마우스를 누르고 있으면 가까운 빌딩 벽에 줄이 붙어서 진자처럼 크게 흔들리고, 떼면 그 힘으로 앞으로 날아가. 방향키나 WASD로 방향을 틀고, 스페이스로 뛰어. 카메라는 주인공 뒤 조금 위에서 따라오고, 빠를수록 화면이 살짝 넓어지게 해. 빌딩은 높이가 제각각인 상자 수십 개로 길을 따라 세우고, 바닥엔 도로와 작은 차들이 움직이게. 하늘 위 여기저기 떠 있는 노란 링 10개를 통과하면 점수가 오르고, 화면 위에 점수와 속도를 크게 보여 줘. 처음엔 '시작' 버튼 하나만 보이게 하고, 링을 다 지나면 걸린 시간과 '다시 하기' 버튼을 보여 줘. 3D로 보이게 three.js를 cdnjs 주소에서 불러와 쓰고, 설치·서버 없이 크롬에서 파일을 열면 바로 돌아가게. 화면 속 글자는 한국어로만 써. 코드는 450줄 안쪽으로 쓰고, 답에는 HTML 코드 전체를 처음부터 끝까지 그대로 보여 줘. [노을 지는 한강 옆 빌딩 숲]
순서: 클로드(claude.ai) → 새 채팅 → 아래 부탁 글 붙여 넣기 → [ ] 안을 내 장소로 바꾸기 → 보내기. 답에 조작법 몇 줄과 '<!DOCTYPE html>'로 시작해 '</html>'로 끝나는 긴 코드 한 덩어리가 나오면 성공이에요(저희 답은 약 5분 50초, 코드 349줄 — 오래 걸려도 창을 닫지 마세요). 대화창에 코드 대신 오른쪽에 게임 미리보기 창만 뜨면, 그 창의 '코드' 보기나 복사·내려받기 단추로 코드를 가져오면 돼요(저희는 claude -p로 돌려서 대화창 화면은 직접 확인 못 했어요).
- 이런 분께
- 코딩을 몰라도 내 동네가 무대인 3D 게임을 한번 만들어 보고 싶은 사람(복사·붙여 넣기·파일 저장만 하면 돼요)
- 끝나면 손에 남는 것
- AI에 붙이면 게임이 나오는 부탁 글 + 저희 결과
- 걸리는 시간
- 저희 실험 기준 클로드 답 약 5분 50초(클로드 오퍼스 5.5) · 저장하고 여는 데 2~3분
Claude · ChatGPT · 읽는 데 10분어떻게 했는지, 짧게
준비물: 채팅 AI 계정(클로드는 claude.ai에서 가입, 챗GPT는 chatgpt.com). 저희는 클로드 오퍼스 5.5(유료 모델)를 생각 강도 '중간'으로 claude -p 명령에서 한 번 돌렸어요. 오퍼스 5.5는 유료 요금제에서만 고를 수 있고, 무료 요금제는 소넷·하이쿠를 써요(claude.com/pricing, 2026-10-19 확인). 무료 모델이나 챗GPT에 같은 부탁 글을 넣어도 같은 꼴로 나오는지는 저희가 해 보지 않았어요. 그리고 컴퓨터의 크롬과 메모장(맥은 텍스트 편집기). 휴대폰만으로는 파일 저장이 번거로워 컴퓨터를 권해요. 처음 열 때 인터넷 연결이 필요해요(3D를 그리는 도구 three.js를 인터넷에서 불러와요).
원래 사례: 시카르는 2026년 9월 27일 X에 'Third iteration with Opus 5.5 medium.'(클로드 오퍼스 5.5, 생각 강도 중간으로 고친 세 번째 판)이라며 140초 영상을 올렸어요. 답글에 'I have been using a claude 5x plan for 3 days on this one'(이번 판에 클로드 유료 요금제 Max 5x로 사흘), 'this is just benchmarking of the model, not trying to make a real game'(진짜 게임이 아니라 AI 실력 시험)이라고 적고, 코드와 그림 파일을 깃허브(github.com/xikhar/spiderbench)에 공개했어요. 마블과 상관없는 팬 작품이고 판매·재배포는 안 된대요. 그는 개발용 클로드(클로드 코드)와 유료 Max 5x 요금제, 참고 사진으로 사흘을 들였어요. 이 가이드는 그 방식을 그대로 따라 하는 게 아니라, 채팅창에 한 번 넣는 쉬운 판이에요. 그가 쓴 방법은 아래 4번에 적었고, 클로드 코드를 깔아 보고 싶으면 aikoreaclub.com/packs/claude-install/ 을 보세요.
✓1단계 성공이면 이렇게 나와요(저희가 받은 답 앞부분 그대로)
클로드 오퍼스 5.5 답, 2026-10-28. 이 아래에 HTML 코드 349줄이 이어졌어요.
- **조작법** - **마우스 누르기**: 앞쪽 위에 있는 가장 가까운 빌딩 벽에 줄을 붙이고 끌어당기며 흔들립니다. - **마우스 떼기**: 앞과 위로 힘을 더해 날아갑니다. - **A/D 또는 ←/→**: 방향을 틉니다. 공중에서는 날아가는 방향도 함께 휩니다. - **W/S 또는 ↑/↓**: 달리거나 공중에서 가속하고, 반대로 줄입니다. - **스페이스**: 땅이나 옥상에서 점프합니다.
- 주의: 저희 답 첫 줄은 "hangang-swing.html 파일로 저장했습니다"였는데, 저희는 파일 저장 기능을 끈 채로 돌렸어요. 실제로 저장된 파일은 없었고, 아래 2단계처럼 코드를 직접 복사해 저장해야 해요.
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
