Gemini와 함께 10분만에 레이싱 시뮬레이터 만들기 (프롬프트 & 코드 예제 포함)

며칠 전 한 지인이 AI를 활용한 행사 기획을 급하게 고민하시는 걸 알게 됐습니다. 주어진 시간이 5-10분 가량으로 짧음, IT 백그라운드가 아닌 20여개 기업 대상, 단순한 내용 전달이 아니라 그들이 '참여하는' 느낌을 줘야 함... 등의 제한조건이 있었어요.

저는 얼마 전 비개발자 친구에게 Vibe 코딩 과외를 시작했는데요. 'AI로 이런 것까지 가능하다'는 것에 가장 놀라워하고 재밌어하더군요. 그래서 IT 백그라운드가 없는 분들이 놀랄 만한 걸 보여주면 어떨까 하는 생각이 들었습니다.

제한조건을 감안하여 떠오른 아이디어는 행사 시간 동안 참여 기업을 추첨해서 경품을 주는 앱을 실시간으로 만들어서 그걸로 경품 주기였습니다.

마침 최근 출시된 Gemini 2.5 Pro가 코딩을 아주 잘 한다길래 빠르게 테스트해봤어요. 결론적으로 10분만에 첫 버전이 나왔고, 두 번 핑퐁 더해서 일단 완성했습니다. (https://aistudio.google.com/ 에서 Gemini 2.5 Pro Experimental 03-25 선택하시면 됩니다)

제가 사용한 프롬프트와 코드를 공유드립니다.

1) 앱 기획해서 Product Requirments Document 만들기

처음에는 단순히 경품 추첨으로 생각했는데, 프롬프트를 적다 보니 게임 또는 시뮬레이터로 해도 되겠다 싶어서 이렇게 입력했습니다:

20개 기업의 이름을 입력하고 그들 중 3명을 추첨해서 당첨자에게 경품을 주고 싶어. 박진감 넘치는 자동 레이싱 게임(경마?)처럼 보여도 괜찮을 것 같아. 화려하고 역동적인 UI로 이런 목적을 달성할 수 있는 게임을 만들고 싶어.

Three.js로 CodePen 위에서 동작하는 이 게임의 PRD를 영어로 만들어줄 수 있을까?

• Three.js : 실제로 이걸 이용한 게임 예제가 많기도 하고, 이런 거 없이 그냥 만들라고 하면 아무래도 밋밋한 게임이 나오길래 추가한 키워드고요.
• CodePen : Grok과 달리 Google AI Studio는 HTML 파일 프리뷰가 안 되니, 즉시 실행해보고 싶어서 공유하기 쉬운 CodePen으로 만들어달라고 했어요.

Gemini가 이런 식으로 PRD를 만들어주더군요.

2) 첫 버전 만들기

With the PRD above, can you generate the game code?

다음은 간단하게, 기획을 토대로 게임을 만들어달라고 했습니다. 복사해서 CodePen에 붙여넣기 쉽도록 결과물이 나왔습니다. 실제로 붙여넣은 결과는 이렇습니다. (CodePen 링크)

실행해보려니 기업 이름을 넣어야 해서, Grok에게 적당한 한국어 기업 이름을 만들어달라고 했죠.

Can you generate 20 typical company names in Korean?

Please write without parenthesis (i.e., only Korean), in code block, with no numbering.

그렇게 이름을 입력해서 레이싱해보니 실제로 꽤 역동적으로 움직이면서 1~3등이 나왔습니다. 여기까지가 딱 10분이었는데요. 최근 바이브 코딩을 꽤 많이 했지만 이렇게 바로 작동하는 버전이 나온다는 건 몇 번을 봐도 놀라웠어요.

3) AI가 제안한대로 개선하기

요즘 AI들의 좋은 점은 '다음 개선 사항'을 스스로 제안한다는 겁니다. Gemini는 위 코드들을 주면서 이렇게 얘기했어요.

This code provides a functional base. You can expand upon it by adding more detailed models, particle effects for speed/finish, more dynamic camera movements, sound effects, and a more polished UI to match the "flashy" requirement.

