Level 0: Build Your First Game in 30 Minutes

🎯 목표

AI에게 프롬프트 하나만 던져서 플레이 가능한 아케이드 게임을 만듭니다. 이 튜토리얼을 끝내면 브라우저에서 바로 돌아가는 HTML 게임 파일 1개가 완성됩니다.

코딩 경험이 없어도 괜찮습니다. AI가 코드를 작성하고, 여러분은 방향만 잡아주면 됩니다.

📋 준비물

웹 브라우저 (Chrome 권장)
AI 채팅 — Claude 또는 다른 AI 코딩 도구
텍스트 편집기 (VS Code, 메모장 등 아무거나)

💡 무료 Claude 계정으로 충분합니다.

단계별 가이드

Step 1. AI에게 게임 만들어 달라고 하기

아래 프롬프트를 그대로 복사해서 Claude에 붙여넣으세요:

Build a one-button HTML5 Canvas arcade game with the following specs:

- Single HTML file, no external dependencies except Tailwind CSS CDN
- Core loop: tap/click = jump, avoid obstacles scrolling from right to left
- Procedural obstacle generation with increasing difficulty
- Score counter (distance traveled or obstacles avoided)
- Game over screen with restart button
- Mobile-friendly: touch events, viewport meta tag, playsinline for any audio
- Include the 3sec-score SDK integration:
  <script src="https://www.3secgames.app/sdk/3sec-score.js"></script>
  Call submitScore('your-game-id', score) on game over.
- scoreMin: 0, scoreMax: 99999
- Use a dark background with neon accent colors

Return the complete index.html file.

Step 2. 결과 저장하기

AI가 HTML 코드를 돌려줍니다. 이 코드를:

전체 복사 (Ctrl+A → Ctrl+C)
텍스트 편집기에 새 파일 생성
붙여넣기 (Ctrl+V)
index.html 이름으로 저장

Step 3. 브라우저에서 열기

저장한 index.html 파일을 더블클릭하면 브라우저에서 게임이 열립니다.

클릭/탭으로 점프
장애물을 피해 점수를 올리세요
Game Over 화면이 나오면 성공!

Step 4. 마음에 안 드는 부분 고치기

게임이 너무 쉽거나 어려우면 AI에게 이렇게 말하세요:

"장애물 속도를 30% 느리게 해줘"
"점프 높이를 더 높게 해줘"
"배경색을 파란색 계열로 바꿔줘"
"게임 시작 전 카운트다운 3초 추가해줘"

수정된 코드를 받으면 다시 index.html에 덮어쓰기 저장 → 새로고침.

Step 5. 3secgames.app에 제출하기

게임이 마음에 들면 제출 페이지에서 등록하세요:

게임 파일을 호스팅합니다 (GitHub Pages, Vercel, Netlify 등 무료)
제출 폼에서 게임 URL과 정보를 입력
관리자 검토 후 사이트에 게시됩니다

✅ 체크포인트

완료했다면 체크해보세요:

[ ] AI에게 프롬프트를 보내 HTML 코드를 받았다
[ ] index.html 파일로 저장했다
[ ] 브라우저에서 게임이 정상 동작한다
[ ] 클릭/탭으로 점프가 되고 장애물이 나온다
[ ] Game Over 화면이 표시된다
[ ] 최소 1가지 이상 수정해서 자기만의 게임으로 만들었다

🐛 잘 안 될 때

"코드가 안 나와요"

AI가 설명만 하고 코드를 안 줄 때: "코드 전체를 보여줘. 설명 없이 index.html 파일 내용만 출력해줘." 라고 다시 요청하세요.

"브라우저에서 빈 화면이에요"

브라우저 개발자 도구를 엽니다 (F12 또는 Ctrl+Shift+I)
Console 탭에서 빨간 에러 메시지를 복사
AI에게 에러 메시지를 보여주며 "이 에러를 고쳐줘" 요청

"게임이 너무 빨라요 / 너무 느려요"

AI에게 구체적인 숫자로 요청하세요: "장애물 이동 속도를 현재의 60%로 줄여줘"

"모바일에서 안 돼요"

프롬프트에 이미 모바일 지원이 포함되어 있지만, 안 될 경우: "터치 이벤트가 작동하지 않아. addEventListener('touchstart', ...)를 추가해줘" 요청

🤖 AI 모델별 접근법

무료로 시작

Gemini 3.1 Pro — Google AI Studio에서 무료 사용. 긴 컨텍스트로 한 번에 전체 코드 생성 가능.
DeepSeek-V3.2 — 무료 API 제공 (chat.deepseek.com). 코드 생성 능력 우수.

상용 모델

Claude (Opus/Sonnet 4.6) — 복잡한 게임 로직에 강점. 프롬프트 이해도 높음.
GPT-5.4 — 구조화된 코드 출력. ChatGPT Plus 구독 필요.

로컬 실행

Ollama + Qwen2.5-Coder 32B — ollama run qwen2.5-coder:32b로 로컬 실행. 인터넷 불필요, 완전 무료.

IDE 통합

Cursor — AI IDE에서 편집/디버그/반복을 한 곳에서. 여러 모델 선택 가능.
v0 (Vercel) — UI/레이아웃 빠른 생성. 단, HTML 단일 파일 게임에는 제약 있음.

🎉 축하합니다!

30분도 안 걸려 첫 게임을 만들었습니다! 🎮

다음 레벨에서는 파티클, 사운드, 스크린 셰이크를 추가해서 게임에 생동감을 불어넣습니다.

Level 1: 게임필(feel) 추가하기 →

첫 게임 30분 만에 만들기