Echo Shelf: 저장한 지식을 현재 필요한 정보와 연결하는 AI 지식 레이크
요약
Echo Shelf는 사용자가 수집한 다양한 형태의 지식(기사, 비디오, 문서 등)을 단순 북마크로 남기는 것이 아니라, 능동적인 AI 기반 개인 지식 레이크로 변환하는 시스템입니다. 이 시스템은 캡처된 자료에서 맥락과 구조화된 메타데이터를 추출하고, 저장된 항목들 간의 의미 있는 관계를 찾아 주제별 클러스터로 재표출합니다.
핵심 포인트
- 다양한 출처(기사, 비디오, 문서 등)의 지식을 통합 관리하는 개인 레이크 구축.
- AI가 맥락을 분석하여 구조화된 메타데이터와 태그를 생성함 (Smart Capture).
- 단순 키워드 매칭이 아닌 LLM 기반으로 항목 간 관계의 유용성을 평가하고 연결함 (Smart Connections).
- 저장된 지식 전체를 분석하여 광범위한 주제 클러스터를 자동으로 발견함.
_이 글은 Sanity Challenge, Path Two: Vibe-Code Something Strange에 제출하는 내용입니다.
제가 만든 것 (What I Built)
저는 Echo Shelf라는 AI 지원 개인 지식 레이크를 만들었습니다. 이 시스템은 제가 지속적으로 겪었던 하나의 문제점을 해결하기 위해 설계되었습니다:
유용한 기사, 비디오, 저장소(repository), 스크린샷, 문서, 메모 등을 저장하지만, 대부분이 북마크 무덤에 사라지고 저는 그곳으로 돌아가는 일이 거의 없습니다.
Echo Shelf는 이러한 수동적인 자료 수집을 능동적인 지식 시스템으로 변화시킵니다.
핵심 아이디어는 다음과 같습니다:
캡처(Capture) → 연결(Connect) → 재표출(Resurface)
단순히 링크를 저장하는 것을 넘어, Echo Shelf는 다음 기능을 수행합니다:
- 다양한 출처 유형에서 지식을 캡처합니다.
- 각 출처에서 유용한 맥락을 추출합니다.
- AI를 사용하여 구조화된 메타데이터를 생성합니다.
- 저장된 항목들 간의 의미 있는 관계를 찾습니다.
- 관련 지식을 주제별 클러스터로 그룹화합니다.
- 현재 뉴스를 이전에 저장했던 내용과 연결합니다.
이 애플리케이션은 다음 8가지 콘텐츠 유형을 지원합니다:
- 기사 (Articles)
- 비디오 (Videos)
- 저장소 (Repositories)
- URL
- 이미지 (Images)
- 문서 (Documents)
- 메모 (Notes)
- 기타 자료 (Other resources)
스마트 캡처 (Smart Capture)
스마트 캡처는 메타데이터를 생성하기 전에 실제 출처를 분석합니다.
다양한 출처는 각기 다른 추출 파이프라인을 사용합니다:
- 기사 및 URL → Mozilla Readability +
jsdom - GitHub/GitLab 저장소 → 제공자 API(provider APIs) + README 내용
- YouTube 비디오 → YouTube Data API 메타데이터
- PDF/DOCX/PPTX/XLSX 문서 → 형식별 파서 (format-specific parsers)
- 이미지 →
qwen/qwen3.8-27b를 사용하는 Groq Vision - 메모 → 직접 텍스트 맥락
추출된 맥락은 이후 Groq를 거쳐 편집 가능한 다음 항목들로 전송됩니다:
- 제목 (title)
- 설명 (description)
- 태그 (tags)
사용자는 저장하기 전에 AI가 생성한 결과물을 항상 검토하고 수정할 수 있습니다.
스마트 연결 (Smart Connections)
항목이 저장된 후, Echo Shelf는 해당 항목과 기존 지식 간의 관계를 발견할 수 있습니다.
저는 이 기능을 의도적으로 두 단계로 나누었습니다.
첫 번째 단계에서는 결정론적인 메타데이터 쇼트리스트가 다음을 비교합니다:
- 태그 (tags)
- 제목 키워드 (title keywords)
- 설명 키워드 (description keywords)
가장 강력한 후보들만 LLM으로 전송됩니다.
그 후 openai/gpt-oss-120b가 해당 관계가 진정으로 유용한지 평가하고 다음을 반환합니다:
- 관계 유형 (relationship type)
- 강도 (strength)
- 설명 (explanation)
이는 AI가 얕은 키워드 일치에 강제로 연결하는 대신 거부할 수 있다는 것을 의미하기도 합니다.
지식 클러스터 (Knowledge Clusters)
Echo Shelf는 사용자의 라이브러리 전반에 걸친 경량 메타데이터를 분석하여 더 광범위한 주제들을 발견할 수 있습니다.
최종 데모 라이브러리의 경우, 다음과 같은 주제들을 성공적으로 발견했습니다:
- 검색 증강 생성 및 벡터 검색 (Retrieval-Augmented Generation & Vector Search)
- Next.js 서버 액션 (Next.js Server Actions)
- Docker 및 쿠버네티스 네트워킹 (Docker & Kubernetes Networking)
- 개발자 생산성 및 깊은 몰입 (Developer Productivity & Deep Work)
- 인체공학 및 직장 건강 (Ergonomics & Workplace Health)
- 수면 위생 및 회복 (Sleep Hygiene & Recovery)
어떤 항목이든 그 관계가 진정으로 유용하다면 여러 클러스터에 속할 수 있습니다.
상황적 재발견 (Contextual Rediscovery)
이는 원래 아이디어를 완성하는 기능입니다.
Echo Shelf는 다음과 같이 질문합니다:
이전에 저장했던 무언가를 다시 관련성 있게 만드는 지금 무슨 일이 일어나고 있나요?
지식 클러스터 메타데이터는 간결한 뉴스 쿼리로 변환되어 GNews API로 전송됩니다.
최근 기사들은 Groq을 사용하여 저장된 지식과 비교됩니다.
의미 있는 강하거나 보통 수준의 일치만 유지됩니다.
각 결과는 다음을 설명합니다:
이것이 귀하의 보관함에 왜 중요한지 (Why this matters to your shelf)
그리고 현재 뉴스 기사를 관련 저장 항목 및 지식 클러스터로 연결합니다.
기타 세부 사항 (Other details)
Echo Shelf는 또한 다음 기능을 포함합니다:
- 정규화된 URL과 SHA-256 지문(fingerprints)을 사용한 정확한 중복 감지
- 이메일/비밀번호 인증
- Google OAuth
- GitHub OAuth
- Supabase를 사용한 SSR 쿠키 세션
- 사용자별 서버 강제 소유권 (server-enforced per-user ownership)
- 임베디드 Sanity Studio
- 반응형 브랜드 UI
- 비동기 작업에 대한 로딩 및 대기 상태
- 중복 클릭 방지 (duplicate-click prevention)
최종 애플리케이션은 전통적인 CMS 프론트엔드가 아닌 Sanity Content Lake를 기반으로 구축된 사용자 지정 Next.js 인터페이스입니다.
데모
라이브 애플리케이션
👉 https://echo-shelf-three.vercel.app/
데모 계정 (Demo Account)
아래 계정은 다중 도메인 지식 라이브러리로 미리 채워져 있어 전체 경험을 즉시 탐색할 수 있습니다.
이메일: [email protected]
비밀번호: password
권장 테스트 흐름 (Recommended Testing Flow)
- 데모 계정으로 로그인합니다.
- 라이브러리(Library)와 그 안에 섞여 있는 다양한 콘텐츠 유형을 둘러봅니다.
- 저장된 항목을 열고 스마트 연결(Smart Connections)을 검사해 봅니다.
- **클러스터(Clusters)**를 열어 AI가 발견한 지식 주제들을 탐색합니다.
- **재발견(Rediscover)**을 열어 현재의 개발 동향이 저장된 지식과 어떻게 연결되는지 확인합니다.
- 항목 추가(Add Item) 기능을 사용해 직접 스마트 캡처(Smart Capture)를 테스트해 보세요.
스크린샷 (Screenshots)
라이브러리 / 개인 지식 레이크 (Library / Personal Knowledge Lake)
스마트 캡처 (Smart Capture)
지식 클러스터 (Knowledge Clusters)
맥락적 재발견 (Contextual Rediscovery)
인증 (Authentication)
코드 (Code)
소스 코드:
👉 https://github.com/sheda3838/echo-shelf
저장소에는 다음 내용도 포함되어 있습니다:
저는 개발 전반에 걸쳐 빌드 로그를 유지했습니다. 마지막에 과정을 재구성하는 대신 말이죠.
이 로그에는 최종 애플리케이션을 형성한 결정, 실패한 접근 방식, 수동 테스트, 아키텍처 변경, 디버깅 세션, 그리고 프로덕션 수정 사항들이 기록되어 있습니다.
저의 빌드 프로세스
저는 Antigravity IDE를 사용한 **AI 네이티브 개발 워크플로우(AI-native development workflow)**로 Echo Shelf를 구축했지만, 생성된 코드를 자동으로 올바르다고 취급하지는 않았습니다.
저의 워크플로우는 일반적으로 다음과 같았습니다:
작은 마일스톤 정의 → IDE에 프롬프트 제공 → 구현 검사 → 자동화된 체크 실행 → 실제 흐름 수동 테스트 → 실패한 내용 문서화 → 개선
가장 유용했던 프롬프트는 제약 조건이 매우 좁았던 것들이었습니다.
Image → Groq Vision → structured metadata
qwen/qwen3.8-27b를 사용하여 구현했습니다.
이로써 사진, 다이어그램, 스크린샷 및 혼합된 시각 콘텐츠가 훨씬 더 유용해졌습니다.
2. 문서 추출은 테스트를 통과했지만 실제 브라우저 흐름에서 문제가 발생함
문서 파서는 초기 자동화 테스트에서는 올바르게 보였습니다.
수동 테스트를 통해 여러 프레임워크 수준의 문제점들이 드러났습니다:
- Next.js 번들링 중
pdf-parse패키지 진입 동작 - 업로드된 파일에 대한 서버 액션 본문 제한
- 추출 실패가 AI 실패로 잘못 보고되는 문제
이 문제들은 일반적인 오류 뒤에 숨기는 대신 개별적으로 수정되었습니다.
이는 프로젝트를 진행하면서 정적 검사를 통과하는 것이 실제 제품 흐름을 테스트하는 것과는 다르다는 것을 상기시켜 준 가장 큰 교훈 중 하나였습니다.
3. 배포 후 프로덕션 스마트 캡처 실패
Vercel에 배포한 후, Article Smart Capture가 로컬 프로덕션 빌드는 성공했음에도 불구하고 갑자기 HTTP 500 오류를 반환했습니다.
Vercel 로그를 확인한 결과, 배포된 jsdom 의존성 체인 내부에서 ESM/CommonJS 비호환성이 발견되었습니다.
실패는 요청된 기사 자체가 가져와지기 전에 발생했습니다.
스마트 캡처 전체를 재작성하는 대신, 저는 런타임 의존성 문제를 추적하고 jsdom을 변경되지 않은 Readability 아키텍처를 유지하면서 호환 가능한 버전으로 고정(pin)했습니다.
4. 현실적인 데모 데이터로 지식 클러스터가 불안정해짐
작은 테스트 라이브러리로는 작동했습니다.
최종 시연 라이브러리에는 41개의 저장된 항목이 포함되어 있었고, 갑자기 클러스터 생성에 일관성이 떨어졌습니다:
- 때로는 4개 클러스터
- 때로는 2개
- 때로는 일반적인 오류
저는 비영구 진단 러너를 구축하고 동일한 생성을 여러 번 반복했습니다.
실제 문제는 Sanity나 클러스터 유효성 검사가 아니었습니다.
openai/gpt-oss-120b가 추론에 너무 많은 완료 예산(completion budget)을 사용하면서, Groq의 JSON 출력이 유효한 문서를 형성하기도 전에 잘리는 현상이 발생했습니다.
저는 다음 방법으로 이를 수정했습니다:
- 클러스터링에 전송되는 설명(description) 자르기
- 태그 제한
- 중복 메타데이터 제거
- 압축된 JSON 사용
- 완성 토큰(completion tokens) 명시적 제어
- 추론 노력 감소
- 결과를 최대 여섯 개의 의미 있는 클러스터로 제한
변경 후, 반복 실행 시 일관되게 완전하고 유효한 클러스터를 생성했습니다.
나중에 발생한 실패는 잘못된 형식의 클러스터 출력 때문이 아니라 API 할당량(quota) 한계 때문이었습니다.
가장 효과적이었던 프롬프트
가장 강력한 결과를 낸 프롬프트들은 보통 무엇을 변경하지 말아야 하는지에 대해 명시적이었습니다.
예를 들어:
현재 Sanity 스키마와 영속성(persistence) 동작을 유지하세요. 알고리즘 변경 전에 클러스터링이 실패하는 이유를 진단하세요. 저장된 데이터를 수정하지 않고 반복적인 건식 실행(dry-run generations)을 수행하고 정확한 실패 메커니즘을 보고하세요.
또는:
이미지 이해 계층만 교체하세요. Smart Capture 폼 상태, 수동 메타데이터, 오래된 응답 보호 기능, 그리고 기존 저장 흐름은 유지하세요.
이러한 제약 조건들은 AI가 한 문제를 해결하려다가 우발적으로 관련 없는 제품 부분을 다시 작성하는 것을 막아주었습니다.
Sanity는 단순한 저장소를 넘어섰다
이 프로젝트는 Sanity가 저장된 항목들을 담을 것이라는 아이디어로 시작되었습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기