HTML5 게임을 AI 코딩으로 48시간 안에 완성하기: 기획부터 배포까지

게임 개발은 정말 몇 달이 걸릴까

"게임 만들기"라고 하면 엔진 학습부터 몇 달을 잡아야 할 것 같습니다. 하지만 만들려는 게 브라우저에서 도는 간단한 캐주얼 게임이라면 이야기가 다릅니다. Canvas API 하나로 충분하고, 반복적인 보일러플레이트는 AI 코딩 도구가 대신 써줍니다.

여기서는 아이디어부터 배포까지를 48시간으로 잡고, 각 구간에 무엇을 하는지 정리합니다. 실제 소요 시간은 사람마다 다르지만, 어디에 시간을 써야 하는지에 대한 지도로는 쓸 만합니다.

1단계: 게임 컨셉을 스펙으로 바꾸기 (2시간)

AI 도구에서 결과 품질을 가르는 건 프롬프트 길이가 아니라 스펙의 구체성입니다. "점프 게임 만들어줘"는 매번 다른 결과를 내놓지만, 아래처럼 정의하면 결과가 수렴합니다.

• 게임명: Dino Runner
• 장르: 횡스크롤 회피
• 핵심 규칙: 캐릭터는 자동 전진, 클릭/탭으로 점프해 장애물 회피
• 스코어: 생존 시간 × 난이도 배수
• 목표 플레이타임: 1~3분
• 사운드: 없음 (개발 시간 단축)
• 타깃: 모바일 브라우저

이걸 그대로 요청문에 넣습니다.

다음 사양의 HTML5 게임을 만들어줘.
- 게임명: [이름]
- 핵심 규칙: [3줄]
- 캔버스 크기: 800×600
- 조작: [입력 방식]
- 외부 라이브러리 없이 Canvas API만 사용

"외부 라이브러리 없이"를 명시하는 게 중요합니다. 빼면 도구가 임의로 게임 엔진을 끌어와 배포가 복잡해집니다.

2단계: 프로토타입 (8시간)

AI 코딩 도구에 위 스펙을 넣고 게임 루프 뼈대를 받습니다. 이 단계에서 나와야 하는 건 세 가지입니다. Canvas를 포함한 HTML 구조, requestAnimationFrame 기반 루프, 그리고 플레이어·장애물·충돌 판정 객체입니다.

class Player {
  constructor() {
    this.y = 400;
    this.velocityY = 0;
  }
  jump() {
    if (this.y === 400) this.velocityY = -12; // 접지 상태에서만
  }
  update() {
    this.velocityY += 0.5;           // 중력
    this.y += this.velocityY;
    if (this.y > 400) {              // 바닥 보정
      this.y = 400;
      this.velocityY = 0;
    }
  }
}

받은 코드를 그대로 믿지 말고 한 번은 읽어보세요. 위 예시의 velocityY = 0 보정처럼, 빠뜨리면 캐릭터가 바닥에서 떨리는 종류의 누락이 흔합니다.

3단계: 밸런싱 (12시간)

AI가 만든 초안은 "돌아가는 코드"이지 "재미있는 게임"이 아닙니다. 가장 오래 걸리고 사람이 판단해야 하는 구간입니다.

난이도는 시간에 따라 올라가야 합니다.

const difficulty = 1 + (score / 1000) * 0.2; // 1000점마다 20%
obstacle.speed = 8 * difficulty;

시각적 피드백도 체감 품질을 크게 바꿉니다. 이때는 통짜로 요청하지 말고 한 번에 하나씩 붙이세요. "점프할 때 캐릭터 발밑에 작은 원 10개를 0.3초에 걸쳐 페이드아웃하는 파티클을 추가해줘" 정도로 좁히면 기존 코드에 그대로 이식됩니다.

4단계: 모바일 대응과 UI (8시간)

브라우저 게임 트래픽의 대부분은 모바일에서 옵니다.

