금융, 경제, 혹은 공학 관련 블로그를 운영하다 보면 필연적으로 복잡한 수식을 다루게 된다. 이때마다 그림판이나 PPT로 수식을 만들어 캡처해 올리는 분들이 꽤 많다. 하지만 이미지는 수정이 어렵고, 확대하면 깨지며, 무엇보다 구글 검색 로봇이 내용을 읽지 못해 SEO(검색 엔진 최적화)에 불리하다. 오늘은 워드프레스에서 수식을 가장 가볍고 깔끔하게 텍스트로 구현하는 방법, KaTeX 활용법을 정리해 본다.
왜 MathJax 대신 KaTeX을 추천하나?
워드프레스의 수식 플러그인은 크게 MathJax 계열과 KaTeX 계열로 나뉜다. 만약 아주 전문적인 논문 수준의 희귀한 기호를 쓰는 게 아니라면, KaTeX가 훨씬 합리적인 선택이다.
- MathJax: 기능은 강력하지만 무겁다. 페이지가 로딩될 때 수식이 렌더링되느라 글자가 깜빡거리거나 레이아웃이 밀리는 현상이 종종 발생한다.
- KaTeX: 칸 아카데미(Khan Academy)에서 만들었다. 렌더링 속도가 매우 빨라서, 페이지를 열자마자 수식이 텍스트처럼 즉시 보인다. 블로그 속도 최적화 측면에서 훨씬 유리하다.
따라서 플러그인 메뉴에서 KaTeX를 검색해 설치하는 것을 권장한다.
기본 사용법: 달러 대신 숏코드로
플러그인을 설치하고 나서 가장 많이 하는 실수가 평소 쓰던 $$ 기호를 그대로 입력하는 것이다. 워드프레스는 달러 기호를 수식이 아닌 일반 텍스트나 화폐 단위로 인식하기 때문에, 플러그인이 인식할 수 있는 **숏코드(Shortcode)**를 써줘야 한다.
1) 문장 중간에 자연스럽게 넣을 때 (인라인)
글을 쓰다가 자연스럽게 수식을 섞으려면 [katex] 태그로 감싸주면 된다.
- 입력:
아인슈타인의 [katex]E=mc^2[/katex] 공식은 유명하다. - 결과: 아인슈타인의 E=mc^2 공식은 유명하다.
2) 별도의 줄에 크게 강조할 때 (블록)
수식을 가운데 정렬로 시원하게 보여주고 싶다면 display=”true” 옵션을 추가한다.
- 입력:
[katex display="true"]f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2\pi i \xi x}\,d\xi[/katex] - 결과: f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2\pi i \xi x}\,d\xi
수식이 중앙에 크고 또렷하게 표시된다.
3) 자주 쓰는 기초 문법 (이것만 알면 90% 해결)
KaTeX 문법이 어렵다고 겁먹을 필요 없다. 사실 블로그에서 쓰는 수식은 분수, 제곱, 루트 이 세 가지가 전부다. 이 3개만 외워두고(혹은 이 글을 즐겨찾기 해두고) 필요할 때마다 숫자가 갈아 끼우면 된다.
| 표현 | 입력 코드 (LaTeX) | 결과 미리보기 |
| 분수 | \frac{a}{b} | \frac{a}{b} |
| 제곱 | x^2 | x^2 |
| 아래첨자 | x_i | x_i |
| 루트 | \sqrt{x} | \sqrt{x} |
| 곱하기 | \times | \times |
더 복잡한 특수기호가 필요하다면? 세상의 모든 수학 기호를 다 외울 수는 없다. 적분, 행렬, 극한 등 복잡한 기호가 필요할 때는 KaTeX 공식 지원표를 참고하는 게 제일 빠르다. Ctrl+F로 찾아서 복사해 쓰자.
모바일 화면 최적화
KaTeX는 기본적으로 줄바꿈을 지원하지 않기 때문에, 수식이 길어지면 스마트폰 화면을 뚫고 나가는 문제가 생긴다. 이를 방지하기 위해 약간의 CSS 설정을 해두는 것이 좋다. 모바일에서는 글자 크기를 조금 줄이고, 그래도 길면 가로 스크롤을 만들어주는 방식이다.
워드프레스 관리자 메뉴의 [외모] > [사용자 정의하기] > [추가 CSS]에 아래 코드를 복사해 넣으면 된다.
/* 모바일 화면 수식 최적화: 폰트 축소 및 스크롤 생성 */
@media screen and (max-width: 600px) {
.katex-display {
font-size: 0.8em !important; /* 글자 크기를 80%로 조절 */
overflow-x: auto; /* 폭을 넘어가면 스크롤 생성 */
overflow-y: hidden;
padding: 10px 0;
}
}이 설정을 추가하면 PC에서는 큼직하게, 모바일에서는 화면에 딱 맞게 정돈된 수식을 보여줄 수 있다.
마무리
처음에는 코드로 수식을 입력하는 게 낯설 수 있다. 하지만 익숙해지면 이미지 캡처보다 훨씬 빠르고 수정도 간편하다는 걸 느끼게 된다. 무엇보다 블로그의 전문성이 한층 돋보이게 되니, 꼭 적용해 보기를 추천한다.
