MARKDOWN SYNTAX 쉽게 배우기

Nebulous Notes에 적용된 MultiMarkDown을 중심으로.

출처: http://daringfireball.net/projects/markdown/syntax

소개

철학

예전에 홈페이지 만들기 유행할 때 html 태그 가르쳐주는 책이나 사이트 참 많았는데 말이에요. 하지만 역시 쉽지 않죠. 링크 하나 달려면 <a href="http://google.com" target=_blank>http://google.com</a> ... 이렇게 복잡해서야 어디 편하게 쓰겠어요?

요즘은 이메일이나 네이버 카페에 글 쓸 때 편집기 메뉴가 떠서 코드를 잘 몰라도 편리하게 사진도 넣고, 링크도 걸고, 본문의 색상과 글자 크기를 쉽게 바꿀 수 있다구요?

하지만 이런 방식은 글을 쓸 때 내용보다는 스타일에 자꾸 시선을 뺏기게 합니다. 전 모니터 전체가 까만 배경에서 글을 쓰거나, 아이패드에서도 화면 전체가 하얀 배경인 상태에서 글을 쓰는 걸 좋아해요. 최근에는 Nebulous Notes 로 드롭박스와 싱크해서 글쓰기를 하고 있는데 아주 즐거운 경험입니다! 메뉴 버튼 하나 없는 그런 화면에 내용만 타자기 치듯 입력하는 기분. 이런 상황에서 내용에만 집중하며 글을 쓰되, 꼭 필요한 몇 가지 스타일이 생기면 따로 메뉴로 가서 클릭할 필요 없이 빠르고 쉽게 표시할 수 없을까요? 바로 MarkDown 마크업 방식의 아이디어가 여기서 시작됩니다.

예를 들어 html 태그는 굵은 글씨를 표시할 때 <strong>단어</strong> 과 같이 표시하는데, 이 소스를 그냥 인쇄해버리면 보기 싫고.. 내용을 읽다가 갑자기 코드가 등장하니까 문서가 잘못된 인상을 줍니다. 하지만 MarkDown 언어는 **단어**와 같이 표시하죠. 변환하면 굵은 글씨이지만 있는 그대로 인쇄해도 글자 앞 뒤로 별표가 있으면 누가 봐도 강조되는 느낌으로 읽게 됩니다. 이처럼 직관적이죠. 즉, 누가봐도 쉽게 의도가 이해되면서, 컴퓨터 코드라는 느낌을 주지 않고, 배우기 쉬운 방식이라 하겠습니다.

아이패드/아이폰앱에서 메모장처럼 간단하게 메모를 작성할 수 있는 앱이 많이 있는데, 이 중에서 MarkDown 아웃풋을 지원하는 게 많이 있습니다. 몇 가지 규칙만 암기하면 아주 순식간에 큰 제목, 소제목에 따라 내용을 구분하고, 일목요연하게 항목을 리스트로 나열하고, 심지어 표까지 표시하는 깔끔한 이메일을 쓸 수 있어요. 책이나 논문을 쓸 때도 응용할 수 있는 건 물론이고요.. 본격적인 워드프로세서가 물론 좋지만.. 간단한 텍스트 편집기로 기본적인 서식을 적용할 수 있다는 점에서 활용 가능성이 높습니다.


HTML 병행

일단, MarkDown이 html 코드를 완벽히 대체하지는 못합니다. 유튜브나 사진 위주로 블로깅을 하시나요? 그럼 안 배우시는 게 낫습니다. 하지만, "글"을 많이 쓰신다면, 공부해보시길 추천합니다. 인터넷에 글 쓰는 데 필요한 최소한의 html코드를 MarkDown으로 거의 표현할 수 있거든요.

유의할 점은,

- <table> 태그처럼 블록 형식 안에 포함된 마크다운 문법은 적용이 되지 않아요..

- 하지만 <span> 태그 안에 포함된 마크다운은 그대로 적용됩니다.


자동으로 적용되는 특수문자들

