GitHub README에서 유튜브 썸네일, base64로 해결!

GitHub는 보안상의 이유로 SVG 내 외부 이미지 URL을 차단하는 Markdown Sanitizer를 적용한다. 이는 추적 픽셀(Tracking Pixel) 및 혼합 콘텐츠(Mixed Content) 문제를 방지하기 위한 조치이다. 해결책으로, 이미지를 Base64 인코딩(Base64 Encoding)하여 SVG 내부에 직접 포함시키는 방법을 사용한다. 이 방식은 이미지 데이터가 외부 URL이 아닌 SVG 자체에 포함되므로 GitHub에서 문제없이 렌더링된다.

Base64 인코딩은 이미지 데이터를 텍스트 형식으로 변환하여 SVG 파일 크기를 증가시킨다. 일반적으로 응답 크기(Response Size)가 약 33% 증가하며, 유튜브 썸네일의 경우 약 20KB에서 27KB로 증가한다. 하지만 GitHub에서 이미지를 렌더링하기 위해서는 불가피한 선택이다. 데이터 격리 아키텍처(Data Isolation Architecture)를 통해 보안을 강화하는 대신, 파일 크기 증가라는 트레이드오프를 감수해야 한다.

저자는 YouTube의 공개 oEmbed API를 활용하여 API 키 없이도 비디오의 제목과 썸네일 URL을 가져오는 방법을 발견했다. 이 API는 `youtube.com/oembed?url=VIDEO_URL&format=json` 형식으로 호출하여 JSON 형식의 응답을 반환한다. 이를 통해 개발자는 별도의 인증 절차 없이 유튜브 비디오 정보를 활용할 수 있으며, API 사용량 제한(Rate Limiting)에 대한 부담을 줄일 수 있다.

저자는 이 기술들을 활용하여 GitHub README에 유튜브 카드를 삽입하는 오픈소스 도구인 `readme-SVG-youtube-preview`를 개발했다. 이 도구는 Vercel을 통해 쉽게 배포할 수 있으며, 사용자는 Vercel URL과 유튜브 비디오 ID를 사용하여 카드를 생성할 수 있다. 또한, 다양한 스타일 옵션을 URL 파라미터로 제공하여 커스터마이징(Customizing)을 지원한다. 이는 개발자들이 GitHub README를 더욱 풍부하게 만들 수 있도록 돕는다.