제1회 Vibe-Coding1 그랑프리에서 은메달을 딴 방법 전부 공개

はじめに

최근에 열린 제1회 V-1 그랑프리(V-1)에서 다행히도 은메달을 수상했습니다.

주최는 AI 엔지니어로서 도지사 선거에도 출마하여 화제를 모은 안노 씨입니다. 쟁쟁한 참가자들 가운데 메달을 딸 수 있었던 것은 정말 영광입니다.

하지만 이번 대회는 파일럿 버전으로 참가자가 6명뿐인 소규모 대회였습니다. 그러므로 은메달이라고 해서 대단한 것은 아니지만, 그래도 메달은 메달이니 Vibe-Coding 전문가로서 제 경험을 여러분과 나누고자 이 글을 쓰게 되었습니다.

이 글을 통해 알 수 있는 것은 두 가지입니다.

1. 제1회 V-1 그랑프리가 어떤 대회였는지.

2. 그리고 그 대회에서 은메달을 딸 수 있었던 Vibe-Coding 전략.

여러분에게 도움이 되고 즐거움을 드릴 수 있기를 바랍니다.

제작한 게임: 10-Second City

10-second city | ともき

10秒間で絵文字を並べて､高得点を狙うゲームです｡

evame.tech

제1회 V-1 그랑프리

제1회 V-1 그랑프리는 안노 씨의 다음 게시글을 통해 시작되었습니다.

우연히 이 게시글을 보고 재밌을 것 같아 참가했는데, X Real을 활용하는 강자 두 명이 있어서 제 직감이 옳았다는 것을 확신했습니다.

시간표

• 규칙 정하기: 20:00-20:15

• 경기 진행: 20:15-21:15 (첫 번째 대회는 1시간으로)

• 심사: 21:15-21:45

• 지식 공유: 21:45-22:00

규칙 정하는 시간에는 "게임을 만들고, 관람자를 포함하여 1인당 2표씩 투표한다"고 결정되었습니다. 이 시점에서 기술력이 아닌 재미로 승부를 봐야 한다고 판단했습니다.

1시간 안에 기술적으로 뛰어난 게임을 만드는 것은 불가능에 가깝습니다. Vibe-Coding의 경우, 모르는 코드 투성이라 예상치 못한 버그 때문에 시간을 낭비할 위험이 높습니다.

그래서 핵심 구현은 10분이면 충분할 정도로 간단하게 만들고, 아이디어와 UI에 집중하여 사용자들이 즐길 수 있도록 하는 것으로 승부수를 던지기로 했습니다.

제 Vibe-Coding 전략

저는 간단한 것을 만들 때 다음 세 단계를 거칩니다.

1. 아이디어 구상 (약 10분)

사용 모델: 당시 가장 신뢰할 수 있는 브레인이라고 판단하여 o3에게 브레인스토밍 파트너가 되어달라고 부탁했습니다. 주제는 "브라우저에서 플레이할 수 있고, 한 시간 정도면 만들 수 있으며, 콘테스트에 적합한 게임 아이디어"였습니다.

ChatGPT에서 여러 번 논의한 결과, 다음과 같은 아이디어가 나왔습니다.

모두 재미있어 보였지만, 그중에서 10-Second City를 선택했습니다.

그 이유는 다음과 같습니다.

1. 외부 API 의존성 없음

2. 이모티콘으로 화면이 화려해짐

3. 심시티 좋아함

2. 구현 단계 (약 10분)

먼저 저장소를 만들었습니다. 명령어나 환경 구축은 손으로 직접 하는 것이 더 빠르다고 생각해서 수작업으로 진행했습니다. 동시에 o3에게 코드 생성을 요청하고, 출력 결과를 커서에 붙여넣었습니다. 이 시점에서 게임의 핵심 부분은 작동하고 있었습니다. o3의 한 번에 동작하는 코드를 생성하는 능력은 정말 놀랍습니다.

