No-code mindset · Code-assisted making

내 이야기를
스토리팩으로

사이트를 새로 만드는 대신, 이미 작동하는 무대에 내 대본과 미리 준비한 이미지를 넣는 방법을 배웁니다.

대상 코딩이 처음인 누구나 도구 Claude Code 중심 결과 나만의 대화형 이야기

The one sentence

사이트는 극장,
스토리팩은 한 편의 공연 상자입니다.

01 / THEATER

사이트 본체

입장 화면, 채팅창, 서버처럼 모든 작품이 함께 쓰는 극장 시설입니다.

02 / SHOW BOX

스토리팩

대본, 배우 설정, 배경, 음악, 결말을 작품별로 모아 둔 독립 패키지입니다.

03 / ASSISTANT

Claude Code

규칙을 먼저 읽고, 여러분의 지시대로 공연 상자를 복사·수정·검사하는 작업 도우미입니다.

가장 중요한 구분

새 이야기를 만들 때는 극장을 공사하지 않습니다. 스토리팩만 새로 만듭니다.

Website · turn · hierarchy

사이트의 네 구역과
한 턴의 흐름을 한눈에 봅니다.

01 · BROWSER

화면

목록·채팅·이미지를 보여줍니다.

02 · SERVER

서버

팩을 읽고 AI 호출을 조정합니다.

03 · STORYPACK

스토리팩

대본·설정·에셋이 들어 있습니다.

04 · MEMORY

진행 기록

선택·관계·위험 수치를 기억합니다.

01작품 선택

팩 고르기

02세션 생성

기록 만들기

03현재 장 읽기

필요한 챕터

04AI 연출

GM·NPC 답변

05화면 연기

미리 만든 에셋

06선택 기억

상태값 저장

하이어라키 = 상자 안의 상자 순서packs.json → 한 작품 폴더 → 대본·에셋 → 개별 파일

초보자가 만질 곳사이트 본체가 아니라 03 스토리팩입니다.

Storypack folder map

빨간 모자 샘플팩을
열어 보면 이렇게 생겼습니다.

red_riding_hood/
├─ manifest.json       작품의 이름표·출연진·결말
├─ poster.webp         목록에 보이는 포스터
├─ CLAUDE.md           Claude Code용 시작 안내
├─ AGENTS.md           반드시 지킬 작업 규칙
├─ prompts/
│  ├─ system/           🔴 출력 계약, 수정 금지
│  └─ content/          🟢 내 이야기
│     └─ story/         4챕터·분기·결말
└─ resources/
   ├─ backgrounds/      배경
   ├─ characters/       캐릭터
   ├─ scenes/ endings/  장면·결말 컷
   ├─ music/ effects/   BGM·효과음
   └─ resource_list.json  에셋 제작 주문서

폴더 자유 편집 잠금 미디어

manifest.json콜시트와 작품 표지. 제목, 소개, 출연진, AI 모델, 엔딩 조건을 한눈에 정리합니다.

prompts/content작가실. 오프닝, 세계관, 캐릭터 바이블, 챕터와 선택지를 씁니다.

prompts/system송출 규격. AI의 답을 사이트가 읽을 수 있는 형태로 맞추므로 초보자는 수정하지 않습니다.

resources미술·음향 창고. 플레이 전에 만든 이미지와 소리만 넣습니다.

AGENTS / CLAUDE제작 수칙. Claude Code가 작업 범위와 금지사항을 이해하도록 돕습니다.

Script room meets asset room

대본이 무엇을 부를지 정하고,
에셋 창고가 실제 소품을 준비합니다.

SCRIPT · prompts/content

00_opening첫 화면과 첫 대사

01 · 02세계관·인물·말투

chapter 1–44막 사건과 선택

clues_system분기와 상태 변화

ASSETS · resources

backgrounds장소와 시간의 배경

characters인물과 감정 표정

scenes · endings중요 장면과 결말 컷

music · effectsBGM과 효과음

01 · ORDERresource_list.json
무엇을 만들지 적는 주문서

02 · FILEwebp · mp3
플레이 전에 만든 실제 파일

03 · CALL04_resources.txt
AI가 부를 수 있는 소품 목록

선택 → 상태값 → 다음 장면 → 엔딩danger +2, teamwork +1처럼 숫자와 플래그가 이야기를 갈라놓습니다.

