Claude와 함께 '바이브 코딩'으로 TCG 카드 게임을 처음부터 끝까지 만들었습니다

핵심 요약

Claude를 활용한 '바이브 코딩'으로 프레임워크 없이 바닐라 JS와 HTML5 캔버스만으로 TCG 게임을 개발한 사례.

개발 방식 — 프레임워크나 라이브러리 없이 순수 바닐라 JS와 HTML5 캔버스만 사용함

게임 메커니즘 — 비대칭 덱 2종과 AI 대전 기능을 포함한 턴제 카드 게임 구현

개발 난관 — AI 생성 코드의 밸런스 조정과 모바일 터치 인터페이스 구현이 가장 어려웠음

AI 활용 — Claude를 코파일럿으로 활용해 렌더링, 오디오, AI 로직까지 전 과정을 생성함

Claude를 코파일럿으로 삼아 '바이브 코딩'만으로 완전히 구축한 턴제 카드 게임 Duelborne을 출시했습니다.

프레임워크도, 엔진도, 라이브러리도 없습니다. HTML5 캔버스에서 돌아가는 순수 바닐라 JavaScript입니다. 게임 전체가 브라우저 탭 하나에서 실행됩니다.

게임 특징:

개발 과정에서 놀라웠던 점:

비대칭 덱 2종의 밸런스를 맞추는 것이 바이브 코딩의 한계였습니다. 게임 밸런스는 '바이브'로 해결할 수 없어서, 수백 번의 라운드를 직접 플레이하며 수치를 수동으로 조정해야 했습니다.
AI가 가장 재미있는 부분이었습니다. 보드 상태를 시뮬레이션하여 가능한 모든 수를 점수화하지만, 핵심은 이길 수 없는 수준이 아니라 똑똑하게 느껴지도록 만드는 것이었습니다. 인간처럼 보이게 하려고 의도적인 '생각' 지연과 가끔은 차선책을 선택하도록 만들었습니다.
60fps의 캔버스 렌더링, 카드 애니메이션, 파티클 효과, 절차적 칩튠 오디오까지 모두 Claude와의 대화를 통해 생성했습니다.
모바일이 가장 어려웠습니다. 카드 게임은 탭, 홀드, 스와이프가 필요한데, 이는 데스크톱 클릭과는 완전히 다른 상호작용 모델입니다. 결국 커스텀 터치 레이어를 처음부터 직접 만들었습니다.

기술 스택:

여기서 플레이해보세요 (무료, 가입 없음): https://www.pixelprompt.it/giochi/duelborne.html

이 커뮤니티의 피드백을 듣고 싶습니다. 혹시 단순 UI가 아닌 실제 게임 로직 복잡도를 가진 무언가를 바이브 코딩으로 시도해 본 분 계신가요? AI가 생성한 코드에 정밀한 튜닝이 필요할 때 어떻게 처리하셨나요?

핵심 요약

Claude를 활용한 '바이브 코딩'으로 프레임워크 없이 바닐라 JS와 HTML5 캔버스만으로 TCG 게임을 개발한 사례.

개발 방식 — 프레임워크나 라이브러리 없이 순수 바닐라 JS와 HTML5 캔버스만 사용함

게임 메커니즘 — 비대칭 덱 2종과 AI 대전 기능을 포함한 턴제 카드 게임 구현

개발 난관 — AI 생성 코드의 밸런스 조정과 모바일 터치 인터페이스 구현이 가장 어려웠음

AI 활용 — Claude를 코파일럿으로 활용해 렌더링, 오디오, AI 로직까지 전 과정을 생성함

Claude를 코파일럿으로 삼아 '바이브 코딩'만으로 완전히 구축한 턴제 카드 게임 Duelborne을 출시했습니다.

게임 특징:

개발 과정에서 놀라웠던 점:

비대칭 덱 2종의 밸런스를 맞추는 것이 바이브 코딩의 한계였습니다. 게임 밸런스는 '바이브'로 해결할 수 없어서, 수백 번의 라운드를 직접 플레이하며 수치를 수동으로 조정해야 했습니다.
AI가 가장 재미있는 부분이었습니다. 보드 상태를 시뮬레이션하여 가능한 모든 수를 점수화하지만, 핵심은 이길 수 없는 수준이 아니라 똑똑하게 느껴지도록 만드는 것이었습니다. 인간처럼 보이게 하려고 의도적인 '생각' 지연과 가끔은 차선책을 선택하도록 만들었습니다.
60fps의 캔버스 렌더링, 카드 애니메이션, 파티클 효과, 절차적 칩튠 오디오까지 모두 Claude와의 대화를 통해 생성했습니다.
모바일이 가장 어려웠습니다. 카드 게임은 탭, 홀드, 스와이프가 필요한데, 이는 데스크톱 클릭과는 완전히 다른 상호작용 모델입니다. 결국 커스텀 터치 레이어를 처음부터 직접 만들었습니다.

기술 스택:

여기서 플레이해보세요 (무료, 가입 없음): https://www.pixelprompt.it/giochi/duelborne.html

핵심 요약