← Back to list (보관된 문서)

source	https://www.lennysnewsletter.com/p/how-i-built-lennyrpg
created	2026-03-18
by	nvidia:glm5

LennyRPG를 만든 방법

300개 이상의 에피소드 대본을 AI로 재미있게 플레이할 수 있는 게임으로 만들기

👋 매주 저는 제품 구축, 성장 견인, 커리어 가속화에 관한 독자 질문에 답합니다. 더 많은 정보: Lenny's Podcast | Lennybot | How I AI | 내가 좋아하는 AI/PM 강좌, 스피치 강좌, 면접 준비 코파일럿

P.S. Lovable, Manus, Replit, Gamma, n8n, Canva, ElevenLabs, Amp, Factory, Devin, Bolt, Wispr Flow, Linear, PostHog, Framer, Railway, Granola, Warp, Perplexity, Magic Patterns, Mobbin, ChatPRD, Stripe Atlas 1년 무료 이용권을 Insider 구독자가 되어 받으세요. 네, 이건 진짜입니다.

몇 달 전, 레니(Lenny)가 특별한 것을 공개했습니다. 그는 300개 이상의 팟캐스트 에피소드의 대본을 정형화하여 공개했습니다. 수년간 팟캐스트를 들어온 사람으로서, 저는 이걸로 실제로 무엇을 만들 수 있을지 끊임없이 생각했습니다.

레니의 원래 LinkedIn 게시물

Brian Balfour는 올바른 순간에 구축하는 것에 대해 많이 이야기합니다. 타이밍을 잘 맞추면 진짜 기회의 창을 발견할 수 있다고요. 이것이 바로 그런 창 중 하나처럼 느껴졌습니다.

처음 떠오른 아이디어는 레니 팟캐스트 게스트와 함께 면접 연습을 할 수 있는 레니 인터뷰 앱을 만드는 것이었습니다. 하지만 그 아이디어를 생각할수록 흥미가 떨어졌습니다. 면접 연습 도구는 본질적으로 스트레스를 줍니다. 그런 종류의 제품은 만들고 싶지 않았습니다. 저는 재미있는 것을 만들고 싶었습니다.

레니의 팟캐스트를 작은 롤플레잉 게임(RPG)으로 만들면 어떨까요? 픽셀 세계를 탐험하고, 레니 팟캐스트 게스트를 만나고, 제품 지식을 시험하기 위해 그들과 경쟁하고, 이기면 포켓몬처럼 포획하는 게임 말입니다. 이렇게 LennyRPG가 탄생했습니다.

픽셀 아트 게임 인터페이스로, 'LennyRPG: Catch 'Em All!'라는 제목이 있고 나무, 잔디, 건물이 있는 다채로운 타운 맵과 중앙에 작은 캐릭터가 보입니다. 왼쪽 패널에는 플레이어 통계(레벨 1, 0/200 XP, 100/100 HP, 포획 0/275)가 표시되고, 'How to Play!' 상자에는 이동, 배틀 퀘스트, C를 눌러 컬렉션 보기가 설명되어 있습니다. 오른쪽에는 컬렉션, 리더보드, 통계 공유 버튼이 있습니다.

https://www.lennyrpg.fun/에서 직접 해보세요

만든 방법은 다음과 같습니다

AI로 앱을 만들 때, 저는 보통 매우 간단한 흐름을 따릅니다:

워크플로우: 핵심 아이디어 정의 → PRD 작성(대략적인 범위, 아이디어, 기술 스택) → POC(개념 증명) 생성 → 나머지 기능 추가 → 다듬기 → 출시.

AI를 활용해 제품을 만드는 내 워크플로우

핵심 아이디어 정의: 앱이 무엇인지 명확히 하는 것으로 시작합니다. 시각적 요소가 많은 제품의 경우, AI가 요구사항을 더 잘 이해할 수 있도록 스케치합니다.
제품 요구사항 문서(PRD) 작성: AI와 함께 핵심 아이디어를 적절한 PRD로 변환합니다. 이것이 구축의 단일 진실 공급원(single source of truth)이 됩니다.
개념 증명(POC) 생성: PRD를 사용해 구현을 계획하고 핵심 기능을 먼저 구축합니다.
나머지 기능 추가: 데이터베이스 연결, 설정, 프로필 페이지 등 비핵심 기능을 포함한 종단 간 흐름을 완성합니다.
다듬기: 앱을 처음부터 끝까지 살펴보며 UX/UI 세부 사항을 수정하고 모든 것이 안정적인지 확인하기 위해 최종 코드 리뷰를 합니다.
출시: 배포하고, 피드백을 받고, 세상에 내놓습니다.

