Element to Markdown

AI 답변이나 웹 문서를 노트로 옮기면 표와 코드가 매번 깨졌다. 원하는 부분만 골라 모양 그대로 가져오는 크롬 확장을 만들었다.

개인 · 설계 및 구현26.05 –

JavaScript · Chrome Extension (MV3) · Node.js

Problem

AI가 준 답변이나 웹에서 찾은 문서를 노트에 옮기면 모양이 매번 깨졌다. 표는 한 줄로 뭉개지고, 코드는 들여쓰기를 잃고, 체크리스트는 그냥 점이 된다. 결국 옮긴 다음에 손으로 다시 고쳐야 했다. 페이지 전체를 저장하는 도구는 이미 많았다. 그런데 필요한 건 대개 페이지의 한 덩어리다. 전체를 받아 놓고 필요 없는 부분을 지우는 일이 옮겨 적는 것만큼 오래 걸렸다. 수식은 특히 심했다. 화면에서는 멀쩡히 보이던 수식이 복사하면 깨진 글자 조각이 됐다. 통계나 알고리즘을 다룬 글은 수식이 빠지면 남는 게 없다.

Decision

  1. 페이지를 통째로 받는 대신 마우스로 고른 한 덩어리만 가져온다. 위아래 방향키로 범위를 넓히거나 좁힐 수 있다. 전체를 받아서 지우는 것보다 처음부터 정확히 고르는 쪽이 결국 빠르다.
  2. 확장이 모든 페이지를 늘 읽을 수 있는 권한은 받지 않았다. 사용자가 아이콘을 누르거나 단축키를 친 그 탭에서만 동작한다. 상시 권한을 받으면 만들기는 훨씬 편하지만, 노트에 옮길 내용을 다루는 도구가 안 보는 동안에도 페이지를 읽을 수 있다는 건 맞바꿀 만한 편의가 아니다.
  3. 만들어 뒀던 우클릭 메뉴를 지웠다. 써 보니 페이지 메뉴만 지저분해지고, 같은 동작을 아이콘과 단축키가 이미 하고 있었다. 지우는 김에 “명시적인 제품 결정 없이는 다시 넣지 않는다”를 규칙으로 적어 뒀다. 안 그러면 나중에 편의 기능인 척 슬쩍 돌아온다.
  4. 변환이 맞는지 매번 눈으로 확인하는 대신, 입력과 기대 결과를 짝지은 파일 25벌을 두고 자동으로 대조한다. 표·코드·체크리스트·수식처럼 깨지기 쉬운 경우를 모아 뒀다. 새 사이트를 지원할 때 예전 것이 조용히 깨지는 걸 막는 방법은 이것뿐이었다.
  5. 변환이 실패했을 때 그냥 넘어가지 않고, 무엇이 어떻게 나왔는지 담은 신고 초안을 만들어 준다. 사용자가 읽고 고쳐서 직접 보낼 수 있고, 누르지 않으면 아무것도 전송되지 않는다. 어떤 페이지에서 깨지는지는 만든 사람이 혼자 앉아서 알아낼 수 있는 게 아니다.

Result

변환 검증 파일
25벌
입력 HTML과 기대 결과 마크다운을 짝지어 자동으로 대조한다.
바깥으로 나가는 데이터
없음
자동 업로드, 방문 기록 수집, 사용자 추적, 분석·광고 도구, 계정 로그인이 전부 없다.
가져다 쓴 남의 코드
0개
변환기까지 직접 만들었다.

세부는 옮겨 붙인 다음에 드러난다. 복사한 글 안의 링크가 상대 주소면 노트에서는 죽은 링크가 되고, 스크롤해야 뜨는 이미지는 주소가 빈 채로 딸려 온다. 둘 다 원래 주소로 바꿔서 넣는다. GitHub나 기술 문서 사이트에서 쓰는 강조 상자도 옵시디언이 아는 모양으로 바꾼다. 화면에서 보이던 것이 노트에서도 그대로 보이는 게 목표라, 작업의 대부분이 이런 자잘한 대응이었다.

저장은 파일로도 되고 옵시디언 보관함으로 바로도 된다. 출처 제목과 주소, 가져온 시각을 글머리에 붙일 수 있어서 나중에 이게 어디서 온 건지 추적된다. 마크다운 표준 그대로 뽑을지 옵시디언에 맞춰 뽑을지도 고를 수 있다. 두 곳의 문법이 다른데 하나로 합치면 어느 쪽에서도 어정쩡해진다.

크롬 웹 스토어에 올라가 있다. 첫 심사에서 쓰지 않는 권한 하나를 지적받아 빼고 다시 냈고, 그 뒤로 진입점과 변환 품질을 쌓아 판올림을 이어 가고 있다. 배포 전에는 매번 스무 명 규모의 에이전트 리뷰로 결함을 털고 검증 파일로 회귀를 잡는다. 같은 이름의 확장이 먼저 있다는 걸 뒤늦게 알아서, 이름을 다시 짓는 일이 다음 단계로 남아 있다.