티스토리 블로그에 Tex 로 수학식 넣기 - 1

웹에서 수학을 표현하는 방법론은 3가지 정도가 거론됩니다.

1. 아예 포기하고 외부에서 만들어서 그림으로 넣기.
2. 해당 플랫폼에서 수식입력을 지원하는 경우 그걸 사용하기.
3. 외부 솔루션을 활용하기.

첫번째 경우는 그다지 고찰할 필요가 없다고 봅니다.

흔히 쓰는 워드프로세서나 아예 손으로 그려서 사진으로 찍은뒤 그 그림파일을 올리는 방법인데,

이걸 기술적으로 할 줄 모르지도 않고 애초에 이걸 원했으면 고민도 없을테니까요.

 

두번째 경우는 플랫폼마다 다르긴 합니다만, 적어도 티스토리의 새로운 글쓰기에서 지원하지는 않습니다.

옛날 글쓰기에서 지원하긴 합니다만, 결국 위의1번 방식을 대행해주는 수준에 가깝습니다.

업로드 결과가 그림파일로 나오니까요.

 

이 두가지는 몇가지 단점이 있는데, 가장 중요한건 일단 아름답지 않다는 겁니다.

네이티브한 방법론이 아니라는 거죠.

결국 그림의 형태이니 표현하려던 정보대비 불필요한 트래픽이 증가하고,

검색편의에도 맞지 않습니다.

시멘틱 웹의 철학에도 맞지 않구요.

 

가장 결정적으로, 모바일친화적이지 않습니다.

그림이다보니 반응형으로 그림의 크기가 변하면 보이는 수식의 크기도 변하게 되는데,

애초에 표현하려는게 텍스트를 그림으로 만든 꼴이니 가독성이 떨어지기 쉬웠죠.

 

즉, 가능하면 표현하려던 수식을 수식그대로 표현하는 방법론을 강구하게 됩니다.

그걸 지원하는 외부 플랫폼은 두가지 정도가 있습니다.

 

바로 MathJax 와 KaTex 입니다.

 

1. MathJax

https://www.mathjax.org/

MathJax

저는 MathJax를 사용하여 할리데이 솔루션을 작성하던 블로거였고,

몇몇 불편함은 있었지만 그 결과물이 그렇게 불편하진 않았기에 그냥 쓰고 있었습니다.

 

Javascript를 통해 TeX문법의 수식을 렌더링 해줘서 웹에서 볼수 있게 만드는 도구입니다.

하지만 우연한 기회에 다른 솔루션의 존재를 알게 됩니다.

바로 KaTex입니다.

 

2. KaTex

https://katex.org/

KaTeX – The fastest math typesetting library for the web

KaTex는 대놓고 MathJax를 저격하는 홍보를 진행합니다.

기술적으로 MathJax보다 빠르다는 것을 메인페이지에 비교하며 넣어놨죠.

 

기술적으로 보면, MathJax는 TeX코드를 일단 불러온 후, Javascript를 통해 변환하는 느낌입니다.

하지만 KaTex는 네이티브로 수식을 렌더해주는 느낌입니다.

 

제가 작업하기 편하고 말고를 떠나

잠깐이라도 방문자가 코드를 만나게 된다는것은 그리 유쾌한 결과는 아닙니다.

 

대안이 없으면 모르되 KaTex가 대안이 될수 있다면 갈아타게 될 수 밖에 없겠죠.

그래서 모든 포스팅을 재작업하는 수고를 감수하고까지 KaTex로 갈아타게 되었습니다.

 

그 결과는 대 만족이었죠.

 

네이티브한 결과물을 만드는데 이만한 결과물은 없었습니다.

물론, 장점만 존재하지는 않습니다.

한번, KaTex와 MathJax의 비교 고찰을 해보도록 하죠.

다음 포스팅에서 이어집니다.