이 과정은 AI 시대 이전과 크게 다르지 않습니다. 하지만 이제는 AI가 내가 원하는 것의 맥락을 모두 파악할 수 있도록 처음 두 단계에 충분한 시간을 할애합니다. 제 경험상 핵심 아이디어와 PRD를 확실히 잡는 것이 나머지 구축 과정의 80%를 결정합니다.

구축 전반에 사용한 주요 도구와 기술은 다음과 같습니다:

아이디어 구상 및 계획: 미로, ChatGPT
코딩: Claude Code, Codex, Cursor
이미지 생성: GPT Image Gen (gpt-image-1.5)
퀴즈 생성: GPT-4o
게임 엔진: Phaser 3
데이터베이스: Supabase
배포: Vercel

이제 이 과정을 사용해 RPG 게임을 어떻게 만들었는지 살펴보겠습니다. 각 단계에서 사용한 정확한 프롬프트, 도구, 결정을 공유하므로 여러분도 동일한 워크플로우를 자신의 프로젝트에 적용할 수 있습니다.

1. 핵심 아이디어 정의

핵심 아이디어는 간단했습니다. 레니의 팟캐스트를 포켓몬 스타일의 RPG로 만드는 것입니다. 플레이어가 야생에서 팟캐스트 게스트를 만나고 제품 질문을 통해 그들과 배틀하는 방식입니다.

많은 앱의 경우 텍스트와 명확한 아이디어만으로 시작하기에 충분합니다. 하지만 이 게임처럼 시각적 요소가 강한 제품의 경우, 시각화에 시간을 투자하면 게임의 모습과 느낌을 확실히 파악하는 데 도움이 됩니다. 이는 나중에 AI에게 UI와 인터랙션을 구축하도록 요청할 때 큰 차이를 만듭니다.

이 게임을 위해 저는 미로 보드에 포켓몬 스크린샷 몇 개를 던져놓고 보드에 직접 대략적인 컨셉을 만들었습니다. 특별한 것은 없었습니다. 대부분 스크린샷 위에 텍스트와 상자를 올린 것이 전부였습니다. 하지만 제가 상상하는 맵, 배틀 화면, 캐릭터의 모습을 보여주기에는 충분했습니다.

AI에 보낸 초기 시각적 컨셉

목표는 게임을 정확히 디자인하는 것이 아니라 AI가 읽고 추론할 수 있는 구체적인 무언가를 제공하는 것이었습니다. 핵심 아이디어가 대략적으로 시각화되자, AI는 텍스트와 함께 시각 자료를 읽을 수 있었고, 다음 단계인 PRD가 훨씬 더 강력해졌습니다.

아바타 샘플 세트 만들기

시각화의 일환으로, 저는 ChatGPT로 몇 가지 테스트 아바타를 만들어 콘텐츠 생성 워크플로우를 검증했습니다. 이를 통해 일관된 픽셀 아트 스타일 아바타를 위해 필요한 프롬프트 엔지니어링을 이해할 수 있었습니다.

과정은 매우 간단했습니다. 원하는 스타일과 일치하는 RPG 캐릭터 이미지를 끌어다 놓은 다음, 레니의 사진을 ChatGPT에 추가하여 비슷한 것을 만들었습니다.

노란색 배경의 2D 픽셀 아트 RPG 캐릭터 시트. 짧은 짙은 갈색 머리와 수염이 있고 파란색 셔츠, 갈색 바지, 갈색 벨트를 착용한 남자가 앞, 뒤, 왼쪽, 오른쪽 모습으로 표현되어 있습니다. 측면 모습에는 칼이 허리에 매달려 있습니다. 위쪽에는 작은 프로필 사진과 'turn lenny into a RPG character. 2D version.'라는 텍스트가 있고, 아래쪽에는 'Image created — Pixel art RPG character views.'라는 캡션이 있습니다.

주인공 캐릭터가 생성되는 과정

만족스러워지자, 나중에 프롬프트로 재사용할 수 있도록 ChatGPT에게 톤, 스타일, 디자인을 자세히 설명해 달라고 요청했습니다.

