Yuns-u/ToonMaker

인스타툰 자동 만들기

★ 0Forks 0HTMLGitHub ↗Compare

README

모서리 경제 · 툰메이커 v2

경제 캐릭터 브랜드 "모서리 경제"(세모/동글이/네모/마름모)를 활용해 10장짜리 인스타툰(카드뉴스)을 자동으로 만드는 단일 HTML 웹 앱입니다. 별도 설치나 빌드 없이 index.html을 브라우저로 열면 바로 사용할 수 있습니다.

사용법

  1. 헤더의 에피소드 입력창에 표기(예: EP.01)를 입력합니다.
  2. 왼쪽 원고 입력창에 스크립트를 작성합니다. 예시 원고 버튼으로 샘플을 채워보고 문법을 참고하면 편합니다.
    • 빈 줄로 블록을 구분합니다: 첫 블록 = 표지(1행 제목 / 2행 부제 / 3행 발제문—호기심을 유발하는 한 줄), 마지막 블록 = 요약(- 항목 형태로 최대 4개), 가운데 블록들(최대 8개) = 본문.
    • 대사: 세모(당황): 내용 — 캐릭터 4종(세모/동글이/네모/마름모) + 선택적 표정(기본/기쁨/당황/화남/설명/슬픔).
    • 소제목: # 제목
    • 하단 메모(출처 등): > 출처
  3. 슬라이드 생성 버튼으로 파싱하면 가운데에 10장 미리보기와 썸네일이 나타납니다.
  4. 썸네일을 클릭해 슬라이드를 선택하고, 오른쪽 패널에서 제목/대사/캐릭터/표정/메모를 실시간으로 편집합니다.
  5. 하단에서 인스타 캡션을 자동 생성하고 클립보드로 복사할 수 있습니다.

내보내기

  • 선택 슬라이드 PNG: 현재 선택한 슬라이드 1장만 다운로드
  • 10장 전체 내보내기 (ZIP): JSZip으로 10장을 모서리경제_EP번호_10장.zip으로 묶어 다운로드 (JSZip 로드 실패 시 PNG 10개를 개별 순차 다운로드하는 폴백 동작)

캐릭터 커스터마이징

우측 "캐릭터팩 · 피그마 연동" 섹션에서 피그마로 만든 SVG를 파일명 규칙(세모_기본.svg 등)에 맞춰 업로드하면 내장 캐릭터 디자인을 교체할 수 있습니다. 4캐릭터 × 6표정 적용 현황을 슬롯 테이블로 확인할 수 있고, 캐릭터팩은 JSON으로 저장/불러오기 하거나 브라우저 localStorage에 자동 저장됩니다. 색상·레이아웃은 코드에 고정돼 있어 캐릭터 SVG 교체가 유일한 비주얼 커스터마이징 경로입니다.

Contributors

Yuns-u

Issues