파이프라인 첫 연결 성공
이전 단계까지 리눅스에서 job.json을 만들고 Windows ComfyUI로 전송해 이미지를 생성하는 파이프라인을 완성했습니다. 이번에는 그 이미지를 실제 카드뉴스에 넣어 PNG로 렌더링하는 첫 연결에 성공했습니다.
리눅스 → 윈도우 ComfyUI → 이미지 생성 → 카드뉴스 삽입 → PNG 출력. 이 흐름이 처음으로 엔드투엔드로 연결됐습니다. slide_01.png 표지에 ComfyUI 이미지가 들어갔고, slide_02.png부터 slide_08.png까지 8장 전체가 다시 렌더링됐습니다.
방향을 바꿔야 했다
파이프라인이 연결되고 나서 완성본을 보니 문제가 있었습니다. 기존에 만들던 다크 프리미엄형 디자인이 원하는 방향이 아니었습니다.
원하는 스타일은 이것이었습니다.
전체 레이아웃
- 상단: 흰 배경 + 스케치 일러스트
- 하단: 아주 연한 회색 텍스트 박스
- 맨 아래 푸터: 왼쪽 @리도 인사이트 / 오른쪽 01 / 06
텍스트 스타일
- 브랜드 라벨: 리도 인사이트, 손글씨체, 주황/골드 포인트 컬러
- 메인 제목: 굵은 고딕, 검정/짙은 네이비
- 본문: 손글씨 느낌, 여백 넉넉하게, 1~2문장
이미지 스타일
- 흑백 스케치, 선화 위주
- 배경 단순, 포인트 색 1개(커피색, 주황색)
- 장면형: 책 쓰는 사람, 체크리스트, 걷는 사람, 쉬는 사람
한 줄 정리: 상단 스케치 일러스트 + 하단 연회색 텍스트 박스 + 손글씨 브랜드 라벨
새 스타일로 바꾸기 위한 3단계
1단계: 스케치 전용 렌더 템플릿 만들기
기존 다크 템플릿을 버리고 새 템플릿 세 종류를 만들었습니다.
cover-sketch: 표지용. 상단 스케치 이미지 + 하단 타이틀content-sketch: 본문용. 상단 이미지 + 하단 설명 텍스트 박스cta-sketch: 마지막 장. CTA 문구 + 브랜드 정보
각 템플릿의 고정 구조입니다.
[상단 60%] 흰 배경 + 스케치 이미지
[하단 35%] 연회색(#F5F5F5) 텍스트 박스
리도 인사이트 라벨 (주황 손글씨)
메인 문장 (굵은 고딕, 검정)
설명 1~2줄 (얇은 고딕)
[푸터 5%] @리도 인사이트 / 페이지 번호
이 구조는 context/style-guide.md와 chaeunbyul-engine/scripts/render-sketch.js로 저장해 뒀습니다. 다음번 카드뉴스부터는 이 렌더러를 기본으로 씁니다.
2단계: ComfyUI 프롬프트 규칙 정리
스케치 스타일 이미지를 뽑으려면 ComfyUI 프롬프트도 바꿔야 합니다. 기존 프롬프트인 cozy korean chibi girl, cat-ear hoodie, warm pastel light, cinematic은 채색 일러스트용이었습니다. 스케치 스타일에는 맞지 않습니다.
새 기본 프롬프트 규칙입니다.
[Positive Prompt]
black ink sketch, minimal line drawing,
white background, simple character scene,
no text, korean cardnews illustration style,
small warm accent color optional
[Negative Prompt]
color photo, realistic, 3d render, dark background,
text, watermark, logo, signature
슬라이드 주제별로 장면 묘사를 다르게 씁니다.
| 슬라이드 | 장면 설명 | |--------|----------| | 표지 | person writing at desk, morning light | | 본문1 | checklist with checkmarks, hand drawn | | 본문2 | person walking on clean street | | 본문3 | open book with bookmark | | CTA | simple speech bubble, warm tone |
이 규칙을 context/comfyui-prompt-guide.md에 저장했습니다. 앞으로 job.json을 만들 때 이 가이드를 참고합니다.
3단계: 새 스타일로 샘플 1세트 다시 제작
기존 8장 세트를 새 스케치 스타일 기준으로 다시 뽑습니다. 순서는 이렇습니다.
- job.json에 새 프롬프트 규칙 적용
- ComfyUI로 스케치 이미지 생성
- render-sketch.js로 카드뉴스 렌더링
- slide_01.png ~ slide_08.png 다시 출력
이번 단계에서 바뀐 것
| 항목 | 이전 | 이후 | |-----|------|------| | 배경 | 다크 (#1A1A1A) | 흰 + 연회색 | | 이미지 | 채색 사실적 | 흑백 스케치 | | 브랜드 라벨 | 없음 | 리도 인사이트 손글씨 | | 푸터 | 없음 | @리도 인사이트 / 번호 | | ComfyUI 프롬프트 | 사실적 cinematic | black ink sketch |
이 단계의 의미
파이프라인 기술 연결은 16단계에서 끝났습니다. 17단계는 그 파이프라인이 실제로 만들어야 할 결과물의 방향을 잡은 단계입니다. 이미지를 넣고, 완성본을 보고, 다시 설계했습니다.
기술이 먼저 돌아가는 것과, 그 기술로 원하는 결과를 만드는 것은 다릅니다. 파이프라인은 동작했지만 결과물이 원하는 방향이 아니었습니다. 방향을 먼저 명확히 잡고 나서야 자동화가 의미가 있습니다.
이제 스케치 스타일 카드뉴스를 이 파이프라인으로 자동 생성하는 것이 다음 목표입니다.
