I Built a GitHub Portfolio Analyzer with Next.js + Gemini AI

개요

Next.js와 Gemini AI를 활용하여 GitHub 저장소를 분석하고 포트폴리오에 적합한 저장소를 선별하는 도구가 개발되었습니다.

주요 내용

* 기존 문제점: 50개 이상의 GitHub 저장소 중에서 채용 담당자에게 보여주거나 포트폴리오에 추가할 만한 저장소를 식별하기 어려웠습니다.
* 솔루션: GitHub Portfolio Analyzer:
* 일반 분석 (Metadata 탭): GitHub API 데이터를 사용하여 저장소를 평가합니다.
* 평가 기준 (0-100점): 별 개수 (최대 40점), 마지막 푸시 활동 (최대 25점), 설명/홈페이지/토픽 포함 여부 (최대 25점), 포크 및 워쳐 수 (최대 20점)
* 자동 분류: 점수 및 라이브 데모 존재 여부에 따라 Product, Project, Experiment 등으로 분류합니다.
* 결과: 상위 3개 "가장 인상적인" 저장소를 표시하고, 포트폴리오에 적합한 저장소를 하이라이트하며, 카테고리 필터링 및 이름 검색, 점수/별/날짜별 정렬 기능을 제공합니다.
* 심층 AI 분석 (Google Gemini 탭): Gemini 1.5 Flash 모델을 사용하여 각 저장소의 README 파일을 분석합니다.
* AI 분석 결과: AI 점수 (0-100점), 카테고리 (Product, Project, Experiment, Learning), 2-3문장 요약, 강점 및 개선점, 포트폴리오 잠재력 (High, Medium, Low), 기술 스택 감지 기능을 제공합니다.
* 두 탭은 독립적으로 작동하며 데이터가 혼합되지 않습니다.
* 사용 기술: Next.js 15 (App Router), TypeScript, Tailwind CSS, GitHub REST API, Google Gemini (무료 티어).
* 주요 기술 결정:
* 순차적 API 호출: 디버깅 용이성을 위해 병렬 호출 대신 순차적으로 API를 호출했습니다.
* Rate Limit 안전한 AI 분석: Gemini 무료 티어의 요청 제한(15회/분)을 준수하기 위해 저장소 분석 간 6초 간격과 진행률 표시줄, 중지 버튼을 구현했습니다.
* Bearer 토큰 사용: token 접두사 대신 권장되는 Bearer 방식을 사용하여 GitHub API 인증 헤더를 설정했습니다.
* 배운 점:
* GitHub fine-grained token은 권한 설정이 엄격하며, affiliation=owner 대신 type=all을 사용해야 했습니다.
* Gemini 모델 이름 (gemini-2.0-flash-lite)과 API 버전(v1beta)이 무료 티어 안정성에 영향을 미칩니다.
* 모바일 환경(GitHub Codespaces)에서도 프로젝트 개발이 가능함을 확인했습니다.
* 향후 계획: 백엔드 및 인증 기능 추가, 팀/조직 지원, PDF 보고서 내보내기, 다른 개발자와의 비교 기능 등을 고려하고 있습니다.

시사점

이 도구는 GitHub 저장소의 가치를 객관적으로 평가하고 관리하는 데 도움을 주며, 개발자가 자신의 포트폴리오를 효과적으로 구축하고 개선하는 데 실질적인 지원을 제공합니다.

원문 읽기 →
원문을 불러오는 중...

댓글

GitHub Discussions