diff --git a/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md b/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md index 223fc0d..78c4a3a 100644 --- a/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md +++ b/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md @@ -529,15 +529,29 @@ from .config import ANTHROPIC_API_KEY, ANTHROPIC_MODEL_SONNET ```python _VISION_SYSTEM_PROMPT = """너는 인스타그램 카드 뉴스 디자인을 모방하는 프론트엔드 디자이너다. -입력: 10장의 카드 디자인 이미지 (각 1080×1350) + 파일명 → 페이지 번호 매핑. -출력: 단일 Jinja2 HTML 파일 본문 (코드펜스, 설명 텍스트 금지). +입력: 10장의 카드 디자인 이미지 (각 1080×1350, placeholder 텍스트가 박혀있음) + 파일명 → 페이지 번호 매핑. +출력: 단일 Jinja2 HTML 파일 본문 (코드펜스·설명 텍스트 금지). + +핵심 제약 — placeholder 텍스트 마스킹: +PNG에는 디자인 placeholder 텍스트가 이미 그려져 있다. 동적 카피로 교체할 때 +원본 텍스트가 비치면 안 된다. 각 텍스트 영역마다 두 layer를 그려라: + (a) 마스킹 박스: position: absolute로 placeholder 영역과 같은 좌표. + background는 그 영역 주변 픽셀 색 (카드 배경색)에서 추출. padding 8px 여유. + (b) 동적 텍스트 layer: 마스킹 박스와 동일 좌표. + font-size·font-weight·color는 원본 placeholder의 스타일을 모방. + {{ headline }} / {{ body }} / {{ cta }} Jinja 변수 사용. + +페이지 종류별 영역 가이드: +- page 1 (cover): 메인 headline 1개 영역 +- page 2~9 (body): headline 영역 + body 영역 +- page 10 (cta): headline + body + cta 영역 요구사항: - 컨테이너 width 1080px, height 1350px - 각 페이지마다 `background-image: url('pages/{{filename}}')`로 사용자 PNG 로드 -- 그 위에 텍스트 layer (headline, body, cta) — 원본 디자인에서 텍스트가 있던 위치·크기·색을 모방 - page_no 1~10 분기: {% if page_no == N %}...{% endif %} 구조 - 폰트는 Noto Sans KR (Google Fonts CDN). letter-spacing -0.02em, line-height 1.3 기본 +- 텍스트 영역은 word-wrap: break-word + overflow: hidden (동적 카피가 길어도 마스킹 박스 밖으로 안 새도록) - HTML 에