웹엔진 없이 수식을 빠르게 그리는 방법

mote에는 한 가지 절대 규칙이 있어요. 웹 엔진에 의존하지 않는 거예요.

프로토타입을 만들며 알게 됐어요. 이런 앱에서는 내장 브라우저 엔진이 비용의 대부분을 차지한다는 걸요. 그래서 처음부터 빼기로 했어요.

문제는 수식이었어요. 보통은 KaTeX나 MathJax를 브라우저에 올려 수식을 그려요. mote에서는 쓸 수 없는 방법이었죠.

다른 방법도 맞지 않았어요. 자체 폰트 렌더러를 쓰면 글자 모양이 시스템의 다른 앱과 달라져요. mote는 모든 글자를 플랫폼의 텍스트 엔진으로 그리기로 했거든요.

결국 가장 어려운 길을 택했어요.

배치는 mote가, 글자는 플랫폼이

수식 문법은 익숙한 방식을 따랐어요. 문장 안에서는 달러 기호 한 쌍으로, 따로 떨어뜨릴 때는 두 쌍으로 감싸요.

여는 기호 뒤와 닫는 기호 앞에는 공백을 둘 수 없어요. $5와 $6 같은 금액을 수식으로 잘못 인식하지 않기 위해서예요. 사람이 직접 쓰는 마크다운에서는 이런 작은 구분이 중요해요.

수식을 그리는 일은 둘로 나눴어요.

mote의 코어가 글자와 선의 위치를 계산해요. 실제 글자는 각 플랫폼의 텍스트 엔진이 그려요.

코어에는 TeX의 조판 규칙을 단순화해서 담았어요. 크기 단계 넷, 기호를 여덟 갈래로 나눠 사이 간격을 정하는 표, 첨자와 분수와 근호의 위치, 내용에 맞춰 커지는 괄호 같은 것들이에요.

하지만 글자의 실제 크기는 코어가 정하지 않아요. 같은 글자도 폰트와 플랫폼에 따라 크기가 다르기 때문이에요. 코어가 “이 글자를 이 크기로 그리면 얼마나 큰가요?”라고 물으면 플랫폼이 답해요. 코어는 그 값을 바탕으로 배치를 완성하고, 플랫폼은 정해진 자리에 글자와 선을 그려요.

덕분에 플랫폼이 늘어나도 레이아웃은 하나만 관리하면 돼요.

편집기에서도 원문은 그대로 남아요. 라이브 모드에서 수식이 보여도 소스 바이트는 줄 안에 있어요. 그 자리에 수식 크기만큼의 공간만 확보해요.

그래서 캐럿이 정확한 위치에 서고, 클릭한 글자를 정확히 찾을 수 있어요. 화면은 꾸며도 파일은 바꾸지 않는다는 원칙을 지킨 거예요. 읽기 모드와 PDF도 같은 레이아웃을 사용해요.

기울임꼴도 억지로 기울이지 않아요. 유니코드 수학 문자를 사용해 폰트에 들어 있는 실제 수학 글리프를 그려요.

모르는 수식은 숨기지 않아요

수식은 조용히 틀리면 발견하기 어려워요.

지원하지 않는 명령을 빈칸으로 표시하면 사용자는 오타인지, 앱의 한계인지 알 수 없어요. 그래서 mote는 모르는 명령을 이름 그대로 빨간색으로 보여 줘요.

괄호가 맞지 않아도 앱은 멈추지 않아요. 이런 입력은 테스트로 남겨 같은 문제가 되풀이되지 않게 했어요.

성능 원칙도 지켰어요. 수식과 글자 크기별로 계산 결과를 최대 512개까지 저장해요. 타이핑할 때 같은 수식을 반복해서 계산하지 않고, 사용자가 아무것도 하지 않을 때는 어떤 작업도 돌지 않아요.

HTML로 내보낼 때는 MathML을 사용해요. 브라우저가 직접 수식을 그리기 때문에 스크립트가 필요 없어요. 인터넷이 없어도 수식은 그대로 보여요.

아직 안 되는 것도 있어요

mote가 TeX 전체를 지원하는 건 아니에요.

사용자 정의 명령, 색 지정, 수식 번호, 여러 줄 첨자, 글자 위 기호, 화살표 위 글자는 아직 지원하지 않아요.

폭에 맞춰 늘어나는 악센트도 없어요. 넓은 모자도 좁은 모자처럼 보여요. 큰 합계와 적분 기호는 전용 글리프 대신 1.45배로 키워 그려요. 세로로만 늘어나야 하는 괄호도 가로와 세로가 함께 커져요.

인라인 분수는 TeX처럼 작게 표시돼요. 더 크게 보려면 별도 명령으로 지정해야 해요.

이 기능들을 이미 있는 것처럼 말하지 않을게요. 필요한 요청이 오면 하나씩 더해요.

수식 하나 때문에 앱 전체의 비용 구조를 바꾸지는 않았어요. 대신 수식을 그리는 방식을 바꿨어요.

더 어려운 길이었지만, 오래 갈 수 있는 길이라고 믿어요.