Satori 기반 shadcn/ui 테마 뱃지 렌더링 엔진 구축

I built a shields.io alternative that renders badges as shadcn/ui buttons

Justin Levine2026년 4월 25일5분intermediate

AI 요약

Context

기존 shields.io의 획일적인 디자인 시스템으로 인한 현대적 UI 라이브러리와의 시각적 불일치 발생. SVG 태그의 샌드박스 제약으로 인해 외부 CSS 및 CSS 변수 사용이 불가능한 환경적 한계 존재.

Satori를 활용하여 shadcn/ui Button 컴포넌트를 SVG로 렌더링하는 구조 설계
CSS Variable 사용 불가 제약을 해결하기 위해 모든 테마 토큰을 Hex 값으로 변환하는 Lookup Table 및 resolve() 함수 구현
렌더링 로직 내 분기문을 제거하고 계산된 Hex 값만 전달하는 단일 렌더링 경로(Zero Branching) 확보
Satori의 CSS Opacity 미지원 문제를 해결하기 위해 Hex 값을 RGBA로 변환하는 커스텀 함수 적용
외부 SVG 아이콘의 렌더링을 위해 raw SVG 문자열을 React 엘리먼트 트리로 변환하는 경량 SVG Parser 개발
Next.js Route Handler의 성능 최적화를 위해 폰트 파일을 모듈 스코프에서 fs.readFileSync로 사전 로드하여 캐싱

실천 포인트

1. SVG 기반 이미지 생성 시 CSS Variable 대신 정적 Hex 값 매핑 테이블 검토

2. Satori 등 Headless 렌더러 사용 시 폰트 로딩 방식(URL fetch vs File system read)에 따른 성능 차이 확인

3. 외부 API Rate Limit 극복을 위한 OAuth 토큰 풀링 아키텍처 적용 가능성 분석

태그