Fable Studio은(는) 무엇을 하나요?
하나의 문장으로 완성된 작품: 즉시 실행되고, 보기 좋고, 소리가 나며, 세로 모드 화면 녹화에 적합한 단일 HTML 파일입니다.
이 스킬은 오류가 발생하기 쉬운 부분을 대신 처리합니다. assets/starter.html에는 검증된 기본 구조(조명 효과, 카메라, 사운드, 시작 화면, 녹화 모드, 영화 및 시간 여행 제어)가 포함되어 있습니다. 사용자는 장면, 즉 콘텐츠만 작성하면 되므로 디자인과 스토리에 온전히 집중할 수 있습니다.
진행 순서
1. 모드 선택
| 모드 | 사용 시기 | 안내 | 템플릿 | 예시 |
|---|---|---|---|---|
| 세계 | 장소, 사물, 분위기를 둘러볼 때. "만들어 줘...", "장면", "세계", "거리", "풍경" | modes/welt.md | assets/szene-welt.js | beispiele/welt-tokio.js |
| 영화 | 시작과 끝이 있는 이야기. "단편 영화", "~에 관한 애니메이션", "이야기해 줘", "자화상" | modes/film.md | assets/szene-film.js | beispiele/film-punkt.js |
| 시간 여행 | 시간에 따른 발전. "~의 역사", "진화", "X에서 현재까지", "앞으로 30년" | modes/zeitreise.md | assets/szene-zeitreise.js | beispiele/zeitreise-menschheit.js |
명확하지 않다면 세계를 선택하세요. 묻지 마세요. 이 스킬의 가치는 하나의 문장으로 충분하다는 데 있습니다.
2. 읽기
다음 순서대로 읽고, 해당 내용만 읽으세요:
references/engine.md(기본 구조의 모든 구성 요소와 라이브러리의 함정)- 선택한 모드의 안내
- 선택한 모드의 예시. 밀도와 정성의 기준을 보여줍니다. 작업 방식을 참고하고, 주제는 그대로 두지 마세요.
필요 시: references/visuals.md(조명, 안개, 네온, 물, 파티클 레시피), references/audio.md(음악 및 효과음), references/styles.md(완성된 룩), references/performance.md(모바일에서 부드럽게 실행)
3. 문장을 구상으로 발전시키기
사용자는 한 문장을 씁니다. 품질은 코드를 작성하기 전에 그 문장을 스스로 완전한 구상으로 만드는 데서 나옵니다. 머릿속에 다음을 정하세요:
- 핵심 이미지: 어떤 하나의 이미지가 남아야 하는가? 다른 모든 것은 그것을 위해 봉사합니다.
- 분위기와 팔레트: 두세 가지 주 컬러와 어두운 기본색. 색이 적을수록 고급스러워 보입니다.
- 조명: 빛은 어디서 오는가? 무엇이 스스로 빛나는가?
- 깊이: 전경, 중경, 배경. 안개와 크기 계층화.
- 움직임: 최소 세 개의 레이어가 독립적으로 움직입니다(예: 비, 교통, 간판).
- 카메라: 의도가 있는 움직임, 무작위 회전이 아님.
- 사운드: 분위기에 맞는 배경음과 음악.
- 인터랙션 또는 극적 구조: 탭할 때 무슨 일이 일어나는가(세계), 이야기의 흐름은 어떻게 되는가(영화), 어떤 정거장들이 있는가(시간 여행)?
이 구상을 미리 보여주지 마세요. 바로 구축합니다.
4. 구축하기
선택한 모드의 템플릿을 기반으로 szene.js 파일에 장면만 작성하세요. 그런 다음:
python3 scripts/bauen.py szene.js <name>.html
스크립트는 장면을 기본 구조에 삽입하고, 구문을 검사하며, 여기에 없는 것들에 대해 경고합니다. 기본 구조 자체는 절대 변경하지 마세요. 부족한 것이 있다면 장면 안에서 구현하세요.
명령어를 실행할 수 없는 경우: assets/starter.html을 완전히 변경하지 않고 출력하고, 플레이스홀더 /*__SCENE__*/만 장면으로 교체하세요.
결과물이 어디서나 실행되어야 하므로(Claude 앱의 Artifact 포함) 고정 규칙:
- 하나의 파일. 외부 이미지, 글꼴, 모델, 사운드 없음. 모든 것은 코드 안에서 생성.
- 유일한 라이브러리는 three.js r128이며, 기본 구조에 이미 로드되어 있습니다. OrbitControls, EffectComposer 또는 Loader 같은 추가 모듈은 없습니다. 카메라와 조명 효과는 기본 구조가 제공합니다.
localStorage사용 금지,import금지, 두 번째<script>금지.- 화면의 텍스트는 사용자 언어로 표시.
5. 품질 기준
제출하기 전에 이 목록을 확인하세요. 각 항목에는 이유가 있습니다: 지키지 않으면 결과물이 기술 데모처럼 보이고 완성된 작품처럼 보이지 않습니다.
- 즉시 이미지: 시작 화면 뒤에 곧바로 장면이 보입니다. 검거나 비어 있지 않습니다.
- 깊이: 안개가 설정되어 있고, 가까운 것과 먼 것이 있습니다.
- 적절한 발광: 소수의 표면만 강하게 빛나고(밝기 2~4), 나머지는 어둡습니다. 모든 것이 빛나면 아무것도 빛나지 않습니다.
- 세 개의 움직이는 레이어와 카메라 움직임.
- 밀도: 장면은 수백 개의 요소(
FS.inst사용)로 구성되며, 빈 공간에 큐브 다섯 개가 있는 것이 아닙니다. - 사운드: 배경음과 음악이 시작 버튼과 함께 시작되며, 편안할 정도로 충분히 작습니다.
- 세로 모드: 핵심 이미지가 화면 중앙에 위치하며 9:16에서도 잘 보입니다.
- 제목, 부제목 및 조작 안내가
FS.setup을 통해 설정되었습니다. - 사실(시간 여행 및 다큐멘터리 영화만): 모든 숫자와 날짜가 정확합니다. 예측은 예측으로 표시되었습니다.
6. 확인
명령어를 실행할 수 있다면 실제로 테스트하세요:
node scripts/pruefen.js <name>.html
이 명령어는 가상 브라우저에서 가로 및 세로 모드로 페이지를 열고, 오류를 보고하며, 두 개의 이미지를 저장합니다. 이미지를 보고 오류가 없고 품질 기준을 충족할 때까지 수정하세요. 브라우저를 사용할 수 없는 경우, references/engine.md의 "함정" 섹션과 대조하여 장면을 한 줄씩 다시 읽으세요. 가장 흔한 오류는 변수명 오타와 three.js r128에 없는 함수 사용입니다.
7. 제출
- Claude 앱: HTML Artifact로 제출하여 즉시 실행 및 공유 가능.
- Claude Code: 프로젝트 폴더에 파일로 저장하고, 브라우저에서 열도록 안내.
답변은 간결하게: 무엇이 만들어졌는지 한 문장, 조작 방법(드래그, 스크롤, 탭, R 키 또는 녹화 모드용 "9:16" 버튼) 및 세 가지 변형 제안(각각 사용자가 다시 보낼 수 있는 한 문장).
나중에 페이지에 빨간색 오류 메시지가 표시되면 사용자가 해당 페이지를 보내줍니다. 장면에서 원인을 수정하고 다시 빌드하세요.
녹화 모드
"9:16" 버튼 또는 R 키는 조작 요소 없이 세로 모드로 전환합니다. 세계 모드는 자동으로 이동하며, 영화와 시간 여행 모드는 처음부터 다시 시작합니다. 이렇게 하면 화면 녹화로 Reels, TikTok 또는 Shorts용 영상을 바로 만들 수 있습니다. 답변에 이 점을 언급하세요. 많은 사용자에게 이것이 진정한 목적입니다.