Claude Code로 게임 만들기
코드 한 줄 없이 상상만으로 게임을 만드는 시간입니다. AI에게 "이런 게임 만들어줘"라고 말하면, 실제로 작동하는 게임이 탄생합니다.
오늘의 포인트
- • AI와 바이브코딩하는 새로운 개발 방식
- • 프롬프트로 게임 6종 만들어보기
- • 내 아이디어를 즉시 실행 가능한 코드로
바이브코딩이란?
- • 기존 방식 → 코드를 직접 작성하고, 버그를 고치고, 테스트하는 반복
- • 바이브코딩 → "이런 게임 만들어줘"라고 설명하면 AI가 코드 생성
- • 핵심 개발자가 아니라 기획자처럼 생각하기
바이브코딩의 3대 장점
1. 즉시성 — 생각한 아이디어를 3초 만에 실행
2. 반복 — "이 부분만 바꿔줘"로 무한 수정 가능
3. 학습 — AI가 만든 코드를 보며 자연스럽게 배움
"코드를 짜는 게 아니라, 내가 원하는 걸 AI에게 설명하는 새로운 시대입니다."
환경 준비하기
Claude Code는 VS Code에서 실행되며, 파일 생성부터 수정까지 AI가 자동으로 처리합니다.
1️⃣ VS Code 설치
공식 사이트(code.visualstudio.com)에서 다운로드 후 설치
2️⃣ Claude Code CLI 설치
터미널에서 아래 명령어로 설치:
npm install -g @anthropic-ai/claude-code설치 후 터미널에서 claude 명령어로 시작 가능
3️⃣ VS Code 확장 설치
VS Code 확장 마켓에서 "Claude Code" 검색 → 설치 → API 키 입력
첫 게임 만들기 — 숫자 맞추기
가장 간단한 게임으로 시작합니다. AI에게 요청만 하면 끝!
📝 기본 프롬프트
1~100 사이 숫자를 맞추는 게임을 만들어줘.
사용자가 입력하면 "높아요/낮아요/정답!" 메시지를 보여주고,
시도 횟수를 기록해줘.✨ 디테일 프롬프트 (선택)
- 게임 시작 시 랜덤 숫자 생성
- 입력 필드와 "확인" 버튼 추가
- 정답 맞추면 축하 메시지와 "다시 시작" 버튼
- 디자인은 심플하고 밝은 톤으로
💡 Claude Code에 위 프롬프트 입력 → 파일 생성 → Live Server 실행 → 게임 완성!
AI와 바이브하는 법 — 프롬프트 팁
Claude Code를 잘 활용하려면 "어떻게 요청하는가"가 중요합니다.
1️⃣ 두 단계로 나누기
1단계: "이런 게임 만들어줘" (큰 틀 생성)
2단계: "이 부분만 바꿔줘" (세부 조정)
2️⃣ 구체적으로 설명하기
❌ "게임 만들어줘"
✅ "1~100 숫자 맞추기 게임, 시도 횟수 기록, 정답 시 축하 메시지"
3️⃣ 디자인도 요청 가능
"심플한 모던톤", "어두운 배경에 밝은 글씨", "애니메이션 효과 추가" 등
"AI는 당신의 말을 정확히 듣고 있습니다. 구체적으로 말할수록 원하는 결과가 나옵니다!"
게임 실행하기 — Live Server
AI가 만든 코드를 실제 웹에서 실행하는 방법입니다.
📂 파일 직접 열기 (비추천)
file:///... 경로로 열림
🌐 Live Server 사용 (추천!) ⭐
설치 방법
VS Code 확장 마켓에서 "Live Server" 검색 → 설치
실행 방법
HTML 파일 우클릭 → "Open with Live Server"
http://127.0.0.1:5500
✨ 장점
- • 실제 웹 서버 환경처럼 작동
- • 코드 수정 시 자동 새로고침
- • API 호출 정상 작동
2048 게임 만들기
슬라이드 퍼즐 게임. 키보드로 블록을 움직여 2048을 만들어보세요!
📝 기본 프롬프트
2048 게임을 만들어줘.
HTML, CSS, JavaScript로 구성하고,
키보드 방향키로 블록을 이동할 수 있게 해줘.✨ 디테일 프롬프트 (선택)
- 4x4 그리드에 랜덤으로 블록 등장
- 같은 숫자가 만나면 합쳐지고 점수 상승
- 디자인은 심플한 모던톤
- 점수판과 "다시 시작하기" 버튼 추가
💡 블록 이동 로직, 점수 계산, 키보드 입력까지 AI가 모두 처리합니다.
슈팅 게임 만들기
탄막을 피하며 적을 맞추는 슈팅 게임. 실시간 반응이 필요한 게임도 가능!
📝 기본 프롬프트
간단한 슈팅 게임을 만들어줘.
플레이어는 아래쪽에서 총알을 쏘고,
위에서 내려오는 적들을 맞추는 구조로 해줘.✨ 디테일 프롬프트 (선택)
- 플레이어는 좌우 방향키로 이동
- 스페이스바로 총알 발사
- 적은 랜덤한 위치에서 아래로 이동
- 점수 시스템과 생명 3개 추가
- 배경에 은은한 우주 이미지
💡 requestAnimationFrame과 충돌 판정도 AI가 자동으로 구현합니다.
카드 짝맞추기 게임
기억력을 테스트하는 클래식 게임. 같은 그림을 찾아 모두 뒤집으면 승리!
📝 기본 프롬프트
같은 그림을 맞추는 카드 짝맞추기 게임을 만들어줘.
HTML, CSS, JS로 구성하고,
4x4 카드로 시작하게 해줘.✨ 디테일 프롬프트 (선택)
- 클릭 시 카드가 뒤집혀서 이미지 표시
- 같은 이미지면 유지, 다르면 1초 후 다시 뒤집기
- 시도 횟수와 남은 카드 수 표시
- 간단한 애니메이션 효과
- 완성 시 "축하합니다!" 메시지
💡 배열, 상태관리, DOM 조작을 AI가 깔끔하게 처리해줍니다.
타이핑 속도 게임
단어를 빠르게 입력하며 타이핑 실력을 테스트하는 게임입니다.
📝 기본 프롬프트
타이핑 속도 게임을 만들어줘.
단어가 하나씩 나오고,
사용자가 입력하면 다음 단어가 뜨게 해줘.✨ 디테일 프롬프트 (선택)
- 단어는 랜덤 배열에서 하나씩 표시
- 맞게 입력하면 점수 상승, 타이머 60초
- 남은 시간 표시, 최고 점수 기록 기능
- 배경은 어두운 색, 글씨는 밝은 색으로
💡 문자열 비교, 타이머, 점수 관리 같은 기본 로직을 간단히 구현합니다.
정리: 바이브코딩의 시작
오늘 배운 방식으로 어떤 게임이든 만들 수 있습니다!
🎮 더 시도해볼 게임 아이디어
🐦 장애물 피하기
Flappy Bird 스타일, 타이밍 맞춰 장애물 통과
⚡ 클릭 반응속도
타겟이 나타나면 빠르게 클릭, 속도 경쟁
🧠 퀴즈 게임
랜덤 문제 출제, 점수 기록, 난이도 조절
🧱 벽돌 깨기
Breakout 클래식, 공 튕겨서 벽돌 파괴
🎯 목표물 맞추기
움직이는 타겟, 정확도와 속도 테스트
🏃 무한 러너
점프로 장애물 피하며 거리 경신
🌟 당신만의 게임 만들기
- • 좋아하는 주제 — 스포츠, 음악, 영화 등
- • 특별한 규칙 — 독창적인 게임 룰 고안
- • 멀티플레이 — 친구와 함께하는 게임
- • 교육용 게임 — 공부하면서 재미있게
"AI가 코드를 대신 짜주는 게 아니라,
내 상상을 코드로 구현하는 새로운 방식입니다."