post-illustratelisted

# Post Illustrate > "파일 넣으면 이미지 나오는" 턴키 서비스는 없다. 어떤 이미지가 필요한지 판단하는 건 LLM 몫이다. > 이 스킬은 글을 읽고 **이미지 매니페스트**(렌더 가능한 소스 + 프롬프트)를 만든다. 실제 이미지화는 아래 무료 도구로. 입력: 블로그 글 `.md` 경로(인자). 출력: 같은 폴더에 `<글파일명>.images.md` 매니페스트. --- ## 절차 ### 1. 글 분석 - 글을 읽고 **시각화 가치가 높은 개념**을 찾는다(흐름·구조·before/after·계층·분기·대비). - 글 성격 판별: - **개념/아키텍처/프로세스 글** → 다이어그램 위주(Mermaid). 본문이 이미 표를 가지면 중복 다이어그램 자제. - **튜토리얼/실습 글** → 터미널·화면 캡처 대상 위주. - **과다 금지**: 글당 이미지 2~5장. 모든 섹션에 넣지 않는다. 텍스트로 충분한 곳은 비워둔다. ### 2. 이미지 종류별 산출물 생성 | 종류 | 언제 | 산출물 | |------|------|--------| | 커버(표지) | 글당 1장 | **권장: SVG 템플릿**(시리즈 일관 브랜딩, 로컬 렌더, AI 불요) — 제목·번호·부제만 교체. 대안: AI 이미지 프롬프트(영문 16:9 미니멀) | | 개념 다이어그램 | 흐름·구조·분기 | **Mermaid 텍스트**(flowchart/sequence). 박스+화살표 심플 | | before/after·대비 | 변화 설명 | Mermaid subgraph 2개 또는 좌우 비교 | | 손그림 풍 | 가벼운 개념 | Excalidraw로 그릴 요소 설명(텍스트 가이드) | | 코드·터미�� 캡처 | 실행 결과·스니펫 | 캡처할 출력 텍스트 + carbon/ray.so 설정(테마·언어) | ### 3. 매니페스트 작성 `<글파일명>.images.md`에 이미지별로: ``` ## [IMG-N] <배치: 어느 섹션 뒤> · <종류> - 목적: <이 이미지가 전달할 것 한 줄> - 렌더: <도구 + 방법> - 파일명(권장): <slug>-<n>-<keyword>.png - 소스/프롬프트: ``` <Mermaid 텍스트 / 커버 프롬프트 / 캡처 대상> ``` ``` ### 4. 렌더 가이드(매니페스트 말미에 고정 삽입) - **Mermaid (로컬 고화질 렌더 — 권장)**: mmdc로 직접 PNG 생성. **화질 필수 옵션**: ```bash # puppeteer.json: {"args":["--no-sandbox","--disable-setuid-sandbox"]} npx -y @mermaid-js/mermaid-cli -i in.mmd -o out.png -b white -s 3 -w 1000 -p puppeteer.json ``` - `-s 3` (scale 3x) — **1x 기본은 블로그 업로드 시 글자 깨짐**. 3x 필수. - `-b white` — velog 가독성(투명 배경은 테마 따라 안