안녕하세요! 지난 포스팅(티스토리에 마크다운(Markdown)으로 블로깅하기)에 이어 이번에는 티스토리 블로그에 어떻게 MathJax를 이용하는지 알아보겠습니다.

# MathJax란?

MathJax란 오픈 소스 기반으로 웹 상에서 수식을 표현해 주는 툴이라고 할 수 있습니다.

일반적으로 MS Word나 한글 같은 워드 프로세서에는 기본적으로 수식 툴이 내장되어 있는데요,
이를 웹 상으로 옮기려면 수식을 이미지화 하여 삽입하는 방법 밖에는 없답니다. (적어도 제가 찾아보기에는요ㅜㅜ)
이는 많은 수식을 적기에 매우 불편할 뿐만아니라 특히, 문장 안의 수식같은 경우에는 정렬이 제대로 되지 않아 보기에 이쁘지도 않습니다.

그래서 나온 대안책이 바로 웹 상에서 HTML 형식으로 수식을 적으면 이를 서비스 제공자가 렌더링 해주는 방식입니다.
그 대표적인 사례가 바로 MathJax죠.

# Why MathJax?

웹 상에서 수식을 표현하는 데 다양한 방법들을 찾을 수가 있었는데요,
그 중에서 가장 대중적이고 편리한 툴이 바로 MathJax입니다.

티스토리 블로그에서의 사용에 초점을 두어 MathJax의 장점들에 대해 알아보도록 하겠습니다.

# MathJax의 장점

1. 티스토리 블로그에서 사용이 편리하다
   
   

   실제로 티스토리 블로그에서 MathJax를 사용하려면 관리 > 꾸미기 > HTLM/CSS 편집 > HTML/CSS 에서 skin.html의 </head> 위에 다음 코드를 붙여 넣기만 하면 된답니다.
   
   

   <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

2. 문법이 간단하다
   
   

   MathJax는 기본적으로 LaTeX와 동일한 문법을 사용합니다.
   기본적인 문법 설명은 Wiki Books - LaTeX/Mathematics에 잘 설명이 되어 있네요~
   영문으로 되어 있어도 수식들이니까 알아보는데 큰 문제는 없을 것 같네요.
   
   

3. 예쁘다
   
   

   직접 써보시면 아시겠지만 확실히 이미지로 수식들을 붙여 넣는 것보다 수식이 더 깔끔하고 보기에 좋습니다.
   직접 한 번 비교해 보시죠.
   
   

   Note: 수식 비교

   먼저 제가 이 블로깅에 대해 아무것도 모를 때 작성한 포스트(Reynolds Transport Theorem과 검사 체적(Control Volume)) 중 일부를 보여 드리겠습니다.
   
   

   

   
   

   ▲ 수식을 이미지로 붙여 넣은 경우
   
   

   보시다시피 문장 내에서 수식 이미지가 잘 정렬되지 않아 깔끔하지 않습니다.

   그러면 이번엔 똑같은 글을 MathJax를 이용하여 작성해 보겠습니다.
   
   

   우선, RTT의 기본 식에 대해 알아 보겠습니다.
   

   $$\frac{d}{dt}\left(\int_{\Omega(t)}{\mathbf{f}(\mathbf{x},t)dV}\right)=\int_{\Omega(t)}{\frac{\partial \mathbf{f}(\mathbf{x},t)}{\partial t}dV+\int_{\partial \Omega(t)}{(\mathbf{v^b} \cdot \mathbf{n})\mathbf{f}(\mathbf{x},t)dA}}$$
   여기서 $f(x,t)$는 계 내의 물리량, $v^b = v^b (x,t)$는 위치 $x$에서의 경계면의 속도이며 $n=n(x,t)$는 위치 $x$에서의 곡면 $\partial \Omega (t)$의 법선 벡터입니다.

   ▲ 수식을 MathJax로 작성한 경우
   
   

   훨씬 깔끔한게 느껴지시나요?
   처음엔 LaTeX 문법이 조금 어려우실 수도 있지만 익숙해 진다면

   참고로 위의 내용은 다음과 같은 마크다운 문법(+LaTeX 문법)으로 작성되었습니다.
   
   

   >> 우선, RTT의 기본 식에 대해 알아 보겠습니다.
   >> $$ \frac{d}{dt}\left(\int_{\Omega(t)}{\mathbf{f}(\mathbf{x},t)dV}\right)=\int_{\Omega(t)}{\frac{\partial \mathbf{f}(\mathbf{x},t)}{\partial t}dV+\int_{\partial \Omega(t)}{(\mathbf{v^b} \cdot \mathbf{n})\mathbf{f}(\mathbf{x},t)dA}}$$
   >> 여기서 $f(x,t)$는 계 내의 물리량, $v^b = v^b (x,t)$는 위치 $x$에서의 경계면의 속도이며 $n=n(x,t)$는 위치 $x$에서의 곡면 $\partial \Omega (t)$의 법선 벡터입니다.

