왜 만들었나

게임 기획서를 HTML 슬라이드 덱으로 씁니다. 보기에는 좋은데, 문장 하나를 고치려면 태그 사이를 뒤져야 하고 결과가 어떻게 보이는지는 브라우저를 따로 열어 확인해야 했습니다.

일반 워드프로세서로 옮기면 기획서 형식이 깨집니다. 그래서 그 기획서만 다루는 편집기를 만들었습니다.

핵심 규칙 하나

contenteditable 로 문서를 편집하게 두면 브라우저가 제멋대로 <div> 와 인라인 스타일을 끼워 넣습니다. 그대로 저장하면 문서가 몇 번 만에 걸레가 됩니다.

그래서 브라우저가 만든 HTML 을 저장하지 않습니다. 편집 결과를 파이썬 엔진이 블록 단위로 다시 읽어, 정해진 태그와 클래스만으로 문서를 새로 씁니다. 본문에 살아남는 인라인 태그는 굵게·기울임·형광펜·줄바꿈·링크·미정 표시가 전부입니다.

글자 크기와 색도 px 값이나 색상표가 아니라 정해진 단계에서만 고릅니다. 다크 모드에서 글자가 배경에 묻히지 않고, 스타일시트 한 곳을 고치면 문서 전체가 한 번에 바뀝니다.

손으로 그린 SVG 도식이나 화면 목업은 규약으로 표현할 수 없습니다. 이런 블록은 엔진이 알아보기를 포기하고 원문 그대로 잠급니다. 안에 있는 글자만 눌러 고칠 수 있고, 태그와 좌표는 한 글자도 바뀌지 않습니다.

덕분에 "정형화된 본문"과 "손으로 그린 그림"이 한 문서 안에 같이 있어도 저장 한 번에 뭉개지지 않습니다.

기획서는 위에서 아래로 읽는 문서입니다. 장 전체를 자유 배치 모드로 바꾸면 그 전제가 무너집니다.

그래서 블록 하나만 흐름에서 떼어내는 방식을 골랐습니다. 떼어낸 블록은 그 순간 보이던 자리에 그대로 고정되고, 가로는 %·세로는 px 로 적힙니다. 화면 폭이 달라져도 비율이 유지되고, 위쪽 글이 늘거나 줄어도 자리가 흔들리지 않습니다.

문서를 다시 쓰는 도구의 가장 큰 위험은 열었다 닫기만 해도 문서가 조금씩 달라지는 것입니다.

그래서 전 챕터를 읽고 아무것도 고치지 않은 채 다시 써서 원본과 바이트 단위로 같은지 검사하는 기능을 넣었습니다. 이 검사가 통과하지 않으면 커밋하지 않습니다. 실제로 아무것도 고치지 않고 저장하면 파일이 바뀌지 않아 변경 이력에도 잡히지 않습니다.

파이썬 표준 라이브러리와 바닐라 자바스크립트만 씁니다. 설치할 패키지가 없습니다.

engine.py (약 1,800줄): HTML 을 블록으로 읽고 규약대로 다시 쓰는 엔진. 화면 없이도 동작합니다.
server.py (약 590줄): 127.0.0.1 전용 로컬 서버. 1회용 열쇠를 요구하고, 편집 화면이 조용하면 스스로 닫힙니다.
web/ (약 2,900줄): 편집 화면·툴바·자가 검사.

저장하면 목차 생성 → 매니페스트 동기화 → 무결성 검사가 이어서 돌고, 결과가 화면 아래 진행 기록에 남습니다.

제 기획서를 쓰는 데 실제로 씁니다. 게임 기획서와 이 편집기 자신의 기획서 두 벌을 이걸로 편집합니다.

배포한 제품은 아닙니다. 로컬에서 저 혼자 쓰는 도구고, 동시 편집이나 계정 같은 것은 없습니다. 확인한 브라우저도 Chromium 계열 하나입니다.