맥 사용 중 언제 어디서나 마크다운(Markdown)을 HTML로 변환하기

2013.01.19 00:36    작성자: ONE™

들어가며

요즘 마크다운(Markdown)으로 문서 작성하는데 푹 빠져있습니다. 처음엔 웹에 올릴 글을 빠르게 작성할 수 있다고 해서 마크다운을 익히기 시작했는데 이제는 간단한 할 일 관리(FoldingText)에서 일기를 적는 용도(DayOne)까지 그 활용처를 점점 넓혀나가고 있습니다. 

마크다운을 처음 배울 때만 해도 Markdown ProMou, Byword 같은 마크다운 편집 프로그램에 전적으로 의존했는데, 최근에는 존 그루버(John Gruber)가 배포하고 있는 펄(Perl) 스크립트를 OS X의 오토메이터(Automator)를 이용해 서비스 항목으로 만들고 일반적인 텍스트 편집기나 웹 인터페이스를 불문하고 바로 마크다운 문법으로 글을 작성한 후 필요시 HTML로 변환하는 작업흐름을 사용하고 있습니다.

아마 블로그를 찾는 대부분의 방문자들에게는 크게 매력적인 글은 되지 않을 것 같습니다만 최근에 마크다운을 배우고 계시거나 저처럼 마크다운 의존도가 높으신 분들은 나름 유용하게 활용할 수 있을 듯 합니다. 혹은 마크다운을 사용하지 않으시더라도 OS X 자체적으로 펄 스크립트를 쉽게 실행할 수 있는 이런 방법이 있구나.. 하고 참고삼아 보셔도 좋을 것 같습니다.

구현

1. 마크다운이 지원되지 않는 OS X 텍스트 편집기에서 마크다운 문법으로 글을 작성 ▼

2. 필요시 서비스(Services)나 키보드 단축키를 이용해 HTML로 변환

3. 혹은 웹 인터페이스에서 바로 변환


적용 방법

1. 응용 프로그램 폴더에 있는 Automator 앱을 실행합니다. ▼

2. 도큐멘트 유형 선택 화면에서 '서비스(Services)'를 선택합니다. ▼

3. 오토메이터 좌측 상단의 검색창에 '셸'를 입력하면 아래 '셸 스크립트 실행'이 나타나는데 이것을 오토메이터 창의 오른편으로 드래그해주십시오. ▼

4. 서비스가 받는 항목은 '텍스트'로, 선택 항목 위치는 '모든 응용 프로그램' 지정합니다. 그리고 '출력이 선택한 텍스트를 대치함' 문구 앞에 있는 상자를 체크해주신 후 셸 창에서 /usr/bin/perl을 선택해주십시오. ▼

* 셸 스크립트 실행 영역에 넣을 펄 스크립트는 마크다운을 만든 존 그루버 홈페이지에서 받으실 수 있습니다. (➥ 링크: Dairing Fireball: Markdown)  ▼

* Markdown 1.0.1.zip 파일을 내려받은 후 압축을 풀면 안에 Markdown.pl 파일이 들어 있습니다.  ▼

* 이 파일을 텍스트 편집기에서 여신 후 안에 있는 모든 텍스트를 앞서 오토메이터 셸 스크립트 부분에 붙여 넣어주시면 됩니다.

5. 작성이 완료된 오토메이터 서비스를 적당한 이름으로 저장해 주십시오. ▼

6 이제 맥 어디서나 마크다운 문법으로 작성해주기만 하면 HTML 태그로 바로 변환할 수 있습니다. ▼

* 기존에 적어둔 텍스트를 HTML 코드로 대체하지 않고 단순히 '클립보드'에 집어넣고 싶으신 분들은 다음처럼 서비스를 만들어주시면 됩니다.

* 사실 이번에 소개해 드리는 기능은 ➥ PopClip과 PopClip 웹사이트에서 배포하는 ➥ Markdown 익스텐션으로도 간단하게 구현하실 수 있습니다. 하지만.. 가급적 OS X의 기본 기능을 사용하고, '무료' 솔루션을 추구하는 것이 블로그의 모토인지라... 쿨럭;;

키보드 단축키 지정

앞서 소개해 드린 '➥ 파일에 꼬리표(Label)를 달아주는 서비스를 만들고 키보드 단축키 지정하기' 글처럼 오토메이터로 만든 서비스 항목에 키보드 단축키도 지정해 줄 수 있다는 것도 참고하시면 좋을 것 같습니다.


