🎮 Amazon Q CLI로 만드는 나만의 게임
Amazon에서 주최하는 Build Games with Amazon Q CLI 이벤트에 참여하며 제작한 프로젝트입니다.
HTML 기반의 간단한 게임을 AI의 도움을 받아 처음부터 배포까지 자동화해본 경험을 공유합니다.
Intro) Amazon Q CLI란?
Amazon Q는 AWS에서 제공하는 개발자용 AI 도우미
CLI에서도 작동하여 자연어로 프롬프트를 입력하면 코드, 문서, 설명까지 모두 생성해주는 특징이 있음
특히 반복적인 UI 패턴이나 단순한 로직 설계에 강점이 있어, 작은 프로젝트를 빠르게 완성하기에 적합함
A) 제작물 소개
- Memory Game (카드 짝 맞추기 게임)
- 4x4 카드로 구성된 전통적인 기억력 게임
- 같은 그림을 가진 두 카드를 맞추는 간단한 룰로 구성
- 모바일/PC 모두 대응하는 반응형 레이아웃을 갖춤
B) 제작 과정
이번 프로젝트는 Amazon Q CLI와 함께 단계적으로 개발을 진행했습니다.
프롬프트 하나로 완성되는 게임은 아니었고, 프롬프트 → 코드 확인 → 수정 → 재요청의 반복적인 사이클을 거쳤습니다.
🧱 1. 기본 게임 구조 생성
프로젝트 설정을 위해 가장 먼저 입력한 프롬프트는 다음과 같았습니다.
> Create an HTML-based card matching game that works on both web and mobile environments. Include features to track the number of attempts, correct matches, and play time.Amazon Q는 이 요청에 대해 꽤 괜찮은 HTML/CSS/JS 구조를 제안해줬으며
추가 구현 요청 사항인 4x4 카드 배열, 기본 매칭 로직, 시도 횟수/정답 카운터까지 제공해줬습니다.
🎨 2. 카드 디자인 커스터마이징
> Add a nice gradient effect to the default card block colors to make it visually appealing.Q가 제공한 CSS는 단색이거나 단순한 음영 정도여서, 카드가 다소 밋밋했습니다.
그래서 직접 원하는 색상 코드와 방향을 주며 커스터마이징했고,
hover 시 효과, 매칭된 카드에만 glow 효과를 추가하는 등 세부 스타일은 직접 조정했습니다.
🎆 3. 정답 이펙트 - 폭죽 애니메이션 도전
> When a correct match is found, display a firework animation effect as a celebration.여기서 재미있는 경험이 있었습니다.
처음 Q는 CSS 애니메이션으로 간단한 sparkle 효과만 제시했지만, 기대했던 폭죽 느낌은 아니여서,
아래와 같이 프롬프트를 수정했습니다.
> Use canvas to create a firework animation when a correct match is made.이후 Q가 canvas 기반 파티클 애니메이션 코드를 생성해주었고, 이를 게임 로직에 연결해 성공적으로 연출할 수 있었습니다.
🔄 4. 신규기능 요청하기 - 게임 재시작 기능 추가
> Add a game restart function that resets the board and stats.Q는 resetGame() 함수를 추가하면서 기존의 DOM element를 재사용하는 방식에서
전체 요소를 새로 렌더링 하는 구조로 코드를 개선했습니다.
🧩 5. 신규기능 및 리팩토링 요청하기 - 하드모드 추가
> Add a hard mode. In hard mode, use an 8x8 card grid layout instead of the default.
Q는 8x8 배열을 만들고 카드 수를 늘려주는 기본 구조를 제공했지만,
그리드 사이즈가 커지면서 카드 크기나 간격이 깨졌고, 카운터/타이머 UI와의 간섭도 생겼습니다.
그래서 이에 대한 수정 요청을 했더니, 만족스러운 결과를 제공했습니다.
✍️ 6. 배포 요청하기
이렇게 만든 파일을 S3 정적 웹사이트 호스팅을 이용해 배포하기 위해 필요한 Cloudformation 템플릿 파일을 요청했습니다.
> Please provide a CloudFormation template to deploy this project as a static website using Amazon S3. The template should include S3 bucket creation and configuration, CloudFront distribution setup, and custom domain mapping.Q는 Amazon CloudFormation에 적용가능한 deploy.yaml을 제공해주었고
이를 이용하여 한방에 배포를 끝낼 수 있었습니다.
💬 느낀점
Amazon Q CLI를 처음 써봤는데, 생각보다 훨씬 괜찮았네요.
특히 빠르게 뼈대를 만들고 테스트해볼 수 있다는 점에서 프로토타이핑 도구로 꽤 유용했다고 느꼈습니다.
좋았던 점을 정리하자면:
-
🧪 빠른 프로토타이핑
그냥 하고 싶은 기능을 말로 설명하면 기본 로직을 뚝딱 만들어줘서, 아이디어를 빠르게 테스트할 수 있었어요. -
🧠 코드베이스를 이해한 답변
단순 예제가 아니라, 이전에 작성한 코드 맥락을 어느 정도 이해하고 이어서 작성해주는 점이 특히 인상적이었어요. -
☁️ AWS 인프라 관련 답변
S3, CloudFront, 도메인 연결 같은 AWS 관련 작업도 꽤 정확하게 가이드를 줬습니다.
특히 현재 계정의 AWS 리소스 상태를 조회하여 문제 해결에 도움을 줄 수 있다는 것은
다른 에이전트 서비스들과 비교도 안될만큼 강력하다고 느꼈습니다.
물론 아쉬운 점도 있었습니다.
- 🤔 엉뚱한 답변을 할 때가 있음
npm 프로젝트로 변환하면서 기존 배포 스크립트를 바로 실행할 수 있도록 npm scripts에 추가해달라고 요청했는데,
package.json이 아닌 script 폴더에 추가 스크립트를 생성하면서 뻘짓을 하더라구요.
윽박지르니 제대로 처리해주긴 했으나, 추가적인 요청이 필요하다는 점에서 당황스럽긴 했습니다.
결론적으로는,
Amazon Q는 생각보다 강력한 도구이며, 잘만 활용하면 간단한 서비스는 큰 시간을 안들이고도
생성부터 배포까지 처리할 수 있을 것 같네요.
Q를 이용해서 추후엔 복잡한 인프라 아키텍처 설계 및 적용도 해봐야겠습니다.
