문서를 파일 하나로 주고받되, 받는 사람이 고칠 수 있게
AI로 보고서·안내문·레터를 HTML로 뽑는 일은 흔하다. 문제는 그다음이다. 받는 사람이 오타 하나, 날짜 한 줄을 고치려면 원본 도구로 돌아가거나 개발자를 찾아야 한다. edit-doc 은 편집기를 문서 파일 안에 넣는다. 받는 사람은 HTML 을 열고, 오른쪽 아래 편집 을 누르고, 고치고, 저장 한다. 그게 전부다. 서버도, 확장 프로그램도, 로그인도, 인터넷도 필요 없다.
두 종류: HTML 과 Markdown
HTML 문서 는 편집기가 파일에 딸려 온다. skeleton.html 을 복사해 내용만 채우면, 그 파일이 곧 편집 가능한 문서가 된다. 보고서·레터·안내문처럼 디자인이 있는 문서에 맞는다.
Markdown 은 평문이라 JS 편집기를 품을 수 없다. 그래서 md-editor.html 이라는 단독 편집기를 함께 낸다. 왼쪽에 소스, 오른쪽에 실시간 프리뷰, .md 를 열고 저장한다. 이건 원안에 없던 우리 추가분이다.
저장은 세 갈래, 정확히 구분한다
- 저장: 지원 브라우저는 처음 한 번 위치를 고르고, 이후 같은 파일에 다시 쓴다(권한 재확인이 있을 수 있음). 미지원 브라우저는 다운로드로 떨어진다. "처음부터 조용히 덮어쓴다"고 약속하지 않는다.
- 자동저장: localStorage 백업이다. 파일 저장과 다르다. 새로고침했을 때 백업이 페이지와 다르면 복원 배너가 뜬다.
- 배포용: 편집기·엔진·메타를 뺀 깨끗한 사본을 내려받는다. 내용과 디자인은 그대로다.
왜 execCommand 인가
서식은 document.execCommand 로 넣는다. deprecated 지만 모든 현재 브라우저에서 동작하고, 무엇보다 의존성이 0 이다. 단독으로 도는 파일에 프레임워크를 실을 수는 없다. 리치 구조 편집(중첩 컴포넌트·변경 추적)은 범위 밖이라고 솔직히 적어 둔다.
실측으로 검증했다
헤드리스 브라우저로 전 기능을 돌려 확인했다. 편집 토글이 contentEditable 을 켜고 도구 막대를 띄우는지, 굵게 서식이 실제로 적용되는지, 배포용 내보내기가 편집기(ed-bar·ed-editor-script)를 지우면서 내용은 남기는지, 마크다운 프리뷰가 제목·표·강조를 렌더하는지, 그리고 붙여넣은 <script> 가 텍스트로 이스케이프되는지까지.
쓰는 법
- Claude Code: 설치하면 "편집 가능한 보고서 만들어줘" 에 이 골격으로 문서를 만든다
- 직접:
examples/demo.html(HTML)·md-editor.html(Markdown)을 브라우저로 열어 바로 만져 본다 - 다른 AI:
npx skills add hanmariyang/giting-skills --skill edit-doc