티스토리에 마크다운(Markdown)으로 블로깅하기


안녕하세요! 지난번에 티스토리에 공학 블로그 글의 작성법에 대해서 포스팅했었는데요~
바로 마크다운(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를 어떻게 티스토리 블로깅에 이용하는지 살펴보도록 하겠습니다~!

마크다운(Markdown) 문법과 MathJax로 공학 블로그 포스팅하기



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


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


# 공학 블로그?

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


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

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


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


# 수식을 이미지로?

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


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


# LaTex to HTML?

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


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


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



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