GitHub 프로필에 유튜브 음악 카드를 추가하세요!
GitHub 프로필에 유튜브 음악 카드를 추가하는 프로젝트로, 개발자의 음악 취향을 시각적으로 표현
유튜브 URL을 입력하면 SVG 카드가 실시간으로 생성되며, 인증 절차 없이 간편하게 사용 가능
Vercel Edge Functions를 활용하여 사용자에게 빠른 응답 속도를 제공하고, GitHub camo 프록시 문제 해결
Next.js 16, TypeScript, Tailwind CSS 4 등 최신 기술을 사용하여 다양한 테마와 사용자 친화적인 인터페이스 제공
SVG 임베딩(Embedding)을 통한 외부 의존성 제거
본 프로젝트는 GitHub의 보안 정책(Security Policy)에 따라 SVG 내 외부 이미지 요청이 차단되는 문제를 해결하기 위해, 유튜브 썸네일을 서버에서 base64로 인코딩(Encoding)하여 SVG에 직접 삽입했다.
외부 요청 차단: 단일 SVG 파일(Single SVG File)로 완결되어 외부 의존성 감소
성능 최적화: 이미지 로딩(Image Loading) 속도 향상 및 불필요한 네트워크 요청 제거
기술적 도전: base64 인코딩(Encoding) 과정에서 이미지 품질 저하 방지 및 효율적인 데이터 처리 필요
Vercel Edge Functions를 활용한 빠른 응답
본 프로젝트는 Vercel Edge Functions를 사용하여 사용자에게 빠른 응답 속도(Response Speed)를 제공한다.
엣지 컴퓨팅(Edge Computing): 사용자와 가까운 엣지 서버에서 실행되어 지연 시간(Latency) 최소화
콜드 스타트(Cold Start) 문제 해결: Edge Functions는 콜드 스타트(Cold Start)가 거의 없어 즉각적인 응답 가능
확장성(Scalability) 확보: 트래픽 증가에 유연하게 대응하여 안정적인 서비스 운영(Stable Service Operation) 가능
GitHub camo 프록시 문제 해결
본 프로젝트는 GitHub의 camo 프록시(Proxy)를 통해 이미지 캐싱(Caching) 과정에서 발생하는 문제를 해결했다.
URL 인코딩(URL Encoding): URL에 공백이나 한글이 포함될 경우 발생하는 문제를 해결하기 위해 모든 파라미터를 URL 인코딩(URL Encoding)
디버깅(Debugging) 어려움: 로컬 환경에서는 문제없이 작동하지만, GitHub에서만 문제가 발생하는 버그를 해결하기 위해 다양한 테스트(Various Tests) 수행
안정성 확보: camo 프록시(Proxy) 환경에서도 안정적으로 이미지를 렌더링(Rendering)하여 사용자 경험 개선
Next.js 16 및 Tailwind CSS 4를 활용한 프론트엔드 개발
본 프로젝트는 Next.js 16(Next.js 16)과 Tailwind CSS 4(Tailwind CSS 4)를 사용하여 프론트엔드(Frontend) 개발을 진행했다.
개발 생산성 향상: Next.js의 App Router를 통해 페이지 라우팅(Page Routing) 및 서버 사이드 렌더링(Server-Side Rendering) 구현
스타일링(Styling) 효율성: Tailwind CSS 4를 사용하여 반응형 디자인(Responsive Design) 및 UI 컴포넌트(UI Component) 구현
사용자 경험 개선: 빌더 페이지(Builder Page)를 통해 URL 입력 및 테마 선택만으로 코드를 생성하여 사용자 편의성(User Convenience) 증대
