WriteMonkey 리뷰 05. 마크업 문법 익히기+ 블로그 포스팅

마크업, 마크다운이란?

WriteMonkey는 글자에 색깔을 입힐 수도 없고 밑줄을 긋거나 굵게 만들 수도 없는 "생짜 텍스트", 즉 플레인텍스트(plain text)를 다루는 프로그램이죠. 하지만 아주 기본적인 서식 정도는 어떤 ‘약속’을 통해서 표현할 수 있습니다.

예를 들어 글자를 굵게 만들기 위해서 html 태그에서는 <b>굵게</b>와 같이 표현하거나 …. 또는 <strong>굵게</strong> 등과 같이 표현했는데요. 이렇게 써놓은 소스 자체를 읽으라고 누구에게 준다면 읽다가 뭔가 걸리적거리는 느낌을 받게 되죠. < > 태그 표시가 지저분해 보입니다. 하지만 MarkDown 문법에서는 **굵게** 와 같이 앞뒤에 별표 두 개씩을 넣어주어 이것을 강조 표시라고 약속하여 사용합니다. 복잡하고 보기싫은 html 태그를 대신해 쓰자는 생각이 마크업 문법의 취지입니다. 일단 **굵게** 와 같이 써놓고 나중에 변환하면 실제로 굵게 처럼 글자가 바뀌면서 html 태그를 직접 적용한 것과 똑같은 효과를 갖게 되는 거죠.

이런 방식은 많은 장점이 있습니다. 일단 변환하기 전에도 **굵게** 라는 모양 자체가 그리 전체 본문에서 이질감이 없고 읽을 만하다는 거죠. 영어를 전혀 모르는 누군가가 <strong>굵게</strong>이라고 써놓으면 그게 무슨 의도인지 눈치채기가 힘들죠… 그러나 **굵게**라는 표현은 누가봐도 눈에 띄라고 해당 단어를 강조해놓은 것처럼 보입니다. 따라서 마크업 문법을 활용하면 기본적으로 html 태그보다 쓰기 쉽다는 장점도 있겠지만, 변환하기 전 상태에서도 가독성에 무리가 없어서 누구라도 의도를 짐작하며 본문을 읽어내려갈 수 있는 이점이 있습니다. 물론 복잡한 태그로 구현하는 기능은 <html> 태그를 사용하면 될 일입니다.

마크업 언어 중에 가장 인기있는 것은 "MarkDown" 언어/문법이 되겠습니다. 이것의 변형 버전도 존재하는데, 혹시
아주 자세히 공부하기 원하는 분은 다음 두 링크를 참조해주세요.

마크다운 태그 기본 배우기

블로그 글 쓸 때 가장 많이 쓰는 서식이 있습니다. 보통은 블로그에 가서, 글쓰기 버튼을 누르고, 이지웍 에디터에서 제공하는 글자 크기, 글자색, 굵게, 기울임 등등의 버튼을 마우스로 눌러가며 글을 쓰게 되지요. 하지만 제일 자주 쓰는 건 글자를 굵게 만드는 것, 글자를 기울여 쓰는 것, 중간중간 소제목을 본문보다 큰 글씨로 박아넣는 것, 텍스트에 링크를 거는 것, 인용문을 표시하는 것 정도가 아닐까 합니다. 가장 자주 쓰는 몇 가지 서식을 표현하는 방법만 체득하면 WriteMonkey를 이용해서 순식간에, 그리고 아주 깔끔하고 빠른 형식으로 이런 서식이 적용된 마크다운 문서를 만들 수 있습니다.

문법 참조 도움말

WriteMonkey에서 F1을 누르면 각종 단축키가 뜨는데 이 때 오른쪽 아래의 markup rules 를 클릭하면 마크업 언어 관련 문법을 간단히 정리한 화면을 볼 수 있습니다. 가끔 생각이 안 날 때 호출해서 활용하면 됩니다.

굵게, 기울임

  • 본문을 쓰다가 굵은 글씨로 강조하고 싶은 경우 **앞뒤로 별표**를 두 개씩 넣어주세요.
  • 본문을 쓰다가 굵은 글씨로 강조하고 싶은 경우 앞뒤로 별표를 두 개씩 넣어주세요.
  • 본문을 쓰다가 기울인 이탤릭 글씨로 쓰고 경우 *앞뒤로 별표*를 하나씩 넣어주세요.
  • 본문을 쓰다가 기울인 이탤릭 글씨로 쓰고 경우 앞뒤로 별표를 하나씩 넣어주세요.

