초안 · 사용자 문장으로 교체.
그 전날 나는 HTML 한 장을 만들어 미디어로 올리고, 프로젝트 본문에 상자 하나로 끼워 넣었다. 858줄짜리 문서가 사이트 안에서 조그만 액자에 담겨 돌아갔다. 되긴 되는데, 그건 «글을 HTML 로 쓴 것»이 아니라 «HTML 파일을 붙여 둔 것»이었다.
원하는 건 단순했다. 밖에서 한 장 만들어서, 그 상태로 올리는 것.
막던 것은 본문이 MDX 라는 사실이었다. MDX 는 JSX 문법이라 class= 를 모르고, 닫지 않은 <br> 에서 멈추고, <style> 을 만나면 컴파일이 깨진다. 밖에서 만든 문서는 거의 전부 그 셋을 가지고 있다.
그래서 형식을 하나 더 두기로 했다. 글은 이제 두 가지다. 마크다운(.mdx)과 HTML(.html). 확장자가 곧 형식이라 frontmatter 에 새 키를 만들지 않아도 된다. 온전한 문서를 통째로 붙여넣으면 <body> 안을 본문으로 쓰고 <style> 은 따로 걷어 낸다. 저장되는 파일에는 붙여넣은 원문이 그대로 남는다. 읽을 때만 해석한다.
두 가지를 정해야 했다.
저자가 쓴 CSS 를 살릴 것인가. 살리기로 했다. 대신 선택자를 전부 글 상자 밑으로 다시 쓴다. body 라고 적힌 규칙은 글 상자 자신이 되고, 나머지는 그 자손이 된다. 그래서 어두운 배경으로 만든 글은 어두운 채로 서고, 사이트의 머리와 꼬리는 그대로 사이트다. 다크 모드로 바꾸면 글 바깥만 어두워지고 글 안은 저자가 정한 색으로 남는다.
본문 안 스크립트는 실행할 것인가. 안 하기로 했다. 지우기로. 돌아가는 것이 필요하면 지금까지처럼 상자(iframe) 안에서 돌린다. 상자의 출처는 내가 올린 파일로 제한하고 샌드박스를 강제로 붙인다. 내 글이라도 붙여넣기의 출처는 대개 내가 아니다.
만들고 나서 검사를 돌리다가 하나를 잡았다. 공개 게이트가 .md 와 .mdx 만 읽고 있었다. HTML 글을 만들어 놓고 그대로 뒀으면, 차단 단어가 든 글이 통째로 검사를 빠져나가고 «통과» 라고 찍혔을 것이다. 통과가 거짓이 되는 자리가 제일 무섭다.
마지막으로 글 폭을 680 에서 720 으로 넓혔다. 밖에서 만든 문서는 대개 넓은 화면을 전제로 하는데, 여기 들어오면 칸에 맞춰 다시 흐른다. 40픽셀로 해결될 문제는 아니지만, 우선 그만큼.