멀티 에이전트 AI 사이드바 개발: Electron과 Svelte를 활용한 접근

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 중급 이상의 JavaScript 개발자
• Electron, Svelte, Electron-Webview 기술 스택을 활용한 데스크탑 앱 개발에 관심 있는 개발자
• 난이도: 중간 (Electron의 시스템 트레이/윈도우 애니메이션 구현과 크로스 플랫폼 호환성 처리가 복잡함)

핵심 요약

• Electron + Svelte 기반의 멀티 에이전트 데스크탑 앱 구현
• BrowserWindow 대신 WebView 사용으로 Google Auth 및 Cloudflare CAPTCHA 처리 가능
• 크로스 플랫폼 빌드 자동화
• GitHub Actions로 Windows, Linux, macOS 대상 빌드 자동화
• 3rd Party API 의존성 회피 전략
• Open WebUI, LibreChat과 연동하여 로컬 AI 모델 직접 사용
• 프리미엄 모델 도입
• 2개 에이전트 + 15개 AI 공급업체 제한 → 무제한 사용을 위한 일회성 라이선스 구매

섹션별 세부 요약

1. 문제 정의 및 초기 접근

• 문제점: AI 사용 시 브라우저 탭 전환으로 작업 흐름 중단
• 초기 시도: GitHub Copilot만 사용 → Claude, Perplexity, 번역기 등 다양한 AI 사용 필요성 인식
• 목표: 사용자 맞춤형 멀티 에이전트 데스크탑 앱 개발

2. 기술 스택 선택

• Electron 선택 이유:

- 크로스 플랫폼 지원 (Windows, Linux, macOS)

- Vite-Electron으로 빠른 개발 환경 구축

• Svelte 활용:

- 반응성 기반 UI 업데이트 (Main Process 이벤트 기반)

- IPC (Inter-Process Communication)를 통한 시스템 프로세스 통신

3. Electron 구현 도전점

• WebView 사용 필수성:

- BrowserWindow의 레이아웃 유연성 한계 → User Agent 설정, 콘텐츠 주입 등 가능

- Cloudflare CAPTCHA 대응을 위해 WebView 필수

• 크로스 플랫폼 호환성 문제:

- System Tray, 애니메이션 구현 시 OS별 차이로 복잡도 증가

4. 3rd Party API 의존성 회피

• 중개 서버 없이 사용자 계정 직접 연동 → 사용자 제한 없음
• 로컬 AI 지원:

- Open WebUI, LibreChat과 연동 → 이미지 처리, 멀티 에이전트 로직 지원

- 로컬 모델 실행으로 인프라 관리 부담 감소

5. 프리미엄 모델 도입

• 오픈소스 고려 후 포기:

- 프리미엄 모델 도입 (2개 에이전트 + 15개 AI 공급업체 제한)

• 라이선스 구매 모델:

- 무제한 사용을 위한 일회성 라이선스 제공 → 프로젝트 지속 가능성 확보

결론

• Electron + Svelte 기반 데스크탑 앱 개발 시 주의사항:

- WebView 사용 필수 (CAPTCHA 처리)

- GitHub Actions로 빌드 자동화 (크로스 플랫폼 호환성 관리)

- 프리미엄 모델 도입은 지속 가능한 개발 모델 확보에 효과적

• 실무 적용 팁:

- IPC 통신 시 코드 분리, TailwindCSS 적용으로 UI 개발 효율성 향상

- 로컬 AI 모델 연동 시 Open WebUI/LibreChat 활용 권장