사용한 프롬프트:

스타일링, 디자인, 색상, 비율, 전반적인 모습을 자세히 분석하고 고민한 후, 제공된 사람의 사진을 바탕으로 투명한 배경과 추가 요소 없이 유사한 정면 캐릭터를 만드는 세련된 이미지 생성 프롬프트만 반환해.

ChatGPT가 내가 좋아하는 아바타 스타일을 바탕으로 재사용 가능한 프롬프트 템플릿을 생성했습니다.

2. PRD 작성 (게으른 방식으로)

제 경험상, AI가 비전을 올바르게 실행하게 하려면 PRD가 가장 중요한 문서입니다. PRD는 인간 팀원들에게 잘 작동하는 것처럼, AI에게 앱의 목표, 문제 진술, 핵심 아이디어에 대한 기본 이해를 제공합니다. AI가 벽에 부딪히거나 컨텍스트 윈도우가 소진되면 언제든지 PRD를 참조하여 다시 정렬할 수 있습니다. 어떤 단계에 있든 PRD는 AI가 생성하는 모든 것이 실제로 구축하려는 것과 일치하도록 보장합니다. 그래서 저는 항상 여기에 시간을 투자합니다.

그렇긴 하지만, PRD를 작성하는 것은 때로 미칠 노릇입니다. 그래서 직접 PRD를 처음부터 작성하는 대신, AI가 저를 인터뷰하게 했습니다.

핵심 아이디어와 시각 자료를 ChatGPT에 붙여넣은 다음, 하나씩 답할 수 있도록 질문해 달라고 요청했습니다.

사용한 프롬프트:

다음 웹 게임을 위한 간단한 PRD를 작성하도록 나를 도와줄 질문들을 해줘: 레니의 팟캐스트의 모든 팟캐스트 에피소드를 가져와서 각 에피소드에서 질문을 생성하고, 포켓몬 RPG 게임처럼 만들고 싶어. 비슷한 시각적 요소를 갖춘. 내가 기대하는 것은, 예를 들어 야생에서 Elena를 발견하면, Elena와 제품 질문을 가지고 경쟁할 수 있고, 5개의 질문을 받고, 답을 틀리면 HP [체력]를 잃는 등등. 팟캐스트에서 50명의 게스트를 무작위로 뽑아 도전받을 수 있어. 게임의 전체 테마/디자인은 옛날 포켓몬 RPG 스타일이어야 해.

ChatGPT가 범위를 설정하고 계획을 세우는 데 도움이 되도록 카테고리별로 묶인 명확한 질문 세트를 생성했습니다.

프롬프트와 함께 ChatGPT는 17개의 질문을 반환했습니다. 저는 이를 미로로 옮겨 더 잘 시각화하고 Wispr Flow를 사용하여 구두로 빠르게 답변했습니다. 이 질문에 답하는 과정에서 제 아이디어의 격차와 가정을 생각해볼 수밖에 없었고, AI에게 1페이지 설명보다 훨씬 더 나은 맥락을 제공했습니다.

AI가 던진 모든 질문에 답한 후, 답변을 미로에 있는 모든 아티팩트와 연결하고 AI에게 포괄적인 PRD를 생성해 달라고 요청했습니다.

왼쪽에는 Productmon이라는 픽셀 아트 게임의 스크린샷(타운 장면과 'Elena Varro'라는 캐릭터와 질문 프롬프트가 있는 배틀 UI)이 있고, 오른쪽에는 개요, 문제 진술, 목표 및 목적, 타겟 사용자, 핵심 기능, 게임 범위, 질문 디자인, 보상에 대한 답변 섹션이 있는 구조화된 제품 요구사항 문서가 보이는 디지털 작업 공간.

모든 연결된 아티팩트로 생성된 PRD

3. 개념 증명(POC) 생성

PRD가 준비되자, POC 작업을 시작하기 위해 이를 마크다운 파일로 Cursor로 옮겼습니다.

개발을 시작하기 위해 Cursor에 마크다운 파일로 PRD를 생성함

실제 개발을 위해 내 설정은 세 가지 도구를 사용합니다: Claude Code, Codex, 그리고 Cursor의 Composer입니다.

