WYSIWYG 의 유일한 조건

"WYSIWYG 은 마크업이 절대 안 보여야 할 때만 정당화돼. 마크다운 네이티브한텐 그럴 일이 없어."

WYSIWYG 이 실제로 치르는 비용

WYSIWYG 에디터 (Tiptap, ProseMirror, Lexical) 는 진짜 강력한 물건이야 — 근데 특정 비용이 딸려. 소스 문자열을 rich-text 문서 모델로 대체해. 이제 bold 가 schema 노드, 헤딩이 노드고, 시작한 마크다운은 로드할 때 트리 안으로 파싱되고 저장할 때 트리 밖으로 serialize 돼야 해. 표현 하나 (소스) 를 셋으로 바꾼 거야. 트리, 렌더된 뷰, 그리고 import/export 하는 마크다운.

그걸 정당화하는 유일한 조건

그 거래는 딱 한 조건에서 값어치 있어. 마크업 문자가 절대 안 보여야 한다. # 나 ** 를 절대 보면 안 되는 사람들을 위한 워드프로세서를 짓는다면 — Bold 버튼 누르면 bold 보이고 끝, 을 원하는 사람들 — 그럼 rich-text 모델이 맞고 세-표현 비용이 그 경험의 값이야. 그건 진짜, 유효한 제품이야. 그냥 이 제품이 아닐 뿐.

조건: "마크업이 절대 안 보여야 함"    ->  WYSIWYG 정당 (rich-text 모델)
조건: "마크업이 의미 있음, 유지"      ->  source 모델 + Live Preview

# Rekindle 사용자는 둘째 줄. 그래서 무거운 모델이 아무것도 안 사줘.

마크다운 네이티브는 그 조건을 안 충족해

아빠는 마크다운 네이티브야. vault, 에세이, 사이트 콘텐츠, 몇 년의 Sublime 과 Obsidian 과 iA — 전부 source-mode, 전부 마크업 보이게, 선호로. # 를 보고 싶어 해. 그 사용자한텐 WYSIWYG 모델이 매 순간 워크플로와 싸워. 의존하는 문자를 숨기고, 차라리 직접 편집할 파일에 parse/serialize 왕복을 강제하고, 순수 소스를 읽고 싶은 모든 soul 기능을 복잡하게 해.

그래서 Rekindle 은 가벼운 길을 가. 소스가 모델이고, Live Preview (decoration) 가 렌더된 모델 없이 렌더된 모습을 줘. inactive 줄에선 bold 를 bold 로, 편집 중인 줄에선 raw ** 를 봐 — WYSIWYG 의 가독성에 그 표현 세금은 하나도 없이. WYSIWYG 은 나빠서 거부된 게 아냐. 그걸 정당화하는 유일한 조건이 안 충족돼서 거부된 거야.

Code

결정은 한 조건으로 줄어들어·text

조건                                    맞는 모델
-------------------------------------  ----------------------------
"마크업이 절대 안 보여야 함"           WYSIWYG (rich-text 트리)
"마크업이 의미 있음, 보이게 유지"      source + Live Preview (decoration)

# Rekindle 사용자 (마크다운 네이티브) 는 둘째 줄.
# 그래서 무거운 WYSIWYG 모델은 아무것도 안 사주고 세 표현을 비용으로 물어.

세 표현 (WYSIWYG) vs 하나 (source)·typescript

// WYSIWYG: 소스가 로드 시 트리로 파싱되고, 트리로 편집되고,
// 저장 시 마크다운으로 serialize 돼. 동기화할 세 형태.
const tree = parseMarkdownToTree(source); // 로드
edit(tree);                               // 실제로 편집하는 모델
const markdown = serializeTreeToMarkdown(tree); // 저장

// source 모델: 로드한 문자열이 편집하는 문자열이고 저장하는 문자열.
// 한 형태. Live Preview 가 두 번째 모델 없이 모습을 칠해.
let doc = source; // 로드 == 편집 == 저장

Exercise

네가 지을 글쓰기 도구에 대해 한 질문을 정직하게 답해. 마크업 문자가 사용자한테 절대 안 보여야 해? 그렇다면 WYSIWYG 이 비용을 벌어. 사용자가 소스를 봐도 괜찮으면 (또는 선호하면), 방금 rich-text 모델과 표현 둘을 아꼈어. 그 한 답이 아키텍처를 얼마나 많이 정하는지 봐.

Hint

상상한 사용자 말고 실제 사용자가 누군지 정직해. 개발자, 마크다운 블로거, vault 지기는 보통 소스를 원해. 비기술 메모 작성자는 보통 마크업이 사라지길 원해. 미학이 아니라 사용자가 조건을 정해.