html 태그 만들 때 < > 같은 문자들이 태그 만드는 데 사용됩니다. 그런데.. < 문자 자체를 표시하고 싶을 때는 어떻게 해야 할까요? &lt; 와 같이 코드로 써줘야 <로 표시되게 되지요. 하지만 MarkDown 에서는 코드에 포함된 괄호인지 그냥 본문 중 등장한 괄호인지 판단해서 거의 알아서 출력해주기 때문에 신경쓰지 않아도 됩니다.


블록 요소(Block Elements)

문단 쓰기와 줄바꿈

일반적인 본문을 쓸 때, 문단은 그냥 워드프로세서에 쓰는 것처럼 쓰면 됩니다. 원래 MarkDown 에서는 한 번 엔터는 그냥 무시하고 한 문단으로 간주해서 붙여버립니다. 하지만 Nebulous Notes에서는 엔터 한 번 치면 html 에서 <br /> 태그 입력한 것처럼 줄을 바꿔주고 있습니다. (사실 더 이게 이해하기 쉽지요..) 따라서 한 문단처럼 보이게 쓰려면 엔터치지 말고 계속 써야 합니다 ;;

이렇게 문단 하나가 끝나고 중간에 빈 줄 하나를 넣고 두 번째 문단을 쓰고 싶을 때에도 그냥 보이는대로 모양을 만들어주시면 됩니다. 엔터 두 번 치고 다음 문단 쓰기를 시작하는 것이지요.


제목(Headers)

