AI 도구 간의 컨텍스트 스위칭 (Context Switching)에서 계속 맥락을 놓치고 있었습니다 — 그래서 모든 것을 기억하는 브라우저 확장 프로그램을 만들었습니다

당신의 AI 대화가 플랫폼 안에 갇혀 있어서는 안 됩니다.

문제점 (The Problem)

2025년까지 대부분의 개발자는 매일 여러 개의 AI 도구를 사용합니다.

• 빠른 질문을 위한 ChatGPT
• 긴 추론 (Reasoning)을 위한 Claude
• 리서치를 위한 Gemini
• 분석을 위한 Perplexity

하지만 모든 플랫폼은 대화를 별도로 저장합니다.

이로 인해 다음과 같은 답답한 워크플로 (Workflow)가 발생합니다:

• 컨텍스트 윈도우 (Context Windows)가 가득 차면 대화가 끊깁니다.
• 플랫폼을 전환하면 연속성이 파괴됩니다.
• 채팅을 내보내는 (Exporting) 과정이 고통스럽거나 불완전합니다.
• 대화 기록이 당신이 제어할 수 없는 계정에 종속됩니다.
• 플랫폼 전반에 걸친 통합 검색 기능이 없습니다.

요약하자면:

AI와 함께 구축한 지식이 고립된 사일로 (Silos) 안에 갇혀 있습니다.

기존 솔루션들이 적절하게 느껴지지 않았던 이유

일부 도구들이 이 문제를 해결하려고 시도하지만, 대개 다음과 같은 것들을 요구합니다:

• 유료 API
• 백엔드 (Backend) 서버
• 계정 연동
• 클라우드 동기화 (Cloud Syncing)
• 월간 구독

저는 더 단순한 것을 원했습니다.

한 가지 질문이 계속 저를 괴롭혔습니다:

모든 AI 대화가 완전히 브라우저 내부에만 머물 수 있다면 어떨까?

백엔드도 없고, 계정도 없고, 추적도 없는 방식 말입니다.

솔루션: ContextVault

ContextVault는 다음과 같은 플랫폼을 사용하는 동안 AI 대화를 로컬 (Locally)에 캡처하는 오픈 소스 (Open-source) Chrome 확장 프로그램입니다:

• ChatGPT
• Claude
• Gemini
• Perplexity
• Poe
• DeepSeek
• Grok
• Microsoft Copilot

모든 것은 당신의 기기에 머뭅니다.

텔레메트리 (Telemetry)도 없고, 외부 저장소도 없습니다.

작동 방식

AI 대화를 안정적으로 캡처하는 것은 예상보다 더 어려운 일이었습니다.

두 가지 주요 문제가 있었습니다:

1. 플랫폼마다 서로 다른 DOM 구조

ChatGPT, Claude, Gemini 등 각 플랫폼 간의 셀렉터 (Selectors), 레이아웃 (Layouts), 렌더링 로직 (Rendering logic)은 완전히 다릅니다.

2. AI 응답이 실시간으로 스트리밍됨

메시지는 한꺼번에 도착하는 대신 토큰 (Token) 단위로 하나씩 도착합니다.

이를 해결하기 위해 ContextVault는 6계층 아키텍처 (6-layer architecture)를 사용합니다:

Adapters → Capture → Stream Assembler → Background Worker → Storage → Export

1. 어댑터 계층 (Adapters Layer)

각 플랫폼은 공유 인터페이스 (Shared interface)를 구현하는 자체 어댑터를 가집니다:

