- [프로젝트 후기] 상상이 현실이 되는 가장 빠른 방법: AI 에이전트와 함께 나만의 웹게임 만들기
- 코딩을 몰라도 괜찮습니다. 당신에겐 ‘AI 팀’이 있으니까요. (웹게임 제작기)
- 블로그에 게임을 심다: 에이전틱 워크플로우(Agentic Workflow) 실전 경험
안녕하세요. 오늘은 제 블로그에 조금 특별한 콘텐츠를 올렸습니다. 바로 직접 플레이할 수 있는 네온 스타일의 미니게임, **’NEON RUSH: AUTHORITY’**입니다.
혹시 “게임 개발자도 아닌데 어떻게 만들었지?”라고 생각하셨나요? 이 포스팅은 그 ‘어떻게(How)’에 대한 이야기이자, 앞으로 우리가 AI 시대를 어떻게 살아가야 할지에 대한 작은 증명입니다.
1. 시작은 단순한 아이디어였습니다.
“내 블로그 방문자들이 잠시 즐길 수 있는, 단순하지만 재밌는 점프 게임이 있으면 좋겠다.”
저에게는 코딩 전문 지식이 없었습니다. 하지만 저에게는 강력한 도구가 있었습니다. 바로 여러 역할을 수행하는 **’AI 에이전트 팀’**입니다. 저는 이 팀의 **’관리자(Manager)’**가 되기로 했습니다.
2. 에이전틱 워크플로우: AI와 티키타카하며 만들기
게임 제작은 한 번의 명령으로 뚝딱 만들어진 것이 아닙니다. 마치 실제 개발팀과 일하듯 끊임없이 소통하며 발전시켜 나갔습니다.
- 기획 단계: “공중에 3초 이상 떠 있으면 스턴이 걸리는 조건을 추가해 줘.” → AI가 재미 요소를 코드로 구현했습니다.
- 개발 및 고도화: “AI 모드가 너무 멍청해. 더 똑똑하게 만들어 줘.” → AI가 장애물뿐만 아니라 미사일 궤적까지 예측하는 ‘Elite AI’ 로직을 탑재했습니다.
- 기능 추가: “사람들이 경쟁할 수 있게 리더보드를 만들어 줘.” → 로컬 스토리지 기반의 명예의 전당 기능을 추가했습니다.
이 과정에서 저는 코드를 직접 짜는 대신, 무엇이 필요한지 정의하고, 결과물을 판단하고, 더 나은 방향을 제시하는 역할에 집중했습니다.
3. 난관의 연속, 그리고 해결
물론 순탄치만은 않았습니다. 예상치 못한 수많은 버그들을 마주했습니다.
- 워드프레스가 보안 문제로 코드를 훼손시키기도 했고 (스마트 따옴표 문제),
- 데스크탑에선 잘 되던 게임이 모바일에서는 터치가 먹통이 되기도 했고,
- 코드를 수정했는데도 강력한 서버 캐시(Cloudways Varnish) 때문에 반영이 안 되어 애를 먹기도 했습니다.
하지만 놀라운 점은, 이러한 문제 해결(디버깅) 과정 역시 AI 에이전트와 함께했다는 것입니다. 증상을 설명하면 AI 검토자(QA) 에이전트가 원인을 분석하고, 개발자 에이전트가 수정 코드를 제시했습니다. 저는 그 해결책을 적용하고 검증하면 되었습니다.
4. 결론: 이제 당신은 ‘관리자’입니다.
이 프로젝트를 통해 제가 얻은 가장 큰 확신은 이것입니다.
“이제 기술적 장벽은 문제가 되지 않는다. 중요한 것은 ‘무엇을 만들 것인가’하는 인간의 통찰력과 상상력이다.”
AI 에이전트들은 이미 준비되어 있습니다. 그들은 지치지 않고 코딩하고, 테스트하고, 수정합니다. 필요한 것은 그들의 능력을 적재적소에 활용할 줄 아는 여러분의 ‘관리 능력’입니다.
제 블로그에 올라온 작은 게임 하나가, AI 시대의 새로운 가능성을 보여주는 작은 증거가 되기를 바랍니다. 여러분도 지금 바로 상상만 했던 아이디어를 AI 팀에게 지시해 보세요.
순간순간 수정해야할게 많았지만 즐겁습니다. 아래는 프롬프트입니다.
”’
워드프레스페이지에 가벼운게임을 올리고싶어.
기획자 a 에이전트는 아이들이 쉽게 할 수잇는 게임을 기획해주고
개발자 a 에이전트는 워드프레스에 코드로 수행할 수있는 간단한 게임을 만들어줘
횡스크롤로 수행되는 NEON CAR 같은 종류면 되
검토자 a는 코드가 잘수행되는지 판단해줘 최종적으로 블로거 A 는 워드프레스에 최종적으로 올릴 게임의 이름과 바로 붙여넣을수있는 구성을 만들고 태그와 슬러그 글의 제목을 정리해줘
”’”’
에이전틱 워크플로우(Agentic Workflow)를 활용해 각 전문가 에이전트가 협업하여 아이들을 위한 게임을 완성하는 과정을 시뮬레이션했습니다. 이 구성은 워드프레스의 사용자 정의 HTML 블록에 바로 붙여넣어 사용할 수 있습니다.
에이전트 협업 결과보고
- 기획자 A (Game Designer): 아이들이 좋아하는 화려한 네온 컬러를 활용하고, 클릭(터치) 한 번으로 점프하며 장애물을 피하는 직관적인 횡스크롤 게임 ‘네온 캣 점프(Neon Cat Jump)’를 기획했습니다.
- 개발자 A (Developer): 외부 라이브러리 없이 순수 HTML5 Canvas와 JavaScript로 가벼운 게임 코드를 작성했습니다.
- 검토자 A (QA): 모바일 터치와 PC 스페이스바가 모두 작동하는지, 무한 루프 처리가 매끄러운지 검증을 완료했습니다.
최종 블로그 포스팅 구성 (블로거 A)
글 제목: 우리 아이 취향저격! 5초 만에 시작하는 네온 횡스크롤 게임 슬러그(Slug):
neon-cat-jump-mini-game태그:워드프레스게임,미니게임,아이들을위한게임,네온카스타일,자바스크립트게임[본문 삽입용 HTML 코드]
워드프레스 에디터에서 ‘사용자 정의 HTML’ 블록을 추가한 뒤 아래 코드를 복사해서 붙여넣으세요.
”’
English version: Read this article in English
