Gemini와 Claude를 활용한 React 기반 안드로이드 게임 개발 경험 공유

실용적 조언

AI 에이전트에게 'Do not modify X'와 같은 부정적 제약 조건을 명시하여 불필요한 리팩터링을 방지하라.
안드로이드 WebView 기반 앱에서 오디오 재생이 안 될 경우, 코드 수정 전 사용자 상호작용(터치) 여부를 먼저 확인하라.

섹션별 상세

개발자는 React와 TypeScript 기반의 게임 개발 과정에서 인간이 시니어 개발자 역할을 맡고 AI 에이전트가 코드를 작성하는 협업 모델을 적용했다. 시스템 설계와 프롬프트 작성을 인간이 담당하며, 에이전트가 구현을 시작하기 전에 모든 실행 계획을 검토하는 단계를 거쳤다. 이러한 구조적 접근은 에이전트의 생산성을 활용하면서도 전체적인 코드 품질을 유지하는 데 기여했다. 결과적으로 복잡한 시스템 구축 시 인간의 아키처 소유권이 필수적임을 확인했다.

프로젝트 규모가 확장됨에 따라 Gemini Flash가 이미 정상 작동 중인 코드를 임의로 재구성하거나 리팩터링하여 오류를 발생시키는 문제가 발생했다. 이를 해결하기 위해 특정 시스템이나 컴포넌트를 수정하지 말라는 명시적인 금지 명령을 프롬프트에 포함하여 에이전트의 작업 범위를 제한했다. '오디오 시스템을 수정하지 마라' 또는 '이 컴포넌트 외부의 어떤 것도 리팩터링하지 마라'와 같은 구체적인 경계 설정이 시스템 안정성에 결정적이었다. 에이전트의 과도한 도움이 오히려 독이 될 수 있음을 보여주는 사례로 나타났다.

안드로이드 환경에서 앱 실행 시 음악이 시작되지 않는 버그를 해결하기 위해 오디오 스프라이트, 더블 버퍼링, 싱글톤 패턴 등 다양한 기술적 시도를 일주일간 지속했다. 그러나 문제의 원인은 코드가 아니라 사용자가 화면을 터치하기 전까지 오디오 재생을 차단하는 Android WebView의 기본 보안 정책에 있었다. 이는 브라우저 정책에 의한 제약으로, 개발자가 아무리 코드를 수정해도 해결할 수 없는 외부 요인이었음을 밝혀냈다. 때로는 버그가 코드 내부가 아닌 플랫폼의 정책적 규칙에 존재한다는 교훈을 얻었다.

용어 해설

웹뷰(WebView): — 웹 콘텐츠를 앱 내부에 표시하기 위한 브라우저 엔진 구성 요소이다. 안드로이드와 iOS 앱에서 웹 기술을 사용하여 UI를 구현할 때 핵심적인 역할을 수행한다. 플랫폼마다 고유의 보안 및 미디어 재생 정책을 가지고 있어 개발 시 주의가 필요하다.
리팩터링(Refactoring): — 소프트웨어의 겉으로 드러나는 기능은 바꾸지 않으면서 내부 구조를 개선하는 작업이다. 코드의 가독성을 높이고 유지보수를 쉽게 만들지만, AI 에이전트가 맥락 없이 수행할 경우 기존 로직을 파괴할 위험이 있다. 적절한 통제 하에 이루어져야 시스템의 안정성을 해치지 않는다.
싱글톤 패턴(Singleton Pattern): — 특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하는 소프트웨어 디자인 패턴이다. 전역적인 상태 관리가 필요한 오디오 시스템 등에 자주 사용되지만, 잘못 구현하면 디버깅을 어렵게 만들 수 있다. 이 글에서는 오디오 버그 해결을 위해 시도된 방법 중 하나이다.

언급된 도구

React추천

프론트엔드 UI 라이브러리

Capacitor추천

크로스 플랫폼 모바일 앱 개발 프레임워크

Google Antigravity추천

AI 에이전트 오케스트레이션 도구

Gemini중립

코드 작성을 위한 AI 에이전트

Claude추천

코드 작성을 위한 AI 에이전트

언급된 리소스

DemoDopamine Dan - Google Play Store