StackEdit 사용하기



안녕하세요~ 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 Main
StackEdit 메인 화면


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


StackEdit Editor
StackEdit 에디터 화면


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


StackEdit Make New Doc
StackEdit 새 문서 만들기


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


StackEdit New Doc
StackEdit 빈 페이지


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


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


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


StackEdit Test Doc
StackEdit 테스트 문서


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


StackEdit Convert to html
StackEdit HTML 변환


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


StackEdit Converted HTML code
StackEdit 변환된 HTML 코드


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


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


StackEdit HTML Code Check
StackEdit HTML 코드 확인


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

# 마치며

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

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