가장 많이 쓰게 되는 서식 중 하나입니다. 제목은 `# 문자로 표현합니다.

# 가장 큰 제목 (H1)

가장 큰 제목 (H1)

## 두 번째 수준 제목 (H2)

두 번째 수준 제목 (H2)

### 세 번째 수준 제목 (H3)

세 번째 수준 제목 (H3)


인용(Blockquotes)

본문 중 인용된 글을 표시하고자 할 때, > 기호를 모든 줄 앞에 써줍니다. 모든 줄 앞에 써줘야 예쁘게 보여요.

예)

> 인용되는 글입니다.

> 인용되는 글의 두 번째 줄.

> 인용되는 글의 세 번째 줄.

위와 같이 쓰면 아래와 같이 표시됩니다.

인용되는 글입니다.

인용되는 글의 두 번째 줄.

인용되는 글의 세 번째 줄.

줄 하나하나마다 엔터치지 않고 그냥 한 문단이 길게 이어져 있는 경우에 문단의 맨 앞에 한 번만 > 기호를 넣어줄 수도 있습니다.

예)

> 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.

> 두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글이 두 번째 문단입니다.

위와 같이 쓰면 아래와 같이 보이게 됩니다.

두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.

두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글이 두 번째 문단입니다.

그리고 >> 처럼 꺽쇠 기호를 더하면 들여쓰기 수준이 늘어나게 됩니다. 그리고 인용문 안에서 다른 MarkDown 문법을 중복 적용하는 것도 가능합니다.

예)

> 인용되는 첫 번째 줄입니다.

>> 인용되는 내용 안에서 다시 인용되는 부분입니다.

> (인용 수준을 변경할 때 이렇게 빈 줄 하나 넣어주세요)

> 꺽쇠 한 번만 쓰면 다시 상위 수준으로 표시됩니다.

> ## 큰 제목도 인용 안에서 표시 가능합니다.

위와 같이 쓰면 아래처럼 표시됩니다.

인용되는 첫 번째 줄입니다.

인용되는 내용 안에서 다시 인용되는 부분입니다.

꺽쇠 한 번만 쓰면 다시 상위 수준으로 표시됩니다.

큰 제목도 인용 안에서 표시 가능합니다.


리스트(Lists)

MarkDown으로 숫자 리스트, 블릿 리스트를 표현할 수 있습니다.

일단 그냥 블릿 리스트를 표현할 때는 *별표시, +플러스기호, -빼기 기호 중 아무거나 쓰시면 됩니다.

예)

* 고구마

* 감자

* 옥수수

이렇게 쓰면 아래처럼 나옵니다.

순서대로 숫자가 매겨지는 리스트는 간단하게 숫자랑 점 찍어서 쓰시면 됩니다.

예)

1. 고구마

2. 감자

3. 옥수수

이렇게 쓰면 아래처럼 나옵니다.

  1. 고구마
  2. 감자
  3. 옥수수

숫자 리스트는 숫자를 순서대로 쓰지 않아도 자동으로 순서대로 바뀌어서 표시됩니다. 귀찮으면 숫자 순서 세지 말고 막 쓰세요 ㅋ.

예)

1. 고구마

3. 감자

5. 옥수수

이렇게 쓰면 아래처럼 나옵니다.

  1. 고구마
  2. 감자
  3. 옥수수

그리고 리스트 중간에 엔터를 두 번 치면 아이템의 세로 간격이 벌어집니다.

리스트 안에서 줄을 바꿔서 이어지는 문단을 추가할 때, 새로운 문단 앞에 {tab}문자를 삽입해주세요.

예)

* 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.

{tab} 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.

* 두 번째 리스트가 시작되는 부분..

위와 같이 쓰면 아래처럼 표시됩니다.

두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.

리스트 안에서 인용을 할 때는 왼쪽 정렬선을 맞추기 위해서 {tab}문자를 넣어주세요.

예)

* 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.

{tab} > 인용되는 부분.

{tab} > 인용되는 부분.

* 두 번째 리스트가 시작되는 부분..

위와 같이 쓰면 아래처럼 나옵니다.

인용되는 부분.

인용되는 부분.

간혹 숫자와 마침표로 맨 처음 문장을 시작해야 할 때가 있습니다. 하지만 그냥 쓰면 리스트로 인식되는 문제가 있죠.

예를 들어,

1988. 서울올림픽.

이렇게 쓰면, 실제로는 아래처럼 나오죠.

  1. 서울올림픽.

즉, 1988을 숫자 리스트 형식으로 보고 1번부터 자동으로 시작하도록 바꿔버리죠. 그래서 1988. 을 그대로 표현하고 싶을 때에는 마침표 앞에 \ 문자를 추가해주세요 \ 문자는 형식을 무시하고 문자 그대로 표시하게 합니다.

1988\. 서울올림픽.

위와 같이 쓰면

1988. 서울올림픽.

이렇게 잘 나오게 됩니다.


코드 블록(Code Blocks)

원래 MarkDown 문법에서는 html 코드를 그대로 보여주고 싶을 때, 간단하게 {tab} 문자를 앞에 추가해서 인덴트 넣은 다음 그 상태에서 쓰는 코드는 그대로 표시하도록 합니다. 하지만 Nebulous Notes 에 적용된 MMD에서는 이 방법이 안 먹히네요. 그래서 키보드 왼쪽 위, 숫자키 1 왼쪽에 있는 역방향 강세기호(`)(=backtick)를 앞 뒤로 써주어서 코드 문자가 코드로 인식되지 않고 문자 그대로 인식되도록 해주는 방법밖에 없는 거 같습니다. 사실 어떤 면에서는 보이지 않는 탭 문자를 삽입하는 것보다 더 안전한(?) 방법일 수도 있고요.

`<table><tr><td></td></tr></table>`

위와 같이 쓰면 아래처럼 나옵니다.

<table><tr><td></td></tr></table>


가로선(Horizontal Rules)

*** 별표 세 개는 수평선으로 삽입됩니다.


링크 서식

링크들(Links)

MarkDown 은 링크를 쉽게 생성합니다.

[링크걸 문구](http://주소)

예)

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

이렇게 쓰면, 아래처럼 나타납니다.

네이버

물론, 상대주소도 가능합니다.

예)

[소개페이지](/about/about.htm)

그리고 매번 주소를 쓰는 대신 키워드를 참조하는 방식으로 링크도 가능하죠.

[구글로 갑니다][구글]

일단 이런 식으로 본문에 써 준 다음, 본문 맨 아래라든지..본문 중 아무 곳에나 자리 잡고 각 키워드에 해당하는 주소를 정리해줍니다. 이 주소를 참조하도록 정리하는 내용은 실제 출력되는 문서에는 표시되지 않습니다. 그리고 키워드는 대소문자를 구분하지 않습니다.

