Claude와 바이브 코딩으로 개발한 무설치 카드 게임 'Duelborne'

실용적 조언

AI 상대 구현 시 의도적인 지연 시간과 실수를 추가하여 인간적인 재미를 부여할 것
복잡한 게임 밸런싱은 AI에 의존하기보다 직접 플레이 테스트를 통한 수동 튜닝을 병행할 것
모바일 대응 시 클릭 기반 로직 대신 터치 전용 레이어를 별도로 구축하여 조작감을 개선할 것

섹션별 상세

Claude와의 대화만으로 HTML5 Canvas 기반의 게임을 구축하는 바이브 코딩 방식을 채택했다. 텍스트 프롬프트를 통해 60fps 애니메이션, 파티클 효과, 절차적 칩튠 오디오 코드를 생성하고 이를 순수 JavaScript로 통합했다. 외부 라이브러리나 빌드 단계가 전혀 없는 제로 디펜던시 환경에서 복잡한 게임 루프를 성공적으로 구현했다. 이는 현대적인 프레임워크 없이도 AI의 도움으로 고성능 웹 애플리케이션 제작이 가능함을 입증했다.

두 진영의 비대칭 덱 밸런스를 맞추는 작업에서는 AI 기반 생성 방식의 한계가 명확히 드러났다. AI가 제안한 초기 수치만으로는 게임의 공정성을 확보할 수 없어 개발자가 직접 수백 번의 라운드를 플레이하며 데이터를 수동으로 수정했다. 정밀한 수치 조정과 게임 디자인의 미묘한 감각은 여전히 인간의 반복적인 검증과 튜닝이 필요한 영역임이 확인됐다. 바이브 코딩이 논리적 뼈대를 만드는 데는 유용하지만 최종 품질 결정에는 인간의 개입이 필수적이라는 결론에 도달했다.

보드 상태를 실시간으로 시뮬레이션하여 최적의 수를 계산하는 적응형 AI 대전 상대를 구현했다. AI는 현재 필드의 카드 배치와 마나 상황을 분석하여 가능한 모든 플레이의 점수를 매기고 행동을 결정한다. 단순히 이기기 위한 최적의 수만 두는 것이 아니라 의도적인 생각 시간과 가끔의 실수를 포함하도록 설계하여 인간 사용자가 재미를 느낄 수 있는 난이도를 조절했다. 기술적 완성도보다 사용자 경험을 고려한 의도적 비효율성 설계가 게임의 몰입감을 높이는 핵심 요소로 작용했다.

용어 해설

바이브 코딩(Vibe Coding): — AI와 대화하며 직관적으로 코드를 생성하고 수정하는 개발 방식이다. 엄격한 설계도보다 AI와의 상호작용을 통한 반복적 개선에 중점을 두어 개발 속도를 비약적으로 높인다. 복잡한 로직의 뼈대를 빠르게 구축하는 데 효과적이다.
HTML5 캔버스(HTML5 Canvas): — 웹 브라우저에서 JavaScript를 사용하여 2D 그래픽과 애니메이션을 그리는 데 사용되는 요소이다. 별도의 플러그인 없이 고성능 게임 렌더링을 가능하게 하며 웹 기반 인터랙티브 콘텐츠 개발의 핵심 기술로 활용된다.
절차적 오디오(Procedural Audio): — 미리 녹음된 파일 대신 알고리즘과 수학적 모델을 사용하여 실시간으로 사운드를 합성하는 기술이다. 파일 용량을 획기적으로 줄이면서도 게임 상황에 맞는 동적인 사운드 효과를 생성할 수 있어 효율적인 자원 관리가 가능하다.
웹 오디오 API(Web Audio API): — 웹 브라우저에서 오디오를 제어, 합성, 조작할 수 있게 해주는 고수준 JavaScript API이다. 복잡한 오디오 처리와 공간 음향 등을 구현하는 데 필수적이며 별도의 라이브러리 없이도 풍부한 사운드 경험을 제공할 수 있게 한다.

언급된 도구

Claude추천

LLM 코파일럿 및 코드 생성

HTML5 Canvas추천

2D 그래픽 렌더링

Web Audio API추천

절차적 사운드 생성

언급된 리소스

DemoDuelborne 플레이 링크