AI로 만든 숨은 고양이 찾기 게임
하지(Summer Solstice) 테마를 활용하여 해가 질수록 사라지는 고양이들을 찾는 숨은 그림 찾기 게임 개발
AI 코딩 에이전트(AI Coding Agent)와 Phaser 3를 사용하여 단일 HTML 파일로 게임 로직 및 비주얼 구현
정확한 프롬프트 엔지니어링을 통해 게임의 기능 구현 및 시각적 효과(Visual Effects) 추가로 완성도 향상
웹 오디오 API(Web Audio API)를 활용한 사운드 합성 및 그래픽스 프리미티브(Graphics Primitives)로 모든 시각 요소 구현
AI 코딩 에이전트 활용의 핵심: 프롬프트 엔지니어링
본문에서는 AI 코딩 에이전트(AI Coding Agent)를 활용한 게임 개발 과정에서 프롬프트 엔지니어링(Prompt Engineering)의 중요성을 강조함.
초기 프롬프트의 모호함("고양이 찾기 게임 만들기")은 기능 오류 및 일반적인 결과를 초래했으나, 레벨별 고양이 수, 타이머 시간, 타겟 수 등 구체적인 수치와 요구사항을 명시하자 첫 시도에 작동하는 게임이 완성됨.
두 번째 프롬프트에서는 "주스 추가"와 같은 추상적 지시 대신, 호버 효과, 웹 오디오 API를 사용한 사운드 효과, 콤보 보너스, 경고 펄스 효과 등 구체적인 시각적/청각적 피드백(Visual/Auditory Feedback)을 명시하여 게임의 완성도를 높임.
결론적으로, AI 에이전트의 잠재력을 최대한 끌어내기 위해서는 명확하고 상세한 지시사항 전달이 필수적임을 시사함.
Phaser 3와 그래픽스 프리미티브를 활용한 비주얼 구현
이 게임은 Phaser 3 프레임워크와 그래픽스 프리미티브(Graphics Primitives)를 사용하여 모든 시각 요소를 코드로 직접 그려냄.
스프라이트 시트(Sprite Sheet)나 외부 이미지 파일 없이 원, 삼각형, 사각형 등의 기본 도형을 조합하여 고양이와 게임 내 UI를 구성함. 이는 라이선스 문제(Licensing Issues)를 피하고 일관된 아트 스타일을 유지하는 데 기여함.
캔버스 렌더링(Canvas Rendering)을 통해 부드러운 애니메이션과 화면 전환 효과(Screen Transition Effects)를 구현했으며, 특히 시간 경과에 따른 일몰 배경 변화(Sunset Gradient Background)는 게임의 테마를 시각적으로 전달하는 핵심 요소임.
이러한 접근 방식은 개발 초기 단계의 프로토타입 제작에 매우 효율적이며, 리소스 관리(Resource Management) 부담을 줄여줌.
웹 오디오 API를 활용한 사운드 디자인
게임 내 모든 사운드 효과는 웹 오디오 API(Web Audio API)를 통해 실시간으로 합성(Real-time Synthesis)되어 별도의 오디오 파일 없이 구현됨.
정확한 클릭 시 긍정적인 효과음(Correct Click Chime), 잘못된 클릭 시 부정적인 효과음(Wrong Click Buzz), 타이머 감소 시 틱(Tick) 소리, 버튼 클릭음 등이 포함됨.
이러한 사운드 피드백은 플레이어에게 즉각적인 반응(Immediate Feedback)을 제공하여 게임 플레이 경험을 향상시키고, 콤보 보너스(Combo Bonus)와 같은 특정 액션에 대한 인센티브를 강화함.
외부 오디오 파일 의존성을 제거함으로써 게임 로딩 시간(Game Loading Time)을 단축하고, 모든 브라우저 환경에서의 호환성(Cross-browser Compatibility)을 높이는 효과를 얻음.
하지 테마와 게임 메타포의 연관성
게임의 핵심 테마인 하지(Summer Solstice)는 시간의 흐름과 빛의 소멸이라는 게임 메타포와 직접적으로 연결됨.
게임의 배경인 일몰은 시간 제한(Time Limit) 타이머와 동기화되어, 시간이 줄어들수록 화면의 빛이 어두워지고 고양이들이 점차 페이드 아웃(Fade Out)되는 시각적 연출로 이어짐.
이는 플레이어에게 시간 압박감(Sense of Urgency)을 부여하며, "가장 긴 날이 끝나기 전에 찾아야 한다"는 승리 메시지는 테마의 의미를 강조함.
반대로, 성공적으로 찾아낸 고양이들은 반짝이며 사라져(Sparkle and Disappear) 안전하게 구출되었음을 나타내며, 찾지 못한 고양이들은 일몰과 함께 사라져 실패의 시각적 표현을 강화함.
이처럼 테마는 단순한 배경 설정을 넘어 게임 플레이의 핵심 메커니즘과 감성적 경험(Emotional Experience)을 구축하는 데 중요한 역할을 함.
단일 HTML 파일 개발 방식의 장단점
이 게임은 빌드 도구, 의존성 관리 없이 단일 HTML 파일로 개발되어 매우 빠른 개발 및 배포 속도를 자랑함.
장점: 간편한 배포(Simple Deployment)가 가능하며 (Vercel 호스팅), 코드 수정 후 브라우저에서 즉시 결과를 확인할 수 있어 빠른 반복 개발(Rapid Iteration)에 유리함. 초심자에게 진입 장벽이 낮음.
단점: 프로젝트 규모가 커질 경우 코드 가독성(Code Readability) 및 유지보수성(Maintainability)이 저하될 수 있으며, 모듈화(Modularity)의 부재로 인한 코드 재사용의 어려움이 발생할 수 있음.
이 방식은 소규모 게임잼 프로젝트나 프로토타입 제작에는 매우 효과적이지만, 복잡한 상용 게임 개발에는 모듈화된 아키텍처(Modular Architecture) 도입이 권장됨.
