브라우저에서 바로 돌아가는 게임을, 말로 만든다
완성하면 생기는 것
링크만 보내면 누구나 즐기는 나만의 브라우저 게임
Claude Pro 이상 구독필수
바이브코딩의 두뇌입니다. 최소 Claude Pro($20/월)면 충분히 시작할 수 있고, 하루에 많이 만들 계획이면 Max 요금제가 한도가 넉넉합니다. 무료 플랜으로도 맛보기는 되지만 금방 한도에 걸립니다.
컴퓨터 (윈도우 또는 맥)필수
사양은 크게 중요하지 않습니다. 인터넷이 되는 노트북이면 충분합니다.
Node.js LTS 버전필수
코드를 실행하는 엔진입니다. nodejs.org에서 'LTS'라고 적힌 안정 버전을 받습니다. 설치는 아래 1단계에서 같이 합니다.
VS Code (비주얼 스튜디오 코드)필수
무료 코드 편집기입니다. 여기에 Claude Code 확장을 깔아서 'AI와 대화하며 코딩'합니다. 마이크로소프트의 Visual Studio(유료 IDE)와는 다른 프로그램이니 이름에 주의하세요.
게임은 결과가 즉시 눈에 보여서 가장 재미있게 배웁니다. 캐릭터가 움직이고 점수가 오르는 걸 보면 멈출 수가 없습니다.
우리는 브라우저에서 돌아가는 게임을 만듭니다. 다운로드도, 앱스토어도 필요 없고, 링크만 보내면 친구가 바로 플레이합니다. 도구는 가볍고 빠른 Vite를 씁니다.
팁
첫 게임은 '점프해서 장애물 피하기'나 '떨어지는 것 받기'처럼 규칙이 한 줄로 설명되는 걸 고르세요. 단순할수록 완성됩니다.
nodejs.org에서 'LTS' 버전을 설치하고, VS Code 터미널에서 아래로 확인합니다.
$node -v$npm -v
v20.18.0 10.8.2
이렇게 나오면 성공
버전 숫자 두 개가 보이면 성공입니다.
오류가 나면?
VS Code 설치 후 확장에서 'Claude Code'를 설치하고 Sign in으로 구독을 연결합니다.
팁
게임 아이디어를 먼저 Claude에게 말하고 '규칙을 더 재밌게 다듬어 줘'라고 하면 좋은 제안을 받습니다.
아래 명령으로 가볍고 빠른 게임 프로젝트를 만듭니다. 안내가 끝나면 다음 단계의 명령을 알려 줍니다.
$npm create vite@latest my-game -- --template vanilla
✔ Scaffolding project in ./my-game... Done. Now run: cd my-game npm install npm run dev
이렇게 나오면 성공
'Scaffolding project in ./my-game...'와 다음에 할 명령이 안내되면 성공입니다.
폴더로 들어가 설치하고 실행합니다. 아래 세 줄을 차례로 입력합니다.
'http://localhost:5173' 주소가 나오면 브라우저로 엽니다(웹사이트 트랙과 포트 번호가 다릅니다). 기본 화면이 보이면 준비 완료입니다. 이 창은 켜둡니다.
$cd my-game$npm install$npm run dev
VITE v6.0.0 ready in 320 ms ➜ Local: http://localhost:5173/
이렇게 나오면 성공
Vite 화면이 뜨면 개발 환경이 완성된 것입니다.
오류가 나면?
Claude에게 게임을 구체적으로 설명합니다. 예: "캔버스(canvas)로 간단한 게임을 만들어줘. 화면 아래에 좌우 화살표로 움직이는 바구니가 있고, 위에서 과일이 떨어져. 받으면 점수 +1, 놓치면 생명 -1, 생명 3개가 0이 되면 게임오버. 점수와 생명을 화면에 표시해줘."
브라우저에서 직접 플레이하며 '과일이 점점 빨라지게', '황금 과일은 +5점', '시작 화면과 다시하기 버튼 추가'처럼 살을 붙입니다.
팁
난이도가 안 맞으면 '너무 쉬워/어려워'라고만 말해도 Claude가 속도와 빈도를 조절해 줍니다.
오류가 나면?
게임은 소리와 연출이 절반입니다. Claude에게 "과일을 받을 때 짧은 '딩' 소리, 놓칠 때 '삑' 소리를 넣고, 점수가 오를 때 숫자가 잠깐 커지는 효과를 줘"라고 하세요.
이어서 시작 음악, 게임오버 화면, 최고 점수 저장(localStorage)까지 부탁하면 어엿한 게임이 됩니다.
팁
효과음 파일이 없어도 됩니다. Claude에게 '코드로 간단한 효과음을 생성해 줘(Web Audio)'라고 하면 파일 없이 소리를 만듭니다.
완성본을 만들고(아래 명령) 그 결과(dist 폴더)를 Vercel이나 Netlify에 올리면 링크가 생깁니다.
배포 방법을 모르면 Claude에게 'dist 폴더를 Vercel에 올리는 법 알려줘'라고 하면 단계별로 안내합니다.
$npm run build
vite v6.0.0 building for production... ✓ built in 1.2s dist/index.html 0.46 kB dist/assets/index.js 8.1 kB
이렇게 나오면 성공
'built in ...'과 dist 폴더 내용이 보이면 빌드 성공입니다.
오류가 나면?
축하합니다. 친구에게 링크로 자랑할 수 있는 게임을 만들었습니다.
다음엔 스테이지, 보스, 랭킹, 모바일 터치 조작까지 같은 방식으로 확장하세요. 만든 게임은 런치패드에 올려 점수 경쟁을 붙여 보세요.