몇 번 플레이해 본 결과, 채점 기준이 모호해서 운에 좌우되는 부분이 있고, 버튼이나 점수가 잘 보이지 않고, UI가 깨지는 등 여러 가지 부족한 점이 있었습니다.

일단 Vercel에 배포하고, 여기부터는 커서를 사용하여 UI에 강한 sonnet3.7과 함께 개선 작업을 하기로 했습니다.

3. 개선 (남은 40분)

여기서 여러 가지 돌발 상황이 발생했습니다.

• 커서가 존재하지 않는 파일을 계속 편집해서 계속 에러 발생

• Vercel에서 빌드 에러

• UI가 계속 깨진 채로 남아 있음

• 존재하지 않는 라이브러리의 존재하지 않는 API를 사용하기 시작함

• 커서의 API가 다운됨

Vibe-Coding은 거의 완성된 상태에서부터가 정말 오래 걸립니다.

팁: 자주 사용하고 자신이 알고 있는 라이브러리로만 제한하면 무한 디버깅 지옥은 줄어듭니다.

결과 발표

• 🥇금메달: 아오야마 씨 — 키워드와 관련된 이모티콘이 표시되고, 빠르게 키워드를 맞히는 게임

  

• 🥈은메달: 저 — 10-Second City

  

• 🥉동메달: 안노 씨 — 양자 테트리스 (낙하 블록이 양자 상태로 중첩)

  https://t.co/qlk7CD2SNP

먼저 놀랐던 점은, 1시간밖에 없었는데도 모두의 게임이 제대로 플레이 가능하다는 것이었습니다. 현재의 도구 환경이라면, 팀을 꾸려 하루만 투자해도 판매 가능한 수준의 게임을 만들 수 있을 것 같다는 생각이 들었습니다.

또한, 개인적으로 안노 씨의 양자 테트리스가 매우 재미있었습니다. (너무 어려웠지만요.)

그리고 가장 높은 Vibe를 보여준 상을 니시오 씨에게 드리고 싶습니다. 니시오 씨는 시작하자마자 대화를 통해 Devin에게 지시하여 저장소 생성과 배포를 시작했고, 놀라운 Vibe를 느꼈으며, 이후에도 대회 내내 대화를 통해 지원을 아끼지 않아 정말 Vibe가 대단했다고 생각합니다.

배운 점

1. 채점 로직을 Vibe에 맡기면 허점투성이의 Vibe 게임이 된다.

2. 무슨 일이 있어도 흔들리지 않는 Vibe를 유지해야 Vibe-Coding을 할 수 있다.

3. 라이브러리 탐색을 Vibe에 맡기면, 몇 년 전에 업데이트가 멈춘 라이브러리 때문에 버그 지옥에 빠진다.

개발자를 위한 요약

Vibe-Coding을 한동안 해본 결과, AI가 잘하는 부분과 못하는 부분을 구별하는 것이 중요하다는 것을 알게 되었습니다.

예를 들어 이번 대회에서는 다음과 같습니다.

AI가 못하는 것

1. UI 깨짐 수정

2. 재미있는 규칙 고안

AI가 잘하는 것

1. 기초 만들기

2. 전체 로직 수정

이러한 요령만 알고 있어도, AI에 무리한 일을 시켜 불필요하게 시간을 낭비하는 일을 줄일 수 있을 것입니다.

마무리

V-1 그랑프리는 "1시간 만에도 재미있는 게임을 만들 수 있다"는 것을 증명했습니다.

다음에는 더욱 높은 Vibe로 금메달을 노리겠습니다.

Evame 글로벌 개발자 커뮤니티 소개

이 사이트는 제가 개발하고 있는 개발자를 위한 글로벌 커뮤니티, Evame입니다.

개발자가 지금까지 개발한 프로젝트나 글을 게시하면 AI가 자동으로 여러 언어로 번역합니다.

아직 개발 중이라 버그가 있지만, 꼭 사용해 보셨으면 좋겠습니다!