바이브 코딩으로 4시간 만에 웹 게임 만든 후기 (클로드 + 커서 AI + Vercel)

얼마 전에 바이브 코딩으로 제 개인 블로그를 만들어 운영을 시작했습니다. 그 경험을 제 블로그의 연재 - 바이브 코딩으로 블로그 만들기 카테고리에 올리고 있고요. 직접 한 줄씩 코드를 짜는 방식이 아니라, AI랑 대화하면서 결과물을 뽑아내는 방식이라 한 번 해보면 묘하게 빠져듭니다.

블로그가 큰 사고 없이 잘 굴러가는 걸 보다 보니 다음이 궁금해지더라고요. 그래서 정한 다음 목표가 웹 게임 만들기였습니다. 사실 게임은 블로그보다 훨씬 어렵겠다 싶었지만, 일단 부딪혀 보기로 했습니다.

클로드와 게임 아이디어 브레인스토밍

뭘 만들지부터 정해야 했습니다. 클로드 프로를 켜놓고 한참 이런저런 아이디어를 주고받았어요. 게임에 제대로 빠져 본 적이 없는지라 혼자 머리 굴렸으면 진짜 한참 헤맸을 텐데, 대화 상대가 있으니 후보가 빠르게 좁혀지더군요.

그렇게 나온 결론이 워들 방식의 하루 한 문제 국기 맞히기 게임이었습니다. 아, 워들(wordle) 게임을 처음 들어본 분도 있으실 텐데, 한국에서는 모르는 사람이 많지만 미국에서는 학교에서도 활용할 정도로 유명한 단어 맞추기 게임입니다. 게임 규칙이 매우 단순하며 하루에 딱 한 판만 플레이할 수 있다는 제약이 있습니다.

워들이 왜 그렇게 인기였는지 생각해 보면 결국 ‘하루에 한 판’이라는 제약과 단순한 규칙 두 가지입니다. 거기에 국기라는 시각적이고 약간은 교육적인 요소를 얹으면 괜찮겠다 싶었습니다. 매일 새로운 국기가 출제되고, 힌트를 한 개씩 까가면서 정답을 추리하는 구조입니다.

사용한 도구는 딱 세 개

이번 프로젝트에 쓴 도구는 단출합니다.

• 클로드 프로(Claude Pro) — 기획부터 코드 생성까지 전반적인 두뇌 역할
• 커서 AI(Cursor AI) — 코드 편집과 빠른 수정 반복
• Vercel — 무료로 빠르게 배포

이 셋만 가지고 처음 4시간 만에 일단 게임이 굴러가긴 했습니다. 클로드의 제안대로 국기 30개에 힌트도 3개로 출발했어요. 반나절 만에 돌아가는 게임 하나가 화면에 떠 있는 게 좀 비현실적으로 느껴지더라고요.

막상 플레이해 보니 너무 쉬웠습니다

신나는 마음으로 직접 플레이해봤습니다. 그리고 30초 만에 깨달았어요. 단순해도 너무 단순합니다. 힌트 3개로 맞출 수 없는 나라도 있었고요.

문제는 그뿐만이 아니었습니다.

• 공유 기능이 텍스트 복사밖에 안 됨
• 처음 들어온 사람은 뭘 어떻게 하는지 알 수가 없음
• 전체적으로 ‘그래서 뭐?’ 싶은 느낌

그래서 다시 클로드를 붙잡고 다듬는 작업을 시작했습니다. 사실상 진짜 작업은 여기서부터였습니다.

1) 힌트 3개 → 5개로 확대

너무 많으면 긴장감이 사라집니다. 5개 정도가 “아, 알 것도 같은데… 알겠다!” 싶은 적당한 난이도였어요.

2) SNS 공유 기능 추가

기존에는 결과를 텍스트로만 복사할 수 있었는데, 공유 창을 띄워서 주요 SNS로 바로 보낼 수 있게 바꿨습니다. 워들류 게임은 결과 공유가 핵심 재미거든요.

3) 첫 접속 시 플레이 방법 모달

처음 들어온 분들이 헤매지 않도록 게임 규칙을 알려주는 모달 창을 띄웠습니다. 진입장벽을 낮추는 작업입니다.

진짜 복병은 itch.io 배포에서 나왔습니다

기능을 다 다듬고 오류 점검까지 마친 다음, 게임 공유 플랫폼인 itch.io에도 올려 보기로 했습니다. Vercel 배포는 금방 끝났는데(DAY 11 Vercel 배포 + 도메인 연결 20분 컷), itch.io에서 발이 묶였습니다.

공유 창에서 자꾸 오류가 나는 겁니다. 3시간 정도 매달려서 이것저것 시도해 봤는데 결국 완전히 잡지는 못했어요. 원인을 추적해 보니 제 코드 문제가 아니라 itch.io 플랫폼의 샌드박스 정책 때문이었습니다. 외부 SNS API 호출이 샌드박스 안에서 차단되는 구조라, 코드를 어떻게 손봐도 우회가 어려운 부분이 있었습니다. (이것도 다 AI 알려줘서 알았습니다. 바이브 코딩에서는 스스로 알아내지 않아도 돼요.)

다행히 Vercel에 올린 웹 주소에서는 공유 기능까지 오류 없이 잘 돌아갑니다. itch.io 버전은 게임 자체는 정상 동작하는데 공유 기능만 좀 불안정하다고 보시면 됩니다.

바이브 코딩, 해보고 느낀 점

며칠 전까지만 해도 ‘게임도 가능할까’ 싶었는데, 결과물이 나오긴 나왔습니다. 다만 한 가지 확실히 배운 게 있어요.

‘돌아가는 것’과 ‘재미있는 것’ 사이의 거리는 생각보다 멉니다.

처음 4시간보다 그 뒤에 다듬은 시간이 훨씬 길었고, 더 중요했습니다. AI가 코드를 뽑아주는 건 빠른데, 결국 “이게 재미있나?”, “처음 들어온 사람이 헷갈리지 않나?” 같은 판단은 사람이 해야 하는 부분이더라고요.

그래도 결론은 명확합니다. 아이디어가 있는 사람에게 바이브 코딩은 진입 장벽을 무섭게 낮춰주는 도구입니다. 코딩 못한다고 망설이고 계셨다면, 일단 클로드 켜고 대화부터 시작해 보시는 걸 추천드립니다.

직접 플레이해 보세요

게임은 아래 링크에서 바로 플레이하실 수 있습니다.

👉 국기 맞히기 게임 플레이하러 가기

여기까지 읽어주신 분이라면 부탁이 하나 있습니다. 한번 들어가셔서 직접 해보시고, 솔직한 리뷰를 남겨주시면 정말 큰 도움이 됩니다. 좋았던 점도 좋고, ‘이 부분은 좀 아쉽다’ 싶은 의견도 환영합니다. 다음 업데이트에 적극 반영할 계획입니다. 그리고 이 게임 제작 과정을 조만간 정리해서 연재로 올릴 예정이니 그것도 기대해 주세요!