여태까지 MathJax 툴의 장점들을 알아 보았습니다.
위의 장점들 때문에 저는 공학 블로그 포스팅을 할 때에 마크다운(Markdown)과 MathJax 툴을 사용한답니다.

# 티스토리 블로그에서 MathJax 사용법

우선 MathJax 툴을 티스토리 블로그에서 사용할 수 있도록 해야 겠죠.
위에서 소개한대로 관리 > 꾸미기 > HTLM/CSS 편집 > HTML/CSS 에서 skin.html의 </head> 위에 다음 코드를 붙여 넣습니다.

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

그러면 이제 마크다운 문법으로 글을 작성하실 때, 다음과 같은 규칙으로 MathJax 툴을 호출할 수 있답니다.

• 문단 사이에 수식 삽입
  
  

  문단 사이에서 $$ 과 $$ 사이에 LaTeX 수식 표현을 넣습니다.
  
  

  예시 글
  
  

  윗 문단
  $$y=ax+b$$
  아랫 문단
  

  결과
  
  

  윗 문단
  

  $$y=ax+b$$
  아랫 문단

• 문장 안에 수식 삽입
  
  

  문장 안에서 $ 과 $ 사이에 LaTeX 수식 표현을 넣습니다.
  
  

  예시 글
  
  

  앞 문장 $y=ax+b$ 뒷 문장
  

  결과
  
  

  앞 문장 $y=ax+b$ 뒷 문장

이런식으로 글 속에서 LaTeX 문법을 섞어 작성하신 후에 StackEdit 등의 마크다운 변환기를 통해 HTML로 변환한 코드를 티스토리 블로그 글 작성란(HTML)에 붙여 넣기만 하면 예쁜 수식이 보이게 된답니다~!
어때요, 참 쉽죠?ㅎㅎ

# 글을 마치며

오늘은 MathJax 툴을 어떻게 티스토리 블로그에 적용시키고 수식을 작성하는지에 대해 알아보았습니다.
STEM 활동의 일환으로 시작한 블로깅이지만 생각보다 재미있는 기능들이 많네요.

이것으로 기본적인 공학 블로그 포스팅하는 법을 마치고 이제 STEM의 공식 공과대학 학부생 멘토링 블로그 STEMentor에서 다양한 공대 전공 과목들로 만나뵙도록 하겠습니다~!

안녕하세요! 지난번에 티스토리에 공학 블로그 글의 작성법에 대해서 포스팅했었는데요~
바로 마크다운(Markdown)과 MathJax를 이용하여 글을 편리하게 작성할 수 있다고 말씀드렸죠.

이번엔 제가 쓰는 마크다운 툴로 어떻게 티스토리에 블로깅하는지 소개해 드리려고 해요.

# 마크다운(Markdown)이란?

마크다운이란 웹 상에서 글을 편하게 작성하기 위해 만들어진 문법으로 매우 간단한게 장점입니다.
기본적인 문법은 마크다운 공식 웹사이트에서 확인할 수 있습니다.
한국어 번역은 이 포스트에 잘 되어 있네요.

예시로 위의 글은 마크다운 문법으로 어떻게 작성되었는지 보시죠.

<br/>
안녕하세요! 이번엔 제가 쓰는 **마크다운 툴**로 어떻게 **티스토리**에 블로깅하는지 소개해 드리려고 해요.<br/><br/>
_____
### # 마크다운(Markdown)이란?

