30분 만에 어떤 소설이든 플레이 가능한 브라우저 게임으로 변환하기 — novel-game skill 소개

새로운 ModelStudio Skill이 오늘 출시되었습니다. 어떤 소설이나 단편 소설이든 입력하면 분기되는 장면(branching scenes), AI 생성 초상화, 시네마틱 컷신(cinematic cutscenes), 선택적 TTS 내레이션, 절차적 Web Audio 음악, 그리고 저장 슬롯(save slots)을 갖춘 완전한 React SPA를 구축합니다. 그런 다음 localhost를 열고 플레이하면 됩니다.

Repo: github.com/modelstudioai/skills
Skill path: skills/novel-game/
By ModelStudioAI

실제 기능

한 문장으로 요약하자면: 에이전트(Agent)에게 소설을 건네주면, 친구와 공유할 수 있는 플레이 가능한 브라우저 게임을 돌려받습니다.

이것은 단순히 "줄거리를 생성하고 이를 인터랙티브하다고 부르는 것"이 아닙니다. 또한 "여기에 프롬프트가 있으니 웹 UI에 붙여넣으세요"라고 하는 것도 아닙니다. novel-game skill은 말 그대로 다음을 수행합니다:

• 전체 장면 그래프(scene graph), 캐릭터 로스터(character roster), 분기되는 선택지, 엔딩, 그리고 저장 시스템을 갖춘 실제 React 프로젝트를 구축(scaffolds)합니다.
• bl CLI를 통해 오프라인에서 *모든 에셋(asset)*을 생성합니다 — 5초 루프 비디오 또는 "숨쉬는" 정지 이미지 형태의 캐릭터 초상화, 1080p 비디오 또는 켄 번스(Ken-Burns) 스타일의 정지 이미지 형태의 컷신, TTS를 통한 내레이션, Web Audio를 통해 절차적으로 합성된 BGM 및 SFX(외부 오디오 파일 없음).
• 모든 것을 public/assets/로 다운로드하여 실행 중인 게임이 API 호출을 전혀 하지 않도록(zero API calls) 합니다.
• 개발 서버를 실행합니다. 브라우저를 열고 데스크톱이나 모바일에서 플레이하세요.

일반적인 실행 시 810개의 장면, 35개의 분기 엔딩, 68개의 AI 초상화, 58개의 AI 컷신, 절차적 사운드트랙, 그리고 3개의 수동 저장 슬롯과 자동 저장이 생성됩니다.

이 skill이 중요한 이유

이것은 bl 멀티모달 스택(multimodal stack)의 첫 번째 진정한 엔드 투 엔드(end-to-end) 데모입니다. 이전의 퍼스트 파티(first-party) skill들은 문서 조회, 프롬프트 스튜디오, 금융 에이전트, 단발성 숏폼 비디오와 같이 단일 모달리티(modality)에 의존했습니다. novel-game은 비디오 + 이미지 + 음성 + 절차적 오디오 + 프론트엔드 엔지니어링을 클릭 가능한 결과물을 내놓는 단일 파이프라인으로 연결한 첫 번째 사례입니다.

이것은 "에이전트 스킬 (Agent Skill)"을 도구 호출 (tool-call) 단계에서 제품 인도 (product delivery) 단계로 격상시킵니다. 오늘날 대부분의 스킬은 API를 노출합니다. 하지만 이 스킬은 창의적인 파이프라인을 위임하고 실행 가능한 웹 앱을 결과물로 돌려줍니다. 이는 완전히 다른 추상화 (abstraction)입니다.

우리가 가진 가장 깔끔한 "말하지 말고 보여줘 (show, don't tell)" 방식의 데모입니다. 이해관계자에게 10장의 슬라이드를 보여주는 것보다 라이브 실행을 직접 보여주는 것이 훨씬 효과적입니다. 우리가 지켜보는 동안 에이전트가 말 그대로 소설을 게임으로 변환했습니다.

6단계 파이프라인

전체 버전은 SKILL.md에 있습니다. 요약하면 다음과 같습니다:

