Base64 폰트 인젝션 기반의 GitHub README 동적 SVG 렌더러 구현

Context

GitHub Camo Image Proxy의 강력한 보안 정책으로 인해 외부 스타일시트, 스크립트 및 폰트 임포트가 차단되는 기술적 제약 발생. 기존 텍스트 생성 도구들의 디자인 한계와 렌더링 지연 문제를 해결하기 위한 고성능 커스텀 렌더러 필요성 증대.

Technical Solution

• Next.js Edge Runtime 도입을 통한 전 세계 밀리초 단위의 빠른 SVG 응답 렌더링 구현
• Google Fonts API에서 폰트 파일을 런타임에 직접 fetch 하여 .woff2 파일을 Base64 Data URI로 변환하는 로직 설계
• 변환된 Base64 데이터를 SVG 내부 블록에 직접 인젝션하여 GitHub 프록시의 외부 리소스 차단 우회
• CSS @keyframes 애니메이션을 활용한 self-contained SVG 구조 설계로 외부 종속성 없는 독립적 렌더링 보장
• 사용자 정의 폰트, 그라데이션, Glassmorphic 레이아웃을 동적으로 생성하는 시각적 빌더 인터페이스 제공