AI 딸깍으로 게임 만든 방법 2026

최종 업데이트: 2026-10-07

클로드코드(Claude Code)에 프롬프트 5개를 순서대로 보내면 외부 라이브러리 없는 단일 HTML 테트리스가 완성됩니다. 결과물은 125줄 9.8KB 파일 하나이며 7-bag 조각 순서, 벽차기 회전, 고스트, 하드 드롭, 홀드, 레벨 가속, WebAudio 효과음, 모바일 터치 버튼을 포함하고 Playwright 자동 플레이로 4줄 삭제와 모바일 레이아웃까지 검증했습니다. 완성본은 tede.fyi 테트리스에서 바로 플레이할 수 있습니다. 핵심은 게임이 작아서가 아니라 “브라우저에서 확인할 수 있는 단위”로 프롬프트를 나눈 데 있습니다.

이 글은 2026년 10월 7일 필자가 실제로 보낸 프롬프트 원문과 테스트 로그를 그대로 담았습니다. 네이버 블로그에 올린 같은 주제의 원문을 AI 검색용으로 다시 구성한 글입니다.

무엇을 어떻게 만들었나?

항목	내용
도구	클로드코드 (Claude Max 플랜). Codex, Cursor, Gemini CLI 등 파일을 직접 쓰고 테스트를 실행하는 에이전트형 도구면 동일 프롬프트로 가능
프롬프트	5개: 뼈대 → 조작감 → 점수·홀드·소리 → 모바일 → 마무리(배경·테스트 훅)
결과물	index.html 1개, 125줄, 9.8KB, canvas + WebAudio, 외부 라이브러리 0
기능	7-bag, 벽차기(wall kick) 회전, 고스트 조각, 하드 드롭, 홀드, 10줄마다 레벨업·가속, 효과음 3종, 일시정지, 600px 이하 터치 버튼
검증	Playwright 자동 플레이 140회, 4줄 삭제(테트리스) 832점 확인, 390px 뷰포트 가로 스크롤 없음, 콘솔 오류 0
배포	HTML 1개를 워드프레스 uploads 폴더에 복사 (base64 → ssh → docker cp). GitHub Pages도 동일

프롬프트 5개는 무엇이고 왜 이 순서인가?

한 번에 모든 요구를 넣으면 어느 단계에서 틀렸는지 알 수 없습니다. 각 프롬프트가 “브라우저에서 열어 확인 가능한 상태”로 끝나도록 다섯으로 나눴습니다. 아래는 실제 원문입니다.

# 클로드코드에 보낸 프롬프트 5개 (순서대로, 원문)
# 1. 뼈대 (게임이 돌아가는 최소)
브라우저에서 바로 열리는 단일 HTML 테트리스 만들어 줘. 외부 라이브러리 없이 canvas 로.
10x20 판, 7가지 조각, 자동 낙하, 바닥 닿으면 고정, 꽉 찬 줄 삭제, 게임 오버까지.

# 2. 조작감
키보드: ← → 이동, ↑ 회전(벽에 막히면 한 칸 밀어서 회전), ↓ 소프트 드롭, 스페이스 하드 드롭.
떨어질 자리를 반투명으로 보여주는 고스트 조각 추가. 조각 순서는 7종이 한 번씩 다 나오는 7-bag 방식.

# 3. 점수·레벨·홀드·효과음
줄 삭제 점수 100/300/500/800 x 레벨, 10줄마다 레벨업하고 낙하 속도 증가, 다음 조각 미리보기, C 키 홀드.
효과음은 파일 없이 WebAudio 로 짧은 비프 3종(고정·줄삭제·게임오버). P 로 일시정지.

# 4. 모바일
화면 폭 600px 이하면 터치 버튼(← ↻ → H ▼ 하드드롭)을 아래에 보여 줘. 가로 스크롤 생기면 안 돼.

# 5. 마무리
배경에 bg.jpg 를 어둡게 깔고 판은 살짝 비치게. 색은 에스프레소/크림/테라코타.
테스트용으로 window.tetris 에 reset·key·state 훅 노출해 줘. 자동 플레이로 검증할 거야.