저는 Claude Code를 수석 엔지니어로 대합니다. 구현 계획을 작성하고, 아키텍처를 고민하고, 제품 및 디자인 제약 사항을 추론하는 데 도움을 줍니다. 또한 솔루션과 오픈 소스 라이브러리를 검색하는 데에도 탁월하다는 것을 알았습니다.

Codex는 주로 구현 계획의 작업을 실행하는 데 사용합니다. 지침을 정확하게 따르는 데 매우 능하며, 더 넉넉한 토큰 한도를 제공합니다.

Composer는 주로 문서 포맷팅, JSON 파일, 간단한 스크립트 작성과 같은 더 작은 작업에 사용합니다.

PRD를 입력으로 사용하여, 저는 먼저 Claude Code에게 더 빠르게 진행하는 데 도움이 될 수 있는 오픈 소스 프로젝트를 검색해 달라고 요청했습니다. 이것은 제가 항상 초기에 하는 일입니다. 종종 사람들이 이미 비슷한 것을 만들어 GitHub에 오픈 소스로 공개했는데, 이를 통해 설정을 훨씬 더 빠르게 할 수 있습니다.

Claude Code가 오픈 소스 라이브러리를 검색하는 데 도움을 줄 수 있음

처음 찾은 라이브러리 중 하나는 RPG-JS였습니다. 이 라이브러리 덕분에 무언가를 실행하는 데 약 5분밖에 걸리지 않았습니다. 필수적인 게임 흐름을 빠르게 구축할 수 있었습니다. 오버월드 맵은 기본적인 플레이어 이동, 조우 구역, 간단한 UI 요소를 처리했습니다.

RPG-JS 라이브러리를 사용한 POC

하지만 매우 빠르게 문제에 부딪혔습니다.

도전 #1: RPG-JS의 한계와 피벗

몇 번의 반복 후, RPG-JS가 올바른 기반이 아님이 분명해졌습니다. 이 프레임워크는 인벤토리 시스템과 무기 기반 전투를 중심으로 많이 설계되었습니다. 제 배틀은 퀴즈 기반이고 논리 기반였기 때문에 이것은 저에게 불리하게 작용했습니다. 억지로 끼워 맞추려 할수록 AI가 시스템을 깔끔하게 추론하기가 더 어려워졌습니다.

Claude Code와 논의한 후, 저는 억지로 밀어붙이는 것을 멈추고 피벗하기로 결정했습니다. 제가 사용하기로 결정한 새로운 프레임워크는 Phaser로, 데스크톱과 모바일용 HTML5 게임을 만드는 데 사용되는 2D 게임 프레임워크입니다.

도전 #2: Phaser에서 맵 실행하기

Phaser로 전환한 후, 장면, 맵, 게임 로직 측면에서 훨씬 더 유연해졌습니다. 하지만 모든 것이 더 사용자 정의 가능하기 때문에, 기본 맵을 설정하는 것만으로도 훨씬 더 많은 작업이 필요했습니다.

다행히 Claude Code를 사용하여, 한참 전에 오픈 소스 재사용 가능한 맵 템플릿이 포함된 Medium 글을 찾았습니다. 이것이 속도를 크게 높이고 다시 게임 자체에 집중하는 데 도움이 되었습니다.

오픈 소스 템플릿으로 Phaser에서 실행되는 맵의 첫 번째 버전

도전 #3: Phaser에서 디테일 다듬기

Phaser는 많은 다양한 기능을 가진 강력하지만 복잡한 라이브러리입니다. Claude Code가 실제로 작동 방식을 이해하는 데 시간이 걸렸고, 디테일을 맞추기 위해 많은 반복을 거쳐야 했습니다. 올바른 글꼴 가져오기, UI 요소가 올바르게 배치되었는지 확인, Phaser의 열린 캔버스 내에서 모든 것을 편집하는 것과 같은 것들은 모두 많은 시행착오가 필요했습니다.

이와 같이 복잡한 작업을 위한 한 가지 팁은 Claude Code에게 시도한 모든 것을 기록하는 간단한 마크다운 파일을 만들도록 요청하는 것입니다. 그러면 계속해서 참조하여 작동하는 것과 작동하지 않는 것을 업데이트할 수 있습니다.

글꼴 및 UI 렌더링 수정 시도를 추적하는 Claude Code의 마크다운 로그