[구글]: http://google.com/

그럼 아까 썼던 글에 링크가 "구글"로 걸리고, 키워드 "구글"이 http://google.com/ 을 가리키므로 아래와 같이 링크가 생성되지요.

구글로 갑니다

그리고 링크되는 문구 자체가 키워드일 때는 대괄호를 내용없이 한 번만 더 붙여주면 됩니다.

[구글][]

이렇게 쓰면 "구글"이 링크되는 문구 자체이면서 키워드까지 겸하게 되지요.

구글

키워드는 빈 칸이 있어도 되니까 사람 이름을 포함해서 좀 길게 써도 좋습니다.

키워드를 사용하는 방식은 같은 링크가 반복될 경우 편하다는 장점도 있지만, 더 중요한 것은 MarkDown 문서의 읽기를 방해하지 않으면서 링크 정보를 따로 다른 곳에 몰아서 보관할 수 있다는 것입니다.


강조하기(Emphasis)

가장 많이 사용하게 될 기호가 아닐까 싶습니다.

*이탤릭* : 이렇게 별표 하나 사이에 두면 이탤릭체로 표현됩니다.

이탤릭

**볼드** : 이렇게 별표 두 개 사이에 두면 굵은 볼드체로 표현됩니다.

볼드

* 별표는 _ (언더바)로 대체 가능합니다. 즉, 언더바 두 개 사이에 두면 별표 두 개와 마찬가지로 굵은 글자로 표현됩니다.

__굵은 글자로__ 표현.

굵은 글자로 표현.

별표나 언더바는 \ 역슬래시 기호 뒤에 쓰면 있는 모습 그대로 표현됩니다. 또한, 앞뒤로 스페이스(공간)가 있을 때에도 본래 모습으로 표현됩니다.

글에 밑줄을 치는 MarkDown은 없기 때문에, 불가피하게 <u> 와 </u> 사이에 넣어서 표현해야 합니다. 그러나 이 태그는 프로그램 태그의 느낌 없이 원래의 '읽기 가독성'을 보존하겠다는 취지에 어긋나는 것 같네요.


이미지 삽입(Images)

사진 하나 넣으려고 할 때 html 태그가 상당히 번거롭습니다. MarkDown 문법에서는 그림이나 사진 삽입 태그를 아래와 같이 사용합니다.

![사진이름](사진경로)

사진경로는 http:// 로 시작하는 사진파일 경로 전체를 쓰셔도 되고, title 지정되어 있으면 같은 서버 경로에서 호출해도 됩니다.


링크 걸기

먼저, 링크 주소 자체를 클릭할 수 있도록 하려면, 간단하게 <기호와 > 기호 사이에 넣어주기만 하면 됩니다.

<http://daum.net>

이렇게만 쓰면 아래처럼 표시되는 것이죠.

http://daum.net

이메일 주소도 꺽쇠 안에 넣어만 주세요.

<smith@gmail.com>

아래처럼 클릭할 수 있게 됩니다. (기본 메일 클라이언트로 연결)

smith@gmail.com

MarkDown 에 사용되는 기호 표시

MarkDown 문법에 사용되는 기호를 있는 그대로 출력하고 싶을 때가 있습니다. 예를 들어 # 마크를 그냥 쓰면 실제로는 H1 제목으로 출력되기 때문에 이 기호를 그대로 출력하고 싶다면 기호 앞에 \ 문자를 써주면 됩니다.

앞에 \ 문자를 쓰는 순간 문법 기능으로 쓰이는 대신 기호 모습 그대로 출력되는, 다시 말해서 MarkDown 문법에서 주요하게 사용되는 기호는 다음과 같습니다.

\ (역방향 슬래시) ... 따라서 역방향 슬래시를 그대로 표현하려면 역방향 슬래시 기호를 두 번 쓰면 됩니다. \\ 이렇게요.

` (backtick = 제2강세 악센트 기호)

* 별표

_ 언더바

{ } 중괄호

[ ] 대괄호

( ) 소괄호

# 우물정자

+ 플러스기호

- 마이너스 기호

. 마침표

! 느낌표