AiVerse 구축하기: Gemini AI Agent로 만든 현대적인 AI 카탈로그 및 개발자 허브

Hey dev.to 커뮤니티 여러분! 👋

오늘 저는 제가 작업해 온 프로젝트인 AiVerse를 공유하게 되어 정말 기쁩니다! AiVerse는 AI 모델, 벤치마크 (benchmarks), 프레임워크 (frameworks) 및 도구들을 카탈로그화하기 위해 설계된 현대적인 오픈 소스 AI 지식 베이스 (Knowledge Base)이자 개발자 포털입니다.

이 빌드가 특별한 이유는 Google DeepMind의 에이전트형 AI 코딩 어시스턴트인 **Antigravity (Gemini)**와 함께 프로젝트 전체를 페어 프로그래밍 (pair-programmed) 했다는 점입니다.

🔗 라이브 사이트: https://aiverse.frozenn.in/
💻 GitHub: https://github.com/Frozen-47/AiVerse

✨ AiVerse의 주요 기능

저희가 구축한 내용은 다음과 같습니다:

1. 🗂️ AI 카탈로그 및 나란히 비교 (side-by-side Comparisons)

AI 모델, 프레임워크 (frameworks), 데이터셋 (datasets)의 상세 사양을 탐색하세요. 사용자는 아키텍처 (architectures), 라이선스 정보 (license information), 벤치마크 성능 (benchmark performance) 및 제한 사항을 확인할 수 있습니다. 또한 사양을 나란히 놓고 검토할 수 있는 대화형 **나란히 비교 도구 (side-by-side comparison tool)**가 있습니다.

2. 🛡️ 라이브 관리자 포털 (Live Admin Portal)

사용자가 제출한 콘텐츠를 처리하는 맞춤형 관리 대시보드입니다. 관리자는 다음을 확인할 수 있습니다:

• 대기 중인 제출물 (Pending Submissions): 대화형 시각적 강조 표시를 통해 제출된 항목을 승인하거나 거절할 수 있습니다.
• 승인된 디렉토리 (Approved Directory): 기존 모델을 관리하고, 누가 제출했는지 추적하며, 필요한 경우 항목을 삭제할 수 있습니다.
• 등록된 사용자 (Registered Users): 빌더들의 명단과 그들의 프로필을 볼 수 있습니다.

3. 👤 공개 개발자 프로필 및 북마크 (Public Developer Profiles & Bookmarks)

사용자는 자신의 프로필을 맞춤 설정하고, 소셜 미디어 (GitHub, LinkedIn, Medium, Dev.to, Portfolio)를 연결하며, 자신의 제출 이력을 확인하고, 북마크한 AI 도구들을 공개 디렉토리에 공유할 수 있습니다.

4. 🖤 AMOLED 다크 모드 및 HSL 컬러 토큰 (AMOLED Dark Mode & HSL Color Tokens)

현대적인 디스플레이에 특화되어 설계되었습니다. 인터페이스는 맞춤형 AMOLED 다크 테마, 반응형 사이드바 (responsive sidebars), 마이크로 애니메이션 (최근 추가된 항목을 위한 맥동하는 NEW 배지), 그리고 깔끔한 타이포그래피 (typography)를 특징으로 합니다.

🛠️ 기술 스택 (The Tech Stack)

• Frontend: React, TypeScript, Vite, Tailwind CSS (테마 기반 HSL 색상 설정을 사용)
• Backend & Database: Supabase (공개 읽기 가능 폴더 및 관리자 권한을 허용하는 사용자 정의 행 수준 보안 (Row-Level Security, RLS) 정책이 적용된 PostgreSQL)
• State & Auth: Supabase Auth + 사용자 정의 React 인증 컨텍스트 (Auth Contexts)

🧠 에이전트와 페어 프로그래밍(Pair-Programming)을 하며 배운 점

Antigravity와 같은 에이전트와 함께 작업하는 것은 개발 루프 (development loop)를 크게 가속화했습니다.

• 반복적인 개선 (Iterative Refinement): 버튼 대비, 반응형 닫기 동작, 테마 조정과 같은 시각적 미세 조정 (visual tweaks)을 설명하면, 에이전트가 CSS 시스템과 TSX 컴포넌트를 즉시 업데이트했습니다.
• 백엔드 및 DB 정렬 (Backend & DB Alignment): 에이전트는 PostgreSQL 마이그레이션 (migrations)과 RLS 정책 (예: 북마크를 공개 읽기 가능하게 설정)을 생성 및 업데이트했으며, 프론트엔드 핸들러 (handlers)를 동기적으로 업데이트했습니다.

UI, 기능 또는 에이전트 워크플로 (workflow)에 대한 여러분의 의견을 듣고 싶습니다! 리포지토리 (repository)를 확인해 보시고, 자유롭게 기여해 주세요. 댓글로 여러분의 생각을 알려주세요. 💬