toonstrip v0.1.9 · MIT · Astro 연동
데이터로 그리는, 실시간으로 반응하는 코믹 스트립.
패널, 캐릭터, 대사를 JSON으로 작성하면, toonstrip이 실제 캔버스 위에 그려 줍니다. 페이지 크기에 맞춰 다시 배치되고, 스크린 리더에도 그대로 읽힙니다. 따로 이미지를 만들어 동기화할 필요가 없습니다.
슬라이더를 움직여 보세요. 이 스트립은 이미지가 아니라 각 패널이 각각 하나의 캔버스이며, 컬럼 수는 컨테이너 너비에서 나옵니다. 이 스트립을 플레이그라운드에서 수정하기 →
30초 설치
세 단계, 스트립 하나.
패키지 두 개를 설치하고, 통합을 등록한 다음, 컴포넌트를 페이지에 넣으면 끝입니다. 오른쪽 패널이 이 코드가 실제로 렌더링하는 결과입니다.
pnpm add @toonstrip/astro @toonstrip/pack-comic-chatnpm install @toonstrip/astro @toonstrip/pack-comic-chatyarn add @toonstrip/astro @toonstrip/pack-comic-chat// astro.config.mjs
import { defineConfig } from "astro/config";
import { toonstrip } from "@toonstrip/astro";
export default defineConfig({
integrations: [toonstrip({ packs: ["@toonstrip/pack-comic-chat"] })],
});---
import { ComicStrip } from "@toonstrip/astro";
---
<ComicStrip
document={{
version: 1,
panels: [{
backdrop: "field",
bodies: [{ character: "dan", emotion: { angle: 0, intensity: 0.8 }, pose: "wave" }],
speakers: [{ speaker: "dan", balloon: "speech", text: "Hello from toonstrip!" }],
}],
}}
packs={["comic-chat"]}
client:visible
/>결과
작동 방식
데이터는 당신이 쓰고, 아트는 팩이 제공하며, 렌더링은 실시간으로 이뤄집니다.
{ "backdrop": "field",
"camera": "medium",
"bodies": [{ "character": "dan",
"emotion": { "angle": 0, "intensity": 0.8 } }],
"speakers": [{ "speaker": "dan", "balloon": "speech",
"text": "Hello!" }] }데이터를 작성합니다
'코믹 스트립 문서'(Comic Strip Document)입니다. 패널, 등장인물, 감정, 대사를 담은 순수 JSON이며, 스키마도 공개되어 있습니다. 작성하는 데 TypeScript는 필요 없습니다.
팩이 아트를 제공합니다
캐릭터, 포즈, 표정, 배경은 에셋 팩에서 옵니다. 기본으로 15개 캐릭터와 3개 배경이 제공되며, 스프라이트 시트와 JSON 매니페스트만 있으면 직접 추가할 수 있습니다.
canvasdevicePixelRatioResizeObserverrole="img"
실시간으로 렌더링됩니다
각 패널은 독립된 캔버스로, 어떤 배율에서도 선명하며, 컨테이너 크기가 바뀌면 다시 배치되고, 대사 자체로부터 보조 기술에 설명됩니다.
활용 사례
문단보다 스트립이 나은 순간.
아래 스트립은 모두 직접 작성한 JSON이며, 실시간으로 렌더링됩니다. 아무거나 플레이그라운드에서 열어 보세요.
어디서든 오는 데이터
문서는 그냥 JSON입니다. 직접 손으로 쓰거나, 스크립트로 생성하거나, CMS 필드에 저장하거나, 직접 호출하는 LLM으로 만들어도 됩니다. toonstrip은 그것을 렌더링만 합니다.
플레이그라운드에서 열기 →필요할 때는 정적 PNG로
npm README, 이메일, 소셜 카드, OG 이미지는 캔버스를 실행할 수 없습니다. CLI가 같은 문서를 같은 레이아웃과 아트로 PNG에 렌더링하므로, JSON 파일 하나로 둘 다 처리됩니다.
플레이그라운드에서 열기 →npx -p @toonstrip/cli toonstrip render strip.json --out strip.png --width 1200에셋 팩
원하는 캐릭터를 직접 가져오세요.
기본 팩은 MIT 라이선스로 재배포되는 원작 Microsoft Comic Chat 캐릭터 구성입니다. 두 번째 팩은 캐릭터 하나와 배경 하나로만 이루어져 있는데, 팩 규격이 기본 아트에 묶여 있지 않다는 것을 보여주는 가장 작은 예시입니다.
comic-chat · 15명 · 3개 배경
이미지로는 안 되는 이유
PNG가 못 하는 것을 라이브 캔버스는 해냅니다.
| 속성 | 사전 렌더링된 PNG | 내보낸 SVG | toonstrip |
|---|---|---|---|
| 컨테이너에 맞춰 재배치 | 안 됨. 레이아웃 고정. | 크기만 바뀌고 재배치는 안 됨. | 컬럼 수가 너비를 따라갑니다. |
| 어떤 디스플레이에서도 선명함 | 내보낸 크기에서만. | 예. | 예, DPR을 인식하는 백업 스토어. |
| 스크린 리더 지원 | 직접 작성했다면 alt 텍스트 하나. | 내보내기 방식에 따라 다름. | 모든 패널이 자기 대사로부터 설명됩니다. |
| 대사 한 줄 수정 | 다시 렌더링, 다시 업로드. | 다시 내보내기. | JSON만 고치면 됩니다. |
| 3패널 스트립의 페이지 용량 | 큰 이미지 한 장. | 텍스트가 많은 벡터. | 참조하는 스프라이트만. |
시작한 곳
더 크고 별난 프로젝트에서 분리되어 나왔습니다.
toonstrip은 Grues in Comic의 코믹 렌더링 절반에서 시작했습니다. 이 프로젝트는 고전 Zork 스타일 인터랙티브 픽션을 플레이하고, 그 진행 과정을 Comic Chat 스타일 스트립으로 실시간 렌더링합니다. 패널, 포즈, 말풍선은 원작 Comic Chat 엔진 자체의 텍스트 to 감정 로직을 그대로 이식한 것이며, 실행 중에 LLM은 관여하지 않습니다.
그 렌더링 엔진(패널, 캐릭터, 포즈, 감정, 말풍선, 배경)은 게임이나 Zork 결합 없이도 그 자체로 쓸모가 있다는 것이 드러났습니다. toonstrip은 그 절반을 떼어내 일반화한 것입니다. 같은 캔버스 렌더러와 같은 기본 Comic Chat 에셋 팩을 쓰지만, 직접 넘긴 데이터로 움직입니다.
자주 묻는 질문
짧게 답합니다.
toonstrip이 코믹을 대신 그려 주나요?
아니요. toonstrip은 건네받은 JSON 문서를 렌더링만 합니다. 대사, 감정, 연출은 작성자 본인이나 스크립트, 원한다면 직접 호출한 언어 모델의 몫입니다.
서버에서도 렌더링되나요?
Astro 컴포넌트는 서버에서 비활성 태그만 내보내고 실제 그리기는 브라우저가 합니다. 정적 PNG가 필요하면 같은 렌더러를 Node에서 실행하는 CLI를 쓰면 됩니다.
상업적으로 사용해도 되나요?
네. 코드는 MIT이고, 기본 팩의 Comic Chat 아트도 MIT 조건으로 재배포됩니다.
용량은 얼마나 되나요?
엘리먼트, 코어, 스키마 검증기를 합쳐 gzip 기준 약 36KB입니다. 스프라이트 시트는 문서에서 실제로 쓰는 캐릭터 것만 내려받습니다.