Playwright와 Shiki 기반의 자동화된 Code Screenshot REST API 구축

I built a Code Screenshot REST API because Carbon and Ray.so don't have one

The Flutter Guy2026년 6월 28일2분intermediate

AI 요약

Context

Carbon 및 Ray.so 등 기존 서비스의 REST API 부재로 인한 수동 작업 기반의 이미지 생성 병목 발생. 파이프라인 통합 및 자동화가 불가능한 인터페이스 구조로 인해 문서화 작업의 생산성 저하 초래.

Playwright와 Chromium 기반의 Headless Browser를 Google Cloud Run에 배치하여 픽셀 단위의 정밀한 렌더링 환경 구현
VS Code 내부 엔진인 Shiki v4를 채택하여 일관성 있는 Syntax Highlighting 품질 확보
Fastify v5와 Node.js 기반의 Backend 설계를 통한 고성능 REST API 엔드포인트 구축
Firebase Auth와 Firestore를 연동하여 사용자별 API Key 관리 및 할당량 제어 시스템 적용
Next.js와 Tailwind v4를 활용한 시각적 캔버스 에디터 제공으로 사용자 경험 최적화
PNG, SVG, JPEG, WebP 등 다양한 포맷의 동적 출력 옵션 지원을 통한 범용성 확대

실천 포인트

1. 단순 Canvas API의 한계가 있을 때 Headless Browser 기반의 렌더링 스택 검토

2. 일관된 코드 하이라이팅을 위해 검증된 라이브러리(Shiki 등) 활용

3. Serverless 환경(Cloud Run)을 통한 브라우저 인스턴스의 탄력적 확장 설계 적용

4. API 기반 서비스 구축 시 Tier별 Rate Limit 설정을 통한 리소스 보호

태그