webtoon-harness: Skill for Claude Code

웹툰 조립·검수 방법론 (webtoon-assembly)

렌더가 끝난 패널을 "읽히는 웹툰"으로 만드는 마지막 공정이다. 조립(세로 스크롤 뷰어) → 레터링(말풍선) → QA/검수 → 연속성 관리 → 최종 패키징까지를 다룬다. 특정 회차에 맞추지 말고 어느 회차에든 적용되게 일반화해 쓴다. {NN} = 2자리 회차 번호.

핵심 원칙(왜 이렇게 하나):

• 순서가 서사다. 패널은 panel_001 → panel_050+ 순서가 곧 독서 흐름이며 긴장 곡선·반전 타이밍이 여기에 실린다. 순서를 깨면 이야기가 깨진다.
• 모바일 세로 스크롤이 기본 매체다. 독자는 손가락으로 내려 읽는다. 데스크톱도 중앙 정렬된 모바일 폭으로 본다.
• 가독성이 작화를 이긴다. 말풍선이 얼굴/핵심 작화를 가리면 독자는 이탈한다. 대사 위주 웹툰일수록 더 그렇다.
• 검수는 증명이다. "좋아 보인다"가 아니라 측정값과 교차 비교로 합격을 증명한다.

---

1. 세로 스크롤 뷰어 조립법 (episode-compositor)

왜: 패널을 한 줄기 세로 스트립으로 이어, 손가락 스크롤만으로 끊김 없이 읽게 만든다.

이 하네스의 말풍선은 in-image 베이크다. 말풍선·한글 대사가 패널 PNG에 이미 그려져 있으므로, 조립은 텍스트 오버레이 없이 패널을 순서대로 잇는 순수 이미지 스트립이다. lettering.md는 오버레이 데이터가 아니라 (a) 패널 간 간격·리듬 힌트, (b) QA가 베이크된 텍스트를 대조할 기준으로만 쓴다.

골격은 assets/viewer-template.html을 쓴다. 외부 의존성 없는 단일 HTML이라 어디서든 열어 검수할 수 있다. 처음부터 새로 짜지 말고 템플릿의 META와 PANELS 데이터 배열만 채운다.

절차

1. _workspace/05_panels/ep{NN}/의 PNG를 파일명 오름차순(panel_001 → …)으로 수집한다(panel-validator 통과본).
2. 템플릿의 PANELS 배열을 채운다. 한 항목 = 한 패널(말풍선 데이터 없음):

   { src: "../../05_panels/ep{NN}/panel_001.png", alt: "panel 001", gap: 0 }
   

   • src는 결과 파일(06_assembly/ep{NN}/index.html) 기준 상대경로(../../05_panels/...). 또는 패널을 동일 폴더로 복사해 참조해도 된다.
   • gap은 다음 패널과의 간격(px): 0=무봉제(연속 컷), 양수=장면 전환/시간 경과/침묵 컷("쿵"). lettering.md의 리듬 힌트와 샷리스트 SCENE BREAK를 근거로 정한다.
3. 패널을 원본 비율로 온전히 배치한다(베이크된 말풍선이 잘리지 않게).
4. 브라우저로 열어 스크롤·이음새·말풍선 가독을 육안 확인한다. 베이크 말풍선이 깨졌으면 오버레이로 덮지 말고 panel-validator/panel-artist에 재렌더를 요청한다(이중 표기 금지).

구조·스타일 규칙 (템플릿에 반영됨)

• 반응형 폭(모바일 우선): --max-w: 720px 중앙 정렬. 폭은 100%로 채우고 높이는 auto.
• 패널 간 이음새: --panel-gap로 제어. 0px=무봉제 연결(한 장면의 연속 컷), 양수=칸 분리(장면 전환·시간 경과). 의미에 맞게 쓴다.
• lazy-load: <img loading="lazy" decoding="async">. 50+ 패널 회차의 초기 로딩·메모리 부담을 줄인다.
• 결손 표시: 이미지 로드 실패 시 칸을 비우지 않고 경고 플레이스홀더를 보여준다(img.onerror). 누락을 숨기지 않아야 검수가 잡는다.
• 데이터/표현 분리: 패널·말풍선은 데이터 배열, 스타일은 CSS. 재조립·수정 시 데이터만 갈아끼운다.

결손·순서 처리

• 번호가 비면(panel_007 없음) 당겨 붙이지 말고 그 자리에 결손을 표시하고 panel-artist에 재렌더를 요청한다. 순서가 어긋나면 반전 타이밍이 무너진다.
• 0바이트/손상 PNG도 결손으로 취급한다.