무엇을 만들었는지
웹페이지를 읽다가 문장을 드래그하면 형광펜(네 가지 색)을 긋고 그 자리에 메모를 달 수 있는 Chrome 확장입니다. 색 말고도 ? ! × ★ 기호를 같이 남길 수 있는데(저는 의문, 새로 안 것, 반박, 핵심 정도로 쓰고 있습니다), 밑줄을 긋고 나면 메모 칸이 열리면서 「왜 표시했나요?」라고 먼저 물어봅니다. 기호에 따라 「무엇이 궁금한가요?」, 「왜 아닌가요?」처럼 질문이 바뀌고, 답을 안 적고 그냥 닫아도 됩니다.
읽다가 멈춘 곳에 책갈피를 꽂아 두면 다음에 그 자리에서 이어 읽을 수 있고, 페이지 왼쪽 가장자리에 얇은 레일이 있어서 내가 표시한 곳은 점으로, 읽던 자리는 회색 선으로 보이고 누르면 그 자리로 이동합니다. 다 읽고 「다 읽음」을 누르면 이 글을 기억나는 대로 한 줄 적는 칸이 뜨고, 끝까지 못 읽은 글은 「훑어봄」으로 남겨 둘 수 있게 했습니다. 다시 열었을 때 형광펜과 메모는 그대로 복원됩니다.
이렇게 남긴 것들은 전부 페이지마다 Markdown 파일 하나로 내 폴더나 Google Drive에 저장됩니다. Obsidian 볼트를 저장 폴더로 지정하고 옵션에서 Obsidian 프리셋을 고르면 속성, ==형광==
, 콜아웃으로 보이고, 로컬 MCP 서버(@markpin/mcp
)를 붙이면 Claude Code나 Claude Desktop, Cursor가 그 파일을 검색해서 읽을 수 있습니다(허락하면 메모나 책갈피를 대신 남기기도 합니다).
무료이고 서버도 계정도 없으며, 분석 도구도 넣지 않았습니다. Chrome 122 이상에서 동작합니다.
왜 만들었나
8년차 개발자입니다. 개발자를 준비하면서 공부하던 때부터 지금까지 기술 아티클이나 트렌드 글을 꽤 많이 읽어 왔는데, 요즘은 AI를 통해 정보를 많이 얻지만 그래도 AI와 일할 때 가지고 있어야 할 인사이트는 결국 웹에 있는 양질의 긴 글에서 나온다고 생각하는 편입니다. 문제는 업무를 병행하다 보니 바로 읽지 못하고 일단 어딘가에 저장해 둬야 하는 경우가 많았다는 건데, Notion, Chrome 기본 북마크… 이렇게 보관은 했지만 파편화돼서 관리가 어려웠고, 읽다가 중단하면 읽던 지점을 다시 찾아가기도 어려웠습니다. 읽으면서 드는 생각을 따로 메모하는 것도 번거롭고요. 이런 불편이 반복되다 보니 글을 읽는 데에 점점 소극적이 되고, 그게 작은 스트레스로 다가왔던 것 같습니다.
처음엔 작년 가을쯤 단순히 나중에 볼 링크를 한데 모으는 툴 정도로 생각하고 시작했습니다. 그러다 AI 시대에 사람들이 브라우저에서 글을 읽고 링크를 저장하는 행위가 어떤 방향이어야 가치가 있을지 확신이 안 서서 꽤 오랜 기간 손을 놓고 있었습니다. 돌아보면 그 기간이 고민하는 기간이었던 것 같기도 합니다. 이번 추석 직전에 '읽는 시간 자체를 더 편하게' 쪽으로 방향을 바꾸면서 지금 모습이 됐습니다.
1.2.0을 준비하면서는 종이책 독서법이나 학습 연구 쪽 자료를 좀 찾아봤습니다. 형광펜만 긋는 건 효용이 낮고, 그 부분이 왜 중요한지 자기 말로 적어 보거나 나중에 기억에서 꺼내 적어 보는 쪽이 더 오래 남는다는 결과가 꽤 일관되게 나와 있었습니다(Dunlosky 외 2013, Roediger & Karpicke 2006). 그래서 기능을 더 얹기보다는 밑줄 긋고 난 직후의 「왜?」와 다 읽고 난 뒤의 한 줄, 이 두 칸을 넣는 쪽으로 정했습니다. 다만 이게 실제로 읽는 습관을 바꿔 주는지는 저도 아직 써 보는 중이라 솔직히 잘 모르겠습니다.
기존 도구와 다른 점
제일 많이 비교될 것 같은 건 공식 Obsidian Web Clipper인데, 페이지를 볼트로 가져오는 데는 그쪽이 더 낫다고 생각합니다. 다만 형광펜이 단색이고(긴 문장에서 버그 보고도 있습니다) 메모는 저장할 때 노트로만 남길 수 있어서, 책갈피나 이어 읽기, 표시한 곳마다 「왜?」를 적어 두는 기능은 없습니다. cpdown이나 MarkDownload는 페이지를 Markdown으로 바꿔 클립보드나 다운로드로 주는 도구라 형광펜이나 메모 자체가 없습니다. Liner는 형광펜과 메모가 있지만 저장이 클라우드이고 계정이 필수입니다(기호나 한 줄 같은 기능이 있는지는 제가 확인하지 못했습니다).
그래서 Markpin은 저장을 내 폴더나 Drive에만 하고(서버도 계정도 없습니다), 형광펜 네 가지 색에 기호와 「왜?」 질문, 책갈피·이어 읽기, 다 읽고 한 줄, 왼쪽 레일, 이미지까지 담는 영역 클립을 넣었고, AI는 로컬 MCP로만 붙게 했습니다. 공식 클리퍼와 경쟁하는 건 아니고, 페이지를 가져온 뒤에 "읽는 동안"을 맡는 쪽에 가깝다고 생각합니다. 같은 볼트에 둘 다 같이 써도 됩니다.
기술 선택
만들면서 기준으로 삼은 건, 안쪽 로직은 복잡하더라도 쓰는 사람 입장에서는 가볍고 간단해야 한다는 것이었습니다. 로컬 파일이나 계정 없음 같은 선택도 그쪽에 유리하다고 생각했고, 제가 쓰기에도 그게 간편하고 빠른 길이었습니다.
- 데이터의 정본은 IndexedDB에 두고, 동기화는 File System Access API로 고른 폴더에 쓰거나 Google Drive(
drive.file
범위)로 올리는 두 가지 방식입니다. 마지막으로 쓴 지 3초 뒤와 5분마다 동기화하고, 충돌 처리는 단순하게 했습니다. 동기화 이력이 없는 페이지는updatedAt
이 더 늦은 쪽을 고르고, 이력이 있는 페이지가 양쪽에서 바뀌었으면 이미 올라가 있는 쪽을 받되 이 기기에서 고친 쪽은 지우지 않고.conflict-
사본으로 남깁니다(가장 똑똑한 방법은 아니겠지만 서버 없는 개인 도구에서는 이 정도면 충분하다고 봤습니다). - 파일 포맷은 frontmatter에 사람이 읽는 키만 두었습니다. title, url, savedAt, tags가 기본이고, Chrome 내장 모델이 요약을 만들었으면 summary가, 읽음·훑어봄·한 줄을 남기면 readAt, skimmedAt, note가 붙습니다.
id/rev/clips
같은 기계 데이터는 파일 끝<!-- markpin … -->
주석 안에 JSON 한 줄로 넣었는데, Obsidian Properties 패널이 기계 데이터로 지저분해지는 게 싫어서 이렇게 나눴습니다. 이 결정이 맞는지는 아직 잘 모르겠습니다(아래 피드백 1번). 파일 하나 상한은 512KB입니다. - 기호는 파일에서 메모 줄 앞에 붙는 식(
× 메모
)이고, 다 읽고 적는 한 줄은 속성note
에, 훑어봄은skimmedAt
에 들어갑니다. 읽던 자리는 스크롤이 멈추고 1.5초 뒤에 IndexedDB에만 기록하고 파일에는 쓰지 않습니다. 다시 돌아왔을 때 자동으로 스크롤하지도 않고 레일에 표시만 합니다. - 35일이 넘은 책갈피는 사이드패널에서 카드 하나로 물어봅니다(나중에, 훑어봄, 책갈피 빼기). 지우는 건 없습니다.
- 형광펜 복원은 W3C Web Annotation 셀렉터를 같이 저장해 두는 방식입니다(형광펜은 TextQuote·TextPosition·CSS, 영역 클립은 CSS·XPath). quote 정확 일치로 먼저 찾고, 안 되면 CSS/XPath로 요소를 좁힌 뒤 공백을 정규화한 quote로, 그래도 안 되면 페이지 전체에서 정규화한 quote로 앵커링합니다(TextPosition은 호환용으로 저장만 합니다). 형광펜은 CSS Custom Highlight API로 칠해서 페이지 DOM을 건드리지 않고, 버튼·툴바·메모 칸·레일은 Shadow DOM 안에서 그립니다.
- 요약과 태그 제안은 Chrome 내장 Prompt API(온디바이스)를 써서 API 키가 필요 없습니다.
- MCP 서버는 stdio 방식이고 기본으로는 읽기 도구 4개만 열려 있습니다.
--allow-write
를 주면 쓰기 도구 12개가 추가되고(0.9.0부터 기호를 붙여 클립을 남기는add_clip kind
, 한 줄을 쓰는set_note
,mark_skimmed
가 들어갔습니다), 쓰기는 elicitation으로 매번 확인을 받게 했습니다. 각 도구에readOnlyHint/destructiveHint
도 표시해 뒀습니다. - 권한은
storage unlimitedStorage sidePanel activeTab alarms identity
와<all_urls>
콘텐츠 스크립트입니다. 확장이 밖으로 보내는 요청은 Drive를 연결했을 때 googleapis로 나가는 것뿐입니다(MCP 서버는save_page
를 허락했을 때 그 URL을 한 번 가져옵니다). - 확장 본체는 비공개이고 MCP 서버만 MIT로 공개했습니다. 페이지 본문은 저장하거나 형광펜·클립·책갈피를 남길 때만 저장합니다.
받고 싶은 피드백
- 파일 포맷입니다. 사람이 보는 키는 frontmatter에, 기계 데이터는 파일 끝 주석 블록에 나눠 둔 구조인데, Obsidian이나 다른 Markdown 도구에서 실제로 써 보시면 걸리는 점이 있을지 궁금합니다.
- 다음에 만들 건 "다시 보기" 쪽입니다. 하이라이트 복습, 내 메모 모아 보기, 로컬 읽기 통계 중에 뭐가 먼저면 좋을지 의견 주시면 순서를 정하는 데 참고하겠습니다.
- 밑줄을 긋고 나면 메모 칸이 먼저 질문하는 방식입니다. 저는 쓰다 보니 익숙해졌는데, 읽는 흐름을 끊는다고 느끼실지(아니면 질문이 있어서 오히려 한 줄이라도 적게 되실지) 궁금합니다.