플레이 중 즉석 생성은 하지 않음속도·비용·캐릭터 일관성을 위해 에셋은 미리 준비합니다.

Claude Code is a production assistant

Claude Code는 알아서 만드는 마법이 아니라
수칙을 읽고 일하는 작업 도우미입니다.

YOU · STORY OWNER

사람이 정할 것

주제, 사람들이 느꼈으면 하는 경험, 주인공의 목표, 갈등, 중요한 선택, 원하는 결말의 의미를 정합니다.

CLAUDE · PRODUCTION ASSISTANT

Claude가 맡을 것

규칙 읽기, 템플릿 복사, 파일별 초안 작성, 이름 맞추기, 오류 검사와 수정 보고를 맡습니다.

GOOD BRIEF

결과와 경계를 함께 말하기

새 팩 ID와 한 줄 콘셉트
4챕터와 3~4개 엔딩
src와 prompts/system은 수정 금지
검증 결과까지 보고

RISKY BRIEF

“알아서 멋지게”만 말하기

어떤 파일을 바꿀지 불명확
기존 샘플을 덮어쓸 수 있음
이미지 생성 비용을 바로 쓸 수 있음
검사 없이 끝났다고 할 수 있음

Five sentences before files

파일을 열기 전에
이 다섯 문장만 완성하세요.

01플레이어는 누구인가?
02플레이어가 이번 이야기에서 얻고 싶은 것은?
03그것을 가로막는 인물·상황·시간 제한은?
04서로 다른 전략을 보여주는 세 가지 선택은?
05선택의 누적이 만드는 세 가지 이상 결말은?

EXAMPLE · RED RIDING HOOD

“할머니 댁에 무사히 도착해야 한다.”

플레이어는 빨간 모자다. 늑대와 숲의 갈림길이 방해한다. 준비·용기·협력·위험이 선택마다 바뀐다. 그 누적값이 현명한 귀환, 용감한 즉흥 대응, 지름길의 대가 같은 결말을 만든다.

이 다섯 문장이 분명하면 Claude는 파일을 잘 나눌 수 있습니다. 불분명하면 파일은 많아져도 이야기는 흐려집니다.

Prompt 01 · Inspect, then plan

Claude Code를 열면
이 프롬프트부터 붙여 넣습니다.

이 저장소에서 새 스토리팩을 만들고 싶어. 먼저 루트의 CLAUDE.md, public/game-packs/AGENTS.md, public/game-packs/red_riding_hood/AGENTS.md와 STORYPACK_SPEC.md를 읽어줘. 아직 어떤 파일도 수정하지 말고 다음만 보고해줘. 1. 사이트 본체와 스토리팩의 차이 2. 새 이야기를 만들 때 수정할 파일과 수정하면 안 되는 파일 3. docs/pack-template을 이용한 제작 순서 4. 내게 먼저 물어봐야 할 이야기 기획 질문 5개 기존 red_riding_hood 샘플과 src 폴더는 보존해줘.

CHECK 01

“아직 수정하지 말고”

첫 대화는 구조 확인과 계획에만 사용합니다.

CHECK 02

정본 파일을 지목

Claude가 추측하지 않고 실제 규칙을 읽게 합니다.

CHECK 03

보존 대상을 명시

샘플과 사이트 본체를 안전하게 지킵니다.

Prompt 02 · Build inside the guardrails

기획 답변 뒤에는
작업 범위를 정확히 잠급니다.

