이 글은 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시간)
- 게임 설계 및 구조 계획 (30분)
- HTML/CSS 레이아웃 작성 (30분)
- 게임 로직 구현 (60분)
- 버그 수정 및 테스트 (30분)
- 코드 정리 및 주석 (30분)
AI 활용 방법 (실제 시간: 15분)
- 기본 게임 생성 (1분)
- 화면 크기 조정 (1분)
- 주석 추가 (2분)
- 게임 속도 개선 (3분)
- 코드 설명 및 이해 (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()을 조합한 효율적인 배열 조작
- 조건부 꼬리 제거로 길이 증가 구현
- 음식 섭취와 속도 업데이트를 연결한 게임플레이 설계
🎮 게임 실행 방법
- snake_game.html 파일을 브라우저에서 열기
- 방향키(↑↓←→)로 지렁이 조작
- 빨간 음식을 먹어서 점수 획득
- 벽이나 자신의 몸에 부딪히면 게임 리셋
🎯 게임 특징
- 화면 크기: 600x600 픽셀의 넓은 게임 영역
- 점수 시스템: 음식 1개당 10점
- 동적 속도: 지렁이가 길어질수록 게임 속도 증가
- 자동 리셋: 충돌 시 게임 자동 재시작
- 방향 제한: 반대 방향으로 이동 불가
🎯 게임 스크린샷
🎯 결론
Amazon Q를 활용한 게임 개발 경험을 통해 다음을 확인할 수 있었습니다:
장점:
- 빠른 프로토타이핑과 즉시 실행 가능한 결과물
- 단계적 개선을 통한 점진적 개발
- 코드 설명과 학습을 동시에 진행 가능
효과적인 활용법:
- 구체적이고 명확한 요구사항 제시
- 단계별 기능 추가 방식
- 코드 이해를 위한 적극적인 질문
AI 코딩 어시스턴트는 단순한 코드 생성을 넘어서 개발 파트너로서의 역할을 충분히 수행할 수 있음을 확인했습니다.
이 프로젝트는 Amazon Q CLI를 사용하여 약 15분 만에 완성되었습니다.
글 작성에 사용한 사용한 프롬프트
이 글 역시 Amazon Q CLI를 사용하여 작성되었습니다.
이 게임은 amazon Q를 이용해서 만들었잖아? 블로그에 글을 올릴건데, 이런 내용을 추가해서 README.md 파일에 글을 작성해줘
-선택한 게임과 선택한 이유
-발견한효과적인 프롬프트 기술
-AI가 고전적인 프로그래밍 문제를 처리한 방법
-시간을 절약한 개발 자동화의 예
-흥미로운 AI 생성 솔루션의 코드 예제
-최종 창작물의 스크린샷
반응형
'Dev > Web' 카테고리의 다른 글
websocket과 ssl 사용을 위한 nginx 설정 (0) | 2023.04.25 |
---|---|
Nginx geoip 연동 (0) | 2022.11.17 |
Nginx SSL 설정 (0) | 2022.11.16 |
Code Finder (0) | 2017.05.25 |
FAQ html 템플릿 (0) | 2015.08.28 |