Google 커뮤니티 이벤트에서 2인용 두뇌 게임을 만들고 업그레이드하기

오늘 저는 Peshawar의 GDG on Campus가 주최한 Vibe Coding with Google AI Studio에 참석했습니다. 이 세션은 Google AI Studio가 어떻게 간단한 아이디어를 몇 분 만에 작동하는 앱으로 바꿀 수 있는지에 관한 것이었습니다.

마지막에 발표자가 우리에게 과제를 주었습니다: 게임을 만들어라. 상위 3명에게는 깜짝 선물이 있을 것이다. 🎁

제가 무엇을 만들었는지, 무엇을 배웠는지, 그리고 어떻게 발전시켰는지 알려드리겠습니다.

🎮 먼저 플레이해 보세요

👉 CodePen에서 Number Nebula 플레이하기

조작법: 플레이어 1은 A D를 사용하여 이동하고 W로 발사합니다. 플레이어 2는 화살표 키를 사용합니다. 친구가 근처에 없나요? Cosmic Bot을 선택하세요.

💡 아이디어: Number Nebula

저는 아이들에게 재미있으면서도 어른들이 생각하게 만드는 게임을 원했습니다. 그래서 고전적인 우주 슈터와 퍼즐을 혼합했습니다:

• 수학 대결 (Math Duel): 합계를 풀어낸 다음, 답을 들고 있는 외계인을 쏘세요.
• 단어 만들기 (Word Builder): 단서를 읽은 다음, 올바른 순서로 글자를 쏴서 단어를 만드세요.
• 두뇌 혼합 (Brain Mix): 둘 다 번갈아 가며 플레이합니다.

두 명의 플레이어가 하나의 화면을 공유하며, 연속으로 정답을 맞힐 때마다 상대방에게 공격(동결, 안개, 또는 운석 돌진)을 발사합니다.

🔁 제작 과정

1. 프롬프트 (Prompt): 저는 구조화된 프롬프트(개념, 조작법, 레벨, 점수 계산, 시각 자료)를 작성하여 Google AI Studio에 제공했습니다. 그것은 첫 시도에 작동하는 버전을 만들었습니다.
2. 반복 개선 (Iterate): 저는 개선할 사항들을 나열하고 영향력별로 순위를 매겼습니다. 가장 큰 문제는 플레이어들이 서로에게 영향을 주지 못한다는 것이었기 때문에, 콤보 공격을 추가했습니다.
3. 레벨 업 (Level up): 파워업, 보스전, 연령 기반 난이도(따라서 7세 어린이와 성인이 공정한 경기를 할 수 있도록), 봇 상대방, 그리고 Word Builder 모드를 추가했습니다.

가장 큰 교훈: 한 번에 하나의 변경 사항을 만들고, 테스트한 다음, 다음으로 넘어가세요. 작은 단계들이 거대한 요청보다 낫습니다.

⚙️ 내부 작동 원리 (Under the hood)

• 순수 HTML5 Canvas + JavaScript로 구현되었으며, 단일 파일 구조이고 프레임워크를 사용하지 않았습니다.
• 사운드 효과는 Web Audio API를 사용하여 코드 내에서 생성했습니다 (오디오 파일 없음).
• 간단한 게임 루프가 작동합니다: 위치 업데이트 → 충돌 감지 → 그리기 과정을 초당 약 60회 반복합니다.

🚀 다음 계획

• 온라인 멀티플레이어를 구현하여 두 친구가 다른 도시에서 함께 플레이할 수 있도록 할 예정입니다.
• Word Builder의 테마 팩을 추가하며, LOOP, ARRAY, CLASS와 같은 코딩 관련 단어로 시작할 것입니다.
• 전 세계 순위표(global leaderboard)를 만들 계획입니다.

저는 IMSciences Peshawar에 재학 중인 소프트웨어 공학 학생이며, 개발 과정을 공개하고 있습니다. 피드백은 언제나 환영합니다: 다음으로 어떤 모드를 추가하면 좋을까요? 👇