이것은 Claude Code와 일반적으로 AI가 코드베이스와 프레임워크를 더 잘 이해하는 데 많은 도움이 됩니다. 코드베이스가 커질수록, 글꼴 변경과 같은 작은 것조차 AI가 처리하기 어려워질 수 있기 때문에 특히 유용합니다.

Phaser에서 UI 디테일을 다듬기 전과 후

이 모든 도전 과제를 해결한 후, 게임은 마침내 플레이 가능한 상태에 도달했습니다. 시작 화면, 맵, 배틀 화면이 모두 종단 간으로 작동했습니다.

시작 화면에서 배틀 화면까지 모든 것이 종단 간으로 작동하는 POC

POC가 준비되자, 저는 내부적으로 공유하여 몇몇 사람들이 시도해 보도록 했습니다. 이 단계에서 저는 세련된 피드백이나 자세한 버그 보고서를 원하지 않았습니다. 주로 사람들이 처음 게임을 열었을 때 어떻게 반응하는지 보고 싶었습니다. 즉시 무엇을 해야 할지 이해했나요? 핵심 루프가 이해가 되나요? 가장 중요한 것은—재미있었나요, 아니면 일처럼 느껴졌나요?

이런 종류의 가볍고 비공식적인 테스트는 핵심 아이디어가 작동한다는 확신을 주었고, POC를 더 완전한 것으로 발전시키는 데 시간을 투자할 가치가 있다는 것을 알게 해주었습니다.

LennyRPG가 실행되는 노트북을 보고 있는 두 사람.

성장 팀장 Yuliya와 엔지니어 Mehdi와 함께 사무실에서 게임 테스트

4. 나머지 기능 추가

기본 기능으로 앱이 올바르게 실행되고 사무실 동료들로부터 훌륭한 피드백을 받자, POC를 적절한 게임으로 확장하기 위해 계획을 따르기 시작했습니다. 하지만 과정은 예상보다 덜 직관적이었습니다. 주로 처리해야 할 팟캐스트 에피소드가 많았기 때문입니다. 작동하는 POC에서 완전한 게임으로 확장하는 것은 주로 수동이 아닌 체계적으로 처리하는 방법을 알아내는 것이었습니다.

여기 도달하는 데 도움이 된 주요 도구와 결정이 있습니다:

300개 이상의 대본 체계적으로 처리하기

레니가 제공한 대본 파일에는 원시 텍스트만 포함되어 있었습니다. 게임에서 사용할 수 있게 하려면 먼저 에피소드 제목, 에피소드 URL, 팟캐스트 커버와 같은 것으로 데이터를 보강해야 했습니다.

이를 위해 Cursor의 Composer로 팟캐스트 RSS 피드를 가져와 각 대본에 누락된 메타데이터를 첨부했습니다. 이것은 게임이 실제로 사용할 수 있는 훨씬 더 완전한 데이터셋을 제공했습니다.

Cursor의 Composer를 사용하여 레니의 팟캐스트 RSS 피드에서 메타데이터를 가져오는 간단한 스크립트 작성

그런 다음 Claude Code를 사용하여, OpenAI API를 사용하여 각 에피소드에 대한 퀴즈 질문을 체계적으로 생성할 수 있는 간단한 CLI 도구를 만들어 달라고 요청했습니다. 에피소드별로 이 작업을 하는 대신, 도구는 모든 것을 한 번에 처리했습니다.

이 단계는 프롬프트를 입력하는 것만큼 간단했습니다:

"다음 요구 사항과 JSON 형식: {요구 사항 및 JSON 형식}에 따라 /transcript 폴더의 모든 대본을 하나씩 읽고, 각각에 대해 5개의 질문을 생성하는 간단한 방법을 만드는 CLI 명령 도구를 만들어줘"

완료하는 데 약 20분이 걸렸고, 출력은 게임에 바로 연결할 수 있는 구조화된 JSON 파일이었습니다.

Claude Code가 각 에피소드의 대본을 자동으로 스캔하고 질문을 추출하는 CLI 도구를 작성함

250개 이상의 RPG 아바타를 만드는 잠재적인 악몰

게임을 구축하는 가장 어려운 부분 중 하나는 일관된 방식으로 250개 이상의 RPG 아바타를 만드는 것이었습니다. 각 아바타는 게스트의 사진이 입력으로 필요했습니다. 게스트 사진을 하나씩 검색하고 다운로드하여 수동으로 하는 것은 영원히 걸렸을 것입니다.