1. 뼈대: 외부 라이브러리 없이 canvas로 10×20 판, 7가지 조각, 자동 낙하, 고정, 줄 삭제, 게임 오버. 디자인 요구는 넣지 않습니다.
2. 조작감: 키 4개, 벽에 막히면 한 칸 밀어 회전하는 벽차기, 떨어질 자리를 반투명으로 보여주는 고스트, 7종이 한 번씩 나오는 7-bag. 이 네 가지가 현대 테트리스의 손맛을 결정합니다.
3. 점수·레벨·홀드·소리: 100/300/500/800 x 레벨, 10줄마다 가속, 다음 조각·홀드, WebAudio 비프 3종. 파일 없이 소리를 내라고 지정해야 HTML 하나로 끝납니다.
4. 모바일: 600px 이하 터치 버튼 6개, 가로 스크롤 금지. 이 한 줄이 없으면 폰에서 조작이 불가능합니다.
5. 마무리: 배경 이미지, 색상, 그리고 window.tetris에 reset·key·state 훅 노출. 이 훅이 있어야 에이전트가 스스로 플레이해 검증합니다.

생성된 코드의 핵심은 무엇인가?

125줄 중 게임 규칙은 세 부분입니다. 나머지는 그리기와 입력 처리입니다.

# 핵심 로직 3개 (충돌 검사 · 7-bag · 줄 삭제), 전체 코드 중 이 부분이 전부예요
// 조각이 그 자리에 놓일 수 있나: 벽·바닥·기존 블록과 안 겹치면 true
const fits = (m, x, y) => m.every((row, dy) => row.every((v, dx) =>
  v || (x + dx >= 0 && x + dx < COLS && y + dy < ROWS && (y + dy < 0 || !grid[y + dy][x + dx]))));

// 7-bag: 7종을 섞어서 하나씩 꺼내고, 다 쓰면 다시 섞음 (같은 조각 가뭄 방지)
const nextType = () => { if (!bag.length) bag = Object.keys(SHAPES).sort(() => Math.random() - .5); return bag.pop(); };

// 고정 후 줄 삭제: 아래에서 위로 보면서 꽉 찬 줄은 빼고 맨 위에 빈 줄 추가
for (let y = ROWS - 1; y >= 0; y--) {
  if (grid[y].every(Boolean)) { grid.splice(y, 1); grid.unshift(Array(COLS).fill(null)); cleared++; y++; }
}
score += [0, 100, 300, 500, 800][cleared] * level;

• fits: 조각이 해당 위치에 놓일 수 있는지 벽·바닥·기존 블록을 검사합니다. 이동·회전·낙하가 모두 이 함수 하나를 호출합니다.
• 7-bag: 7종을 섞어 하나씩 꺼내고 소진되면 다시 섞어, 같은 조각만 반복되는 “가뭄”을 막는 공식 가이드라인 방식입니다.
• 줄 삭제: 아래부터 검사해 꽉 찬 줄을 제거하고 맨 위에 빈 줄을 추가합니다. 4줄이면 800점에 레벨을 곱합니다.

AI가 직접 플레이해 검증한 결과는?

# 검증과 배포 (자동 플레이 테스트 → tede.fyi 업로드)
# Playwright 로 자동 플레이: 140번 하드드롭, 4줄 채운 뒤 I 조각으로 테트리스 확인
> state after autoplay: {'score': 260, 'over': True}      # 게임 오버까지 정상
> TETRIS cleared at offset -1 {'score': 832, 'lines': 4}   # 4줄 삭제 + 800x1 점수 확인
> pad visible on mobile: True | body width ok: True        # 390px 에서 터치 버튼, 가로 스크롤 없음
> console errors: []

# 배포: 파일 하나라 워드프레스 uploads 폴더에 그대로 복사 (base64 → ssh → docker cp)
B64=$(base64 -w0 game/index.html)
gcloud compute ssh wp-blog --zone=us-west1-b --command="echo $B64 | base64 -d > /tmp/t.html ^
  && sudo docker cp /tmp/t.html wp-wordpress-1:/var/www/html/wp-content/uploads/games/tetris/index.html"
> https://tede.fyi/wp-content/uploads/games/tetris/index.html → 200 text/html

