티스토리에서 수식 입력하는 방법 (LaTeX, MathJax)

티스토리를 메인 블로그로 사용하고 있습니다. 이전에는 네이버 블로그를 사용했습니다. 두 블로그는 각기 장단점이 있습니다. 네이버 블로그는 지원되는 기능이 조금 더 많으며 안정적입니다. 티스토리는 HTML 또는 CSS 코드를 수정할 수 있기에 커스터마이징 범위가 넓습니다. 제가 쓰는 용도에는 티스토리가 더 적합합니다.

티스토리를 쓰다 보면 아쉬운 면이 몇 가지 있습니다. 그 중 하나가 수식 입력입니다. 티스토리에서 수식을 어떻게 입력할 수 있는지 살펴봅니다.

네이버 블로그에서 수식 입력

네이버 블로그는 수식 입력 기능을 기본으로 제공하고 있습니다. 블로그 편집기에 수식 버튼을 누르면 다음과 같은 창이 열리고 수식을 입력할 수 있습니다. 참고: 네이버 카페에 글을 작성할 때에도 동일한 방법으로 수식을 입력할 수 있습니다.

네이버 블로그에서 수식 입력 창

상단에는 각종 수학 기호와 형식을 선택할 수 있는 버튼이 있습니다. 그 아래에 실제 나타날 수식을 보면서 입력하고 편집할 수 있는 창이 있습니다. 하단에 보면 해당 수식을 표현한 식이 있습니다. 여기서도 편집이 가능한데, LaTeX 문법으로 표현되어 있습니다.

LaTeX은 역사가 오래된 조판용 언어입니다. HTML 같은 것이라 보면 됩니다. HTML이 컴퓨터 화면에 글을 표현하는 방식에 집중한 언어라면, LaTeX은 인쇄물을 표현하는데 집중한 언어입니다.

인쇄물에서 표현하기 어려운 것 중 하나가 수식입니다. LaTeX에는 수식을 표현하는 문법이 있고, 하단의 창은 그 문법에 따라 기술한 내용입니다. 내용을 읽어보면 어렵지 않습니다.

\mu는 그리스 소문자 \(\mu\)(뮤)를 의미합니다. \sigma는 그리스 소문자 \(\sigma\)(시그마)입니다. 대문자 \(\Sigma\)를 쓰고 싶으면 \Sigma로 입력하면 됩니다. 언더바(_) 기호는 아래첨자를, 캐럿(^) 기호는 위첨자를 나타냅니다. \sigma_2^2으로로 기술하면 \(\sigma_2^2\)로 나타납니다.

LeTex의 수식 문법은 정교하면서 표현력이 높습니다. 수식 입력 기능을 지원하는 대부분의 소프트웨어는 LaTex 수식 문법을 사용합니다. 구글 독스도 마이크로소프트 365도 마찬가지입니다. 수식 입력 화면에서 \delta를 입력하는 순간 \(\delta\)로 바뀝니다. 위지위그(WYSIWYG)로 편집할 수 있는 기능을 추가하여 사용자 편의성을 높인 것입니다.

네이버 블로그의 수식 입력 기능은 편리하지만, 한 가지 단점이 있습니다. 글 사이에 수식을 넣을 수 없습니다. 수식은 항상 단독으로 단락을 차지합니다.

글 사이에 수식을 넣을 수 없는 네이버 블로그

글 사이에 넣은 수식을 인라인(inline) 수식이라고 합니다. 위의 수식을 글 중간에 넣어 \(N(\mu _1,\sigma _1^2)+N(\mu _2,\sigma _2^2)=N(\mu _1+\mu _2,\sigma _1^2+\sigma _2^2)\) 이렇게 표현할 수 없습니다. 아래와 같이 한 줄 수식은 입력할 수 있습니다.

$$ N(\mu _1,\sigma _1^2)+N(\mu _2,\sigma _2^2)=N(\mu _1+\mu _2,\sigma _1^2+\sigma _2^2) $$

하지만 수식을 이용하여 글을 설명하는데 한계가 있습니다.

서로 독립인 두 정규 분포 \(N(\mu_1,\sigma_1^2)\)와 \(N(\mu_2,\sigma_2^2)\)를 따르는 두 확률 변수를 더하면, 평균과 분산 각각 \(\mu_1 + \mu_2\)와 \(\sigma_1^2 + \sigma_2^2\)인 새로운 정규 분포가 됩니다.

