소개
시도하고자 했던 것과 그 이유를 알려주세요.
2주차 핵심강의 - 바이브코딩 개념 및 실습 (CLAUDE.md 등) by 개발자 F 를 들으면서 클로드 코드와 스킬을 이용해서 인베이더 게임의 웹 버전을 만들었습니다
진행 방법
개발자F 님의 강의를 들으면서 클로드 코드 설치를 끝내고, skills.sh 에서 game engine skill을 내려받고 plan 모드에서 인베이더 게임을 만들어 달라고 요청했습니다. 똘똘한 클로드 코드가 기획서를 만들고 자동으로 스킬을 써서 게임을 만들어 냅니다.
완성된 게임을 실행시키면서 버그를 잡으라고 하니 놀랍게도 잡아내내요
❯ 내가 만든 게임이 잘 되는지 실험해줘
Read 2 files (ctrl+o to expand)
⏺ Explore(Review Space Invaders game for bugs)
⎿ Done (1 tool use · 44.8k tokens · 15s)
(ctrl+o to expand)
⏺ 코드를 분석한 결과 버그 2개를 발견했습니다. 바로 수정할게요.
발견된 버그:
1. frameCount가 매 프레임 2번 증가 (loop() + update() 양쪽에서)
2. 타이틀 화면에서 UFO 스프라이트가 렌더링 안 됨 (SPRITES.ufo[0]은 1D 배열이라
drawSprite에 맞지 않음)
⏺ Update(invader.html)
⎿ Removed 1 line
295 // ─── 업데이트 ──────────────────────────────────────────────
──────────────────
296 function update() {
297 if (state !== 'play') return;
298 - frameCount++;
298
299 // 플레이어 이동
300 if ((keys['ArrowLeft'] || keys['KeyA']) && player.x > 0) pla
yer.x -= player.speed;
⏺ Update(invader.html)
⎿ Added 1 line, removed 1 line
578 // 점수 표
579 ctx.font = '18px Courier New';
580 ctx.fillStyle = '#f0f';
581 - drawSprite(SPRITES.ufo[0], W/2 - 100, 170, '#f0f', 3);
581 + drawSprite(SPRITES.ufo, W/2 - 100, 170, '#f0f', 3);
582 ctx.fillText('= ???', W/2, 190);
583
584 ctx.fillStyle = '#ff0';
⏺ 수정 완료입니다. 변경 내용:
┌──────────────────┬───────────────────┬─────────────────────────────────┐
│ 버그 │ 위치 │ 수정 │
├──────────────────┼───────────────────┼─────────────────────────────────┤
│ frameCount 이중 │ update() 함수 내 │ frameCount++ 제거 (이미 │
│ 증가 │ │ loop()에서 증가) │
├──────────────────┼───────────────────┼─────────────────────────────────┤
│ 타이틀 UFO │ drawTitle() 582번 │ SPRITES.ufo[0] → SPRITES.ufo │
│ 미표시 │ 줄 │ │
└──────────────────┴───────────────────┴─────────────────────────────────┘
frameCount 버그의 영향:
- 게임 플레이 중 UFO 스폰 주기가 절반으로 줄어듦 (600프레임 → 실제 300프레임)
- 별 배경 움직임이 2배 빠름
- 타이틀/게임오버 텍스트 깜빡임이 2배 빠름 간만에 레트로 게임 즐겨봅니다
결과와 배운 점
클로드 코드를 채팅 모드로 주로 썼는데, 플랜모드를 우선적으로 사용해야 함을 잘 배웠습니다