마침 저도 이름이 자동 생성되면 좋겠다 싶어서, "네가 말한 것들 다 해주고 이름 생성도 해줘라" 라고 부탁했죠. 사실 음향효과는 외부 소스가 필요하니까 안해줄 거라고 예상했는데 일단 넣어봤습니다.

Great! Can you update the game as you said? More specifically,

1. A button to auto-generate company names
2. particle effects for speed/finish
3. more dynamic camera movements
4. sound effects
5. a more polished UI to match the "flashy" requirement

예상대로 음향 효과를 위한 파일 링크는 직접 교체하라고 하며, 이렇게 만들어줬습니다. (CodePen 링크)

4) 마지막 개선

v2를 실행해보니 몇 가지 문제가 눈에 띄었습니다.

• 이름은 자동으로 잘 만들어지지만 Reset Race 버튼이 동작하지 않았습니다. 다시 이름 입력으로 가서 Prepare Race 를 해야만 동작하더군요.
• v1에서는 레이서들이 어떻게 움직이는지 잘 보였는데 이번에는 레이싱 후반부로 가면 그림자로 가려져서 결승선도 안 보이는게 불만족스러웠습니다.

추가로, 레이싱이 끝나야만 기업 이름이 나오는 것도 안 좋아 보였어요. 그래서 이렇게 한번 더 요청했습니다.

I like the new version, but I've found some problems.
- The end line is not visible (due to something like fog or shadow), and the camera doesn't follow the racers so I cannot see what's happening near the end.
- Reset race not working. I can go to `change names` and `prepare race` to play another game, but just resetting race does not work.

Can you resolve these problems?

Also, two more things:
- remove the sound effects requirement
- show company name in short version (first few characters, acronym, or whatever) at the top of each racers

결과물은 이랬습니다. (CodePen 링크)

Reset이 안되는 문제, 레이스 뒤쪽으로 가면 잘 안 보이는 문제가 (100%는 아니지만) 해소가 됐습니다. 요청한대로 소리 관련된 코드는 제거됐고, 회사 이름도 (짧게는 아니지만) 위에 떴고요. 일단 여기서 이번 테스트는 마치기로 했습니다.

결론

결국 지인의 행사에서 이 앱을 활용하는 아이디어가 채택되진 않았지만 ㅎㅎ 저는 만들면서 아주 만족스러웠습니다.

물론 마지막 몇 %를 마무리하려면 (아직은) 더 많은 노력이 필요합니다. 단순히 쇼케이스나, 첫 버전 테스트, 나 혼자만 쓸 생산성 앱 같은 용도라면 이정도만 해도 충분하겠지만요. 만약 다른 사람에게 의뢰를 받았다거나 했다면 프롬프트를 훨씬 더 정교하게 짜고, 작업을 쪼개고, 직접 수정을 하는 등 터치를 해야겠죠. 불특정 다수를 위한 앱이라면 말할 것도 없고요.

하지만 지난 Vibe 코딩 경험과 마찬가지로 개략적인 아이디어를 실제 눈으로 보는 데까지 걸리는 시간이 미친듯이 짧아졌다는 건 분명합니다. 심지어 지난 게임은 몇 시간 단위였는데 이번에는 마지막 깎기까지 포함해도 25분 정도만에 뚝딱 나왔네요. 그중 코드 생성을 기다리는 게 4-5분 정도였고요. 게다가 제가 오늘 이 글에서 사용한 Google AI Studio, Grok, CodePen 모두 지금은 무료입니다.

너무 많은 AI 도구들이 쏟아져나오고 있기 때문에 스트레스받고, 뒤쳐질까봐 두려워하시는 분들이 많은데요. 저는 이것들을 다 따라갈 수도 없고, 따라갈 필요도 없다고 생각합니다. 공부를 위한 공부가 아니라, 내게 당면한 문제를 푸는 데에 한두번씩 써보는 걸로도 괜찮아요. 'AI로 어디까지 가능하다'라는 감만 익히시면 얼마든지 캐치업이 가능합니다. 사고의 틀이 한번만 깨지면 이후의 가능성은 모두에게 열려있거든요.