티스토리에서 수식 입력

티스토리는 수식 입력 기능을 기본으로 제공하지 않습니다. 하지만 템플릿 HTML을 수정할 수 있기에, 수식 표현 기능을 추가할 수 있습니다.

블로그 관리 > 꾸미기 > 스킨 편집 > html 편집에서 아래와 같이 자바스크립트 코드를 사용하도록 추가하면 됩니다.

  <!-- 커스텀: MathJax -->
  <!-- Not Used
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  -->
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

첫 번째 polyfill.io에서 가져오는 자바스크립트는 오래된 웹 브라우저와의 자바스크립트 호환성 때문에 사용하는 것인데, 현재는 그다지 필요하지 않은 것으로 알고 있습니다.

두 번째 MathJax-script가 LaTeX 문법으로 표현된 수식을 화면에 보여주는 자바스크립트 라이브러리입니다. HTML을 보여줄 때에만 동작하기에, 작성하고 있는 수식이 제대로 표현되는지 확인하기 위해서는 티스토리의 미리보기 기능을 사용해야 합니다.

독립된 단락으로 수식을 입력할 경우에는 $$로 감싸면 됩니다.

\$\$ y = \frac{1}{2}x + \sqrt{2} \$\$

$$ y = \frac{1}{2}x + \sqrt{2} $$

글 중간에 수식을 삽입하고자 하는 경우에는 \\(와 \\)로 감싸면 됩니다.

여기서 \\(x\\)는 독립 변수라 하고, \\(y\\)는 종속 변수라 부릅니다. 1차식이니 2차원 좌표 상에 직선의 형태로 표현됩니다. 이 때 직선의 기울기는 \\(\frac{1}{2}\\)이고, \\(y\\) 절편은 \\(\sqrt{2}\\)입니다. 

여기서 \(x\)는 독립 변수라 하고, \(y\)는 종속 변수라 부릅니다. 1차식 형식이니 2차원 좌표 상에 직선의 형태로 표현됩니다. 이 때 직선의 기울기는 \(\frac{1}{2}\)이고, \(y\) 절편은 \(\sqrt{2}\)입니다. 

정리하며

티스토리 블로그에서 수식을 사용하는 방법을 간단하게 살펴보았습니다. LaTeX의 수식 문법을 사용할 수 있도록 자바스크립트 코드 하나를 HTML 탬플릿에 추가하면 충분합니다.

인라인 수식까지 지원이 가능하지만, WYSIWYG 방식으로 편집할 수 없고, 사용할 수학 기호나 수식 형태를 표현하는 방법을 찾아보아야 하기에 불편할 수 있습니다. WYSIWYG 편집을 지원하는 네이버 블로그의 수식 편집기를 이용하여 수식을 작성하고, 하단에 나오는 LaTeX 표현식을 복사해서 사용하면 편리합니다.

함께 읽으면 좋은 글:

• 수식이 포함된 PDF 책을 만들기에 무엇이 좋을까? (구글 문서 vs 마이크로소프트 365 온라인 워드)
• [초급 부록 B3] 환율의 변동성 상쇄 효과는 어느 정도일까? (미국 장기 채권 ETF나 금보다 높을까? 한국인에게 적절한 포트폴리오는 무엇일까?)
• [초급 부록 B2] 적립식으로 투자하면 변동성은 어떻게 될까? (적립식이 거치식보다 변동성이 높다고?)
• [초급 부록 B1] 산술 평균과 기하 평균(CAGR) - 단리 투자와 복리 투자
• [초급 부록 A3] 레버리지 ETF는 기초 자산(본주)보다 얼마나 위험할까? (SPY vs SSO = SPY ×2)
• 한국인도 ROC(Return of Capital) 비과세 적용을 받을 수 있습니다. (배당소득재분류에 따른 현지 배당세 환급 및 국내 배당세 징수)
  
• S&P 500 국내 ETF는 무엇이 좋을까? (국내 상장 ETF 9종 비교와 분석)
• QQQ5(QQQ 5배 레버리지)는 1년간 얼마나 녹았을까?
• [초급 부록 A1] 커버드콜 ETF는 기초 자산(본주)보다 좋을까? (미국배당다우존스 지수편)
• PLUS 미국배당증가성장주데일리커버드콜 - 한 판 붙자 타미당+7%, 코미당+10%! (내가 더 효율적이야!)