나는 로컬‑퍼스트 AI 프롬프트 매니저를 만들었다 — 오프라인‑퍼스트가 추가 복잡성을 가질 가치가 있었던 이유
Source: Dev.to
The Problem
AI 도구를 매일 사용하는 모든 개발자는 같은 문제에 직면합니다:
- 완벽하게 동작하는 프롬프트를 작성합니다.
- Claude, Cursor, 혹은 ChatGPT에서 정확히 필요한 출력을 얻습니다.
- 탭을 닫습니다.
일주일 뒤 같은 문제가 다시 나타나고, 그 프롬프트를 기억해 내기 위해 20 분을 소비하게 됩니다.
Introducing PromptVault
저는 PromptVault라는 local‑first 프롬프트 관리자를 만들었습니다. 이 도구는 오프라인에서도 동작하고, 모든 AI 도구용 브라우저 확장 기능을 포함하며, 더 나은 프롬프트 작성을 돕는 AI‑지원 기능을 제공합니다.
Why Not a Traditional Backend?
당연히 생각할 수 있는 방법은 데이터베이스와 백엔드, 사용자 계정을 만들고 모든 데이터를 서버에 저장하는 것입니다. 저는 두 가지 이유 때문에 그렇게 하지 않았습니다:
- Privacy – 개발자는 자신의 프롬프트가 타인의 데이터베이스에 저장되는 것을 신뢰하지 않습니다. 프롬프트에는 전체 사고 과정, 선호하는 접근 방식, 프로젝트 컨텍스트 등이 담겨 있어 민감합니다.
- Performance – 로컬‑퍼스트 앱은 더 빠릅니다. 서버 왕복이 없고, 검색이 즉시 이루어지며, 금고가 바로 열리고, 비행기에서도 사용할 수 있습니다.
Trade‑offs and Sync Architecture
Complexity
오프라인‑퍼스트는 동기화 충돌, 대기 중인 작업 큐, 두 디바이스에서 동일한 데이터가 수정되는 경우 등을 처리해야 합니다.
Write Operations Queue
모든 쓰기 작업(생성, 업데이트, 삭제)은 IndexedDB에 저장된 로컬 동기화 큐에 추가됩니다. 각 항목은 다음을 기록합니다:
- 작업 유형
- 엔티티 ID
- 전체 페이로드
앱이 온라인이 되면 큐를 Supabase에 순서대로 플러시합니다. 동기화 작업이 실패하면 지수 백오프를 적용해 최대 세 번 재시도합니다. 세 번 실패하면 해당 항목을 삭제하고 오류를 로그에 남깁니다.
Conflict Resolution
충돌은 updatedAt 타임스탬프를 기준으로 Last‑Write‑Wins 방식으로 해결됩니다. 이 간단한 전략은 우리 사용 사례에 충분합니다—두 디바이스에서 정확히 같은 순간에 동일 프롬프트를 편집하는 경우는 극히 드뭅니다.
Browser Extension (Chrome MV3)
이 확장은 claude.ai, chatgpt.com 등과 같은 사이트의 텍스트 필드에 작은 ⚡ 버튼을 삽입합니다. 또한 “ 혹은 contenteditable 요소가 있는 모든 페이지에 적용됩니다.
- 버튼 클릭 → 미니 검색 팝업이 PromptVault의 로컬 IndexedDB에서 데이터를 읽어옵니다.
- 프롬프트 선택 → 활성 필드에 바로 붙여넣어 창을 전환할 필요가 없습니다.
AI‑Powered Features (BYOK)
PromptVault는 BYOK – Bring Your Own Key 방식을 사용합니다. 설정에서 제공자를 (Claude, GPT‑5, Gemini, Groq, 혹은 OpenAI‑호환 엔드포인트) 지정하면, 앱이 직접 해당 제공자에 요청을 보내므로 데이터가 PromptVault 인프라를 통과하지 않습니다.
Main AI Features
- Vibe Mode – 거친 아이디어를 구조화된 프롬프트로 변환합니다.
- Prompt Improver – 프롬프트를 다듬는 네 가지 모드.
- Variant Generator – 간결형, 상세형, 혹은 재구성된 버전을 생성합니다.
- Debugger – 모든 프롬프트에 대해 다섯 가지 검사를 수행합니다.
Pricing
- Free tier – 모든 기능을 갖춘 100개의 프롬프트 제공; 시작에 계정이 필요 없습니다.
- Pro – 무제한 프롬프트와 기기 간 동기화를 위해 월 $9.
Contact
아키텍처에 관한 질문은 댓글로 언제든 환영합니다.