Tab Bankruptcy: 크롬 탭의 혼란을 로컬 AI 기반 금고로 변환
요약
본 글은 수많은 크롬 탭의 혼란을 해결하기 위해 로컬 AI 기반의 탭 관리 도구 'Tab Bankruptcy'를 소개합니다. 이 도구는 여러 창에 걸친 탭 세션을 캡처하고, AI를 이용해 자동 분류 및 요약을 생성하여 검색 가능한 개인 금고로 만듭니다.
핵심 포인트
- 수많은 탭을 로컬에서 저장하고 관리하는 솔루션입니다.
- AI 분류/요약 기능은 클라우드 API 없이 Ollama와 같은 로컬 모델을 사용합니다.
- Chrome Extension, FastAPI, React 등 전형적인 웹 개발 스택으로 구성되었습니다.
이 글은 Hacktoberfest Weekend Challenge: Build for a Friend에 제출하는 글입니다.
제가 만든 것 (What I Built)
저는 여러 개의 Chrome 창에 너무 많은 브라우저 탭을 열어두는 습관이 있는 친구를 위해 로컬 AI 기반의 크롬 탭 관리 도구인 Tab Bankruptcy를 만들었습니다.
문제는 간단했습니다. 수십 개 또는 심지어 수백 개의 탭을 모은 후, 특정 탭 하나를 찾는 것이 어려워졌고, 브라우저를 닫으면 그 전체 컨텍스트를 잃을 수도 있었습니다.
Tab Bankruptcy를 사용하면 다음 작업을 할 수 있습니다:
- 여러 Chrome 창에 걸친 탭 캡처
- 완전한 브라우징 세션 로컬 저장
- AI를 사용하여 탭 자동 분류
- 짧은 AI 요약 생성
- 제목, URL, 카테고리 또는 요약을 통해 탭 검색
- 카테고리별 탭 필터링
- 저장된 세션을 Chrome으로 복원
- 가능한 경우 창 그룹화, 탭 순서 및 고정된 탭 보존
Tab Bankruptcy는 이 모든 탭을 단순한 잡동사니로 취급하는 대신, 검색 가능한 개인 금고로 변환합니다.
데모 (Demo)
🎥 데모 영상:
이 데모는 전체 워크플로우를 보여줍니다:
Chrome 탭 혼란 → 캡처 → AI 분류 → AI 요약 → 검색 → 복원
코드 (Code)
💻 GitHub: https://github.com/AdityaAlibade/Tab-Bankruptcy.git
이 프로젝트는 세 가지 주요 부분으로 구성되어 있습니다:
- Chrome Extension: 브라우저 탭을 캡처하고 복원합니다.
- FastAPI Backend: 로컬 API 및 지속성(persistence) 처리를 담당합니다.
- React Dashboard: 검색 및 세션 관리를 위한 인터페이스를 제공합니다.
구축 방법 (How I Built It)
이 프로젝트는 클라우드 AI API가 아닌 로컬 오픈소스 AI를 중심으로 구축되었습니다.
기술 스택 (Tech Stack)
- Chrome Extension: TypeScript + Manifest V3
- 프론트엔드 (Frontend): React + TypeScript + Vite
- 백엔드 (Backend): Python + FastAPI
- 데이터베이스 (Database): SQLite
- 로컬 AI 런타임 (Local AI Runtime): Ollama
- AI 모델 (AI Model): Qwen2.5-Coder:7B
아키텍처는 다음과 같습니다:
Chrome Extension
↓
FastAPI
...
확장 프로그램은 사용자의 탭을 캡처하여 세션을 로컬 FastAPI 백엔드로 전송합니다. SQLite가 세션 및 탭 정보를 저장합니다.
AI 기능이 필요할 때, 백엔드는 관련 탭 제목과 URL 정보를 로컬에서 실행되는 Ollama 모델로 보냅니다. 이 모델은 카테고리와 짧은 요약문을 생성하고, 이는 로컬에 저장됩니다.
대시보드는 다른 AI 요청을 필요로 하지 않고도 로컬 검색 및 필터링 기능을 제공합니다.
복원 흐름(restore flow)은 역방향으로 작동합니다. 대시보드가 복원 요청을 생성하면, Chrome 확장 프로그램은 Chrome의 Tabs API를 사용하여 저장된 세션을 재구성합니다.
클라우드 AI API가 필요하지 않습니다.
Open Innovation이 중요한 이유
Open innovation 덕분에 이 프로젝트는 폐쇄적인 AI API에 의존하는 대신 로컬 AI를 중심으로 구축될 수 있었습니다.
Tab Bankruptcy에게 이것은 중요합니다. 왜냐하면 브라우저 탭에는 민감하거나 개인적인 정보가 포함될 수 있기 때문입니다. AI를 로컬에서 실행한다는 것은, 단순히 카테고리화하거나 요약하기 위해 탭 정보를 외부 AI 제공업체에 보낼 필요가 없다는 것을 의미합니다.
Ollama와 오픈 가중치(open-weight) 모델을 사용하면 프로젝트에 유연성도 부여합니다. AI 모델은 전체 애플리케이션을 재설계할 필요 없이 다른 호환 가능한 로컬 모델로 대체될 수 있습니다.
더 중요한 것은, 이를 별도의 클라우드 서비스로 취급하기보다는 실제 애플리케이션의 일부로서 AI를 실험해 볼 수 있게 해준다는 점입니다.
마지막 생각
Tab Bankruptcy는 아주 평범한 문제에서 시작되었습니다. 바로 **"탭이 너무 많아서 아무것도 찾을 수가 없다."**라는 것이었습니다.
목표는 또 다른 복잡한 AI 애플리케이션을 만드는 것이 아니었습니다.
작고, 유용하며, 개인적인 무언가를 만들고 — 실제로 경험을 개선하는 곳에 오픈 소스 AI를 사용하는 것이었습니다.
당신의 탭이 파산(bankruptcy)할 필요는 없습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기