Google Flow 도구 커스텀 개조기: 흑백 출판 만화 툴을 ‘K-웹툰 제작기’로 바꾼 4단계 삽질과 해결

1. 개요: 왜 멀쩡한 도구를 뜯어고쳤는가?

기존 도구의 한계: Manga Architect Pro 기반 툴은 아마존 KDP 출판 규격(B5/A4 책 형태, 흑백 스크린톤, 일본어 위주 렌더링)에 갇혀 있음.

목표: 캐릭터 일관성(Character Consistency)은 유지하면서 세로 스크롤 핏(9:16) + 풀컬러 셀 채색 + 완벽한 한글 SFX 출력이 가능한 웹툰 전용 툴로의 탈바꿈.

2. 핵심 트러블슈팅 & 기능 확장 로그

Module Export & SDK 임포트 충돌 (Flow not exported)

현상: 컴포넌트 내부에서 SDK 호출 경로 꼬임으로 인한 치명적인 런타임 에러 발생.

해결: 경로를 flow-sdk 공식 명칭으로 통일하고, Material Symbols 아이콘 셋을 공식 지원 네임스페이스로 전면 마이그레이션.

UI 한글화 및 일본어 텍스트 침범 원천 차단

현상: 그림 렌더링 시 만화 특유의 일본어 가나/한자가 배경 텍스트에 강제 삽입됨.

해결: 프롬프트 파이프라인에 IMPORTANT: Use stylized Korean (Hangul) only for sound effects, STRICTLY NO Japanese 강제 제약 조건을 인젝션해 한글 효과음(‘첨벙’, ‘쿵쾅’)이 자연스럽게 박히도록 보정.

상태 동기화 버그(Stale State)와 이미지 유실 방지

현상: 페이지 전환 시 이전 컷 데이터와 캐릭터 캐스팅(castIds)이 초기화되는 문제.

해결: React Functional Updates 패턴을 적용해 프로젝트 최신 상태를 강제 동기화하고, 새로고침 시에도 Google Flow 미디어 갤러리에서 즉시 컷을 땡겨오는 복구 로직 구축.

시각적 일관성을 위한 ‘참조 연계(Reference Connections)’ 탑재

이전 페이지의 미디어 ID(mediaId, refPageId)를 부모 노드로 묶어, AI가 앞선 컷의 캐릭터 포즈와 씬 라이팅을 학습하며 다음 컷을 생성하도록 파이프라인 확장.

3. 출판 만화 ➔ 웹툰 전용 엔진으로의 전면 리팩토링

캔버스: 2:3 단면 인쇄 비율 ➔ 9:16 모바일 풀화면 핏으로 전환.

스타일 엔진: 흑백 해칭/스크린톤 키워드 박멸 ➔ K-Webtoon/Manhwa 풀컬러 네온 라이팅 & 셀 채색 주입.

뷰어 UI: 책장 넘기기 ➔ 아래로 쭉쭉 내리는 ‘무한 세로 스크롤(Vertical Stack View)’로 전환.