터치 입력을 반드시 별도로 등록해야 합니다. 모바일 브라우저는 탭을 클릭으로도 전달하지만 300ms 지연이 붙는 경우가 있어, 액션 게임에서는 체감이 확연히 나쁩니다.

canvas.addEventListener('pointerdown', () => player.jump());

pointerdown 하나로 마우스와 터치를 함께 처리할 수 있어 이벤트를 두 번 등록할 필요가 없습니다. 이와 함께 캔버스 크기를 화면에 맞추고, 게임오버 화면과 재시작 버튼을 넣으면 최소한의 완성도가 나옵니다.

5단계: 배포 (6시간)

정적 파일 세 개(index.html, style.css, game.js)면 끝이라 선택지가 많습니다.

• GitHub Pages: 저장소에 올리고 Settings → Pages에서 브랜치만 지정하면 됩니다. 이미 코드가 깃허브에 있다면 가장 빠릅니다.
• Netlify / Vercel: 저장소를 연결하면 푸시할 때마다 자동 배포됩니다. 커스텀 도메인 연결이 쉽습니다.
• itch.io: 게임 전용 플랫폼이라 별도 홍보 없이도 유입이 생깁니다.

배포 전 체크리스트는 짧습니다. 콘솔 에러 0건, 에셋 경로가 상대 경로인지, 실제 휴대폰에서 한 번 플레이, 그리고 공유용 메타 태그입니다.

<meta property="og:title" content="Dino Runner">
<meta property="og:description" content="점프해서 장애물을 피하는 게임">

시간 배분 요약

구간	시간	하는 일
0~2h	2h	컨셉을 스펙으로 확정
2~10h	8h	프로토타입 생성·검토
10~22h	12h	밸런싱, 시각 효과
22~30h	8h	모바일 대응, UI
30~42h	12h	테스트·버그 수정·배포
42~48h	6h	예비 시간

밸런싱에 가장 많은 시간이 잡혀 있는 게 핵심입니다. 코드 생성은 빨라졌지만 "재미있는가"를 판단하는 일은 줄지 않았습니다.

프로그래밍을 몰라도 만들 수 있나요?

코드를 한 줄도 읽지 못하는 상태라면 어렵습니다. AI가 만든 코드에서 버그가 났을 때 어디를 고쳐야 하는지 판단해야 하는데, 그 판단만큼은 대신해주지 않습니다. 다만 JavaScript 기초 문법과 함수·객체 개념 정도만 알아도 충분히 완주할 수 있습니다.

48시간을 연속으로 써야 하나요?

아닙니다. 오히려 나눠 쓰는 편이 낫습니다. 밸런싱 단계는 하루 지나 다시 플레이해보면 문제가 훨씬 잘 보입니다. 주말 이틀 또는 2주간 저녁 시간으로 쪼개는 방식을 권합니다.

게임 엔진을 쓰면 더 빠르지 않나요?

만들려는 게임의 규모에 달렸습니다. 2D 캐주얼 게임 한 편이라면 Canvas API 직접 사용이 배포도 간단하고 로딩도 빠릅니다. 물리 연산이나 타일맵이 본격적으로 필요해지는 시점부터 엔진 도입을 검토하면 됩니다.

만들었으면 남에게 보여주기

혼자 만들고 로컬에 두면 거기서 끝납니다. 게임은 특히 다른 사람이 실제로 플레이해봐야 문제가 드러납니다. 난이도가 생각보다 높았다거나, 조작이 직관적이지 않다거나 하는 것들은 만든 사람 눈에는 잘 안 보입니다.

완성했다면 Vibeollio에 프로젝트 등록해서 공개해보세요. 브라우저에서 바로 플레이할 수 있는 게임은 별도 설치 없이 링크만으로 체험되기 때문에 피드백을 받기 좋습니다. 댓글로 들어오는 반응이 다음 버전의 방향이 됩니다.