유저 의견을 모아 매일 자동 개발과 배포되는 웹게임 제작기
(blog.frogred8.dev)유저의 피드백 항목을 모아 그 다음 날에 배포되는 컨셉으로 웹 게임을 만들어 봤습니다.
AI 도구에 익숙해지기 위해서 만들어 본 프로젝트인데 github도 공개되어있으니 편하게 둘러보세요.
game: https://spiralwave.frogred8.dev
github: https://github.com/frogred8/SpiralWave
- 프로젝트 개요 및 기획
- 동기 및 목적: 발전된 AI 도구(Gemini 등)를 활용한 바이브 코딩 실험 및 안 써본 기술을 적용한 웹게임 개발 시도.
- 개발 방향: 유저 의견이 매일 자동으로 반영되는 '시간제한 자원 수집형' 미니 웹게임으로 결정.
- 초기 프로토타입 생성
- 핵심 컨셉: 경쟁이나 손실이 없는 자원 수집 및 스킬 트리 구성 게임.
- AI 활용: 종이 스케치를 프롬프트로 변환하여 TypeScript, Vite, Phaser 기반의 기본 게임 구조를 30분 만에 구현.
- 복잡한 로직 구현의 한계 및 직접 해결
- 스킬 트리 개발: 기본적인 선행 스킬 로직은 AI로 구현했으나, 중간 노드 취소 시 하위 노드가 연쇄 취소되는 복잡한 로직은 AI가 해결하지 못해 직접 구현.
- 테스트 코드 생략: 잦은 설계 변경과 빠른 개발 속도를 위해 의도적으로 테스트 코드를 작성하지 않고 진행.
- 대규모 리팩토링과 AI 디버깅의 특성
- UI 분리 작업: 단일 파일의 비대화로 인해 UI 코드를 분리했으나 통일성과 구조적 만족도는 낮았으며, 대형 작업 시 프롬프트 보강 후 재작업 방식이 유효함을 확인.
- 실행 순서 버그: 리팩토링 후 발생한 런타임 오류(상태 갱신과 UI 표시 순서 뒤바뀜)에 대해 AI는 가드 코드만 남발하여, 결국 인간 개발자가 흐름을 파악해 직접 두 줄의 코드를 수정하여 간단히 해결.
- AI의 실수가 비교적 인간적이라 묘한 느낌을 받음.
- Git 자동 커밋 및 가이드 적용
- 프롬프트 가이드 구축: 반복적인 지시의 번거로움을 줄이기 위해 기술 스택과 작동 방식을 정리한 지침 파일(GEMINI.md)을 도입.
- 자동화 워크플로우: 코드 작업 완료 후 에이전트 구동 시간, 지시 프롬프트, 작업 요약이 포함된 커밋 메시지를 자동으로 생성하도록 설정하여 단순 리뷰 공수를 축소.
- 자동 업데이트 아키텍처 설계 및 최적화
- 배포 방식 전환: 초기 구상한 2시간 단위 실시간 자동 배포는 높은 런타임 버그 발생률(약 25%)로 인해 빌드 안정성이 떨어져 포기하고, 별도의 일일 테스트 빌드 생성/배포로 결정.
- Cron 워크플로우: node:cron을 활용해 '피드백 수집 → 정제 → 코드 생성 → 빌드 및 릴리즈 생성 → 배포'로 이어지는 모놀리식 구조의 자동화 프로세스 구축.
- 릴리즈 노트 갱신: Docker 인스턴스 간 서버 목록 파일을 공통 볼륨으로 공유하고 5분 만료 캐시를 적용해 부하를 제어했으며, 유저의 다국어 요청을 영어로 정제한 뒤 다시 번역하여 릴리즈 노트를 노출하도록 구현.
- 개발하다가 제외된 기능
- 리더보드 의견 추천(Like) 기능 (식별자 부재 및 API 호출 비용 부담).
- 정교한 스킬 데이터 관리 툴 (상상력의 한계 및 JSON 직접 수정이 더 효율적임).
- 서비스별 Docker 분산 환경 구축 (운영 및 관리 복잡도 최소화를 위해 1개 이미지로 통합).
- 유저 의견 반영 시 이메일 알림 기능 (회원가입 없는 메일 수집의 유효성 및 도용 리스크).
- 사이드 광고 추가 (플랫폼 승인 절차의 피로도 및 낮은 단가 대비 효과 미비).
- AI 기반 개발 후기
- 생산성과 테스트의 트레이드오프: 개발 구현 속도는 약 10배 증가했으나 검증(QA)에 드는 시간과 피로도가 비례하여 커지는 한계 직면.
- 코드 품질의 특징: 함수 단위 완성도는 높으나 가독성이 떨어져 전체 흐름 파악이 어렵고, 지엽적인 하드 코딩이 유리한 상황에서도 불필요하게 비대한 일반화 패턴을 도입하는 경향을 확인.