interface LLMAdapter {
  platform: Platform
  urlPattern: RegExp
...

각 어댑터는 다음을 수행하는 방법을 알고 있습니다:

• 플랫폼 감지 (Detect the platform)
• 메시지 위치 파악 (Locate messages)
• UI 차이 처리 (Handle UI differences)

2. 캡처 계층 (Capture Layer) (DOM + Network)

이것이 핵심 시스템입니다.

DOM 옵저버 (DOM Observer)

MutationObserver가 대화 UI를 실시간으로 감시합니다.

다음 항목을 감지합니다:

• 새로운 메시지 (New messages)
• 스트리밍 업데이트 (Streaming updates)
• 수정된 콘텐츠 (Edited content)

네트워크 모니터 (Network Monitor)

확장 프로그램은 또한 다음을 패치 (Patch)합니다:

• fetch
• XMLHttpRequest
• WebSocket

이를 통해 네트워크 트래픽에서 스트리밍 응답에 직접 조기 접근할 수 있습니다.

왜 둘 다 사용하나요?

• DOM은 사용자가 보는 것을 정확하게 반영합니다.
• 네트워크 캡처는 스트리밍 정확도를 향상시킵니다.

두 가지를 함께 사용함으로써 놓치는 메시지를 획기적으로 줄였습니다.

3. 스트림 어셈블러 (Stream Assembler)

AI 응답은 다음과 같이 청크 (Chunks) 단위로 도착합니다:

"Hel"
"lo "
"world"

스트림 어셈블러는 다음을 처리하면서 완전한 메시지를 재구성합니다:

• 청크 병합 (Chunk merging)
• 중복 제거 (Duplicate removal)
• 완료 감지 (Completion detection)

4. 백그라운드 워커 (Background Worker)

백그라운드 워커는 다음을 관리합니다:

• 활성 세션 (Active sessions)
• 대화 라이프사이클 (Conversation lifecycle)
• 중복 제거 (Deduplication)
• 스트리밍 업데이트 (Streaming updates)
• 대화 연결 (Conversation linking)

또한 빠른 스트리밍 이벤트 중에 중복 저장이 발생하는 것을 방지합니다.

5. 스토리지 계층 (Storage Layer) (IndexedDB)

모든 것은 IndexedDB를 사용하여 로컬에 저장됩니다.

저장되는 데이터에는 다음이 포함됩니다:

• 대화 (Conversations)
• 초안 (Drafts)
• 설정 (Settings)
• 프로젝트 (Projects)

각 대화에는 다음이 저장됩니다:

• 플랫폼 (Platform)
• 메시지 (Messages)
• 타임스탬프 (Timestamps)
• 모델 정보 (Model information)
• 태그 (Tags)
• 대화 체인 (Conversation chains)

외부 데이터베이스는 사용되지 않습니다.

6. 내보내기 계층 (Export Layer)

대화는 다음과 같은 형식으로 내보낼 수 있습니다:

• 마크다운 (Markdown)
• ZIP 아카이브 (ZIP archives)

출력 예시:

## 사용자 (User)
보안 API를 어떻게 설계하나요?

...

개인정보 보호 우선 (Privacy First)

ContextVault는 하나의 원칙을 중심으로 설계되었습니다:

당신의 대화는 당신의 것입니다.

따라서 이 확장 프로그램은:

• 백엔드 서버가 없습니다
• 분석(Analytics)이나 원격 측정(Telemetry)을 사용하지 않습니다
• 완전히 오프라인으로 작동합니다
• 지원되는 AI 도메인에서만 활성화됩니다
• 당신의 대화를 그 어디로도 전송하지 않습니다

기술 스택 (Tech Stack)

• TypeScript
• Manifest V3
• CRXJS + Vite
• IndexedDB
• MutationObserver
• JSZip
• Vitest

마치며 (Final Thoughts)

AI 도구는 단순히 코딩하는 방식을 넘어, 우리가 생각하는 방식의 일부가 되고 있습니다.

하지만 도구 간의 기억(Memory)은 여전히 끊겨 있습니다.

모든 플랫폼은 워크플로를 전환하는 순간 대화가 사라지는 폐쇄된 사일로 (Silo)처럼 작동합니다.

ContextVault는 이를 해결하기 위한 저의 시도입니다.

당신의 AI 대화를 휴대 가능하고, 검색 가능하며, 온전히 당신의 것으로 유지해 주는 가벼운 브라우저 확장 프로그램입니다.

링크 (Links)

GitHub: https://github.com/aliabdm/ContextVault

Demo: https://ghost-job-detector-rlcx.vercel.app/

Portfolio: https://senior-mohammad-ali.vercel.app/

LinkedIn: https://www.linkedin.com/in/mohammad-ali-abdul-wahed-1533b9171/