소개
세무 관련 블로그 글을 인스타그램 카드뉴스로 자동 변환하는 파이프라인을 만들어보고 싶었습니다. GPTers 3주차 강의에서 다룬 "블로그 → 카드/릴스 자동화" 방법론(9단계 재구성 프로세스)을 실제로 제 상황에 적용해서, 세무·회계 콘텐츠를 인스타 카드로 반복 제작할 수 있는 구조를 만드는 게 목표였습니다.
진행 방법
사용 도구: Claude Code, Node.js, HTML/CSS, Puppeteer(시도), Claude Preview(브라우저 미리보기)
과정:
처음 요청한 프롬프트:
"강의 내용을 참고해서 세무 관련 블로그를 인스타 카드로 자동으로 만들 수 있는 자동화 기능을 만들고 싶어."
이후 범위를 좁혀서:
"그냥 이걸 지금 자동화 만들지 말고, 일단 대시보드를 만들어줘. [블로그 URL] 이 블로그 관련 내용으로 한번 인스타 카드 만들어봐"
카드 디자인은 4가지 타입(커버/본문/리스트/클로징)의 HTML 템플릿으로 만들고, 네이비+골드 톤으로 통일했습니다. 예시:
function coverCard({ kicker, title, subtitle, brand }, pageInfo) {
return `<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><style>
${baseStyle()}
.cover-title { font-size: 78px; font-weight: 900; line-height: 1.28; }
</style></head><body>
<div class="frame"></div>
<div class="brand">${brand || ""}</div>
<div class="page-num">${pageInfo.index} / ${pageInfo.total}</div>
<div class="cover-wrap">
<span class="kicker">${kicker}</span>
<div class="cover-title">${title}</div>
</div>
</body></html>`;
}
카드 내용(JSON)은 8장 분량으로, 원문 문장이 아니라 같은 주제(공동명의 다주택 종부세, 실거주 요건)를 제가 직접 재작성했습니다.
PNG 이미지로 바로 뽑으려고 Puppeteer를 붙였는데, Chrome 바이너리 설치가 막혀서(사용자가 설치 승인을 거부) 방향을 바꿔 HTML 카드 + 브라우저 대시보드 미리보기로 전환했습니다.
node build-dashboard.js로 카드별 HTML과 그리드형 대시보드(dashboard.html)를 생성하고, 로컬 서버(npx serve)로 띄워 Claude Preview로 렌더링을 확인했습니다.
결과와 배운 점
결과: 8장짜리 카드뉴스 세트(커버 1 + 본문 3 + 리스트 3 + 클로징 1)를 네이비+골드 디자인으로 완성했고, 데이터(JSON)만 바꾸면 다른 세무 주제에도 재사용 가능한 템플릿 구조를 만들었습니다.
시행착오:
대시보드 그리드에서 카드가 검게 나오는 버그가 두 번 있었는데, 원인은 ① CSS
transform: scale()+ JS 계산 방식이 불안정했던 것(→ 고정zoom값으로 단순화), ② iframe 경로가 실제 파일 위치(output/html/)와 어긋난 것(상대경로 오타)이었습니다.Puppeteer는 npm 패키지 설치는 됐지만 Chrome 실행 파일 별도 설치가 필요했고, 이 단계에서 자동 설치를 진행하지 않기로 했습니다.
