HTML-to-Image 자동화로 포스트 생성 시간 15분에서 3초로 단축

Context

Figma나 Canva를 이용한 수동 디자인 방식의 반복적 작업으로 인한 리소스 낭비 발생. 디자인 도구 API의 제한적인 유연성과 높은 비용 구조로 인해 데이터 기반의 동적 콘텐츠 생성에 한계 노출.

Technical Solution

• 데이터 소스로 Google Sheets를 채택하여 콘텐츠 관리의 추상화 계층 구현
• 디자인 도구 대신 HTML/CSS 기반 템플릿을 도입하여 버전 관리 및 동적 데이터 주입 가능 구조 설계
• n8n Workflow를 통한 '데이터 추출 -> HTML 렌더링 -> 이미지 변환' 파이프라인 자동화
• Pre-warmed Chromium 기반의 RenderPix API를 활용하여 렌더링 지연 시간 최소화
• HTML 템플릿 내 플레이스홀더를 통한 동적 데이터 바인딩 및 일괄 처리 로직 적용

Impact

• 이미지 1장당 렌더링 속도 약 230ms 달성
• 10개 슬라이드 기준 총 생성 시간 3초 내외로 단축
• 수동 작업 대비 포스트 생성 시간 99% 이상 감소