기타

마크다운 문법으로 작성한 텍스트를 볼 때는 OS X 훑어보기(QuickLook) 플러그인을 사용하시면 편리합니다. (➥ 링크)



참조
• Dairing Fireball: Markdown
• 마크다운을 지원하는 OS X 훑어보기(QuickLook) 플러그인

    
  1. 오오오오 감사합니다 ㅠㅠ

  2. Blog Icon
    Early Adopter

    정말 멋지네요.

    시간이 되신다면 Markdown을 어떻게 배우면 되는지 가이드를 써주시면 아니될런지요...
    저번 글을 보고 Markdown Pro를 받았는데 쓰는 방법을 잘 몰라서 그냥 냅두고 있네요..ㅠ_ㅠ

  3. 딱히 가이드가 필요없을 정도로 문법이 간단한 편인데
    조만간 간단하게나마 마크다운 문법과 활용처등을 정리해서 올리겠습니다. @todo

  4. 오 저도 요새 Wiki보다는 Markdown을 주로 사용해보려고 연습중인데
    티스토리에서도 Markdown을 활용하시네요
    티스토리에서 Markdown을 활용하시는 경우에대해 좀더자세히 알 수 있을까요?

  5. 티스토리 자체적으로는 마크다운을 지원하지 않아서, 원 님이 소개 해주신 HTML로 변환하는 방법을 쓰셔야 할 것 같아요.

  6. 워드프레스나 텀블러(Tumblr)는 마크다운을 바로 지원하는데.. 티스토리는 딱히 직접 연동할 수 있는 방법이 없습니다. 따라서
    1. 마크다운 전용 편집기에서 글을 작성하신 후 HTML 로 내보내기하거나,
    2. MarsEdit 같은 블로그 저작 툴에 마크다운 플러그인을 설치하거나(직접 해보진 않았습니다.)
    3. 아니면 저처럼 그냥 '쌩으로' 마크다운을 입력하고 본문에 소개해드린 방법으로 전환하거나..
    하는 방법들이 있습니다. 근본적으로 티스토리가 마크다운을 지원해주는게 제일 좋은 방법이지만.. 상당히 요원해 보입니다;;

  7. 요즘 한창 마크다운에 빠져있어요. HTML을 사용할 줄 몰라 막막했는데, 마크다운을 통해 글쓰는게 재밌어졌어요.^^

  8. 네, 저도 태그 작업하는 시간을 줄이고 글 내용에만 집중할 수 있어서 얼마나 편한지 모르겠습니다 ;-)

  9. [업데이트]
    기존에 적어둔 텍스트를 HTML 코드로 대체하지 않고 단순히 '클립보드'에 집어넣고 싶으신 분들을 위해 본문 내용 업데이트 했습니다.

  10. Blog Icon
    oldtype

    서비스를 실행시켜도 왜 변환이 되지 않을까요? 시스템 재부팅이 필요하거나 그런지요? 참고로 10.7 라이언 입니다.

  11. 글쎄요.. 10.7 라이언 환경에서도 안 될 이유가 없는데 저도 의아합니다( -_-);;

  12. Blog Icon
    oldtype

    이유는 알 수 없지만 어느 정도 시간이 지난 다음에 실행시켜 보니 잘 되네요. ^^a;;;;

  13. 잘 되신다니 다행이네요^^

  14. Blog Icon
    하늘나무

    아 이건 정말 멋지네요. 함 해보아야겠습니다.

  15. 오옷 요새 아이맥 구입 후에 어떻게든 윈도를 쓰지 않고 하나 하나 아무거나라도 배워보자 하는데, 역시 이 블로그 만큼 알찬 블로그가 있나 싶을 정도예요. 늘 언제나 고맙습니다.

  16. 감사합니다. 꼭 필요한 기능이었어요.

  17. Blog Icon

    으아.. 이렇게도 되는군요; 역시 automator 의 이용법은 참으로 다양합니다;;
    정말 감사드립니다.

  18. 오토메이터 참 편리하겠네요. 고맙습니다. ^^

  19. 오늘도 배우고 갑니다! 감사합니다^^

  20. 왜 그러는지는 모르겠지만 Mou 로 작성한 '표'양식들이 그냥 텍스트로 인식이 되네요ㅎㅎ
    이부분만 따로 HTML로 해야겠어요

  21. 셸이 없는건 뭔가요 ?