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 메인 화면


메인 화면에서 상단의 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를 쓰고 있습니다. 여러분은 여러분 취향에 맞게 다양한 툴들의 장단점을 알아보시고 사용하시면 되겠죠~?ㅎㅎ 그럼 오늘은 이만 줄이도록 하겠습니다~