AI IDE에 14엔으로 떨어지는 퍼즐 게임을 만들게 했다 — '사양서 선행'의 2단계 프롬프트가 안정적이다

직접 만든 AI IDE인 "Teaspoon IDE"를 사용해, ぷよぷよ 스타일의 낙하 퍼즐 게임을 만들어 보았습니다. 입력한 프롬프트는 단 두 번이었습니다. 소요된 API 비용은 약 14엔이었습니다 (Gemini 3.8 Flash, Google AI Studio에서 확인).

완성품은 브라우저에서 바로 플레이할 수 있습니다:

2개씩 한 세트의 돌(stone)이 위에서 떨어져 내려와, 같은 색깔의 돌이 상하좌우로 3개 이상 연결되면 사라지는 간단한 ぷよぷよ 스타일입니다. 연쇄 반응도 제대로 작동합니다 (이미지는 연쇄 3회, 점수 210점 지점).

AI 채팅 모델로는 gemini-3.8-flash를 선택하고, 탐색기(Explorer)의 '새 프로젝트'에서 빈 폴더를 만듭니다.

바로 "게임을 만들어줘"라고 말하지 않습니다. 먼저 사양서(readme.md)만 만들게 합니다.

간단한 ぷよぷよ 스타일의 퍼즐 게임을 만들고 싶다. 구현은 하지 말고, 사양을 정리한 readme.md만 만들어라. 내용은 다음과 같다: 2개 세트의 돌이 위에서 떨어져 내려와, 바닥에 닿은 후 같은 색깔의 돌이 상하좌우로 3개 이상 연결되면 사라진다. 사라진 후에 위의 돌이 떨어지고 다시 정렬되면 연쇄가 발생하며, 화면 상단에 돌이 넘친 상태로 낙하가 끝나면 게임 오버다. 조작은 4키를 이용해 왼쪽 이동, 6키로 오른쪽 이동, 5키로 오른쪽 회전, 2키로 고속 낙하로 한다. 파일 구성은 index.html, style.css, script.js의 세 가지로 하며, 효과음 등은 필요 없으니 심플하게 하자. 판면 크기나 색상 개수 등 정해지지 않은 부분은 임의로 정해서 readme.md에 적어라.

그러자 AI가 사양서를 생성합니다. 판면 크기(6×12)나 색상 개수(4색)처럼 제가 지정하지 않았던 세부 사항까지 사양으로 작성해 줍니다.

여기서 인간의 검토 포인트입니다. 마음에 들지 않으면 readme.md를 직접 수정하거나, 추가 지시를 내리는 것이 가능합니다. 구현 전에 "생각했던 것과 다르다"는 부분을 바로잡을 수 있습니다.

사양서에 만족했다면, 구현 지시는 이것뿐입니다.

readme.md의 사양대로 구현해라

AI는 readme.md를 읽고, index.html / style.css / script.js를 생성합니다. 파일 쓰기는 임의로 이루어지지 않으며, 승인 다이얼로그에서 내용을 확인한 후에 적용됩니다.

표시 메뉴에서 터미널을 열고, start index.html만 실행하면 됩니다 (AI에게 "브라우저에서 열어줘"라고 부탁해도 같은 결과입니다).

브라우저에서 게임이 구동되어 완성되었습니다. 여기까지 프롬프트 2회・소요 시간 몇 분・약 14엔이었습니다.

이번의 'readme.md → 구현'이라는 2단계 방식은 실제 개발 워크플로우와 같은 형태입니다.

사양서가 사실상의 상세 프롬프트가 된다 — 구현 지시는 "사양대로"라는 한마디로 충분하다 -
인간이 검토하고 조정할 수 있다 — 판면 크기나 규칙 해석의 차이를 구현 전에 바로잡을 수 있다 -
AI도 혼란이 줄어든다 — 요구사항이 문서화되어 있으므로, 구현 시의 오류가 적다

"AI에게 맡겨 한 번에 만들게 하는 것"보다, 중간 단계를 거치는 것이 결과적으로 더 빠르고 확실하다는 느낌을 받았습니다.

총 4개의 파일(readme.md 포함)이 있습니다.

참고로 readme.md는 단순한 메모가 아니라, 구현의 재료로 AI가 읽어들이는 파일입니다. '사양서가 사양으로서 기능한다'는 것이 2단계 방식의 핵심입니다.

이번에 사용한 것은 직접 만든 오픈소스 계열 AI IDE인 "Teaspoon IDE"입니다.

• 탐색기・Monaco 에디터・AI 채팅・Git・터미널이 통합된 Electron 기반 IDE
• AI가 파일 생성・편집・검색・명령어 실행을 자율적으로 진행하는 에이전트 루프 내장
• 쓰기・명령어 실행은 모두 승인 다이얼로그를 거친다. 체크포인트에서 롤백도 가능하다
• Gemini API는 BYOK(자신의 키 사용) 방식이라 비용은 사용한 만큼만 발생한다. Ollama + 로컬 LLM을 선택하면 완전 무료/오프라인에서도 작동할 수 있다

리포지토리: https://github.com/cuculhart/teaspoon-ide

제품 페이지: https://cuculhart.com/teaspoon.html

이번 과정에 스크린샷을 첨부하여 설명한 페이지: https://cuculhart.com/teaspoon-usecase2.html

• 프롬프트는 '사양서를 작성해 줘' → '사양대로 구현해 줘'의 2단계 방식
• 낙하 퍼즐(연쇄 반응 포함)이 완성되어 실제로 플레이 가능함
• 비용은 Gemini 3.8 Flash로 약 14엔
• '사양서 선행'은 작은 앱을 만들 때도 유효한 방법론입니다.

여러분도 '먼저 readme.md를 작성하게 하는' 시도를 해보세요.