Flappy 스타일의 간단한 점프 게임을 HTML 한 파일로 30분 안에 완성합니다. Claude Code에게 “중력이 작동하게 해주세요”, “파이프 사이를 통과하게 해주세요” 같은 한국어 지시만으로 캐릭터·장애물·충돌·게임 오버·점수 저장까지 만들어보고, 마지막으로 만든 게임을 수익으로 연결하는 현실적 경로 네 가지도 짧게 정리했어요. 소요 시간 30분, 난이도 ★★☆, 준비물은 Claude Code와 VS Code 정도. 각 단계 끝에는 “이렇게 보이면 성공”이라는 신호를 붙여서 중간에 막히더라도 돌아가기 쉽게 구성했습니다.
📑 목차
🕹 코딩 못 하는데 내 게임 하나 만들 수 있을까
이런 궁금증은 바이브코딩 도구를 깔아본 분들이 한 번쯤 꼭 겪는 질문 같아요. 투두앱이나 블로그는 “기능이 있는 도구”라 감이 잡히는데, 게임은 뭔가 다른 세계처럼 느껴지거든요. 물리 법칙도 있어야 할 것 같고, 애니메이션도 부드러워야 할 것 같고, 무엇보다 “재미”라는 게 필요할 것 같으니까요.
그런데 막상 해보면 첫 게임은 생각보다 간단합니다. 핵심은 캐릭터 하나와 장애물 몇 개, 그리고 “부딪치면 끝”이라는 규칙만 있으면 충분해요. 나머지는 AI가 상당 부분 알아서 만들어주거든요. 개발자의 일은 “이런 움직임이 필요해요”, “이렇게 보이면 좋겠어요” 정도를 한국어로 전달하는 것에 가까워집니다.
이 글에서는 그 느낌을 확실히 잡을 수 있도록, Flappy Bird 비슷한 1버튼 점프 게임을 30분 안에 완성해봅니다. 코드를 직접 쓰지 않고 Claude Code에게 단계마다 한국어로 요청하는 방식이에요. 완성 시점에는 실제로 돌아가는 웹 게임 파일 하나와 함께, 게임이 “어떻게 만들어지는가”에 대한 감각이 확실하게 남습니다.
👀 30분 뒤 완성될 점프 게임 모습
완성본은 index.html 한 파일로 구성돼요. 브라우저에서 그 파일을 더블클릭하면 곧바로 실행되고, 별도 서버나 빌드 과정 없이 혼자서 동작합니다. 화면 정중앙에 노란 새 한 마리가 떠 있고, 스페이스바(또는 화면 터치)를 누를 때마다 짧게 위로 튕겨 올라갔다가 다시 천천히 아래로 내려와요. 오른쪽에서는 초록색 파이프가 일정한 간격으로 다가오는데, 그 사이 빈틈으로 통과시키면 점수 1점이 올라갑니다.
파이프에 부딪히거나 땅에 닿으면 “게임 오버” 화면이 뜨고, 재시작 버튼 하나로 다시 시작할 수 있어요. 그동안 기록된 최고 점수는 브라우저 localStorage에 저장되기 때문에 창을 닫았다 다시 열어도 그대로 남습니다. 조작이 1버튼이라서 모바일 웹에서도 큰 수정 없이 쓸 수 있고, 이 구조만 잡히면 캐릭터 모양이나 장애물 종류만 바꿔서 전혀 다른 게임으로도 응용이 가능해요.
📐 “혼자서 월 1억”의 실제 모습과 첫 발의 현실
이 주제를 이야기할 때 빠지지 않는 이름이 피터 레벨스입니다. 혼자서 웹 제품을 만들어 연간 수십억 원 규모의 매출을 내는 것으로 잘 알려져 있고, 간단한 게임·챗봇·사이드 서비스로도 수익을 내는 사례를 공개적으로 보여주는 사람이에요. “비전공자도 가능하냐”는 질문에 영감이 되는 선례인 건 분명합니다.
다만 한 가지는 분명히 해두는 게 좋아요. 피터 레벨스는 20년 가까이 스스로 제품을 만들어온 실험가이고, 공개된 수익 대부분은 여러 제품의 조합과 긴 운영 시간의 결과라는 점입니다. 이 글을 따라 게임 하나를 만든다고 곧바로 월 1억이 자동으로 들어오는 건 당연히 아니에요. 그건 과장이고, 시작부터 기대치가 엇나가면 두 번째 글에서 바로 포기하게 됩니다.
현실적인 구도는 이렇습니다. 작은 게임 하나로 당장 큰돈을 벌지는 못하지만, “혼자서 만들어 올리는 경험”이 쌓이면 두 번째·세 번째 작품의 완성도와 속도가 분명히 달라져요. 피터 레벨스가 보여준 건 “개발팀 없이도 혼자서 제품을 완주할 수 있다”는 길이고, 그 길의 첫 발이 오늘 이 글에서 만드는 작은 게임이 되는 거죠. 아래 표는 이 글에서 다룰 Flappy 스타일과 흔히 함께 거론되는 장르들을 비교한 결과입니다.
| 장르 | 제작 난이도 | 30분 완성 가능성 | 수익화 적합도 | 특징 |
|---|---|---|---|---|
| Flappy 스타일 점프 | ★★☆ | ◎ | ★★★ | 조작 1개, 중독성, 광고·인앱 궁합 좋음 |
| Snake(뱀) | ★★☆ | ◎ | ★★☆ | 고전 감성, 교육용·학습 예제로 자주 쓰임 |
| 메모리 카드 매칭 | ★☆☆ | ◎ | ★☆☆ | 첫 프로젝트로 좋지만 재플레이 동기 약함 |
| 클리커·방치형 | ★★☆ | △ | ★★★ | 중독성·수익화 강점, 밸런싱이 까다로움 |
📦 시작 전 체크할 세 가지
본격적으로 들어가기 전에 아래 세 가지가 준비돼 있으면 “30분”이라는 시간이 현실적으로 맞아 떨어져요. 이미 다 깔려 있으면 곧장 다음 섹션으로 내려가셔도 됩니다.
🤖 AI 코딩 도구 하나
이 글은 Claude Code를 기본으로 가정하고 썼어요. 설치와 로그인이 완료돼 있어야 합니다. 아직 준비 전이라면 Claude Code 설치부터 첫 코딩까지 가이드를 먼저 한 번 훑고 오시는 게 편해요. Cursor나 GitHub Copilot으로도 같은 흐름이 가능하지만, 본문의 프롬프트 예시는 Claude Code의 대화형 세션을 기준으로 합니다.
📝 VS Code
코드 파일을 열고 편집할 에디터예요. 내장 터미널에서 바로 claude 명령을 실행할 수 있어서 흐름이 끊기지 않거든요. 설치 전이라면 먼저 바이브코딩용 VS Code 설정 가이드를 끝내주세요.
🌐 일반 웹 브라우저
Chrome, Edge, Firefox, Safari 어느 것이어도 괜찮습니다. index.html을 더블클릭했을 때 기본으로 열리는 브라우저가 있으면 그걸로 충분해요. 특정 브라우저에서만 되는 기능은 이 글에서 쓰지 않습니다.
🧑💻 바이브코딩 게임 만들기 — 30분 5단계
지금부터는 순서대로 따라오시면 됩니다. 각 단계에 소요 시간과 “이 신호가 나오면 넘어가기” 기준이 붙어 있어요. 신호가 맞지 않는 채로 진도를 빼면 뒤에서 원인을 찾기가 훨씬 까다로워지니, 단계 중간에 조급해지지 않으셔도 됩니다.
🎨 단계 1. 캔버스 무대 준비하기 (3분)
모든 게임은 “그림을 그릴 바닥”이 먼저 있어야 해요. 브라우저에서 게임 화면을 만들 때 쓰는 그 바닥이 HTML의 <canvas> 요소입니다. VS Code에서 game-app 같은 새 폴더를 만들고 그 안에 index.html을 하나 생성한 다음 아래 내용을 넣어 저장해주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>내 첫 게임</title>
</head>
<body style="text-align:center;">
<h1>내 첫 게임</h1>
<canvas id="game" width="400" height="560"></canvas>
</body>
</html>브라우저에서 이 파일을 열었을 때 제목과 빈 사각형 영역(바깥 테두리는 보이지 않을 수 있어요)이 잡히면 첫 단계는 끝입니다. 참고로 400×560 크기는 세로로 긴 모바일 느낌 비율이라 점프 게임에 잘 맞아요.
🪶 단계 2. 캐릭터와 중력, 점프 넣기 (7분)
이 단계가 초보자분들이 가장 먼저 “오~ 뭔가 되네”라고 느끼는 구간이에요. VS Code 터미널에서 claude 세션을 시작한 뒤 아래 프롬프트를 보내주세요.
index.html의 canvas(id=”game”) 안에 Flappy Bird 스타일의 게임 기본을 만들어주세요. 노란 원 모양 캐릭터 한 마리가 화면 중앙 왼쪽에 떠 있고, 매 프레임마다 중력 때문에 서서히 아래로 떨어집니다. 스페이스바를 누르면 순간적으로 위로 튕겨 올라가도록 해주세요. 캐릭터가 canvas 바닥에 닿으면 일단 멈추도록 합니다. CSS와 JavaScript는 모두 같은 index.html 파일 안에 둬주세요.
Claude가 파일 변경을 제안하면 승인해주세요. 브라우저에서 새로고침했을 때 캐릭터가 천천히 내려가다가 스페이스바 타이밍마다 위로 튕겨 오르면 중력과 점프가 제대로 붙은 겁니다.
🟢 단계 3. 파이프 장애물 등장시키기 (8분)
이제 장애물을 붙일 차례입니다. Flappy 스타일의 핵심은 “위아래로 짝을 이룬 파이프 사이의 빈틈을 정확히 통과하는 것”이에요. 아래 프롬프트로 한 번에 요청합니다.
게임 화면 오른쪽에서 왼쪽으로 일정한 속도로 이동하는 초록색 파이프 쌍(위·아래)을 만들어주세요. 두 파이프 사이에는 캐릭터가 지나갈 수 있는 빈틈이 랜덤한 높이로 열리고, 약 1.5~2초 간격으로 새 파이프 쌍이 계속 등장합니다. 화면 왼쪽 밖으로 나간 파이프는 제거해서 메모리가 무한정 쌓이지 않도록 해주세요.
브라우저를 새로고침한 뒤 파이프가 오른쪽에서 스르륵 들어오고 왼쪽으로 빠져나가는 모습이 반복되면 이 단계는 마무리된 상태입니다. 아직 충돌 처리는 없으니 캐릭터가 파이프를 통과하든 겹치든 둘 다 그냥 지나가도 정상이에요.
💥 단계 4. 충돌 감지와 게임 오버 (7분)
게임다운 긴장감은 이 단계에서 생깁니다. 캐릭터가 파이프나 바닥에 닿는 순간을 감지해서 멈춰 세우고, 사용자에게 다시 시작할 수 있는 방법을 보여주는 게 목표예요.
캐릭터가 파이프 또는 canvas 바닥·천장과 겹치는 순간 게임을 즉시 멈춰주세요. 화면 가운데에 “Game Over”라는 큰 글자와 그 아래에 “다시 시작” 버튼을 표시합니다. 버튼을 클릭하거나 스페이스바를 다시 누르면 캐릭터와 파이프 상태를 초기화하고 새 게임이 시작되도록 해주세요.
충돌 판정이 눈에 보이는 위치보다 조금 넉넉하게 잡히는 경우가 많아요. 너무 예민하게 터지면 “방금 분명히 안 닿았는데”라는 불만이 나오니까, 판정 박스가 실제 캐릭터보다 살짝 작아도 괜찮다는 얘기를 Claude에게 한 번 더 해도 좋습니다. 여기까지 오시면 게임의 절반 이상은 완성된 상태예요.
💾 단계 5. 점수와 최고 기록 저장하기 (5분)
마지막은 성취감을 누적시키는 장치를 다는 단계입니다. 점수와 최고 기록이 없으면 플레이어가 다시 시작할 이유가 빠르게 사라지거든요.
파이프 한 쌍을 완전히 통과할 때마다 점수를 1씩 올려 화면 상단 중앙에 크게 표시해주세요. 게임 오버 시점의 점수를 “best_score” 키 이름으로 브라우저 localStorage에 저장하고, 기존 최고 기록보다 높을 때만 갱신합니다. 메인 화면에는 현재 점수와 함께 “🏆 최고: N” 형태로 최고 기록을 작게 표시해주세요.
Claude의 수정을 승인한 뒤 게임을 몇 번 플레이해 최고 기록이 늘어나는지 확인합니다. 게임 오버 후 새로고침하거나 창을 완전히 닫았다가 다시 열어도 “🏆 최고” 숫자가 그대로 남아 있다면 다섯 번째 단계까지 끝난 겁니다. 축하드려요. 웹에서 돌아가는 나만의 작은 게임이 이제 손에 하나 생겼습니다.
✅ 제대로 돌아가는지 확인하는 다섯 가지
완성된 게임이 의도대로 움직이는지 아래 다섯 가지를 차례로 훑어봐 주세요. 하나라도 어긋나면 다음 섹션의 진단 가이드를 참고하시면 됩니다.
- 아무 키도 누르지 않으면 캐릭터가 천천히 아래로 떨어진다.
- 스페이스바를 누를 때마다 캐릭터가 짧게 위로 튕긴다.
- 파이프가 오른쪽에서 일정한 간격으로 등장해 왼쪽으로 흘러간다.
- 파이프·바닥·천장에 닿으면 즉시 게임이 멈추고 “Game Over”와 재시작 버튼이 보인다.
- 파이프를 통과할 때마다 점수가 1씩 오르고, 종료 후 새로고침해도 최고 기록이 남는다.
🧩 비전공자가 게임에서 자주 멈추는 세 가지 상황
같은 흐름으로 게임을 만들어본 분들이 실제로 제일 자주 멈춰 선 지점만 추려봤습니다. 증상이 비슷하다면 해당 해결법부터 시도해보세요.
| 증상 | 가장 흔한 원인 | 해결 |
|---|---|---|
| 캐릭터가 아예 보이지 않음 | canvas 영역 바깥에 그려지고 있거나, 그리기 함수가 호출되지 않음 | “캐릭터 초기 좌표를 canvas 중앙(200, 280)으로 고정해주세요”라고 Claude에 재요청 |
| 화면이 깜빡이거나 캐릭터가 잔상으로 남음 | 매 프레임 시작 시 canvas를 지우는 코드가 빠졌음 | “매 프레임 시작에 clearRect로 canvas 전체를 지우는 부분이 있는지 확인해주세요” |
| 충돌이 이상하게 일찍/늦게 터짐 | 판정 박스 크기가 실제 그림과 크게 어긋남 | “충돌 판정 박스를 실제 캐릭터 이미지보다 가로·세로 4px씩 작게 잡아주세요” |
🕳 캐릭터가 아예 보이지 않아요
경험상 이 증상의 대부분은 캐릭터 좌표가 canvas 영역 바깥에 찍혀 있거나, 그리기 함수가 매 프레임마다 실행되지 않아서 생깁니다. Claude에 “캐릭터의 현재 x, y 좌표값을 콘솔로 출력해주세요”라고 요청해 좌표부터 확인해보세요. 좌표가 0 근처에 박혀 있다면 초기 위치를 canvas 중앙으로 명시적으로 옮기는 수정을 부탁하면 해결됩니다.
🌀 화면이 깜빡거리거나 캐릭터 잔상이 남아요
매 프레임을 새로 그리기 전에 이전 프레임을 지워주는 clearRect 호출이 빠지거나 꼬인 경우입니다. Claude에 “매 프레임 시작 시점에 canvas 전체를 clearRect로 지우는 코드가 있는지 확인하고, 없으면 추가해주세요”라고 요청하면 바로 고쳐져요. 잔상은 처음 게임을 만들 때 거의 한 번씩은 경험하는 단계라고 생각하시면 마음이 편합니다.
💢 충돌이 너무 예민하거나 너무 느슨해요
“분명히 안 닿았는데 게임 오버가 터졌다”거나 반대로 “파이프를 뚫고 지나갔는데 멀쩡하다”는 증상은 판정 박스 크기가 실제 그림과 어긋났기 때문이에요. Claude에 “충돌 판정 박스를 캐릭터 실제 그림보다 가로·세로 4픽셀씩 작게 잡고, 파이프는 정확히 그림 크기와 같게 해주세요”처럼 구체적인 숫자까지 포함해 요청하면 대체로 원하는 느낌이 나옵니다.
💰 만든 게임을 돈으로 연결하는 네 가지 경로
지금 만든 게임 하나로 곧바로 월 1억이 들어오지는 않는다는 건 앞에서 이야기한 대로입니다. 그래도 “이런 식으로 돈과 연결될 수 있구나” 정도의 지도를 그려두면, 다음 작품을 설계할 때 선택지가 훨씬 구체적으로 보여요. 아래 표는 비전공자가 현실적으로 시도해볼 만한 네 가지 경로를 진입 난이도·시간 투자·수익 규모 관점에서 정리한 결과입니다.
| 경로 | 진입 난이도 | 시간 투자 | 현실적 수익 범위 | 핵심 전제 |
|---|---|---|---|---|
| 광고 노출 (AdSense·AdMob) | 낮음 | 적음 | 월 $10~$100 내외에서 시작 | 일일 방문자·플레이 수 확보 |
| 인앱 결제 (스킨·아이템·난이도) | 중간 | 중간 | 월 $100~$1,000+ | 재플레이 동기와 결제 흐름 설계 |
| 프리미엄 판매 (itch.io 등) | 중간 | 적음 | 월 수만 원~수십만 원 | 무료 체험·유료 본편 구분 |
| 스폰서십·파트너십 | 높음 | 높음 | 변동 큼, 건당 수익형 | SNS·커뮤니티 노출력 |
처음이라면 광고부터 시작해 “내가 만든 게임에 광고가 붙었고, 누군가가 실제로 플레이했다”는 경험을 한 번 얻는 걸 권합니다. 그 이후에 인앱 결제나 프리미엄 판매로 확장하는 흐름이 자연스럽습니다. 각 경로의 실제 설정·운영 방법은 바이브코딩으로 만든 앱으로 돈 버는 5가지 방법에서 이어집니다.
🪜 여기서 어디로 더 갈 수 있나
HTML 파일 하나로 굴러가는 첫 게임이 완성됐습니다. 다음 단계로는 크게 세 갈래가 열려 있어요.
🚀 웹에 배포해 URL로 공유하기
지금 만든 게임은 내 컴퓨터에서만 열려요. Vercel 무료 플랜에 올리면 URL 하나로 친구든 트위터 팔로워든 누구에게나 바로 공유할 수 있습니다. 절차는 바이브코딩 Vercel 무료 배포 가이드에서 이어집니다.
📱 모바일 친화적으로 다듬기
Flappy 스타일은 모바일 웹과 궁합이 좋아요. 화면을 터치하면 점프가 발동되고, 가로·세로 비율을 화면에 맞게 조정하면 앱 느낌이 꽤 납니다. Claude에 “모바일 세로 화면에서도 화면에 꽉 차게 보이도록 반응형 CSS와 터치 이벤트를 추가해주세요”라고 한 번만 요청하면 상당 부분 자동으로 정리됩니다.
🎨 캐릭터와 세계관 바꿔 제2의 게임 만들기
규칙은 그대로 두고 노란 새를 다른 캐릭터로 바꾸거나, 파이프를 우주 장애물·건물 등으로 교체하는 것만으로도 완전히 새로운 게임처럼 보여요. 같은 구조를 한 번 더 반복하는 게 학습 효율에도 좋고, 수익화 관점에서도 “시리즈”를 만들 수 있거든요.
💡 게임 바이브코딩에서 특히 쓸모있는 세 가지 습관
투두앱이나 블로그 만들 때와 게임 만들 때는 AI에게 부탁하는 방식이 조금 달라요. 게임은 “움직임”과 “느낌”이 중요한 영역이라, 아래 세 가지 습관을 미리 들여두면 시행착오가 눈에 띄게 줄어듭니다.
🎞 “프레임 단위”로 움직임을 묘사하기
게임은 매초 60번씩 화면을 새로 그리는 세계라, “빨리 움직인다”는 모호한 요청보다 “한 프레임에 2픽셀씩 왼쪽으로 이동”처럼 구체적인 숫자가 훨씬 정확한 결과를 만들어줍니다. 처음 숫자는 2·5·10 같은 값으로 시도해보고 Claude에게 “이 값을 조금 더 빠르게/느리게 조정해주세요”라고 이어서 요청하면 됩니다.
🪞 요청 전에 “예시 상황” 한 줄 붙이기
“캐릭터가 위아래로 부드럽게 움직여요”보다 “스페이스바를 1초 간격으로 누르면 새가 파도 모양 궤적을 그리며 꾸준히 앞으로 나아가요”처럼 실제 플레이 장면을 상상할 수 있는 문장을 붙이면, AI가 중간값 튜닝을 알아서 해줍니다. 게임은 수치보다 느낌이 중요한 영역이라 이 한 줄이 생각보다 큰 차이를 만들어요.
🧪 매 기능 완성마다 “플레이 테스트 한 판”
코드가 돌아간다고 게임이 재미있는 건 아니에요. 기능 하나 붙일 때마다 실제로 한 판 플레이해보면 “파이프 간격이 너무 짧다”, “점프가 너무 약하다” 같은 감각적인 문제가 즉시 드러납니다. Claude에 수치 조정을 한 줄로 부탁하면 빠르게 반영되니, 이 감각 훈련이 누적되면 다음 게임에서 훨씬 적은 수정으로 완성도가 높아집니다.
| 덜 좋은 요청 | 더 나은 요청 |
|---|---|
| “캐릭터가 빠르게 움직였으면 좋겠어요” | “한 프레임마다 캐릭터가 2픽셀씩 오른쪽으로 이동하게 해주세요. 너무 느리면 3픽셀로 올릴게요.” |
| “게임이 어려웠으면 좋겠어요” | “파이프 사이 빈틈 높이를 현재 120픽셀에서 90픽셀로 줄이고, 등장 간격도 2초에서 1.3초로 단축해주세요.” |
| “충돌이 이상해요” | “캐릭터가 파이프에 스치기만 해도 게임 오버가 터져요. 충돌 판정 박스를 실제 그림보다 가로·세로 4픽셀씩 줄여주세요.” |
게임 말고 다른 첫 작품 후보도 궁금하면 바이브코딩 프로젝트 아이디어 10선을 둘러보세요.
🪧 면책 조항
여기까지 따라오시느라 고생 많으셨어요. 첫 게임이 돌아가는 순간을 확인하셨다면, 같은 흐름을 다른 장르로 한 번 더 복습해보시면 감각이 빠르게 손에 붙습니다.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
🔰 시작하기 전 궁금한 것들
Q. 코딩을 모르는데 정말 30분 안에 완성되나요?
Q. Unity 같은 게임 엔진 없이 정말 가능한가요?
Q. Claude Code와 Cursor 중 어느 게 나을까요?
🛠 실행 중 자주 마주치는 상황
Q. 캐릭터가 화면에 아예 보이지 않아요
Q. 파이프가 계속 안 나타나거나 화면 밖으로 안 사라져요
Q. 화면이 깜빡거리거나 캐릭터 잔상이 남아요
clearRect가 빠지거나 꼬인 상태예요. Claude에 “매 프레임 시작 시 clearRect(0, 0, canvas.width, canvas.height)로 캔버스를 먼저 지우고 모든 요소를 다시 그리도록 해주세요”라고 요청하면 정리됩니다.Q. 충돌이 이상하게 터져요
🚀 확장과 수익화
Q. 모바일에서도 플레이할 수 있나요?
Q. 광고를 붙여 돈을 벌려면 무엇부터 해야 하나요?
Q. 다음엔 어떤 게임을 만들어볼까요?
🔗 관련 글
- 바이브코딩 투두앱 만들기 — 30분이면 비전공자도 완성 (2026)
- Claude Code 설치부터 첫 코딩까지 — 비전공자 가이드
- AI에게 코딩 요청하는 프롬프트 작성법 10가지
- 바이브코딩 Vercel 무료 배포 가이드
- 바이브코딩으로 만든 앱으로 돈 버는 5가지 방법 (발행 예정)
📑 참고 자료
- MDN Web Docs — Canvas API 튜토리얼
- MDN Web Docs — 게임 루프와 게임 구조
- levels.io — 피터 레벨스 개인 사이트·공개 실험 모음
- itch.io — 인디 게임 배포·판매 플랫폼
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
