모드를 바꿔도 문서는 하나다

마크다운 편집기는 보통 화면을 둘로 나눠요. 왼쪽에서 쓰고, 오른쪽에서 결과를 보죠. 같은 문서를 두 번 그리다 보니 스크롤과 선택 위치를 계속 맞춰야 해요.

mote는 다르게 만들었어요. 문서는 하나만 두고, 보는 방식만 바꿔요.

문서 하나, 세 가지 화면

mote에는 세 가지 모드가 있어요.

• 라이브(Live): 기호를 숨기고 서식을 바로 보여 줘요.
• 소스(Source): 파일에 저장된 내용을 그대로 보여 줘요.
• 읽기(Reading): 마크다운 기호를 완전히 뺀 결과를 보여 줘요.

코어는 문서를 읽고 데코레이션 목록을 만들어요. 종류는 셋뿐이에요. 어느 구간에 스타일을 입힐지, 어느 구간을 숨길지, 어느 구간을 위젯으로 대신 그릴지.

세 모드는 이 목록에 다른 필터를 씌운 결과예요. 모드를 바꿔도 문서를 다시 열거나 분석하지 않아요. 블록 트리도 인라인 결과도 그대로 두고 필터만 바뀌어요.

예산에도 그렇게 적혀 있어요. 모드 전환은 한 프레임과 전환 애니메이션 안에 끝나야 해요. 재파싱이 끼면 위반이고요. 전환 비용이 문서 크기에 비례하지 않아서 큰 문서도 같은 속도로 바뀌어요.

캐럿과 선택 영역도 그대로예요. 소스에서 쓰던 글자는 라이브에서도 같은 자리에 있고, 라이브에서 선택한 문장은 소스에서도 그대로 선택돼 있어요.

문서의 다른 사본으로 이동하는 게 아니라, 같은 문서를 다른 시선으로 보는 셈이에요.

쓰고, 확인하고, 읽어요

글을 쓸 때는 라이브 모드가 편해요. 화면에는 내용만 남고, 마크다운 기호는 캐럿이 닿을 때 나타나요. 표와 수식과 그림은 제자리에서 위젯으로 그려져요. 격자를 보면서 칸 안을 고칠 수 있어요.

기호까지 정확히 확인해야 할 때는 소스 모드를 써요. 표의 파이프가 어긋났는지, 코드 블록이 닫혔는지, 줄 끝에 공백이 있는지 확인하기 좋아요.

읽기 모드는 최종 결과를 보는 화면이에요. 기호를 감추는 데 그치지 않고 화면에서 완전히 빼요. 인쇄와 PDF도 이 화면을 기준으로 만들어요. 편집은 할 수 없지만 선택과 복사는 가능하고, 링크도 열 수 있어요.

읽기 모드를 만드는 과정은 간단하지 않았어요. 기호를 빼자 화면의 위치와 파일 속 위치가 달라졌거든요. 검색 결과가 옆으로 밀리고, 클릭한 곳과 캐럿 위치도 어긋났어요.

이제 코어가 빠진 글자의 위치와 길이를 함께 기록해요. 화면에서 클릭한 위치를 파일 속 정확한 위치로 되돌릴 수 있어요.

읽던 자리에서 바로 바꿔요

헤더에서 원하는 모드를 누르거나 Ctrl+Shift+1, 2, 3을 사용하면 돼요.

전환해도 화면의 첫 줄과 캐럿 위치는 유지돼요. 크로스페이드는 160ms짜리 유한한 애니메이션이라 끝나면 예약이 남지 않아요. 새 창이 어느 모드로 열릴지는 설정의 편집 탭에서 고를 수 있어요.

단축키에는 작은 시행착오가 있었어요. 한동안 안내에는 Ctrl+1/2/3이 모드 전환이라고 적혀 있었지만, 실제로는 제목을 만드는 단축키였어요. 창이 키 입력을 먼저 가져가 모드 전환 코드는 실행되지 않았죠.

지금은 역할을 분명히 나눴어요. Ctrl+Shift+1/2/3은 모드 전환, Ctrl+1부터 Ctrl+6까지는 제목이에요. 명령 팔레트와 단축키 목록, 사이트 문서도 모두 같은 내용으로 고쳤어요.

집중 모드는 화면 위에 살짝 얹어요

F8을 누르면 캐럿이 있는 블록만 선명하게 보여요. 나머지 줄은 잉크의 알파만 32%로 낮아져요.

색만 달라질 뿐 글자의 위치는 움직이지 않아요. 흐림 효과나 애니메이션도 없어서 문단을 옮겨 다닐 때 화면 전체를 다시 계산할 필요가 없어요.

집중 모드는 네 번째 모드가 아니에요. 라이브 화면 위에 얹는 옵션이라 켜 둔 채 다른 모드로 이동할 수 있어요.

화면을 둘로 나누지 않는 이유

mote에는 분할 미리보기가 없어요.

같은 문서를 두 번 그리면 스크롤을 맞추고, 선택을 옮기고, 두 화면의 상태를 관리해야 해요. mote는 처음부터 그 문제를 만들지 않기로 했어요.

되돌리기 기록도, 선택도, 스크롤도 하나예요.

모드가 세 개인 건 문서가 세 개라서가 아니에요. 같은 문서를 봐야 하는 순간이 세 가지이기 때문이에요.