최근에 블로그에 수학 공식이 들어간 글을 쓰려다가, 티스토리 기본 에디터로는 수식을 제대로 표현할 수가 없다는 걸 깨달았다. LaTeX 문법으로 수식을 예쁘게 렌더링해주는 방법이 있길래 정리해봤다.
이 글에서는 MathJax 스크립트 삽입법과 온라인 수식 편집기 활용법까지 한 번에 다룬다.
1. 티스토리에서 수식이 안 되는 이유
티스토리 기본 에디터는 일반 텍스트/HTML 기반이라 수식을 그냥 입력하면 그냥 문자열로만 출력된다. a^2 + b^2 = c^2 이런 식으로 쓰면 수식처럼 안 보이고 그냥 텍스트로 나온다는 거 다들 알 거다.
이걸 해결하는 방법이 바로 MathJax를 블로그 스킨에 심는 것이다. MathJax는 웹페이지에서 $$...$$ 같은 LaTeX 문법으로 작성된 수식을 자동으로 예쁘게 렌더링해주는 자바스크립트 라이브러리다. 한 번만 스킨 HTML에 스크립트를 추가해두면, 이후 글 작성할 때마다 $$로 수식을 자유롭게 쓸 수 있다.
이 글에서는 두 가지 방법을 소개할거다:
① MathJax 스크립트를 스킨에 직접 삽입 → 블로그 전체에 수식 렌더링 적용
② CodeCogs 온라인 수식 편집기 → 수식을 이미지 링크로 만들어서 삽입
2. (방법 1) MathJax 스크립트를 스킨 HTML에 삽입하기
블로그 스킨 HTML에 스크립트 두 줄만 추가하면 이후로는 글 쓸 때 $$로 수식을 입력하면 자동으로 렌더링된다.
① 티스토리 스킨 편집 화면 접속
블로그 관리 페이지 → 꾸미기 → 스킨 편집 메뉴로 들어간다. 그다음 우측 상단의 html 편집 버튼을 클릭한다.
② </head> 태그 바로 위에 스크립트 삽입
HTML 탭에서 </head> 태그를 찾아서 바로 위에 아래 코드 두 줄을 붙여넣으면 된다.
<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이고, 두 번째 줄이 실제 MathJax 3버전 라이브러리를 불러오는 스크립트다. 삽입 후 우측 상단 적용 버튼을 눌러 저장하면 끝이다.
3. 글 쓸 때 $$ 로 수식 입력하기
MathJax를 심었으면 이제 글 쓸 때 $$...$$ 문법으로 수식을 입력하면 된다. (... 자리에 수식 입력)
수식은 아래 LaTeX 수식 입력기 사이트에서 만들면 쉽다.
<!-- 블록 수식: 별도 줄에 크게 표시 -->
$$E = mc^2$$
$$\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
$$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
입력 결과:
$$E = mc^2$$
$$\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
$$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
자주 쓰는 LaTeX 문법도 표로 정리해뒀다. ㅎㅎ
| 기능 | LaTeX 문법 | 예시 |
| 분수 | \frac{분자}{분모} |
$$\frac{1}{2}$$ |
| 제곱/지수 | x^2, e^{ax} |
$$x^2 + e^{ax}$$ |
| 아래 첨자 | x_i, a_{ij} |
$$x_i + a_{ij}$$ |
| 루트 | \sqrt{x}, \sqrt[3]{x} |
$$\sqrt{x}$$ |
| 시그마 | \sum_{i=1}^{n} |
$$\sum_{i=1}^{n} i$$ |
| 적분 | \int_{a}^{b} |
$$\int_{0}^{1} x\,dx$$ |
| 그리스 문자 | \alpha, \beta, \pi, \theta |
$$\alpha + \beta = \pi$$ |
| 무한대 | \infty |
$$x \to \infty$$ |
| 행렬 | \begin{pmatrix} a & b \\ c & d \end{pmatrix} |
$$\begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}$$ |
4. (방법 2) CodeCogs 온라인 수식 편집기로 이미지 삽입
LaTeX 문법이 익숙하지 않거나, 스킨 편집이 부담스럽다면 CodeCogs 온라인 수식 편집기를 쓰는 것도 방법이다. 수식을 GUI로 클릭해서 만들고, 결과를 이미지 URL로 바로 가져올 수 있다.
① 편집기에서 수식 작성
사이트 접속 후 상단 버튼들을 클릭하거나 하단 LaTeX 입력창에 직접 수식을 입력하면 실시간 미리보기로 확인할 수 있다.
② URL 복사 또는 이미지 다운로드
수식을 완성하면 하단에 이미지 URL이 자동 생성된다. 이 URL을 그대로 블로그 이미지 태그에 넣거나, PNG로 다운받아서 업로드하면 된다.
<!-- CodeCogs URL을 img 태그로 바로 사용하는 예시 -->
<img src="https://latex.codecogs.com/svg.image?\int_{0}^{\infty}e^{-x^2}dx=\frac{\sqrt{\pi}}{2}"/>
다만 이 방법은 수식마다 이미지를 따로 만들어야 해서 수식이 많은 글에서는 번거롭다. 수식이 1~2개뿐인 글이거나 MathJax 스크립트 삽입이 어려운 환경일 때 쓰기 좋다. (html에서 삽입하면 아래처럼 보이게 된다.) 본문에 삽입하는 방법보다 좋은 점은 크기를 마음대로 키웠다 줄일 수 있다는 점이다.
삽입 결과:
5. 두 방법 비교 정리
| 항목 | MathJax 스크립트 삽입 | CodeCogs 이미지 |
| 설정 난이도 | 스킨 HTML 편집 필요 (1회) | 설정 불필요 |
| 수식 품질 | 벡터 기반, 선명하고 확대해도 깔끔 | 이미지 기반, 해상도 제한 있음 |
| 사용 편의성 | 한 번 설정하면 글마다 LaTeX만 입력 | 수식마다 편집기 접속 필요 |
| 추천 상황 | 수식 글을 자주 쓸 때 | 가끔 수식 1~2개 쓸 때 |
수식 관련 포스팅을 자주 올릴 거라면 MathJax를 스킨에 한 번 심어두는 게 압도적으로 편하다. 설정은 딱 한 번만 하면 이후로는 LaTeX 문법만 쓰면 되니까.
이번 글에서는 티스토리에 수식을 렌더링하는 두 가지 방법을 정리했다. MathJax 스킨 삽입법은 한 번만 설정해두면 수학, 물리, 통계 관련 포스팅 쓸 때 두고두고 쓸 수 있으니 한 번 해두는 걸 추천한다. 이상 끝! 🧮
'etc.' 카테고리의 다른 글
| [MacOS] 맥북 처음이라면 필수! 단축키 & 터미널 명령어 모음 ⌨️ (맥북 입문자 완전정복) (0) | 2026.03.24 |
|---|---|
| [Tistory] 티스토리 사이드바 꾸미기 🎨 (커스텀 배너/위젯 추가하기 + 코드 공유) (0) | 2026.03.14 |
| 마크다운(Markdown) 문법 총정리 📝 [헤더/리스트/코드블록/표/링크/이미지] (0) | 2026.03.10 |
| 원문자·로마숫자 특수기호 복사 🔢 [①②③ 동그라미 숫자 모음/특수문자 입력 단축키/체크박스/화살표/연산자/단위기호 모음] (0) | 2026.03.09 |