GET 엔드포인트 기반의 코드 스크린샷 자동화 파이프라인 구축

Context

디자인 툴 중심의 기존 워크플로우로 인한 반복적인 수동 캡처 및 업로드 과정의 비효율 발생. HTML 태그 하나로 해결 가능한 작업을 위해 45분 이상의 불필요한 리소스가 소모되는 구조적 한계 노출.

Technical Solution

• URL Query String을 통한 코드 전달 및 즉각적인 PNG 응답을 생성하는 GET API 설계
• Shiki를 통한 구문 강조 처리와 Satori를 활용한 HTML/JSX의 SVG 변환 로직 구현
• resvg-js 기반의 SVG to PNG 렌더링 파이프라인 구축을 통한 최종 이미지 생성
• 1500자 초과 데이터 처리를 위한 POST /api/snippets 엔드포인트 분리 및 ID 기반 참조 구조 채택
• Vercel CDN을 활용한 무기한 캐싱 전략으로 반복 요청에 대한 렌더링 부하 최소화
• libSQL(Turso)을 통한 스니펫 메타데이터 관리 및 계정 귀속 시스템 구현