1 · 요구사항 (Requirements). 에이전트는 다음 7가지 결정 사항을 포함한 단일 AskUserQuestion을 실행합니다: 원본 자료 (EPUB / TXT / 자유 형식 프롬프트), 게임 유형 (비주얼 노벨 (visual novel) / 텍스트 어드벤처 (text adventure) / 텍스트 RPG (text RPG)), UI 스타일 (픽셀 (pixel) / 사이버펑크 (cyberpunk) / 수묵화 (ink-wash) / 미니멀 (minimal)), 서사 시점 (narrative POV), 에셋 모드 (비디오 (video) / 이미지 (image) / 하이브리드 (hybrid) — 하이브리드 권장), 오디오 모드 (BGM 전용 / +SFX / +TTS 내레이션), 목표 재생 시간 (15 / 30 / 60+ 분).

2 · 스토리 디자인 (Story design). 13개의 메인 라인, 35개의 분기 선택 지점, 35개의 엔딩, 68명의 캐릭터, 5~8개의 컷신 순간, 그리고 잠금 해제 가능한 코덱스 (codex) 항목을 추출합니다.

3 · 프로젝트 스캐폴딩 (Project scaffold). 표준 레이아웃인 components/, data/, hooks/, styles/, scripts/, public/assets/를 포함하여 npx create-react-app을 실행합니다.

4 · 데이터 모델 (Data model). 단일 story.js 파일이 분기 선택, 플래그 변이 (flag mutations), 컷신 트리거, 코덱스 잠금 해제, 엔딩 조건 등 전체 씬 그래프 (scene graph)를 설명합니다. 형제 파일인 generated-assets.json은 모든 AI 생성 에셋을 로컬 경로 및 유형 (video / image / mp3)과 함께 인덱싱합니다.

5 · 구현 패턴 (Implementation patterns). setInterval을 통한 타이머 기반 타이핑 효과 (글자당 40–50ms), 호버 어포던스 (hover affordances)가 적용된 선택지 패널, 모든 챕터를 딥 링크 (deep link)로 연결할 수 있는 해시 라우팅 (hash routing), localStorage 기반의 자동 저장 및 3개의 수동 저장 슬롯, 비디오와 이미지를 자동 감지하는 포트레이트 (portrait) 컴포넌트, 정지 영상에 켄 번즈 (Ken Burns) 효과를 적용한 컷신 (cutscene) 컴포넌트, 모바일 대응 터치 타겟 (≥44px) 및 touch-action: manipulation, 언마운트 (unmount) 시 명시적인 메모리 해제를 포함한 지연 비디오 로딩 (lazy video loading).

6 · 에셋 생성 (Asset generation). scripts/generate-assets.sh가 bl CLI를 구동합니다:

bl video generate --download   # 5초 720p 비디오 형태의 포트레이트 또는 컷신
bl image generate              # 포트레이트 또는 배경, 768x1024 / 1920x1080
bl speech synthesize --voice longxiaochun   # TTS 내레이션
...

비디오 작업은 각각 25분이 소요되므로, 스크립트는 --async 모드로 35개의 작업을 병렬로 제출한 뒤 일괄 다운로드합니다. 순차적 실행 대비 실제 소요 시간 (wall-time) 기준으로 약 4배의 속도 향상이 있습니다.

실행 비용은 얼마나 들까요

하이브리드 에셋 모드에서 30분 분량 / 15~18개 장면의 중간 사양 실행을 가정할 때:

항목	수량	단위	소계
캐릭터 포트레이트 (이미지)	8 × 768×1024	bl image generate	센트(cents) 단위
...

정확한 가격은 ModelStudio 콘솔에서 확인 가능합니다. 신규 계정에는 무료 크레딧이 제공되며, 데모를 처음부터 끝까지 실행하기에 충분한 양입니다.

핵심 요약: 커피 한 잔 정도의 비용이면 자신만의 플레이 가능한 비주얼 노벨을 가질 수 있습니다.

세 가지 명령어로 시작하기

