프로젝트를 위한 AI Agents 구성

 

---

Insight-Desktop 멀티 에이전트 개발 전략

(Vercel v0 + Codex/Claude Code 활용)

1. 프로젝트 현재 구조

현재 insight-desktop은 다음 구조입니다.

• Electron + React 기반 데스크탑 앱
• 로컬 API 서버 포함
• Confluence 데이터 수집
• 로컬 SQLite FTS 인덱스
• Deep Research Job 실행
• Ollama / OpenAI 호환 모델 사용

README 기준 주요 기능:

• Brave 스타일 검색 API
• Deep research job API
• Confluence 데이터 로컬 인덱싱
• Electron UI에서 research 실행

예:

GET /res/v1/web/search
POST /res/v1/research
GET /res/v1/research/:jobId

또한 Electron이 실행되면

1️⃣ Express API 서버 시작
2️⃣ Electron window 생성
3️⃣ React UI 렌더링

구조입니다.

---

2. 현재 프론트엔드 문제

현재 UI 특징

• React createElement 기반
• JSX 사용 안함
• CSS 직접 작성
• 디자인 시스템 없음
• UI 구조가 단일 파일 중심

예:

src/renderer/app.js

여기에

• 검색 UI
• 리서치 UI
• 설정 UI
• 이벤트 timeline
• 결과 report

모두 들어있습니다.

문제점

1️⃣ UI 디자인 품질 낮음
2️⃣ 컴포넌트 구조 없음
3️⃣ 유지보수 어려움
4️⃣ 디자인 일관성 부족

즉

"LLM이 만든 기능 UI" 수준 입니다.

그래서

프론트는 디자인 특화 서비스(v0)에 맡기고
코딩 에이전트는 로직을 맡기는 구조가 좋습니다.

---

3. Vercel v0 역할

Vercel v0는

프론트엔드 생성 특화 AI

입니다.

기능

• 자연어 → React UI 생성
• shadcn/ui 기반
• 디자인 시스템 자동 생성
• 여러 UI variant 생성
• GitHub repo 연결
• PR 자동 생성

즉

디자인 + UI 컴포넌트 생성기

입니다.

예

프롬프트

Create a dark themed research dashboard with

left panel:
- query input
- depth selector
- model selector

middle panel:
- research progress timeline

right panel:
- research report view

→ React 컴포넌트 생성

---

4. Multi-Agent 개발 방식 (핵심)

AI 개발은 하나의 모델로 하면 품질이 떨어집니다.

그래서 보통 다음 구조를 씁니다.

Planner Agent
↓
UI Agent
↓
Backend Agent
↓
Integration Agent
↓
Testing Agent

---

5. Insight-Desktop에 맞는 에이전트 분담

1️⃣ Planner Agent

역할

• 제품 설계
• 기능 정의
• 아키텍처

사용 모델

Claude / ChatGPT

작업

예

spec.md 작성

내용

• 기능 목록
• UI 구조
• API 정의
• 데이터 모델
• 테스트 전략

이 단계가 매우 중요합니다.

LLM 개발 실패의 대부분이

spec 없이 코딩 시작

입니다.

---

2️⃣ Frontend Agent (v0)

역할

UI 생성

작업

React UI 생성
Dashboard 생성
Settings panel 생성
Timeline 생성
Research report view 생성

 

예

Research Dashboard
Settings Panel
Event Timeline
Report Viewer

생성 결과

components/
ResearchDashboard.tsx
ResearchTimeline.tsx
ResearchReport.tsx
SettingsPanel.tsx

장점

• 디자인 품질 높음
• component 기반
• 유지보수 쉬움

---

3️⃣ Backend Agent

역할

API / 로직 구현

사용

Claude Code
Codex

 

작업

예

Confluence Sync
Research pipeline
Search ranking
LLM orchestration

예

server/appServer.js
research engine
search pipeline

---

4️⃣ Integration Agent

역할

Frontend + Backend 연결

작업

window.desktopApi 연결
API fetch 구현
state management

예

Start Research 버튼
↓
POST /research
↓
Event stream 표시
↓
Report render

---

5️⃣ Testing Agent

역할

테스트 생성

예

API test
research test
UI interaction test

도구

Playwright
Node test
supertest

---

6️⃣ Documentation Agent

역할

문서 자동 생성

예

README
API docs
Architecture docs

---

6. 실제 추천 구조

Insight-Desktop을 이런 구조로 리팩토링하는 것을 추천합니다.

insight-desktop
│
├─ electron
│
├─ server
│   ├─ search
│   ├─ research
│   └─ confluence
│
├─ frontend
│   ├─ components
│   ├─ pages
│   └─ hooks
│
├─ agents
│   ├─ research-agent
│   └─ search-agent
│
└─ docs

---

7. 추천 개발 흐름

개발 흐름

Step 1

Planner agent

spec.md
architecture.md

작성

---

Step 2

v0로 UI 생성

dashboard
timeline
report viewer
settings

---

Step 3

Claude Code

backend 구현

---

Step 4

Integration

API 연결
state 연결

---

Step 5

Testing

Playwright

---

8. 핵심 개발 철학

AI 개발은

코딩
→ 인간

AI
→ 보조

가 아니라

AI
→ 개발

인간
→ 오케스트레이션

입니다.

최근 통계

• 41% 코드가 AI 생성
• 84% 개발자가 AI 사용
• 앞으로

개발자는 코드를 쓰는 사람이 아니라
AI를 조율하는 사람

이 됩니다.

---

9. Insight-Desktop에 가장 좋은 조합

추천 스택

Planner
ChatGPT / Claude

Frontend
Vercel v0

Backend
Claude Code

Refactor
Codex

Testing
Playwright + LLM

Docs
ChatGPT

---

10. 가장 중요한 결론

Insight-Desktop 개발 전략은

UI
→ v0

Backend
→ Claude Code

Architecture
→ ChatGPT

Integration
→ Codex

Testing
→ AI + Playwright

입니다.

이렇게 하면

개발 속도

최소

5~10배 빨라집니다.

---

 

Oh My OpenCode 참고