안녕하세요~ BestEng 입니다. 오늘은 마크다운(Markdown) 문법으로 작성된 글을 html 형식으로 바꿔주는 마크다운 에디터 StackEdit 사용법을 소개해 드리도록 하겠습니다.

# StackEdit 사용하기

StackEdit은 Google Drive App으로 기본적으로 Google Drive와의 호환성이 뛰어 납니다. 하지만 굳이 Google Drive와 연동하지 않더라도 실행 가능하며 심지어 offline 환경에서도 동작을 하는 장점이 있습니다.


제가 블로그에 글을 쓸 때의 Work flow는 (참고 - 티스토리에 마크다운(Markdown)으로 블로깅하기) StackEdit을 마크다운 변환기로만 이용하기 때문에 Google Drive와의 연동이 필요없다~ 하시는 분은 그냥 웹상에서 이용하시면 됩니다. (저는 이미 연동이 되어 있어서 정확히 구글 계정이 필요 없는지는 확실하지 않네요)


우선 다음의 StackEdit 홈페이지에 접속합니다.

StackEdit 홈페이지 링크 - https://stackedit.io/

그러면 다음과 같이 StackEdit 메인 화면이 보입니다.



StackEdit 메인 화면


메인 화면에서 상단의 Start writing now!를 클릭합니다. 그럼 다음과 같이 StackEdit 에디터 페이지가 나옵니다.



StackEdit 에디터 화면


이제 새 문서를 만들어야 겠죠. 에디터 화면 좌측 상단의 폴더 모양 아이콘을 클릭합니다.



StackEdit 새 문서 만들기


그럼 다음과 같이 빈 페이지가 나타납니다.



StackEdit 빈 페이지


우선 새 문서의 제목을 입력합니다. 저는 Test로 만들었는데요, 이렇게 제목을 입력하면 자동으로 .md 파일로 만들어 진답니다. 물론 이 파일을 직접 이용할 일은 제 작업에서는 없습니다. ㅎㅎ


왼쪽에 보이는게 Editor Panel로 실제 마크다운 문법으로 작성하는 곳이고, 오른쪽이 Viewer Panel로 이렇게 작성된 문서가 html로 변환이 되면 실제 웹 상에서 어떻게 보여지는지 보여주는 패널입니다.


간단한 내용을 마크다운 문법을 이용해 Editor Panel에 입력해보죠.



StackEdit 테스트 문서


왼쪽 뷰어 패널에 잘 나타나죠? 그럼 이제 마지막으로 이를 html로 변환하는 과정이 남았습니다.
뷰어 패널 오른쪽 아래의 아이콘을 클릭합니다. 그러면 아래와 같이 메뉴가 나타납니다.



StackEdit HTML 변환


여기서 <> 모양의 아이콘이 바로 html로 변환해 주는 단추입니다. 클릭해 봅시다.



StackEdit 변환된 HTML 코드


네, html로 변환된 코드가 보이시나요~? Ctrl+C로 복사하면 이제 클립보드에 여러분의 마크다운 문법으로 작성한 글의 html 코드가 복사 됩니다.


마크다운 문법은 기본적으로 html를 지원하므로 바로 확인해 볼 겸 왼쪽의 에디터 패널에 붙여 넣어 보죠.



StackEdit HTML 코드 확인


네, 오른쪽 뷰어 패널에 변화가 없는걸 보니, html 코드로 잘 변환이 된 것을 알 수 있네요. 이와 같이 StackEdit을 통해 변환된 html 코드를 이제는 여러분의 블로그 글 작성란(HTML)에 붙여 넣으시면 된답니다.

# 마치며

오늘은 StackEdit을 이용하여 마크다운 문법으로 작성된 글을 html로 변환하는 과정을 차근차근 살펴 보았습니다. 실제로 웹 상에 html 변환과 편집 등 다양한 기능을 제공하는 마크다운 툴은 여러가지가 있지만 저는 오로지 html 변환 기능만 사용하기 때문에 StackEdit을 쓰고 있습니다.

실제로 StackEdit도 에디터 페널에서 편집을 하면 그 결과를 바로 뷰어 패널을 통해서 확인할 수 있지만 한글 호환성이 좋지가 않아 저는 글을 쓸 때에는 그냥 Sublime Text 3를 쓰고 있습니다. 여러분은 여러분 취향에 맞게 다양한 툴들의 장단점을 알아보시고 사용하시면 되겠죠~?ㅎㅎ 그럼 오늘은 이만 줄이도록 하겠습니다~

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