피드로 돌아가기
I was tired of switching tabs to compare ChatGPT, Gemini & Copilot. So I built a <1MB Chrome extension to run them all in parallel.
Dev.toDev.to
Frontend

1MB 미만 경량 확장 프로그램으로 구현한 멀티 LLM 병렬 인터페이스

I was tired of switching tabs to compare ChatGPT, Gemini & Copilot. So I built a <1MB Chrome extension to run them all in parallel.

starwing2026년 4월 4일3intermediate

Context

여러 AI 모델의 답변을 비교하기 위해 다수의 브라우저 탭을 전환하는 비효율적인 구조. 잦은 프롬프트 복사·붙여넣기로 인한 컨텍스트 유지의 어려움. 고가의 API 쿼터 소모에 따른 비용 부담.

Technical Solution

  • BaseBotAdapter를 통한 LLM 추상화 계층 설계로 네트워크 프로토콜에 관계없는 UI 레이어 구현
  • 웹 세션 기반의 Web-scraping 방식을 채택하여 추가 API 비용 없이 기존 브라우저 인증 상태 활용
  • Chrome Manifest V3의 declarativeNetRequest를 사용해 Copilot 등 복잡한 인증 체계의 WebSocket 헤더 동적 재작성
  • React 19, Tailwind CSS v4, Vite 기반의 최신 스택 적용 및 Radix-UI 헤드리스 컴포넌트 활용으로 런타임 오버헤드 최소화
  • Domain-Driven Design 개념을 적용하여 확장 가능한 봇 추가 구조 설계
  • Alt + J 단축키 기반의 사이드바 토글 및 읽기 전용 스냅샷 저장 방식의 세션 관리

Impact

  • 확장 프로그램 전체 크기 1MB 미만 유지

Key Takeaway

인터페이스 추상화 계층을 통해 서로 다른 통신 프로토콜을 가진 외부 서비스를 단일 UI로 통합하는 설계 전략.


다양한 외부 API를 통합하는 서비스 설계 시 BaseAdapter 패턴을 도입하여 프로토콜 변경에 유연하게 대응할 것

원문 읽기