5단계에서 노출한 훅으로 Playwright가 하드 드롭을 140회 눌러 게임 오버까지 도달하는지, 콘솔 오류가 없는지 확인했습니다. 한 번 막힌 지점이 있었습니다. 무작위 자동 플레이에서 줄이 하나도 지워지지 않아 버그로 의심했지만, 무작위 배치라 줄이 채워지지 않은 것이었습니다. 훅으로 아래 4줄을 한 칸만 비우고 채운 뒤 I 조각을 세워 떨어뜨리자 4줄 삭제와 832점이 기록됐습니다. 테스트 설계가 틀렸던 것이고, 이 판단을 에이전트가 로그를 보고 스스로 내렸습니다.

모바일은 390px 뷰포트에서 터치 버튼이 표시되고 가로 스크롤이 생기지 않는지 확인했습니다.

배포는 어떻게 하나?

HTML 1개라 서버 설정이 없습니다. 워드프레스 uploads 폴더에 복사하자 바로 열렸고, GitHub Pages에 올려도 동일합니다. 완성본: https://tede.fyi/wp-content/uploads/games/tetris/index.html (PC 키보드, 모바일 화면 버튼).

마지막으로 배경을 바꿨습니다. 메타 뮤즈(Meta Muse)에서 만든 필자의 아바타를 40칸 도트로 변환해 어둡게 깔고, 판은 반투명, 격자선은 한 톤 밝게 조정했습니다. 요청은 한 줄이었습니다. “이 이미지를 도트 느낌으로 바꿔서 배경에 넣어 줘, 격자는 잘 보여야 해.”

따라 할 때 지킬 규칙 6가지는?

1. 단일 HTML로 시작: 설치·빌드·서버가 없어 “더블클릭으로 열리는가”로 성공을 판단할 수 있습니다.
2. 첫 프롬프트는 돌아가는 최소: 디자인·소리·모바일은 뒤로. 떨어지고 쌓이고 지워지면 1단계 완료입니다.
3. 한 프롬프트 = 한 가지 체감: “조작감”, “점수”, “모바일”처럼 열어서 바로 느껴지는 단위로 나눕니다.
4. 수정 요청은 증상만: “벽 옆에서 회전이 안 된다”로 충분합니다. 코드 용어 없이도 에이전트가 원인을 찾습니다.
5. 테스트 훅 요청: window.게임이름에 reset·key·state를 노출시키면 에이전트가 자체 검증합니다.
6. 배포는 파일 복사: uploads 폴더든 GitHub Pages든 HTML 1개면 끝입니다.

디시 AI 활용 갤러리에 같은 주 올라온 레이싱 게임이나 3D 서재 사이트는 three.js 같은 라이브러리가 붙어 프롬프트가 늘어나지만 규칙은 같습니다. 1단계만 “화면에 무언가 움직임”으로 바뀝니다.

자주 묻는 질문

Q. 코딩을 전혀 몰라도 되나요?
이 글의 프롬프트 5개를 그대로 보내면 됩니다. 중간에 문제가 생기면 증상만 말하면 에이전트가 수정합니다. 코드를 읽을 필요는 없습니다.

Q. 어떤 AI 도구를 써야 하나요?
필자는 클로드코드를 썼습니다. Codex, Cursor, Gemini CLI처럼 파일을 직접 만들고 테스트를 실행하는 에이전트형 도구면 됩니다. 채팅창에 코드를 복사하는 방식은 5단계 자동 검증이 불가능합니다.

Q. 만든 게임은 어디에 올리나요?
HTML 1개라 GitHub Pages(무료), 워드프레스 uploads 폴더 등 정적 파일을 서빙하는 곳이면 됩니다. 네이버 블로그는 HTML 업로드가 불가능합니다.

Q. 테트리스 다음엔 무엇을 시키면 좋나요?
같은 파일에 한 프롬프트씩 더합니다. 브라우저 저장 랭킹, 2인 대전, 조각 색 테마. 하나 넣고 열어 보고 다음으로 갑니다.

관련 글: 클로드코드 사용방법, 클로드 바이브코딩으로 앱인토스 미니앱 만든 기록 1, 클로드코드 스킬 7 Agent Audio, AI 부업 현실 2026.