다행히 레니의 모든 에피소드에는 이미 게스트의 아바타가 포함된 에피소드 커버가 있습니다. 이를 위해 저는 Cursor의 Composer를 트리거하여 RSS 피드를 다시 가져와 이미지 URL을 가져오고, 로컬로 다운로드하고, 이것들을 아바타 생성의 입력으로 사용했습니다.

Claude Code가 이 모든 에피소드 커버를 자동으로 다운로드해 줌.

이것은 소싱 문제를 해결했지만 또 다른 문제를 야기했습니다: 모든 아바타가 품질과 스타일에서 일관되게 보이게 하려면 어떻게 해야 할까요?

여기서 저는 OpenAI Playground를 사용하여 반복적으로 프롬프트를 테스트하고 다듬었으며, 어떤 모델이 작업에 가장 적합한지 테스트했습니다. 모든 생성된 아바타가 동일한 스타일을 따르고 동일한 게임에 속하는 것처럼 보일 때까지 계속 조정했습니다.

어두운 테마의 OpenAI Playground 'Images' 화면. 세 개의 작은 픽셀 아트 캐릭터 스프라이트(흰색 셔츠를 입은 수염 두 명과 파란색 셔츠와 갈색 바지를 입은 젊은 캐릭터 한 명)가 텍스트와 로고를 무시하면서 사진에서 고품질 2D 픽셀 아트 RPG 캐릭터 스프라이트를 만들도록 지시하는 프롬프트 상자 위에 표시됨. 캡션: '프롬프트 테스트를 위한 OpenAI Playground.'

프롬프트 테스트를 위한 OpenAI Playground

프롬프트가 안정되자, 저는 다시 Claude Code를 사용하여 에피소드 커버에서 모든 RPG 아바타를 체계적으로 생성할 수 있는 또 다른 CLI 도구를 작성했습니다. 이것은 매우 고통스러운 수동 작업을 원클릭 프로세스로 바꾸었습니다.

Claude Code가 에피소드 커버에서 아바타를 생성하는 또 다른 CLI 도구를 작성함

물론 각 출력에 대해 크기와 스타일이 비슷하고 팟캐스트 커버에서 게스트가 보이는 모습과 일치하는지 하나씩 확인해야 했습니다. 이것은 몇 가지 재미있는 엣지 케이스가 있었기 때문에 가장 흥미로운 단계 중 하나였습니다.

예를 들어, Adam Grenier가 원래 팟캐스트 커버에서 프로필 이미지 위에 실제로 토끼 귀를 달고 있다는 것을 몰랐습니다—거의 지울 뻔했습니다. 또는 Jake Knapp과 John Zeratsky의 에피소드처럼 커버 이미지에 두 사람이 있는 에피소드가 있어서, AI에게 각 사람에 대해 별도의 단일 이미지를 생성하도록 지시해야 했습니다.

몇 가지 재미있는 엣지 케이스: Adam Grenier의 토끼 귀가 아바타로 넘어왔고, Jake Knapp과 John Zeratsky와 같은 두 명의 게스트가 있는 에피소드는 별도의 아바타가 필요했음.

어두운 파란색 배경에 'LennyRPG — Test your product knowledge with industry leaders'라는 제목이 있고 그 아래에 행과 열로 된 다채로운 픽셀 아트 아바타의 큰 그리드가 있으며, 왼쪽 상단에 더 큰 수염난 남성 아바타가 있음. 캡션: '모든 아바타 생성 결과...'

모든 아바타 생성 결과

Claude Code의 배경 음악 마법

오디오는 모든 게임의 큰 부분입니다. 듀오링고와 같은 많은 성공한 게임화 앱은 사운드 디자인에 많은 노력을 투자합니다. 모든 것을 더 생생하게 느끼게 만들기 때문입니다. 동시에 올바른 배경 음악을 찾고 게임에 연결하는 것은 보통 많은 시간이 걸립니다.

그래서 저는 Claude Code에 가서 간단히 말했습니다: "각 단계에 대한 배경 음악을 찾아줘, 음소거 컨트롤 포함해서."