**마크다운**이란 웹 상에서 글을 편하게 작성하기 위해 만들어진 문법으로 매우 간단한게 장점입니다.
기본적인 문법은 [마크다운 공식 웹사이트](http://daringfireball.net/projects/markdown/syntax/ "마크다운 공식 웹사이트")에서 확인할 수 있습니다.
한국어 번역은 [이 포스트](http://scriptogr.am/myevan/post/markdown-syntax-guide-for-scriptogram/ "마크다운 번역 포스트")에 잘 되어 있네요.<br/><br/>

예시로 위의 글은 마크다운 문법으로 어떻게 작성되었는지 보시죠.<br/><br/>

어때요? 그렇게 복잡하지는 않죠?

이런식으로 메모장이나 제가 지금 쓰는 서브라임 텍스트 3(Sublime Text 3)등의 문서 편집 프로그램으로 마크다운 문법으로 주욱 적어 내려가면 일단 글의 내용은 완성입니다.

▲ 이번 포스팅을 작성하는데 사용한 Sublime Text 3 화면

# 마크다운 툴 StackEdit

위에서 마크다운 문법으로 문서를 하나 만들었는데요, 이를 티스토리 블로그에 쓰기 위해서는 마크다운 문서(.md)를 HTML로 변환해 주는 마크다운 툴이 필요합니다.
웹 상에 무료 혹은 유료로 많은 마크다운 툴이 있고 친절하신 한 분이 이들의 장단점을 잘 정리해 주셨습니다. - 관련 링크

저는 이 중에서 웹 상에서(혹은 오프라인에서도) 간단히 이용할 수 있고 구글 드라이브와 연동이 잘 되는 StackEdit을 사용합니다.

StackEdit의 장점

1. HTML 변환이 매우 간편하다 (클릭 한 번)
2. 설치가 간편하다 (구글 드라이브 앱)
3. 기본적으로 MathJax를 지원한다
4. 깔끔한 Viewer를 제공한다
5. 구글 드라이브와 연동이 되어 공동작업에 용이하다

저는 이 장점들 중에서 특히 1번과 2번, 3번이 매우 유용하게 느껴져 StackEdit을 사용한답니다.
(HarooPad를 한 번 사용해 보았는데, 설치도 조금 걸리고 HTML 변환도 귀찮게 느껴지더라구요…)
또한 StackEdit은 무엇보다 공학 블로그의 필수인 수식입력을 MathJax를 이용해 간편하게 할 수 있다는 것!

다양하게 찾아 보고 실제로 티스토리 블로그에 적용해 본 결과 StackEdit이 저에겐 가장 편한 툴이라고 생각됩니다.

▲ 이번 포스팅을 작성하는데 사용한 StackEdit 화면

# Work Flow

블로깅을 할 때, 자신만의 Work flow를 가지고 있다면 작업에 일관성이 생기고 효율이 증가하기 때문에 하나쯤 생각해 두시는 것을 추천해 드리는데요,
제가 블로깅을 할 때의 Work flow는 다음과 같습니다.

▲ Work flow chart 

# 마무리하며

제가 티스토리에 마크다운을 활용하여 어떻게 블로깅 하는지 살펴 보았습니다.
이것은 단지 제가 편해서 쓰는 방법이지 꼭 이게 정답이라고 할 수는 없습니다.

요즘은 웹 상에서 필요한 정보를 다양하게 얻을 수 있으니 여러분만의 방법을 찾는 것도 좋은 방법이라고 생각합니다.

그럼 다음번엔 MathJax를 어떻게 티스토리 블로깅에 이용하는지 살펴보도록 하겠습니다~!

STEM 프로젝트의 일환으로 공과대학 전공 과목 관련 포스팅을 하기 위하여 이런 저런 블로깅 툴을 살펴 보았습니다.


저는 HTML/CSS나 블로깅에 관한 지식이 전무하였기에 거의 맨땅에 헤딩하기 였죠.
그래도 요즘엔 하도 IT 시대이다 보니 우리나라 사용자도 많아져 한글로 된 설명이나 포스트들이 많아 오래 걸리지 않고 나름대로 정리할 수 있었습니다.

# 공학 블로그?

이번에 이런 저런 것들을 검색해보다 알게 됐는데 사진, 취미, IT 등의 블로그들은 많은데 공학 전문 블로그는 많이 없는 이유를 알 것 같았습니다.
물론 다양한 이유들이 있겠지만 그 중 중요하다고 생각되는 이유 중 하나가 바로 수식을 적기에 만만치가 않다는 것이었습니다.

# 웹 페이지에 수식 입력이 힘들다…

공과대학 학부생들이라면 보고서를 제출하기 위해 다들 Word 프로세서나 한글을 이용하여 수식 작성은 많이 해보셨을 것이라고 생각됩니다.
위 프로그램들로 작성된 문서를 그대로 제출하거나 출력해서 제출하고, 보관시에는 pdf로 보관을 하기도 하는데 그리 어렵지 않습니다.


하지만! 이를 웹 페이지에서 작성하는 것은 문제가 또 다른데요, 가장 크게 문제되는 것이 수식을 예쁘게 렌더링 해 주는 플러그인이 잘 공급되어 있지 않다는 것입니다.
아마 공학 블로그가 대중들에게 인기가 없기 때문이지 않을까 싶네요…

# 수식을 이미지로?

내 글에 수식이 필요하다~ 하면 흔히들 수식을 이미지로 변환하여 블로그에 넣고는 합니다.
하지만 이 경우 수식이 많아질 경우에 조금 귀찮아진다는 문제점이 있죠.


더 큰 문제는 문장 안에 수식을 넣고자 할 때, 이쁘지가 않다는 겁니다.
바로 이 문제 때문에 제가 이미지로 수식을 삽입하는 것을 포기했죠..

# LaTex to HTML?

그래도 수학이나 공학을 전문으로 포스팅하려는 분들의 노력으로 조금 어렵지만 다양한 길들이 생겨나고 있습니다.
바로 LaTex 구문을 HTML로 작성하면 이를 서비스 공급 업체를 통해 렌더링 해 주는 방식입니다.


예를 들어, 제가 문장 안에 $\int_{\Omega(t)}{f(x,t)dV}$를 입력하면 $\int_{\Omega(t)}{f(x,t)dV}$ 이렇게 렌더링을 해 주는 것이죠.


비록 렌더링 시간이 조금 걸리지만 제가 생각했을 때, 가장 편리하고 포스팅이 쉬운 방법이 아닐까 생각되네요.



다음 포스팅 때, 티스토리 블로그에서 어떻게 이를 쓸 수 있는지에 대해 설명해 드리도록 하겠습니다~!