이제 새 스토리팩을 만들어줘. 팩 ID: night_train 한 줄 콘셉트: 막차에서 사라진 승객의 기억을 추적하는 미스터리 플레이어: 은퇴를 앞둔 열차 차장 핵심 상태값: trust, observation, time_left, danger 원하는 구조: 4챕터, 서로 다른 전략 3개, 엔딩 4개 작업 규칙: - docs/pack-template을 public/game-packs/night_train으로 복사할 것 - prompts/content와 필요한 manifest 필드만 이야기 내용에 맞게 수정할 것 - src/**와 prompts/system/**는 수정하지 말 것 - 이미지는 생성하지 말고 resource_list.json에 제작 계획만 작성할 것 - 기존 파일은 덮어쓰지 말 것 - 마지막에 packs.json에 등록하고 validate-pack을 실행할 것 - 변경 파일과 검사 결과를 쉬운 한국어로 보고할 것

예시의 팩 ID·콘셉트·플레이어·상태값만 여러분의 이야기로 바꾸면 됩니다. 팩 ID는 영문 소문자와 밑줄만 사용합니다.

API key = a private access ticket

필요한 서비스에서 키를 받고,
내 컴퓨터의 비밀값으로 연결합니다.

TEXT · IMAGE · VIDEO

Google AI Studio

Gemini 대화, Nano Banana 계열 이미지, Google 비디오 제작에 사용합니다.

GOOGLE_API_KEY
공식 발급 안내 ↗

TEXT · IMAGE

OpenAI Platform

OpenAI 대화 모델과 GPT Image 계열 이미지 제작에 사용합니다.

OPENAI_API_KEY
API Keys 페이지 ↗

TEXT · RUNTIME CHAT

Anthropic Console

사이트 안의 대화 모델을 Claude로 실행할 때 사용합니다.

ANTHROPIC_API_KEY
API Keys 페이지 ↗

VOICE · MUSIC · SFX

ElevenLabs

TTS 음성, BGM과 효과음을 제작할 때 사용합니다.

ELEVENLABS_API_KEY
공식 발급 안내 ↗

01공식 사이트 로그인

02프로젝트·사용 한도 확인

03새 비밀키 생성·한 번 복사

04사용자 환경변수에 저장

05터미널 재시작·존재만 확인

Prompt 03 · Dry-run before paid generation

Claude Code에는 “생성”보다 먼저
계획과 비용 경계를 요청합니다.

01

키는 환경변수로만원문을 읽거나 출력하지 않고 존재 여부만 확인

02

제작 주문서 먼저resource_list.json에 ID·설명·프롬프트 작성

03

항상 dry-runAPI 호출 없이 제공자·모델·생성 건수 확인

04

사람이 승인유료 호출과 기존 에셋 교체 전 반드시 멈춤

05

한 장부터 검사스타일을 확인한 뒤 나머지를 순차 생성

night_train 팩의 이미지를 준비해줘. 1. 실제 API 키 값은 읽거나 출력하지 말고, GOOGLE_API_KEY가 환경변수에 있는지만 확인해. 2. resource_list.json의 이미지 제작 계획과 파일명을 먼저 점검해. 3. 아래 dry-run만 실행해. node scripts/pack-images.mjs night_train --provider gemini --dry-run 4. 제공자, 모델, 생성할 ID와 총 건수를 표로 보여주고 멈춰. 5. 내가 승인한 뒤에도 --only로 한 장만 먼저 생성해. 6. 기존 파일은 덮어쓰지 말고, 생성 후 이미지 매니페스트와 04_resources.txt의 ID를 맞춘 다음 validate-pack을 실행해. 오디오가 필요하면 pack-audio.mjs, 비디오 사전 제작은 pack-video.mjs도 같은 순서로 계획만 먼저 보여줘.

이미지·오디오·비디오는 제작 단계에서만 생성완성 파일을 resources/에 넣은 뒤 플레이가 사용합니다.

비디오는 현재 사전 제작만 가능파일을 만들어도 현 채팅 화면에서 자동 재생되지는 않습니다.

Traffic-light safety model

모든 파일이 같은 위험도를
가진 것은 아닙니다.

초록 · 자유롭게

prompts/content/**
세계관·인물·챕터·분기
resource_list.json의 제작 계획
제목·소개·태그·엔딩 설명

노랑 · 검사와 함께

packs.json 작품 등록
실제 이미지·음악 파일 배치
AI 모델과 토큰 설정
수정 후 반드시 검증기 실행

빨강 · 멈추기

src/** 사이트 본체
prompts/system/** 출력 계약
실제 API 키를 공개 폴더·문서에 입력
승인 없이 유료 생성·기존 에셋 덮어쓰기

Validation before celebration

“파일을 만들었다”와
“작동한다”는 다릅니다.

새로 만든 night_train 스토리팩을 점검해줘. 1. node scripts/validate-pack.mjs night_train 실행 2. ERROR가 있으면 원인을 쉬운 말로 설명하고 팩 폴더 안에서만 수정 3. pack ID, 등장인물 이름, 상태 변수, 엔딩 조건, 리소스 ID가 서로 일치하는지 확인 4. ERROR가 0이 되면 무엇이 검증됐고 무엇은 실제 플레이로 확인해야 하는지 구분해 보고 src/**와 prompts/system/**는 수정하지 마.

✓

목록에 작품이 보이나?packs.json 등록과 ID 일치 확인

✓

캐릭터가 맞게 나오나?인물 이름과 파일명·프로필 확인

✓

4개 챕터가 이어지나?진행 범위와 전환 조건 확인

✓

선택이 결말에 닿나?상태 변수 철자와 엔딩 조건 확인

✓

빈 화면·무음이 없나?리소스 ID와 실제 파일 확인

✓

실제 플레이를 했나?검증기는 구조, 플레이는 경험을 검사

The finish line

코딩을 많이 아는 것이 목표가 아닙니다.
이야기를 작은 상자로 잘 나누고, Claude에게 경계와 검사를 함께 지시하는 것이 목표입니다.

01 · IMAGINE

다섯 문장으로 기획

플레이어, 욕망, 장애물, 선택, 결말을 먼저 정합니다.

02 · DELEGATE

규칙을 읽힌 뒤 제작

계획을 확인하고 스토리팩 안에서만 파일을 만들게 합니다.

03 · VERIFY

검증하고 직접 플레이

ERROR 0을 확인한 뒤, 사람이 이야기의 재미와 흐름을 판단합니다.

기억할 경로 public/game-packs/내_이야기 기억할 명령 node scripts/validate-pack.mjs 내_이야기

내 이야기를스토리팩으로

사이트는 극장,스토리팩은 한 편의 공연 상자입니다.

사이트 본체

스토리팩

Claude Code

사이트의 네 구역과한 턴의 흐름을 한눈에 봅니다.

화면

서버

스토리팩

진행 기록

빨간 모자 샘플팩을열어 보면 이렇게 생겼습니다.

대본이 무엇을 부를지 정하고,에셋 창고가 실제 소품을 준비합니다.

Claude Code는 알아서 만드는 마법이 아니라수칙을 읽고 일하는 작업 도우미입니다.

사람이 정할 것

Claude가 맡을 것

결과와 경계를 함께 말하기

“알아서 멋지게”만 말하기

파일을 열기 전에이 다섯 문장만 완성하세요.

“할머니 댁에 무사히 도착해야 한다.”

Claude Code를 열면이 프롬프트부터 붙여 넣습니다.

“아직 수정하지 말고”

정본 파일을 지목

보존 대상을 명시

기획 답변 뒤에는작업 범위를 정확히 잠급니다.

필요한 서비스에서 키를 받고,내 컴퓨터의 비밀값으로 연결합니다.

Google AI Studio

OpenAI Platform

Anthropic Console

ElevenLabs

Claude Code에는 “생성”보다 먼저계획과 비용 경계를 요청합니다.

모든 파일이 같은 위험도를가진 것은 아닙니다.

초록 · 자유롭게

노랑 · 검사와 함께

빨강 · 멈추기

“파일을 만들었다”와“작동한다”는 다릅니다.

다섯 문장으로 기획

규칙을 읽힌 뒤 제작

검증하고 직접 플레이

내 이야기를
스토리팩으로

사이트는 극장,
스토리팩은 한 편의 공연 상자입니다.

사이트의 네 구역과
한 턴의 흐름을 한눈에 봅니다.

빨간 모자 샘플팩을
열어 보면 이렇게 생겼습니다.

대본이 무엇을 부를지 정하고,
에셋 창고가 실제 소품을 준비합니다.

Claude Code는 알아서 만드는 마법이 아니라
수칙을 읽고 일하는 작업 도우미입니다.

파일을 열기 전에
이 다섯 문장만 완성하세요.

Claude Code를 열면
이 프롬프트부터 붙여 넣습니다.

기획 답변 뒤에는
작업 범위를 정확히 잠급니다.

필요한 서비스에서 키를 받고,
내 컴퓨터의 비밀값으로 연결합니다.

Claude Code에는 “생성”보다 먼저
계획과 비용 경계를 요청합니다.

모든 파일이 같은 위험도를
가진 것은 아닙니다.

“파일을 만들었다”와
“작동한다”는 다릅니다.