🎮 Amazon Q CLI를 활용한 숫자야구 게임 제작기

최근 AWS에서 진행한 Build Games with Amazon Q CLI Challenge에 참여했습니다. Amazon Q CLI를 이용해 쉽고 재미있는 게임을 만들면서 얻은 경험을 공유하려고 합니다.

---

🚩 내가 선택한 게임과 선택 이유

제가 선택한 게임은 숫자야구(Number Baseball) 입니다. 숫자야구는 직관적이면서도 전략적인 사고를 요구하는 게임이라 누구나 쉽게 접근할 수 있고, 난이도 조정이 쉬워 다양한 플레이어층에 맞게 확장할 수 있습니다. 개발 언어를 배울 때 꼭 한번씩 만들어보는 게임으로 Amazon Q CLI 를 이용하면 얼마나 쉽게 만들 수 있고, AI가 얼마나 잘 만들 수 있는지 궁금했습니다.

---

📌 효과적인 프롬프팅 기법

사실 명확한 요구 사항을 제시해야 AI가 보다 정확한 결과를 낼 수 있다고 알고 있습니다. ChatGPT를 일상에서, 업무에서 쓰면서 느낀점이었으나, Aamzon Q CLI 에게는 정말 내가 원하는 내용을 구체적이지 않았지만 '툭' 던져보았습니다.
결과적으로는 너무 무심하게 던진 요청에 기대 이상의 완벽에 가까운 결과를 매번 만들어냈습니다.

첫 번째 프롬프트

Make a number baseball game using HTML5 and CSS only, in the folder /Users/kabkee/Downloads.

이렇게 명확하게 사용 기술과 저장할 위치를 지정했습니다.

두 번째 프롬프트

첫 결과물이 좋았지만, 난이도 확장 기능이 필요했습니다
사실 "너무 쉽게" 만들어내니 얼마나 능력이 되는지 보고 싶어 추가 프롬프트를 고민하다 난이도 확장을 시켰습니다:

That’s a great result, and I like the design as well. I’d like to add a feature that allows the user to switch the digit count from 3 to 4. The 3-digit baseball game is the original one, but it’s somehow quite easy.

AI에게 이전 작업에 대한 긍정적 피드백과 함께 추가 기능을 명확히 요청하여 자연스러운 확장을 유도했습니다.

세 번째 프롬프트

게임이 길어지면서 기록 확인 영역이 아래로 늘어남에 따라 한번에 확인하기 어렵고 스크롤을 내려야하여 좌/우 배치 형식으로 UX를 개선했습니다:

All works perfectly. As the game gets harder to play, the guess history keeps getting longer downward, so I cannot see the whole page at once. Split the screen into two areas — left for the game layout and right for the guess history.

명확한 UI 구조 변경을 요청해 UX 개선을 이끌었습니다.

---

⚙️ AI가 다룬 클래식 프로그래밍 도전 과제

• 실시간 입력 검증: 각 입력값이 중복되지 않도록 자동으로 처리하고 유효성을 실시간 체크했습니다.
• 게임 승리 조건 판정: 스트라이크와 볼 개수에 따라 승리를 정확하게 판정하는 로직을 쉽게 구현했습니다.

---

⏰ AI 개발 자동화로 절약된 시간

일반적으로 이런 게임 제작에는 최소 몇 시간의 디자인, 프로그래밍, 테스트 시간이 필요합니다. Amazon Q CLI를 이용해 1분 이내에 동작 가능한 게임을 제작하여, 90% 이상의 시간을 절약할 수 있었습니다. 사실 그냥 마법 같습니다. 90%가 아니라 요청하면 바로 주는 지니 같은 느낌이었습니다.

---

💻 흥미로운 AI 생성 코드 예시

Amazon Q CLI가 자동으로 생성한 난이도 조정 기능 예시 코드 일부입니다. 사실 전반적으로 다 신기합니다 :

function switchDifficulty() {
  digitCount = document.querySelector('input[name="difficulty"]:checked').value;
  resetGame();
  createInputFields();
  document.querySelector('.subtitle').textContent = digitCount + "-digit Number Baseball";
}

이 함수는 사용자가 선택한 난이도에 따라 입력 필드를 동적으로 조정합니다.

---

📸 결과물 스크린샷 및 게임 플레이 화면

3자리 숫자

4자리 숫자

화면 분할

---

🚀 최종 결과물 및 코드

• 📌 실제 구동 페이지 : Number Baseball Game
• 📌 전체 코드(GitHub) : GitHub Repository

---

Amazon Q CLI 덕분에 개발 시간은 단축하고, 품질 높은 결과물을 쉽게 얻을 수 있었습니다. AI를 활용한 효과적인 프로그래밍 경험을 통해, 앞으로의 프로젝트에서도 적극 활용하고자 합니다!