Start

시작하기

스크립트 태그와 커스텀 엘리먼트만으로 첫 스트립을 렌더링합니다.

toonstrip는 사용자가 제공한 데이터로 코믹 스트립을 렌더링합니다. 별도로 생성할 것도, 이미지 파이프라인도 없습니다. 작은 JSON 문서를 작성하면 페이지가 이를 캔버스에 그립니다. 이 페이지는 빈 HTML 파일에서 시작해 첫 패널을 렌더링하기까지의 과정을 안내합니다. 설치도, 빌드 단계도 필요 없습니다.

1. 엘리먼트 추가하기

@toonstrip/element는 프레임워크에 의존하지 않는 커스텀 엘리먼트입니다. esm.sh가 이 패키지와 그 의존성을 대신 resolve해 주므로, <script type="module">에서 바로 가져올 수 있습니다.

<script type="module">
  import "https://esm.sh/@toonstrip/[email protected]";
</script>

다른 의존성과 마찬가지로 정확한 버전을 고정하세요.

2. 팩 지정하기

기본 팩은 15개 캐릭터와 배경 3종으로 구성된 Comic Chat 로스터입니다. unpkg가 팩 파일 (pack.json, 스프라이트 시트, 배경)을 CORS가 활성화된 상태로 그대로 서빙하므로, 어디에도 복사할 필요가 없습니다.

strip.packs = ["https://unpkg.com/@toonstrip/[email protected]/"];

3. 스트립 렌더링

페이지에 <comic-strip> 태그를 두고 document 프로퍼티를 설정합니다.

<comic-strip id="strip"></comic-strip>

<script type="module">
  import "https://esm.sh/@toonstrip/[email protected]";

  const strip = document.getElementById("strip");
  strip.packs = ["https://unpkg.com/@toonstrip/[email protected]/"];
  strip.document = {
    version: 1,
    panels: [
      {
        backdrop: "field",
        camera: "medium",
        bodies: [{ character: "anna", emotion: { angle: 0, intensity: 0.6 } }],
        speakers: [{ speaker: "anna", balloon: "speech", text: "My first strip." }],
      },
    ],
  };
</script>

{
  "version": 1,
  "panels": [
    {
      "backdrop": "field",
      "camera": "medium",
      "bodies": [
        {
          "character": "anna",
          "emotion": {
            "angle": 0,
            "intensity": 0.6
          }
        }
      ],
      "speakers": [
        {
          "speaker": "anna",
          "balloon": "speech",
          "text": "My first strip."
        }
      ]
    }
  ]
}

임베드에 필요한 것은 이 세 가지, 스크립트 태그와 팩 URL, 문서뿐입니다. index.html로 저장하고 서버 없이 그대로 열어보세요.

다음 단계

스트립 작성하기에서는 실제 예제와 함께 문서 포맷을 살펴봅니다. Plain HTML에서는 엘리먼트의 전체 API와 프레임워크에서 사용하는 방법을 다룹니다. Astro, React, Vue를 직접 쓴다면 각각 Astro, React, Vue 레퍼런스를 확인하세요.