손으로 친 표를 그대로 지키는 표 편집

마크다운 표에는 손으로 다듬은 흔적이 남아요. 파이프를 가지런히 세우고, 공백으로 칸의 폭을 맞추고, 때로는 일부러 정렬을 흐트러뜨리기도 하죠. 그 모양 자체가 파일의 원문이에요.

하지만 표를 격자로 보여 주는 에디터는 원문을 해석해야 해요. 다시 저장할 때 표를 자동으로 정렬하면, 사람이 만든 모양도 달라져요.

Typora의 표 자동 정렬이 그런 경우로 알려져 있어요. 열 폭을 맞추느라 파이프 사이를 공백으로 채우고, 그 결과가 저장에 반영돼요. 공개 이슈로 정리돼 있고, 옵션으로 끄고 싶다는 요청도 따로 올라와 있어요.

mote는 그러지 않기로 했어요. 화면에는 표를 격자로 보여 주되, 파일에는 손으로 쓴 원문을 그대로 남겨요.

고치는 칸만 원문으로 보여요

라이브 모드에서 표를 클릭해도 격자는 그대로예요. 캐럿이 있는 칸만 원문으로 바뀌고, 파이프 기호가 흐리게 보여요.

Tab이나 방향키로 다른 칸으로 이동할 수 있어요. 마지막 행에서 Enter를 누르면 새 행이 생겨요.

선택도 자연스러워요. 칸 안에서 드래그하면 글자만 선택돼요. 칸 밖까지 드래그하면 여러 칸이 직사각형으로 선택되고, 복사하면 선택한 칸만 표로 만들어져요. 첫 행은 머리글이 되고 정렬도 유지돼요.

표 밖에서 시작한 선택이 표에 닿으면 표 전체가 선택돼요. 표의 절반만 어색하게 잡히지 않아요.

행과 열도 통째로 옮길 수 있어요. 표에 마우스를 올리면 행 왼쪽과 열 위쪽에 손잡이가 나타나요. 끌어서 원하는 자리로 옮기면 돼요.

우클릭 메뉴에서는 행과 열을 추가하거나 지울 수 있어요. 모든 동작은 한 번의 편집으로 처리돼서 한 번에 되돌릴 수 있어요. 건드리지 않은 칸의 원문은 바뀌지 않고요. 같은 기능은 명령 팔레트에서도 찾을 수 있어요.

파이프 하나 때문에 표가 무너졌어요

처음에는 표 안에서 파이프를 입력하면 무조건 백슬래시를 붙였어요. 칸 안에 파이프 문자를 넣는 경우만 생각했기 때문이에요.

하지만 마크다운 표를 직접 쓰는 사람에게 파이프는 칸을 나누는 기호예요. 새 행을 입력하면 구분자까지 문자로 바뀌었고, 표가 무너졌어요.

그래서 입력한 위치를 보도록 고쳤어요.

행이 시작되는 자리에 파이프를 입력하면 무시해요. 뒤에 구분자가 이미 있다면 다음 칸으로 캐럿을 옮겨요. 칸 안의 문장에 파이프를 입력했을 때만 이스케이프해요. 표 바로 아래에서 파이프로 시작하는 행을 쓰면 기존 표의 새 행으로 이어지고요.

이런 문제는 코드만 보고 찾기 어려워요. 그래서 실제 창에서 표를 클릭하고 손잡이를 끌어 보는 테스트를 만들었어요. 표가 제대로 그려지는지, 행과 열이 원하는 방향으로 움직이는지, 그 과정에서 앱이 죽지 않는지 확인해요.

결과는 저장한 뒤 더 분명하게 보여요. 칸 하나의 단어만 바꾸면 git diff에도 그 행 하나만 나타나요.

열을 맞춘 공백도, 글머리 기호의 별표도, 줄 끝의 공백 두 칸도 그대로예요. 마지막 줄바꿈이 없던 파일이라면 그 상태까지 유지해요. 상태 줄에서는 저장하면서 몇 바이트가 바뀌었는지 바로 볼 수 있어요.

만들었다가 뺀 기능도 있어요

한동안은 마우스로 열 너비를 조절할 수 있었어요. 지금은 없어요.

마크다운에는 열 너비를 저장하는 문법이 없어요. 너비를 기억하려면 문서 옆에 별도의 파일을 만들어야 해요. 그러면 그 폴더는 mote가 있어야만 온전해져요. git으로 옮기거나 다른 기기에서 열거나 다른 에디터를 쓰면 정보가 빠지죠.

표의 테두리는 앱 설정으로 해결했어요. 격자로 보이게 할지, 머리글 아래에만 선을 그을지 고를 수 있어요. 화면과 PDF, HTML 내보내기에도 같은 설정이 적용돼요.

기준은 단순해요. 마크다운에 적을 수 없는 값은 앱 설정에 두거나, 기능으로 만들지 않아요.

그래서 열 너비 조절 기능을 뺐어요. 열 너비는 내용에 맞춰 자동으로 정해져요. 문서는 끝까지 .md 파일 하나로 남고요.

표를 예쁘게 다시 써 주는 에디터와, 내가 쓴 표를 그대로 지켜 주는 에디터.

mote는 두 번째를 골랐어요.