1. 스킬 설치:

npx skills add modelstudioai/skills

프롬프트에서 novel-game을 선택하세요 (또는 전체 번들을 가져오려면 --all 사용).

2. bl 및 API 키 연결:

npm i -g bailian-cli
bl auth login

bailian.console.aliyun.com에서 키를 발급받으세요 — 신규 계정에는 무료 크레딧이 제공됩니다.

3. 좋아하는 에이전트 (Claude Code / Qoder / Cursor / Cline / …)에게 자연어로 요청하세요:

"삼체"의 예원제(Ye Wenjie) 아크를 수묵화 스타일, 30분 플레이 타임, 하이브리드 에셋을 사용하는 비주얼 노벨(visual novel)로 변환해줘.

나머지는 에이전트(Agent)의 몫입니다. 7가지 결정 사항을 묻고, 분기(branches)를 설계하며, React 프로젝트의 스캐폴딩(scaffold)을 구성하고, 코드를 작성하며, 모든 에셋을 생성한 뒤 npm start를 실행합니다.

언급할 가치가 있는 네 가지 엔지니어링 세부 사항

프롬프트 안전성 (Prompt safety). 무기, 흡연 또는 노골적인 폭력을 포함하는 비디오 프롬프트는 거부됩니다. 이 스킬에는 수십 번의 실제 실행을 통해 추출된 콘텐츠 교훈이 담긴 내장된 재작성 테이블(rewrite table)이 포함되어 있습니다.

절차적 BGM (Procedural BGM). 음악은 미리 만들어진 MP3가 아니라 Web Audio를 통해 실시간으로 합성됩니다. 고정된 MIDI 피치 배열, 멀티 보이스 레이어링(multi-voice layering), 컨볼루션 리버브(convolution reverb), ADSR 엔벨로프(envelopes), 디튜닝된 패드 서스테인(detuned pad sustains)을 사용합니다. 음악이 작곡되어 제공되므로 파일 크기가 0입니다.

모바일 주의 사항 (Mobile gotchas). iOS Safari는 16px 미만의 입력창을 자동으로 확대합니다. 300ms 클릭 지연을 제거하기 위해 touch-action: manipulation을 사용합니다. 홈 인디케이터를 위해 env(safe-area-inset-bottom)를 적용합니다. 엣지(edge) 브라우저에서 반응성을 회복하기 위해 click과 touchend를 이중 바인딩(dual-bind)합니다. 이 모든 것이 기본적으로 구현되어 있습니다.

비디오 메모리 해제 (Video memory release). 장면을 떠날 때는 video.pause(); video.removeAttribute('src'); video.load();가 반드시 필요합니다. 그렇지 않으면 WebView에서 프레임 버퍼(frame buffers)가 누수되어 30분간의 플레이 세션이 끊김(jank) 현상으로 종료됩니다.

결론

우리가 퍼스트 파티 스킬(first-party skills)에 두는 기준은 단 하나입니다. 누군가가 그것을 사용하여 실제 결과물을 만들어냈으며, 그 설계가 복제할 가치가 있는가입니다.

novel-game은 이 두 가지 기준을 모두 통과합니다. 제작자 @lishengzxc는 이를 사용하여 단순한 스크린샷 데모가 아닌, 사람들이 실제로 플레이할 수 있는 실제 React 프로젝트인 완전한 소설-게임 변환물을 만들어냈습니다. SKILL.md에 담긴 함정 가이드(pitfall guide)는 실시간으로 얻은 값진 지혜입니다.

콘텐츠, 게임 또는 인터랙티브 내러티브(interactive narratives)를 제작한다면, 이번 주말을 투자할 가치가 있는 저비용의 프로젝트입니다.

제작한 결과물을 Issues에서 공유하거나, SKILL 가이드에서 빠진 팁을 발견하면 PR(Pull Request)을 보내주세요.

Repo · github.com/modelstudioai/skills
Skill · skills/novel-game/
Try the model · ModelStudio HappyHorse 1.1 playground

— ModelStudioAI on GitHub