놀랍게도, 게임용 오픈 소스 오디오 라이브러리인 OpenGameArt.org를 찾아내어 게임에 올바르게 연결했습니다. 프롬프트를 작성할 때, 저는 실제로 플레이어가 맵에 있을 때의 배경 음악만 추가하고 싶었습니다. 하지만 자동으로 배틀 화면, 승리 화면, 패배 화면에도 음악을 추가했습니다. 타이밍과 볼륨은 조정해야 했지만, 대부분의 힘든 작업은 자동으로 이루어졌습니다. 그 부분은 정말 마법처럼 느껴졌습니다.

터미널 스타일 인터페이스. 웹 검색 및 다운로드 도구를 사용하여 8비트 JRPG 사운드트랙 zip을 가져오고, 'Opening', 'Prelude', 'Sanctuary'와 같은 트랙 이름을 나열하고, 선택한 포켓몬 스타일의 로열티 프리 음악 파일을 게임 디렉토리로 복사하는 명령어가 표시됨. 'Claude Code가 자동으로 음악을 가져와서 다운로드하고 게임에 연결했다'는 노트 포함.

Claude Code가 자동으로 음악을 가져와서 다운로드하고 게임에 연결함: 미쳤음.

게임 메커니즘 정의

게임 메커니즘을 정의하는 것은 과정 중 가장 흥미로운 부분이었습니다. 게임이 재미있고 스트레스가 적으면서도 사람들이 진행과 긴장감을 느낄 수 있도록 충분히 경쟁적이기를 원했기 때문입니다.

저는 과거에 게임 이론을 공부했지만, 이 프로젝트의 경우 대부분은 상식, 플레이 테스트, 반복에 달려 있었습니다.

저는 매우 간단한 규칙 세트로 시작했습니다: 각 상대는 세 개의 질문을 가지고 있습니다. 모든 정답은 XP(경험치)를 줍니다. 세 개 모두 정답이라면 완벽한 킬로 간주됩니다.

흥미를 유지하기 위해 작은 변화를 추가했습니다. 가끔 세 가지 질문 중 하나가 보너스 질문이 되어 추가 XP와 작은 HP 부스트를 줍니다. 이것은 균형을 깨지 않으면서 약간의 무작위성을 도입합니다.

스테이지 진행은 XP 임계값을 기반으로 합니다. 필요한 XP에 도달하면 새로운 게스트 그룹이 있는 새로운 맵이 잠금 해제됩니다. 패배한 상대는 사라지고 컬렉션에 추가되므로 동일한 상대를 반복해서 파밍할 수 없습니다.

저는 대부분의 로직을 직접 먼저 해결한 다음 AI와 검증하여 명백한 버그나 엣지 케이스가 없는지 확인했습니다. AI가 숫자와 흐름을 검설했지만, 균형, 속도, 스트레스 수준에 대한 최종 결정은 모두 수동이었습니다.

ChatGPT에서 게임 규칙의 세부 사항에 대해 AI와 논의하는 대화.

ChatGPT와 게임 규칙에 대해 고민하는 나

MCP를 사용하여 Supabase 연결 (리더보드)

게임의 마지막 단계는 리더보드입니다. 사람들이 자신의 순위를 보고 서로 경쟁할 수 있는 게임의 경쟁 요소입니다.

저는 이를 위해 데이터베이스를 설정해야 한다는 것을 알고 있었기 때문에 Claude Code에서 Supabase MCP를 설정하는 것으로 시작했습니다. 즉, 테이블, API, 연결을 수동으로 설정하는 대신, Claude Code에게 Supabase와 동기화되는 리더보드를 원한다고 설명하기만 하면 되었습니다.

그렇게 하자 Supabase MCP가 트리거되어 create_project 및 apply_migration과 같은 도구를 호출하여 데이터베이스 구조와 게임과 Supabase 간의 연결을 포함하여 프로젝트와 테이블을 자동으로 설정했습니다.

이것은 전체 과정을 훨씬 빠르게 만들었고 일반적으로 훨씬 더 오래 걸릴 많은 설정 작업을 제거했습니다. 그 결과 백엔드 코드를 거의 건드릴 필요 없이 플레이어 진행 상황을 실시간으로 동기화하는 작동하는 리더보드가 나왔습니다.

어두운 코드 편집기 또는 터미널 보기. Supabase MCP 연결에 대한 메시지와 RLS가 있는 리더보드 테이블 생성, Supabase 클라이언트 구성, .env 안전 확인과 같은 단계를 포함하여 글로벌 리더보드를 안전하게 설정하기 위한 TODO 체크리스트가 표시됨. 'mcp__supabase__get_project_url'과 같은 명령어와 'Supabase MCP가 모든 것을 마법처럼 설정한 방법'이라는 캡션 포함.

