이 글은 Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady에 제출하는 내용입니다.
제가 만든 것 (What I Built)
Tab Debt는 사용자가 수동으로 무엇을 보존할지 결정하도록 강요하지 않으면서, 비활성 및 중복된 브라우저 탭을 정리하는 데 도움을 주는 AI 기반 Chrome 확장 프로그램입니다.
우리 중 많은 사람들은 '혹시 몰라서' 수십 개의 Chrome 탭을 열어둡니다. 시간이 지남에 따라 이러한 탭은 브라우저 리소스를 소모하고, 화면 공간을 차지하며, 인지 부하(cognitive load)를 증가시키고, 우리가 현재 완료하려고 하는 작업으로부터 주의를 산만하게 합니다.
가장 어려운 부분은 탭을 닫는 것이 아닙니다. 그 탭이 나중에 중요해질 수도 있을지 결정하는 것입니다.
Tab Debt는 사용자들에게 더 안전하게 놓아줄 수 있는 방법을 제공합니다:
- 사용자는 중요한 URL을 정리 작업으로부터 보호할 수 있습니다.
- 확장 프로그램은 Chrome 창 전반에 걸쳐 열려 있는 탭들을 스캔합니다.
- 중복된 탭이 감지되어 제거됩니다.
- 비활성 탭을 정리할 수 있습니다.
- 탭을 닫기 전에, 확장 프로그램은 각 탭에 대한 짧은 AI 요약본을 생성합니다.
- 생성된 요약본들은 재사용 가능한 메모리로 저장됩니다.
- 정리된 탭들의 JSON 원장(ledger)이 향후 참고를 위해 다운로드됩니다.
- 사용자는 필요할 때 언제든지 저장된 탭을 다시 열 수 있습니다.
목표는 간단합니다. 사용자가 잃을까 두려워하는 맥락은 보존하면서, 탭의 혼잡도를 줄이는 것입니다.
데모 (Demo)
이 프로젝트는 Chrome 확장 프로그램이기 때문에, 다음 내용을 보여주는 스크린샷이 권장 데모입니다:
- 여러 개의 중복되거나 비활성 상태인 탭들이 열려 있는 모습.
- 보호 목록에 중요한 URL들이 추가된 모습.
- '내 탭 정리하기(Clean my tabs)' 버튼을 사용하는 모습.
- 중복되거나 오래된 탭들이 제거되는 모습.
- AI가 생성한 탭 요약본이 저장된 메모리 섹션에 나타나는 모습.
- 내보내진 탭 원장이 다운로드되는 모습.
코드 (Code)
The 소스 코드는 Tab Debt GitHub 리포지토리에서 확인할 수 있습니다.
탭 정리 전 :-
탭 정리 후 :-
구현의 주요 부분은 다음과 같습니다:
- 메인 대시보드 (Main dashboard)
- 탭 정리 로직 (Tab cleanup logic)
- 보호된 탭 필터링 (Protected-tab filtering)
- 백그라운드 정리 서비스 (Background cleanup service)
- Gemma 요약 기능 통합 (Gemma summarization integration)
- Chrome 확장 프로그램 매니페스트 (Chrome extension manifest)
- 저장소 유틸리티 (Storage utilities)
코드 (Code)
GitHub: [https://github.com/Farkhanda-Dalal/TAB_DEBT]
구축 방법 (How I Built It)
Tab Debt는 다음을 사용하여 Manifest V3 Chrome 확장 프로그램으로 구축되었습니다:
- React
- TypeScript
- Vite
- Chrome 확장 프로그램 API (Chrome Extensions APIs)
- Chrome Storage API
- Chrome Tabs API
- Chrome Scripting API
- Chrome Downloads API
- Gemma 2 2B IT
- Hugging Face Inference API
인터페이스는 React와 TypeScript로 구축되었습니다. Vite가 개발 및 빌드 워크플로우를 제공하며, Chrome Manifest V3 서비스 워커가 백그라운드에서 정리 작업을 처리합니다.
이 확장 프로그램은 다음과 같은 방식으로 작동합니다:
- 사용자는 중요한 URL을 “손대지 않는(untouchable)” 목록에 추가합니다.
- 백그라운드 서비스가 열려 있는 Chrome 탭들을 조회합니다.
- 활성 탭, 보호된 URL, 확장 프로그램 페이지, 그리고 사용 가능한 URL이 없는 탭은 제외됩니다.
- 남은 탭들은 중복을 식별하기 위해 URL별로 그룹화됩니다.
- 비활성 탭 또는 중복된 탭이 정리 대상으로 선택됩니다.
- 확장 프로그램은 제한된 양의 보이는 페이지 텍스트를 추출합니다.
- 페이지 제목과 추출된 텍스트가 Gemma로 전송됩니다.
- Gemma는 간결한 한 문장 요약을 생성합니다.
- 이 요약과 원래 URL은 저장된 메모(saved note)로 보관됩니다.
- 탭이 닫히고, 사용자가 정리된 컨텍스트를 복구할 수 있도록 JSON 원장(ledger)이 다운로드됩니다.
- 저희는 이 프로젝트가 근본적으로 사용자 통제와 불필요한 복잡성 감소에 관한 것이기 때문에 오픈 소스(open-source) 및 오픈 웨이트(open-weight) 도구를 선택했습니다. React, TypeScript, Vite, 그리고 Chrome 확장 프로그램 플랫폼이 가벼운 기반을 제공했습니다. Gemma는 우리가 모델을 처음부터 구축할 필요 없이 페이지를 요약할 수 있는 작고 간결한 언어 모델을 제공했습니다.
오픈 혁신(Open Innovation)이 중요한 이유
이것은 저희 친구들과 팀원들이 어려움을 겪는 문제입니다. 우리는 하나의 탭을 닫는 것이 중요한 아이디어, 참고 자료(reference), 작업, 또는 연구 조각을 잃어버리는 것을 의미할까 봐 두려워하기 때문에 탭들을 열어두곤 합니다.
그 결과는 미완성된 결정들로 가득 찬 브라우저입니다.
오픈 혁신 덕분에 여러 접근 가능한 기술들을 하나의 집중적인 도구로 결합하는 것이 가능해졌습니다:
- 브라우저 탭을 제어하는 오픈 웹 확장 플랫폼.
- 경량 인터페이스를 구축하기 위한 오픈 소스 프론트엔드 도구(tooling).
- 요약본 생성을 위한 오픈 웨이트 AI 모델.
- 보호된 URL 및 저장된 메모를 보관하는 로컬 브라우저 저장소.
- 사용자가 직접 검사하고 보관할 수 있는 투명한 JSON 원장(ledger).
폐쇄형 API는 요약본을 제공할 수는 있지만, 오픈 이노베이션은 전체 워크플로우가 어떻게 설계될지에 대해 더 많은 유연성을 제공합니다. 우리는 요약본 생성을 위해 어떤 데이터가 전송되는지, 페이지 콘텐츠 중 얼마나 많이 추출되는지, 보호된 탭이 어떻게 처리되는지, 그리고 정리(cleanup) 후 사용자가 자신의 정보를 어떻게 복구하는지를 결정할 수 있습니다.
가장 중요한 것은, 사용자가 모든 탭을 열어두는 것과 모든 것을 잃는 것 사이에서 선택하도록 강요받지 않는다는 점입니다. Tab Debt는 탭을 닫기 전에 해당 탭의 경량 메모리(lightweight memory)를 보존합니다.
게으른 회수 (The Lazy Payoff)
사용자가 검토해야 할 20개의 탭이 있고, 각 탭 하나를 생각하는 데 약 3~4분이 걸린다고 가정해 봅시다:
20개 탭 × 3분 = 60분
20개 탭 × 4분 = 80분
이는 수동으로 무엇을 보존할지 결정하는 데 약 1시간에서 1.3시간이 소요될 수 있음을 의미합니다.
Tab Debt를 사용하면, 사용자는 보호된 목록을 유지하고 버튼 하나를 클릭하여 정리 서비스가 중복되거나 비활성인 탭을 식별하도록 할 수 있습니다. 정리가 약 1~2분이 걸린다면, 예상 절감 시간은 다음과 같습니다:
58–79분 절약
약 97.5%–98.3%의 의사 결정 시간 감소
일반적인 추정치로 볼 때, Tab Debt는 탭 개수와 사용자가 각 탭을 평가하는 데 보통 얼마나 많은 시간을 보내는지에 따라 수동 탭 검토 노력을 약 95%–98%까지 줄일 수 있습니다.
현재 확장 프로그램은 스캔된 탭 수, 닫힌 중복 탭 수, 건너뛴 보호 탭 수를 측정합니다. 이는 탭 개수와 브라우저의 혼잡도를 줄여주므로, RAM상의 이점은 측정한 숫자로 보기보다는 예상되는 브라우저 리소스 압력 감소로 설명되어야 합니다.
작성자
Farkhanda · 개발: @7farkhanda
Misbah · 개발: @misbah_bagwan
수상 부문
Gemma
