Dev/Web

Amazon Q로 지렁이 게임 만들기: AI 코딩 어시스턴트의 실전 활용기

newtype 2025. 6. 19. 17:18
이 글은 aws의 이벤트 참가를 위해 작성되었습니다.

https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games-with-amazon-q-cli-and-score-a-t-shirt

🎮 선택한 게임과 선택 이유

**지렁이 게임(Snake Game)**을 선택한 이유:

  • 고전적이면서 완성도 높은 게임: 누구나 알고 있는 간단한 룰이지만 구현에는 여러 프로그래밍 개념이 필요
  • 적절한 복잡도: 한 번의 대화로 완성 가능하면서도 AI의 코딩 능력을 평가하기에 충분한 복잡도
  • 시각적 결과물: 즉시 실행하고 테스트할 수 있어 AI의 결과물을 바로 확인 가능
  • 확장 가능성: 기본 게임 완성 후 다양한 기능 추가를 통해 AI의 반복 개발 능력 테스트 가능

💡 발견한 효과적인 프롬프트 기술

1. 단계적 요청 방식

"html로 지렁이 게임을 만들어줘" → 기본 게임 완성
"플레이 화면이 너무 작은데 좀 크게 해줘" → 화면 크기 조정
"소스 코드에 주석을 달아줘" → 코드 문서화
"게임 속도가 일정한데, 처음엔 더 느리고 꼬리가 길어질 수록 속도가 빨라지게 수정해줘" → 게임플레이 개선

2. 구체적인 요구사항 명시

  • ❌ "게임을 빠르게 해줘"
  • ✅ "처음엔 더 느리고 꼬리가 길어질 수록 속도가 빨라지게 수정해줘"

3. 코드 설명 요청

특정 코드 블록을 선택하고 "이 부분 코드 설명좀 해줘"라고 요청하면 상세한 설명을 받을 수 있었습니다.

🤖 AI가 고전적인 프로그래밍 문제를 처리한 방법

1. 게임 루프 구현

AI는 setInterval()을 사용한 전통적인 게임 루프 패턴을 정확히 구현했습니다:

function drawGame() {
    clearCanvas();    // 화면 지우기
    moveSnake();      // 게임 로직
    drawSnake();      // 렌더링
    drawFood();
    checkCollision(); // 충돌 검사
}

2. 데이터 구조 선택

지렁이의 몸체를 배열로 관리하는 효율적인 방법을 선택:

let snake = [{x: 10, y: 10}]; // 배열의 각 요소가 몸체 부분

3. 충돌 검사 알고리즘

벽 충돌과 자기 몸체 충돌을 분리하여 명확하게 구현했습니다.

⚡ 시간을 절약한 개발 자동화의 예

전통적인 개발 과정 vs AI 활용

전통적 방법 (예상 시간: 2-3시간)

  1. 게임 설계 및 구조 계획 (30분)
  2. HTML/CSS 레이아웃 작성 (30분)
  3. 게임 로직 구현 (60분)
  4. 버그 수정 및 테스트 (30분)
  5. 코드 정리 및 주석 (30분)

AI 활용 방법 (실제 시간: 15분)

  1. 기본 게임 생성 (1분)
  2. 화면 크기 조정 (1분)
  3. 주석 추가 (2분)
  4. 게임 속도 개선 (3분)
  5. 코드 설명 및 이해 (8분)

시간 절약: 약 90% (165분 → 15분)

🎯 흥미로운 AI 생성 솔루션의 코드 예제

1. 동적 게임 속도 조절 시스템

AI가 제안한 가장 인상적인 솔루션은 지렁이 길이에 따른 동적 속도 조절이었습니다:

// 게임 속도 업데이트
function updateGameSpeed() {
    clearInterval(gameInterval); // 기존 인터벌 제거
    // 지렁이 길이에 따라 속도 증가 (최소 50ms, 최대 200ms)
    const speed = Math.max(50, 200 - (snake.length - 1) * 10);
    gameInterval = setInterval(drawGame, speed);
}

특징:

  • 수학적 공식을 사용한 속도 계산
  • 최소/최대 속도 제한으로 게임 밸런스 유지
  • 인터벌 재설정을 통한 실시간 속도 변경

2. 지렁이 이동 알고리즘

function moveSnake() {
    // 새로운 머리 위치 계산
    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    snake.unshift(head); // 머리 추가

    if (head.x === food.x && head.y === food.y) {
        // 음식을 먹으면 꼬리 유지 (길이 증가)
        score += 10;
        generateFood();
        updateGameSpeed();
    } else {
        snake.pop(); // 꼬리 제거 (길이 유지)
    }
}

AI의 창의적 접근:

  • unshift()와 pop()을 조합한 효율적인 배열 조작
  • 조건부 꼬리 제거로 길이 증가 구현
  • 음식 섭취와 속도 업데이트를 연결한 게임플레이 설계

🎮 게임 실행 방법

  1. snake_game.html 파일을 브라우저에서 열기
  2. 방향키(↑↓←→)로 지렁이 조작
  3. 빨간 음식을 먹어서 점수 획득
  4. 벽이나 자신의 몸에 부딪히면 게임 리셋

🎯 게임 특징

  • 화면 크기: 600x600 픽셀의 넓은 게임 영역
  • 점수 시스템: 음식 1개당 10점
  • 동적 속도: 지렁이가 길어질수록 게임 속도 증가
  • 자동 리셋: 충돌 시 게임 자동 재시작
  • 방향 제한: 반대 방향으로 이동 불가

🎯 게임 스크린샷

🎯 결론

Amazon Q를 활용한 게임 개발 경험을 통해 다음을 확인할 수 있었습니다:

장점:

  • 빠른 프로토타이핑과 즉시 실행 가능한 결과물
  • 단계적 개선을 통한 점진적 개발
  • 코드 설명과 학습을 동시에 진행 가능

효과적인 활용법:

  • 구체적이고 명확한 요구사항 제시
  • 단계별 기능 추가 방식
  • 코드 이해를 위한 적극적인 질문

AI 코딩 어시스턴트는 단순한 코드 생성을 넘어서 개발 파트너로서의 역할을 충분히 수행할 수 있음을 확인했습니다.


이 프로젝트는 Amazon Q CLI를 사용하여 약 15분 만에 완성되었습니다.

글 작성에 사용한 사용한 프롬프트

이 글 역시 Amazon Q CLI를 사용하여 작성되었습니다.

이 게임은 amazon Q를 이용해서 만들었잖아? 블로그에 글을 올릴건데, 이런 내용을 추가해서 README.md 파일에 글을 작성해줘 
  -선택한 게임과 선택한 이유
  -발견한효과적인 프롬프트 기술
  -AI가 고전적인 프로그래밍 문제를 처리한 방법
  -시간을 절약한 개발 자동화의 예
  -흥미로운 AI 생성 솔루션의 코드 예제
  -최종 창작물의 스크린샷
반응형