곳곳에 모르는 단어가 가득한 웹을 읽는 방법

내가 읽는 모든 긴 글에는 동일한 문제가 있습니다. 단어 하나나 개념 하나를 어설프게 알고 있어서, 그것만 찾아보면 문단 전체가 이해될 것 같은 상황 말이죠. 하지만 탭을 전환하는 순간 흐름이 끊깁니다. 새 탭을 열고, 조금 읽고, 다시 돌아오면 맥락을 놓치게 됩니다. 결국 그냥 건너뛰게 되고, 독서는 얕은 수준에 머물게 됩니다.

나는 이 문제를 해결하기 위해 'rabbitholes'를 만들었습니다. 어떤 페이지에서든 텍스트를 하이라이트(Highlight)하면, 커서 옆에 Claude Haiku 4.5가 생성한 설명이 shadow-DOM 툴팁(tooltip)으로 나타납니다. 호스트 페이지에 그 어떤 것도 주입하지 않습니다. shadow DOM이 오버레이를 격리하여 레이아웃을 깨뜨리거나 읽고 있는 사이트에 스타일이 유출되지 않도록 유지합니다.

내가 가장 많이 사용하는 부분은 설명에 포함된 모든 단어 자체가 클릭 가능하다는 점입니다. 구절을 드래그하여 선택하면, 원래의 맥락은 배경에 유지된 채 해당 용어를 중심으로 툴팁이 다시 구성됩니다. 단 하나의 새 탭도 열지 않고 비잔틴 조세 정책에 관한 Wikipedia 문서 속으로 네 단계(four hops)나 깊이 들어갈 수 있습니다. 카운터가 몇 단계나 이동했는지 추적하며, 이 경로(trail)는 공유할 수 있습니다.

Claude의 학습 데이터 이상의 정보가 필요할 경우, 지구본 아이콘을 누르면 Brave Search 결과로 보강된 동일한 질의에 대한 답변을 다시 제공하며, 클릭 가능한 소스 칩(source chips)도 함께 나타납니다. 연필 아이콘은 자유 형식의 후속 질문을 열어주며, 현재 맥락을 상속받기 때문에 내가 주제의 어느 지점에 있는지 다시 설명할 필요가 없습니다.

내가 가장 신경 쓴 아키텍처(architecture) 제약 사항은 중간 서버가 전혀 없다는 것입니다. 요청은 브라우저에서 api.anthropic.com 및 api.search.brave.com으로 직접 전송됩니다. 사용자의 Anthropic API 키는 chrome.storage.sync에 암호화되어 저장되며, 결코 나의 인프라를 거치지 않습니다. Manifest V3를 사용합니다.

// 전체 왕복 과정은 브라우저 → Anthropic API이며, 중간에 아무것도 없습니다
const response = await fetch('https://api.anthropic.com/v1/messages', {
  method: 'POST',
...

모든 답변은 현재 설명에서 가장 흥미로운 실타래인 두 가지 후속 주제 제안으로 끝납니다. 클릭 한 번이면 한 단계 더 깊이 들어갈 수 있습니다.

https://github.com/robertnowell/rabbitholes