Supabase MCP가 모든 것을 마법처럼 설정한 방법

노란색 테두리가 있는 픽셀 아트 'Hall of Fame' 리더보드 패널. GRIBS, BAPTISTE, RK 등의 플레이어 이름과 그들의 레벨 및 XP(예: GRIBS 레벨 7, 3540 XP)가 나열됨. 하단에 1–5 내비게이션 버튼과 새로고침 버튼이 있고, 희미한 게임 배경에 'Prove your worth, guests'라고 적혀 있음.

게임 내 리더보드

5. 다듬기

출시 전, 저는 앱이 안정적이고 사용 가능하며 공개 출시에 적합할 만큼 괜찮아 보이도록 마무리에 집중했습니다. 이 단계에서 핵심 게임플레이는 이미 작동하고 있었기 때문에 목표는 새로운 기능을 추가하는 것이 아니라 마찰과 명백한 문제를 줄이는 것이었습니다.

Claude Skills로 QA 확인

이 단계에서 저는 Claude Code Awesome Skills 마켓플레이스에서 리뷰 스킬을 다운로드하여 전체 코드베이스를 포괄적으로 검토했습니다. 이것은 장면 간의 상태 문제, 누락된 에러 처리, 여러 라운드의 게임플레이 후에야 나타나는 작은 로직 버그와 같이 일반적으로 놓칠 수 있는 것을 잡는 데 특히 도움이 되었습니다.

제안된 모든 것을 맹목적으로 수락하지는 않았지만, 출시 전에 확인해야 할 견고한 체크리스트를 제공했습니다.

어두운 테마의 Claude Code 인터페이스. AI 기반 코드 리뷰를 위한 '/review'와 보류 중인 변경 사항에 대한 보안 리뷰를 실행하는 '/security-review'가 있는 명령 팔레트가 표시됨. 캡션: 'Claude Code의 리뷰 에이전트.'

Claude Code의 리뷰 스킬

UI 다듬기

저는 게임을 처음부터 끝까지 살펴보고 모든 UI 및 UX 불일치를 마크다운 파일에 기록했습니다—간격 문제, 텍스트 오버플로, 불명확한 레이블, 정렬 문제, 시각적 계층 구조 문제와 같은 것들입니다. 모든 것이 기록되자, AI가 목록을 하나씩 가져와 수정하게 했습니다. 이것은 문제가 명확히 설명되었을 때 특히 효과적이었습니다. 또한 앱을 클릭하다 보면서 임기응변으로 수정하는 것과 비교할 때 과정을 훨씬 더 체계적으로 만들었습니다.

SEO

SEO를 위해, 저는 Claude Code를 사용하여 기본 사항을 알아내도록 도왔습니다: 페이지 제목, 메타 설명, 소셜 미리보기, 기본 인덱싱 설정입니다. 이것은 콘텐츠가 많은 사이트가 아니라 게임이었기 때문에 SEO 최적화를 깊게 파고들지 않았습니다. 주요 목표는 사이트가 인덱싱 가능하고 공유 가능하며 사람들이 소셜 미디어에 게시할 때 좋아 보이게 하는 것이었습니다.

LennyRPG 프로젝트의 index.html에 대한 코드 편집기 diff 보기. 제목, 설명, 키워드, 정식 URL, Open Graph/Twitter 카드 필드를 추가하여 'LennyRPG — Test Your Product Knowledge | Lenny Rachitsky's Podcast Game'을 홍보하는 HTML 메타 태그가 추가됨. 모든 태그가 Claude Code에 의해 자동으로 추가되었다는 노트 포함.

이 모든 태그는 Claude Code가 자동으로 추가했습니다.

6. 출시

게임이 Vercel에 문제없이 배포되자, 저는 커뮤니티 Slack에서 레니에게 연락하여 빠른 검토를 받았습니다. 솔직히 그가 얼마나 바쁜지를 고려하면 직접적인 답장을 기대하지도 않았습니다. 하지만 놀랍게도 그에게서 매우 친절하고 격려하는 답장을 받았습니다. 그것이 그냥 출시해야겠다는 마음을 먹게 해준 계기였습니다.

레니와의 초기 대화