RepoLens AI — 몇 초 만에 모든 GitHub 저장소를 이해하기 🔍
Source: Dev.to
GitHub Copilot CLI Challenge 제출
제가 만든 것
RepoLens AI는 GitHub URL을 붙여넣으면 즉시 분석을 제공합니다:
- 아키텍처 요약
- 풀‑스택 분해
- 강점 & ⚠️ 약점
- 개선 제안
- 초보자 친화적인 작업
고유 시각화 (전부 순수 SVG, 차트 라이브러리 사용 안 함)
| 시각화 | 기능 |
|---|---|
| Language Ring | 공식 GitHub 언어 색상을 사용한 애니메이션 도넛 차트 |
| Health Radar | 다섯 가지 건강 차원을 점수화한 펜타곤 레이더 차트 |
| Architecture Graph | 폴더 구조를 보여주는 인터랙티브 노드 그래프, 접기/펼치기 “숨쉬기” 애니메이션 |
| Repo Personality | Myers‑Briggs‑스타일 분석 – 아키타입(Pioneer, Guardian, Architect, Sprinter, Scholar, Community)과 특성, 레이더 차트, 차원 분해 제공 |
| Hero Orb | 시각적 깊이를 위한 대기감 있는 애니메이션 배경 구체 |
추가 기능
- 전체 i18n – 영어(기본) + 포르투갈어; AI 응답이 선택된 언어를 따름
- 반응형 디자인 – 데스크톱에서는 강점/약점 영역을 2열 그리드, 모바일 퍼스트 레이아웃 적용
- 복사 & 내보내기 – 분석 결과를 클립보드에 복사하거나
.md파일로 다운로드 - 분석 타이머 – AI가 소요한 시간을 표시
- 히스토리 – 최근 분석한 레포가 로컬에 저장됨
- 스마트 폴백 – AI 할당량 초과 시 우아하게 기능 감소
기술 스택: React 19 + Vite 7.3 + TailwindCSS v4 | Express 5 + ES Modules | Google Gemini AI with automatic model discovery & fallback chain | GitHub REST API
데모
- 실제 앱:
- 저장소:
Screenshots
 |
|---|
| 애니메이션 구체 배경이 있는 깔끔한 랜딩 페이지 |
 |
|---|
| 데스크톱에서 반응형 2열 레이아웃을 갖춘 AI‑생성 분석 |
 |
|---|
| Language DNA 도넛 링과 Health Radar 펜타곤 — 순수 SVG, 라이브러리 전혀 사용 안 함 |
 |
|---|
| 중심 노드를 클릭하면 축소/확장 호흡 애니메이션이 트리거되는 방사형 레이아웃의 인터랙티브 아키텍처 그래프 |
추가 이미지
 |
|---|
 |
|---|
 |
|---|
모든 시각화는 외부 차트 라이브러리를 사용하지 않은 수제 SVG입니다.
레포 퍼스낼리티 — 레포지토리를 위한 마이어스‑브릭스
전형, 특성, 레이더 차트, 차원 분석
[이미지: Repo Personality – archetype]
[이미지: Repo Personality – radar chart]
[이미지: Repo Personality – dimension breakdown]
Copilot CLI 쇼케이스로 구축 — 개발 중 사용된 실제 명령어
[이미지: Copilot CLI showcase]
전체 i18n: 한 번 클릭으로 영어와 포르투갈어를 전환
Source: …
GitHub Copilot CLI 사용 경험
GitHub Copilot CLI는 이 프로젝트에서 단순한 도우미가 아니라 시작부터 끝까지 함께한 페어 프로그래밍 파트너였습니다. 모든 주요 기능, 까다로운 버그, 아키텍처 결정이 터미널의 gh copilot을 통해 이루어졌습니다.
사용 방법
1. 아키텍처 및 리팩토링
$ gh copilot suggest "refactor express server into modular architecture with services and routes"Copilot은 services/github.js, services/gemini.js, routes/analyze.js를 생성하고, 관심사의 명확한 분리를 제안했습니다. 30 분 이상 걸렸을 계획이었던 작업이 몇 초 만에 완료되었습니다.
2. 핵심 버그 해결
$ gh copilot explain "why is API_KEY undefined when using ES modules with dotenv"문제는 ES‑module import가 호이스팅되면서 dotenv.config()가 환경 변수가 필요한 import보다 뒤에서 실행된 것이었습니다. Copilot은 즉시 원인을 찾아 import "dotenv/config"를 가장 첫 번째 import로 넣으라고 제안했습니다. 버그는 10 초 이내에 해결되었습니다.
3. 무의존 시각화
$ gh copilot suggest "create an SVG pentagon radar chart in React without any chart library"이 명령 하나로 Health Radar 시각화가 탄생했습니다. Copilot은 극좌표 계산, requestAnimationFrame 애니메이션 루프, 인터랙티브 호버 효과 등을 순수 SVG로 생성했습니다. 이후에 다듬었지만, 기본 구조는 처음부터 견고했습니다.
4. AI 출력 정규화
$ gh copilot suggest "build a normalizeAnalysis function that transforms any AI output format into canonical sections"Gemini의 출력 형식은 예측하기 어렵습니다. Copilot은 억양 제거, 범용 헤더 정규식, 변형 매핑을 포함한 퍼지 매칭 시스템을 만들어, Gemini가 어떤 형태로 응답하든 분석 결과를 100 % 일관되게 만들었습니다.
5. 성능 최적화
$ gh copilot suggest "smart file tree filtering for GitHub repos to reduce prompt size"CODE_EXTENSIONS, IMPORTANT_FILES, IGNORED_PATTERNS를 활용한 지능형 필터 시스템을 구현해 파일 트리를 압축했습니다. 프롬프트 크기가 약 60 % 감소해 분석 속도가 빨라지고 비용도 절감되었습니다.
6. 프론트‑엔드 마무리
$ gh copilot suggest "animated SVG donut chart for language breakdown with GitHub official colors"이 명령으로 Language Ring 시각화가 만들어졌습니다. 큐빅 ease‑out 애니메이션, 호버 글로우 효과, HSL 폴백을 포함한 35 개 이상의 공식 GitHub 언어 색상이 적용되었습니다.
수치로 보는 영향
| 지표 | 값 |
|---|---|