ν”Όλ“œλ‘œ λŒμ•„κ°€κΈ°
A tool to make your GitHub README impossible to ignore πŸš€
Dev.toDev.to
Frontend

Base64 폰트 μΈμ μ…˜ 기반의 GitHub README 동적 SVG λ Œλ”λŸ¬ κ΅¬ν˜„

A tool to make your GitHub README impossible to ignore πŸš€

Dhanush N2026λ…„ 5μ›” 23일2λΆ„intermediate

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 λ ˆμ΄μ•„μ›ƒμ„ λ™μ μœΌλ‘œ μƒμ„±ν•˜λŠ” μ‹œκ°μ  λΉŒλ” μΈν„°νŽ˜μ΄μŠ€ 제곡

1. μ™ΈλΆ€ ν”„λ‘μ‹œκ°€ λ¦¬μ†ŒμŠ€λ₯Ό μ œν•œν•˜λŠ” ν™˜κ²½μ—μ„œ Base64 인코딩을 ν†΅ν•œ 데이터 λ‚΄μž₯ 방식 κ²€ν† 

2. μ „μ—­ 응닡 속도 μ΅œμ ν™”λ₯Ό μœ„ν•΄ Edge Runtime 기반의 μ„œλ²„λ¦¬μŠ€ λ Œλ”λ§ μ•„ν‚€ν…μ²˜ κ³ λ €

3. μ™ΈλΆ€ 라이브러리 없이 CSS μ „μš© μ• λ‹ˆλ©”μ΄μ…˜μ„ ν™œμš©ν•œ κ²½λŸ‰ν™”λœ μ‹œκ°μ  μš”μ†Œ κ΅¬ν˜„

원문 읽기