유튜브 링크 하나로 GitHub 프로필에 음악 카드 넣기

코딩할 때 다들 뭐 들으세요?

저는 작업할 때 항상 유튜브를 틀어놓는데, 어느 날 GitHub 프로필을 보다가 문득 이런 생각이 들었습니다.

"contribution 그래프, 사용 언어, 스트릭 배지... 개발자로서 나는 잘 보이는데, 내가 뭘 듣는 사람인지는 아무 데도 안 보이네."

Spotify 연동 서비스가 있긴 한데, OAuth 인증을 받아야 하고 설정이 번거롭더라고요. 그냥 유튜브 링크 하나 던지면 카드가 나오면 안 되나? 싶어서 직접 만들어봤습니다.

---

이런 겁니다

유튜브 URL을 넣으면 이런 SVG 카드가 실시간으로 생성됩니다:

README에 한 줄이면 끝이에요.

![My Music](https://sound-badge.vercel.app/api/card.svg?url=유튜브_URL&theme=stream)

인증 없고, 토큰 없고, 빌드 스텝도 없습니다. GitHub이 README를 렌더링할 때마다 API가 SVG를 그때그때 만들어줍니다.

---

스타일은 꽤 많이 만들었습니다

처음에는 카드 하나만 만들 생각이었는데, 만들다 보니 욕심이 나서 템플릿을 5개, 클래식 테마를 8개 만들었습니다.

한 줄짜리 배지부터:

터미널 느낌도 되고:

네온 글로우도 있습니다:

각 템플릿마다 색상 변형도 있어서, 프로필 분위기에 맞춰서 고를 수 있어요.

클래식 테마는 이런 식입니다:

Minimal	Mono	Sunset

---

만들면서 고민했던 것들

SVG 안에 이미지를 어떻게 넣지?

GitHub은 보안상 SVG 내부의 외부 이미지 요청을 차단합니다. 그래서 유튜브 썸네일을 서버에서 fetch한 다음 base64로 변환해서 SVG에 직접 임베딩하는 방식으로 해결했습니다. 덕분에 외부 요청 없이 단일 SVG로 완결됩니다.

GitHub camo 프록시

GitHub은 README의 이미지를 camo.githubusercontent.com 프록시로 캐싱합니다. 이게 URL에 공백이나 한글이 들어가면 깨지는 경우가 있어서, 모든 파라미터를 URL 인코딩해야 했습니다. 로컬에서는 잘 보이는데 GitHub에서만 안 보이는 버그를 잡느라 좀 고생했어요.

Edge Runtime

카드 생성을 Vercel Edge Functions에서 처리합니다. 유저와 가까운 엣지에서 실행되니까 응답이 빠르고, cold start도 거의 없습니다.

---

기술 스택

• Next.js 16 (App Router)
• TypeScript
• Vercel Edge Functions
• YouTube Data API v3

프론트 빌더 페이지는 Tailwind CSS 4로 만들었고, 빌더에서 URL 넣고 테마 고르면 바로 코드를 복사할 수 있게 해뒀습니다.

---

써보기

빌더 페이지에서 바로 만들 수 있고, 빌더 없이 URL만 조합해도 됩니다.

태그나 라벨도 붙일 수 있어요:

오픈소스라 새 테마 추가나 PR도 환영합니다.

GitHub: github.com/gguip1/SoundBadge

프로필에 음악 한 곡 넣어보세요. 생각보다 괜찮습니다.