제목 단계 구분

이미 전 강좌에서 실습한 내용입니다만, 각 소제목(Headings)은 가장 간단하게 #(샵) 기호로 정의합니다. 엔터Enter 치고 맨 앞 줄에서, #이 한 개면 가장 큰 단위의 제목, ## 두 개면 그 다음 단계의 제목… 이런 식으로 레벨을 부여할 수 있습니다.

#첫 단계
##두 번째 단계
### 세 번째 단계

링크 걸기

이것도 꼭 알아두세요. 링크는 해당 텍스트를 대괄호로 감싼 뒤에 띄어쓰기 없이 소괄호로 이어서 주소를 써주는 방식입니다.

(변환전) [네이버](http://naver.com)

(변환후) 네이버

그런데 새 창으로 무조건 뜨게 하는 ‘타겟’ 지정은 불가능합니다. 굳이 반드시 새 창으로 떠야 한다.. 면 다시 html 태그를 사용해서 <a href="http://naver.com" target=_blank>네이버</a> 와 같이 써야 하는데, 뭔가 이제 마크다운 문서답지 않고 지저분해지는 거죠. 저는 사실 모든 링크가 새 창으로 뜨는 게 좋아요. 동일한 블로그에서 페이지 넘김이나 메뉴를 클릭할 때라면 모를까 본문에 등장하는 링크는 새 창으로 떠야 기존에 읽던 본문으로 돌아오거나 계속 참조하기 쉽기 때문이죠. 그래서 이 문제를 워드프레스 플러그인을 사용하여 해결했습니다.

리스트

글 쓰다보면 무언가 항목으로 열거해야 할 때가 자주 옵니다. html 태그에서는 <li>, <ol> 태그 같은 걸 사용해서 표현하는데, Markdown 문법에서는 더 간단합니다. 우선 간단한 리스트 아이템은 엔터 두 번 쳐서 새로 시작하는 줄 만들고, 맨 앞에 -(마이너스 기호) 쓰고, 한 칸 공백 후 기입하고 엔터치는 방식으로 계속 기입하면 됩니다.

(변환전)

– 사과
– 바나나
– 포도

(변환후)

  • 사과
  • 바나나
  • 오이

숫자 리스트도 간단하게 1. 2. 3. 과 같이 숫자+마침표 쓰고 이어서 나열해주면 됩니다. 이 때 내가 3. 2. 1. 순서로 쓰더라도 실제로는 숫자 순서대로 증가하며 표시됩니다. 그래서 100 가지 아이템을 순서대로 기입해야 하는 상황에서 단순히 앞에 계속 1. 만 표시하면서 열거하다가 중간에 새로 아이템을 삽입해도 어차피 출력될 때 등장하는 순서대로 번호가 매겨질테니 모든 숫자를 다시 정렬해서 수정해야 할 필요가 없어 좋습니다.

(변환전)

  1. 사과
  2. 포도
  3. 오이

(변환후)

  1. 사과
  2. 포도
  3. 오이

인용

인용은 >(꺽쇄 기호) 표시로 합니다. 엔터 치고(한 번반 쳐도 됨) 새 줄 만든 후 맨 앞에 > 한 번 쓰고 공백 하나 준 다음에 써내려가면 인용(blockquote)으로 적용되어 나타납니다. 보통 블로그에서는 인용에 관한 태그 처리가 CSS에 서식으로 작성되어 있습니다. 들여쓴다든지, 색깔이 바뀐다든지 등등이요. >> 꺽쇄를 두 번 쓰면 인용 안에서 다시 인용하는 것으로 처리된다고 생각하면 됩니다.

(변환전)

> 인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.

(변환 후)

인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.인용문입니다.

문단 나눔 유의사항

마크다운 문서에서는 엔터를 여러 번 쳐도 그만큼 줄 바꿈이 되지 않습니다. 한 줄 이상의 문단 쓰기 뒤에 여러 번 엔터를 쳐서 공백을 만들어도 서식을 적용하여 복사(Ctrl + Shift + F)하여 블로그 쓰기 창에 붙여넣기(Ctrl + V) 해보면 문단 사이에 단 한 줄의 공백만 적용된 것을 확인할 수 있습니다. 따라서 여러분이 글을 쓰면서 편의상 문단과 문단을 멀리멀리 떨어뜨려 놓아도 서식을 적용하여 복사 후 다른 곳에 붙여넣기 하면 문단과 문단 사이에 한 줄의 공백만을 둔 채로 전체 글이 아름답게 조정될 것입니다. 그런데 티스토리 같은 국산 블로그툴에서

태그를 고려해주지 않아서 모든 문단이 다닥다닥 붙어버리는 사태가 생기기도 합니다. 가끔은 정말로 내가 원해서 더 넉넉한 공백을 사이에 두고 싶은데 어떻게 해야 할까요? 아래 예시를 잘 보면서 마크다운 문법에서 문단 나눔을 어떻게 적용하는지 잘 파악하고 필요에 따라 본문을 잘 구성해서 사용하시기 바랍니다.

  • (1) 문단과 문단 사이에 공백은 한 줄만 인정된다. 여러 번 엔터를 쳐도 서식을 적용하여 복사하면 한 줄로 변환된다.

  • (2) 문단과 문단 사이에 공백이 없이 붙여 있으면 끌어당겨 한 문단으로 만들어 버리므로 주의할 것.

  • (3) 가로 넓이보다 적은 한 문장과 한 문장 사이에도 위 (1), (2)의 사항은 적용된다. 즉, 엔터를 두 번 이상 쳐서 떨어진 짧은 두 개의 문장은 서식적용 복사해서 붙여넣기 시 한 줄의 공백을 두고 정리되어 출력되고, 엔터를 한 번만 쳐서 구분한 두 개의 짧은 문장은 붙여넣으면 한 줄로 이어붙여져 출력되는 것.

  • (4) 문단과 문단 사이에 단 한 번의 줄바꿈을 원하거나, 문단 안에서 줄만 한 번 바꿔서 이어쓰고 싶을 때(같은 얘기),
    태그를 사용하거나 아니면 줄 바꿈 엔터 직전에 공백을 2회 이상 입력해주면 가능하다. (두 번째 방법이 더 깔끔해서 추천!)

  • (5) 짧은 문장이면서 한 줄씩 구분하고 싶을 때는 차라리 항목 기호를 달아 표현하는 게 보기에도 좋아요. 마크다운에서는 깔끔하게 엔터 두 번 치고 빈 줄의 맨 앞에 -(마이너스 기호)를 쓰고 한 칸 띈 후 글을 작성하면 자동으로 리스트 항목으로 표현합니다.

(변환전)
– 마크다운 문서에서는 엔터를 여러 번 쳐도 그만큼 줄 나눔이 되지 않습니다.
– 마크다운 문서에서는 엔터를 여러 번 쳐도 그만큼 줄 나눔이 되지 않습니다.

(변환후)
– 마크다운 문서에서는 엔터를 여러 번 쳐도 그만큼 줄 나눔이 되지 않습니다.
– 마크다운 문서에서는 엔터를 여러 번 쳐도 그만큼 줄 나눔이 되지 않습니다.

  • (6) 정말 아무 글도 없는 상태에서 상하로 여백을 주고 싶은 경우에는
    태그 외에는 답이 없습니다. 저는 그냥 블로그에 붙여넣고 다시 읽으면서 위지웍 에디터에서 엔터 치면서 읽기 좋게 정리하는 편입니다.

페이지 브레이크

페이지 나눔 효과랄까, 수평선 태그라고 보면 되겠죠. html 태그에서 <hr> 태그로 표현되는 수평선 삽입이 마크다운에서 가능합니다. (저는 자주 사용하지는 않아요..)

방법은 간단하게 엔터 두 번 치고, 빈 줄의 맨 앞에서
— (마이너스 기호 세 번), 또는 +++ 플러스 기호 세번, 또는 ***(별표 세 번) 치고 엔터 치는 방식으로 ~ 만들어주시면 됩니다. 그럼 아래와 같이 수평선 태그가 삽입되는 거죠. 주의할 건 위에서도 말했지만 문단 나눔이 되고 나서 적용해야 한다는 겁니다. 글 쓰다가 엔터 한 번만 쳐서 줄 바꾸고 마이너스 기호 세 번 쓰면 수평선이 들어가는 대신에 해당 문단에 이어쓰기 되거나 다른 태그가 적용될 수 있습니다.

+++

이미지 넣기

WriteMonkey에서 당연하게도 본문 중간에 이미지를 삽입하는 건 불가능하죠. 메모장 프로그램에 그림 삽입이 불가능한 걸 생각해보세요. 하지만 마크다운 문법으로 외부 이미지를 출력하는 건 가능합니다. 단, 외부 이미지 주소를 알고 있어야 합니다. ![대체텍스트](이미지주소) 와 같은 형식으로 구현하는데요. 기존의 텍스트 링크 방식 앞에 느낌표(!) 하나만 추가해주면 이미지로 인식하는 겁니다. 여기서 대체텍스트(Alt text)란 보통 이미지 위에 마우스를 올려두면 노란 풍선으로 나타나는 이미지에 대한 설명 텍스트를 의미합니다.

(변환전)
![원숭이](http://lh4.ggpht.com/rajaram.sethuraman/R4YhWBoReXI/AAAAAAAABUQ/DzwHPbWAJL4/s288/white-face-monkey-1.jpg)

(변환후)
원숭이

그래서 사실 이런 텍스트만 편집하는 프로그램으로 그림이나 동영상이 자주 등장하는 글을 작성하기가 상당히 까다롭습니다. 본문에 들어가는 그림이 100장인데 매번 외부 주소를 붙여넣는 방식으로 이 작업을 한다고 생각해보세요. 제 생각엔 그림/동영상 위주의 멀티미디어를 활용하는 블로그 포스팅을 주로 하시는 분은 마크다운 문서로 글을 완성하기보다는 그냥 소제목과 개요 단계까지만 WriteMonkey에서 작업하고 이후에 그림 삽입+본문 정리 작업은 블로그 쓰기 도구를 이용해서 직접 업로드/삽입/링크하는 게 훨씬 편한 거 같아요. 저는 WriteMonkey에서 기본적인 뼈대를 모두 작성한 뒤에 워드프레스 Flickr 플러그인으로 본문에 이미지를 삽입하고 있습니다.

+++

이제 작성한 글을 올리고 활용해봅시다. 마크다운으로 작성한 글은 문법만 잘 지켜서 작성했다면 매우 편리하게 이용할 수 있습니다. 간단하게 몇 줄의 인사, 첨부파일 회신 .. 등등의 작업이야 그냥 지메일 사이트에서 바로 하는 게 훨씬 낫지만 어느 정도 길이가 되는 글이면서 일목요연하게 작성해야 하고, 또 쓰면서 집중해야 하는 글은 모두 WriteMonkey에서 마크다운 형식으로 작성하여 완성한 후 지메일 본문에 붙여넣기 해서 발송하고 있습니다.

마크다운으로 작성한 글 올리기

워드프레스나, 지메일에 붙여넣기

WriteMonkey에서 작성한 글을 지금 내가 보는 그대로 복사할 때는 전체선택(Ctrl + A) – 복사(Ctrl + C)한 후, 붙여넣기 할 곳으로 이동하여 해당 위치에 붙여넣기(Ctrl+V)하면 됩니다.

하지만 위에서 설명한 마크다운 문법이 제대로 변환되어 표현되도록 하고 싶을 때는 굳이 전체선택할 필요없이 WriteMonkey에서 바로 서식적용 복사(Ctrl + Shift + F) 기능을 이용하여 클립보드에 복사한 뒤에, 붙여넣기 할 곳으로 이동하여 해당 위치에 붙여넣기(Ctrl+V)하세요. 글의 일부만 서식적용 복사하고 싶을 때는 마우스로 선택 후 같은 동작을 수행해도 됩니다.

크롬 브라우져에서는 서식없이 붙여넣기를 단축키 Ctrl +Shift + V 를 통해 기본 지원하고 있습니다. 즉, 서식을 적용해서 복사했더라도 크롬에서 Ctrl + V 를 누르는 대신에 Ctrl + Shift + V 를 누르면 다시 plain text 그대로 붙여넣기됩니다. ..

붙여넣은 후 실제 최종 단계에서 어떻게 표시되는가는 해당 블로그의 CSS 적용에 따라 다를 수 있습니다. # 큰 제목 으로 표현된 어떤 내용은 실제 서식을 적용하여 붙여넣으면 <h1> 태그가 붙게 되는데, H1 단계를 어떤 크기로, 어떤 색깔로 표시할 것인지는 블로그의 서식 파일이 결정합니다.

지금 여러분이 읽고 계시는 이 블로그 글도 모두 마크다운을 활용하여 WriteMonkey에서 작성된 것입니다.

아이폰에서 마크다운 활용하기

저는 WriteMonkey에서 마크다운 형식으로 작성해서 그냥 txt파일 확장자 그대로 드롭박스 Notes 라는 폴더에 쌓아두고 있습니다. 이 폴더가 드롭박스에 있기 때문에 아이폰으로 접근해서 다양한 연동 작업이 가능해집니다. 특히 자주 하게 되는 건 아이폰에서 지원하는 깔끔한 텍스트 에디터로 집에서 쓰던 글을 이어읽거나 수정하거나 추가 작성하는 일이지요. 응용하기에 따라 아이폰에서 이 텍스트 파일을 가공해서 금방 PDF 로 바꾸어 이메일 전송한다든지.. 에버노트에 저장한다든지 등등의 작업을 PC보다 간편하게 할 수도 있습니다.

Nebulous Notes (아이폰/아이패드)

PC에서 작업한 글을 이동 중에는 Nebulous Notes 앱을 이용해서 아이폰/패드에서 수정하고 고쳐 씁니다. 드롭박스 전체 폴더에 접근하기 / 기존 파일의 이름변경이나 복사, 이동, 삭제 기능 / 마크다운 미리 보기와 커스터 CSS 가능 / 에버노트 보내기(플레인 텍스트) / 마크다운으로 이메일 보내기 등등 유용한 기능을 제공합니다. 디자인은 좀 구린데요 ;; 특히 Notepad lines 라고 해서 윈도우 PC에서 작성된 txt 파일의 줄바꿈 문자 코드를 읽어들이고 작성 중에 적용하는 기능이 있습니다. 앱스토어에 드롭박스 기반 텍스트 에디터 앱이 많은데, Mac 이랑만 호환이 되는 경우가 많은데 Nebulous Notes 는 지금까지 문제 없이 잘 사용하고 있습니다.

Drafts (아이폰/아이패드)

최근에 드롭박스에 있는 기존 txt 파일을 읽어들이는 기능도 생겼습니다. 하지만 기존 문서 읽고 고쳐 쓰기엔 Nebulous Notes 를 더 많이 쓰게 되더라구요. Drafts는 처음 시작할 때부터 커서가 깜박이며 바로 글을 전송할 준비를 하고 있기 때문에 신속하고 빠르게 어떤 기록을 남기고 나중에 그 기록을 저장할 곳을 선택하는 방식입니다. 그래서 기존 문서를 계속 편집하는 용도보다는 새로 어떤 내용을 추가하고 쌓아두는 인풋 도구로 좋아요. Dropbox 액션을 이용해서 특정 txt 파일 안에 수시로 내용을 전송하여 하나로 합쳐두었다가 나중에 PC에서 해당 txt 파일을 보며 정리하면 딱이죠.

Writebox 크롬앱 (윈도우 PC+크롬 브라우저)

크롬에서도 마크다운 에디터로 앱을 깔아놓고 글쓰기가 가능합니다. 이 녀석은 드롭박스랑 연동이 가능하고, 프리뷰와 함께 html 다운로드를 제공합니다. 다만 html 로 본문 복사 기능이 없는 게 아쉽더라구요. 하지만 나름 깔끔한 텍스트 에디터이고 … 본인의 컴퓨터가 아닌 경우에 특정 파일에만 접근해서 계속 이어서 고쳐쓸 수 있다는 게 장점이라 하겠어요. (연결과 인증은 필요합니다)

아이폰/스마트폰에서 마크다운 활용하는 영역과 방법은 너무 방대해서 … 앞으로 또 좋은 도구가 나오면 소개하겠습니다.

자, 오늘은 WriteMonkey를 이용해서 마크다운 언어를 이용해서 좀 더 글을 짜임새 있게 작성할 수 있도록 기본 마크다운 문법을 배워보았습니다. 중요한 건 사용해보고 실제로 자꾸 써 보는 일일 거에요. 안 써보면 몰라요~ 왜 이지웍보다 마크다운을 선호하게 되는 건지~!

이제 핵심적인 기능에 대한 리뷰는 끝났다고 생각하구요. 다음 시간부터는 고급 기능이나 사용자 편의 기능, 재밌는 아이디어와 활용을 기준으로 리뷰하겠습니다. 다음 시간에는 색상과 폰트 이야기를 조금 해볼게요.

(2013년 9월에 쓰고, 2014년 12월에 수정하였습니다.)

댓글 남기기