Bookmarklet
로컬 AI 비서 북마클릿
해결하는 문제
어느 웹페이지에서나 내 PC의 AI를 불러 쓰고 싶다.
북마크 하나를 누르면 지금 보는 웹페이지 위에 채팅창이 떠서, 내 PC의 Ollama가 페이지를 요약합니다.
서버 의존도
Node·Python·로컬 AI 서버처럼 브라우저 밖의 실행 환경이 필요합니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것보고 있는 웹페이지 내용
브라우저가 하는 일내 PC의 Ollama로 보내 처리
나오는 것페이지 위 팝업 답변
쓰는 브라우저 기술
Bookmarklet (javascript:)Shadow DOMfetch
라이브러리와 모델
Ollama (내 PC의 AI 서버)
바꿀 수 있는 옵션
- OLLAMA_ORIGINS 허용 설정
- 모델 선택 (Gemma 등)
- Shadow DOM으로 원래 페이지와 스타일 분리
자주 막히는 곳
- Ollama의 접근 허용(OLLAMA_ORIGINS)을 설정하지 않으면 막힌다
- 보안이 엄격한 사이트는 북마클릿 실행 자체를 막는다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 사내망 AI 요약 버튼
웹 서비스
- 어느 사이트에서나 쓰는 AI 팝업
피지컬 AI
- 로컬 AI가 장비 로그 해석
넓히는 방법
- 고른 문장 번역·요약
- 입력 양식 채우기 도우미
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
북마크를 누르면 지금 페이지 위에 Shadow DOM 채팅창이 떠서 내 PC의 Ollama로 페이지를 요약해주는 북마클릿을 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md