Utils·운영 중·2026-02
Badge
동적 PNG 뱃지 생성기
URL 쿼리만으로 텍스트·색·아이콘·Tailwind 클래스를 받아 PNG 뱃지를 즉시 생성합니다.
기술 스택
만든 이유
shields.io는 알고 있었지만 언제 내려갈지 모르는 외부 서비스에 종속되고 싶지 않았습니다.
과거 Next.js의 @vercel/og가 Satori를 사용한다는 점이 기억나, "나도 Satori로 만들어 보자"는 동기로 출발했습니다.
코멘트
가장 작은 코드로 가장 자주 쓰이는 도구입니다. README 한 줄 뱃지가 매일 떠야 하는 상황에서, 외부 서비스 의존 없이 직접 컨트롤하고 있습니다.
주요 특징
- 01URL 쿼리만으로 모든 커스터마이즈: Tailwind 클래스를 URL에 그대로 전달 (tw-to-css)
- 02내장 아이콘 슬러그 + 임의 favicon 로딩 (icojs로 .ico 동적 디코드)
- 03한글 폰트 (Noto Sans KR) 내장으로 한국어 뱃지 생성 가능
비고
- ·단발 개발 (하루): 필요한 기능만 만들기로 결심 (YAGNI)
- ·향후 b-hub 통합 시 사용자별 뱃지 리스트·즐겨찾기·history 추가 예정