마크다운 기호를 커서가 닿은 낱말에서만 보여주는 이유

라이브 모드에서 커서의 위치는 곧 화면이에요. 마크다운 기호는 평소엔 숨고, 고칠 때만 나타나야 하죠.

그렇다면 ‘고칠 때’는 어떻게 알 수 있을까요?

mote는 처음에 문단 전체를 기준으로 삼았어요. 커서가 문단 안에 들어오면 그 문단의 모든 기호를 보여 줬죠.

구현은 간단했지만 화면이 시끄러웠어요. 굵은 글자 하나를 고치려고 커서를 놓았을 뿐인데, 세 줄 뒤의 링크와 코드까지 원문으로 바뀌었어요. 눈은 한곳을 보는데 문단 전체가 움직였죠.

문단이 아니라 구문을 봐요

이제 mote는 커서와 맞닿은 구문만 보여 줘요.

커서가 여는 기호와 닫는 기호 사이에 있을 때만 원문이 나타나요. 기호 바로 앞과 뒤도 범위에 포함해요. 그곳에 커서를 놓는 것 역시 구문을 고치려는 동작이니까요.

커서가 한 칸만 벗어나도 다시 렌더된 모습으로 돌아가요. 나타나고 사라질 때는 120 ms의 불투명도 전환을 써요. 시작과 끝이 있는 전환이라 끝나면 아무것도 남지 않아요.

문단에 굵게, 링크, 인라인 코드가 함께 있어도 나머지는 움직이지 않아요. 커서가 닿은 구문만 바뀌고, 다시 그리는 범위도 그 줄 하나뿐이에요. 문서 전체를 다시 해석하지 않아요.

기울임, 굵게, 취소선, 형광펜, 아래첨자, 위첨자, 코드, 수식, 링크, 이미지, 각주 참조에 같은 원칙을 적용해요.

줄머리 기호는 조금 달라요. #와 >는 줄 전체의 성격을 정하므로, 커서가 줄 어디에 있든 같은 모습으로 보여 줘요. 반면 목록의 - 는 커서가 기호 위에 있을 때만 드러나요. 공백을 지나 본문으로 이동하면 바로 글머리표로 돌아가요.

텍스트를 선택했을 때도 선택 영역과 겹치는 구문만 원문으로 바뀌어요. 세 글자를 선택했는데 줄 전체가 소스로 변하면, 무엇을 선택했는지 오히려 알아보기 어려우니까요.

기호도 글자의 모습을 따라요

드러난 기호는 구문의 스타일을 그대로 입어요.

굵은 글자의 **는 굵게, 기울임의 *는 기울어진 채 나타나요. 취소선의 ~~에도 선이 그어져요.

예전에는 모든 기호를 회색으로 표시했어요. 그러자 굵은 글자에 커서를 놓는 순간, 낱말이 회색 괄호에 갇힌 것처럼 보였어요. 지금 고치는 글자가 굵다는 정보도 잠시 사라졌죠.

기호에 글자의 스타일을 입히자 의미가 분명해졌어요. 낱말은 계속 굵게 보이고, 별표는 그 범위를 알려 주는 표시로만 남아요.

회색은 #, >, 글머리표 같은 블록 기호에만 써요. 이 기호들은 글자보다 줄의 성격을 설명하니까요.

원칙은 간단해요. 글자에 붙은 기호는 글자의 일부처럼, 줄을 정하는 기호는 배경처럼 보여 줘요.

별표만 자동으로 짝을 만들어요

별표 하나를 입력하면 닫는 별표가 함께 생겨요. 별표를 하나 더 입력하면 굵게를 위한 쌍으로 자라요.

내용을 쓴 뒤 닫는 별표를 입력하면 새 기호를 만들지 않고 기존 기호를 넘어가요. 별표가 네 개씩 생기던 문제도 이 규칙으로 해결했어요.

다만 글자나 별표 바로 뒤에서 입력한 별표는 사용자가 직접 구문을 닫는 중이라고 봐요. 이때는 짝을 만들지 않아요.

밑줄과 물결표는 자동으로 짝을 만들지 않아요. snake_case, __init__, ~/경로처럼 일상적으로 입력하는 글자를 방해할 수 있기 때문이에요. 선택한 텍스트를 감쌀 때만 쌍으로 동작해요.

캐럿은 글자보다 눈에 띄지 않아야 해요

처음에는 캐럿이 강조색인 파란색이었어요. 지금은 본문과 같은 잉크색을 써요.

파란 막대는 짧은 입력창에는 잘 어울려요. 하지만 문서에서는 글자가 주인공이에요. 캐럿은 어디까지 썼는지만 알려 주면 충분하죠. 강조색은 선택 영역과 검색 결과에만 남겼어요.

폭은 캐럿 높이를 본문 잉크 높이로 나눠 정수로 반올림해서 정해요. 본문에서는 1 px이 나오고 큰 제목에서만 2 px로 올라가요. 소수 폭을 그대로 쓰면 두 픽셀 열에 나뉘어 얇아지는 대신 두껍고 흐려지거든요.

높이는 줄 간격이 아니라 글자 높이를 따라가요. 본문은 18 px, h3는 24 px, h2는 29 px, h1은 36 px이에요. 캐럿만 봐도 커서가 본문에 있는지 제목에 있는지 알 수 있어요.

깜빡임은 유휴 상태에서 반복 소스를 두지 않는다는 규칙의 유일한 예외로 적혀 있어요. 창이 포커스를 잃으면 깜빡임을 멈추고, 선택 영역도 알파 45 %로 물러나요.

밀림은 남겨 두었어요

기호가 나타나면 뒤의 글자가 조금 밀려요. 이 움직임은 없애지 않기로 했어요.

숨은 기호를 옅은 회색으로 계속 표시해 공간을 확보하는 방법도 시험했어요. 하지만 굵은 글자에는 회색 잔상이 남았고, 취소선은 낱말 밖으로 튀어나왔어요. 렌더된 화면도, 원문도 아닌 어색한 상태가 됐죠.

대신 글머리표와 할 일 상자처럼 그려진 상자가 있는 줄머리 기호는 원문과 렌더의 폭 차이만큼 줄을 옮겨서, 기호가 드러나도 본문 글자가 움직이지 않아요. 제목의 #와 인용의 >는 본문을 미는 쪽으로 두었어요. 그렇게 쓰는 에디터가 익숙하다는 결정이었어요.

링크는 주소가 길어 화면 변화가 더 클 수 있어요. 그래서 평소에는 링크 글자만 보여 주고 끝에 작은 화살표를 붙여요. 링크라는 사실은 알 수 있지만, 주소는 고칠 때만 나타나요.

원문을 정확히 확인해야 한다면 소스 모드를 쓰면 돼요. 라이브 모드는 모든 기호를 보여 주는 곳이 아니라, 지금 고칠 곳만 열어 주는 곳이에요.

mote는 사용자의 의도를 추측하지 않아요. 커서가 구문 안에 있으면 기호를 보여 주고, 밖에 있으면 숨겨요. 추측은 맞을 때는 편하지만 틀렸을 때 이유를 알기 어려워요. 위치라는 한 가지 기준만 쓰면 언제나 결과를 예상할 수 있어요.

기호를 언제 보여 줄지 정하는 일은 결국, 사용자의 눈을 어디에 머물게 할지 정하는 일이에요.