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 아웃풋을 지원하는 게 많이 있습니다. 몇 가지 규칙만 암기하면 아주 순식간에 큰 제목, 소제목에 따라 내용을 구분하고, 일목요연하게 항목을 리스트로 나열하고, 심지어 표까지 표시하는 깔끔한 이메일을 쓸 수 있어요. 책이나 논문을 쓸 때도 응용할 수 있는 건 물론이고요.. 본격적인 워드프로세서가 물론 좋지만.. 간단한 텍스트 편집기로 기본적인 서식을 적용할 수 있다는 점에서 활용 가능성이 높습니다.
일단, MarkDown이 html 코드를 완벽히 대체하지는 못합니다. 유튜브나 사진 위주로 블로깅을 하시나요? 그럼 안 배우시는 게 낫습니다. 하지만, "글"을 많이 쓰신다면, 공부해보시길 추천합니다. 인터넷에 글 쓰는 데 필요한 최소한의 html코드를 MarkDown으로 거의 표현할 수 있거든요.
유의할 점은,
- <table> 태그처럼 블록 형식 안에 포함된 마크다운 문법은 적용이 되지 않아요..
- 하지만 <span> 태그 안에 포함된 마크다운은 그대로 적용됩니다.
html 태그 만들 때 < > 같은 문자들이 태그 만드는 데 사용됩니다. 그런데.. < 문자 자체를 표시하고 싶을 때는 어떻게 해야 할까요? < 와 같이 코드로 써줘야 <로 표시되게 되지요. 하지만 MarkDown 에서는 코드에 포함된 괄호인지 그냥 본문 중 등장한 괄호인지 판단해서 거의 알아서 출력해주기 때문에 신경쓰지 않아도 됩니다.
일반적인 본문을 쓸 때, 문단은 그냥 워드프로세서에 쓰는 것처럼 쓰면 됩니다. 원래 MarkDown 에서는 한 번 엔터는 그냥 무시하고 한 문단으로 간주해서 붙여버립니다. 하지만 Nebulous Notes에서는 엔터 한 번 치면 html 에서 <br /> 태그 입력한 것처럼 줄을 바꿔주고 있습니다. (사실 더 이게 이해하기 쉽지요..) 따라서 한 문단처럼 보이게 쓰려면 엔터치지 말고 계속 써야 합니다 ;;
이렇게 문단 하나가 끝나고 중간에 빈 줄 하나를 넣고 두 번째 문단을 쓰고 싶을 때에도 그냥 보이는대로 모양을 만들어주시면 됩니다. 엔터 두 번 치고 다음 문단 쓰기를 시작하는 것이지요.
가장 많이 쓰게 되는 서식 중 하나입니다. 제목은 `# 문자로 표현합니다.
# 가장 큰 제목 (H1)
## 두 번째 수준 제목 (H2)
### 세 번째 수준 제목 (H3)
본문 중 인용된 글을 표시하고자 할 때, > 기호를 모든 줄 앞에 써줍니다. 모든 줄 앞에 써줘야 예쁘게 보여요.
예)
> 인용되는 글입니다.
> 인용되는 글의 두 번째 줄.
> 인용되는 글의 세 번째 줄.
위와 같이 쓰면 아래와 같이 표시됩니다.
인용되는 글입니다.
인용되는 글의 두 번째 줄.
인용되는 글의 세 번째 줄.
줄 하나하나마다 엔터치지 않고 그냥 한 문단이 길게 이어져 있는 경우에 문단의 맨 앞에 한 번만 > 기호를 넣어줄 수도 있습니다.
예)
> 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.
> 두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글이 두 번째 문단입니다.
위와 같이 쓰면 아래와 같이 보이게 됩니다.
두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.
두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글의 두 번째 문단입니다. 두 문단으로 구성된 글이 두 번째 문단입니다.
그리고 >> 처럼 꺽쇠 기호를 더하면 들여쓰기 수준이 늘어나게 됩니다. 그리고 인용문 안에서 다른 MarkDown 문법을 중복 적용하는 것도 가능합니다.
예)
> 인용되는 첫 번째 줄입니다.
>> 인용되는 내용 안에서 다시 인용되는 부분입니다.
> (인용 수준을 변경할 때 이렇게 빈 줄 하나 넣어주세요)
> 꺽쇠 한 번만 쓰면 다시 상위 수준으로 표시됩니다.
> ## 큰 제목도 인용 안에서 표시 가능합니다.
위와 같이 쓰면 아래처럼 표시됩니다.
인용되는 첫 번째 줄입니다.
인용되는 내용 안에서 다시 인용되는 부분입니다.
꺽쇠 한 번만 쓰면 다시 상위 수준으로 표시됩니다.
MarkDown으로 숫자 리스트, 블릿 리스트를 표현할 수 있습니다.
일단 그냥 블릿 리스트를 표현할 때는 *별표시, +플러스기호, -빼기 기호 중 아무거나 쓰시면 됩니다.
예)
* 고구마
* 감자
* 옥수수
이렇게 쓰면 아래처럼 나옵니다.
순서대로 숫자가 매겨지는 리스트는 간단하게 숫자랑 점 찍어서 쓰시면 됩니다.
예)
1. 고구마
2. 감자
3. 옥수수
이렇게 쓰면 아래처럼 나옵니다.
숫자 리스트는 숫자를 순서대로 쓰지 않아도 자동으로 순서대로 바뀌어서 표시됩니다. 귀찮으면 숫자 순서 세지 말고 막 쓰세요 ㅋ.
예)
1. 고구마
3. 감자
5. 옥수수
이렇게 쓰면 아래처럼 나옵니다.
그리고 리스트 중간에 엔터를 두 번 치면 아이템의 세로 간격이 벌어집니다.
리스트 안에서 줄을 바꿔서 이어지는 문단을 추가할 때, 새로운 문단 앞에 {tab}문자를 삽입해주세요.
예)
* 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.
{tab} 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.
* 두 번째 리스트가 시작되는 부분..
위와 같이 쓰면 아래처럼 표시됩니다.
두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.
리스트 안에서 인용을 할 때는 왼쪽 정렬선을 맞추기 위해서 {tab}문자를 넣어주세요.
예)
* 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다. 두 문단으로 구성된 글을 인용합니다.
{tab} > 인용되는 부분.
{tab} > 인용되는 부분.
* 두 번째 리스트가 시작되는 부분..
위와 같이 쓰면 아래처럼 나옵니다.
인용되는 부분.
인용되는 부분.
간혹 숫자와 마침표로 맨 처음 문장을 시작해야 할 때가 있습니다. 하지만 그냥 쓰면 리스트로 인식되는 문제가 있죠.
예를 들어,
1988. 서울올림픽.
이렇게 쓰면, 실제로는 아래처럼 나오죠.
즉, 1988을 숫자 리스트 형식으로 보고 1번부터 자동으로 시작하도록 바꿔버리죠. 그래서 1988. 을 그대로 표현하고 싶을 때에는 마침표 앞에 \ 문자를 추가해주세요 \ 문자는 형식을 무시하고 문자 그대로 표시하게 합니다.
1988\. 서울올림픽.
위와 같이 쓰면
1988. 서울올림픽.
이렇게 잘 나오게 됩니다.
원래 MarkDown 문법에서는 html 코드를 그대로 보여주고 싶을 때, 간단하게 {tab} 문자를 앞에 추가해서 인덴트 넣은 다음 그 상태에서 쓰는 코드는 그대로 표시하도록 합니다. 하지만 Nebulous Notes 에 적용된 MMD에서는 이 방법이 안 먹히네요. 그래서 키보드 왼쪽 위, 숫자키 1 왼쪽에 있는 역방향 강세기호(`)(=backtick)를 앞 뒤로 써주어서 코드 문자가 코드로 인식되지 않고 문자 그대로 인식되도록 해주는 방법밖에 없는 거 같습니다. 사실 어떤 면에서는 보이지 않는 탭 문자를 삽입하는 것보다 더 안전한(?) 방법일 수도 있고요.
`<table><tr><td></td></tr></table>`
위와 같이 쓰면 아래처럼 나옵니다.
<table><tr><td></td></tr></table>
*** 별표 세 개는 수평선으로 삽입됩니다.
MarkDown 은 링크를 쉽게 생성합니다.
[링크걸 문구](http://주소)
예)
[네이버](http://naver.com)
이렇게 쓰면, 아래처럼 나타납니다.
물론, 상대주소도 가능합니다.
예)
[소개페이지](/about/about.htm)
그리고 매번 주소를 쓰는 대신 키워드를 참조하는 방식으로 링크도 가능하죠.
[구글로 갑니다][구글]
일단 이런 식으로 본문에 써 준 다음, 본문 맨 아래라든지..본문 중 아무 곳에나 자리 잡고 각 키워드에 해당하는 주소를 정리해줍니다. 이 주소를 참조하도록 정리하는 내용은 실제 출력되는 문서에는 표시되지 않습니다. 그리고 키워드는 대소문자를 구분하지 않습니다.
[구글]: http://google.com/
그럼 아까 썼던 글에 링크가 "구글"로 걸리고, 키워드 "구글"이 http://google.com/ 을 가리키므로 아래와 같이 링크가 생성되지요.
그리고 링크되는 문구 자체가 키워드일 때는 대괄호를 내용없이 한 번만 더 붙여주면 됩니다.
[구글][]
이렇게 쓰면 "구글"이 링크되는 문구 자체이면서 키워드까지 겸하게 되지요.
키워드는 빈 칸이 있어도 되니까 사람 이름을 포함해서 좀 길게 써도 좋습니다.
키워드를 사용하는 방식은 같은 링크가 반복될 경우 편하다는 장점도 있지만, 더 중요한 것은 MarkDown 문서의 읽기를 방해하지 않으면서 링크 정보를 따로 다른 곳에 몰아서 보관할 수 있다는 것입니다.
가장 많이 사용하게 될 기호가 아닐까 싶습니다.
*이탤릭* : 이렇게 별표 하나 사이에 두면 이탤릭체로 표현됩니다.
이탤릭
**볼드** : 이렇게 별표 두 개 사이에 두면 굵은 볼드체로 표현됩니다.
볼드
* 별표는 _ (언더바)로 대체 가능합니다. 즉, 언더바 두 개 사이에 두면 별표 두 개와 마찬가지로 굵은 글자로 표현됩니다.
__굵은 글자로__ 표현.
굵은 글자로 표현.
별표나 언더바는 \ 역슬래시 기호 뒤에 쓰면 있는 모습 그대로 표현됩니다. 또한, 앞뒤로 스페이스(공간)가 있을 때에도 본래 모습으로 표현됩니다.
글에 밑줄을 치는 MarkDown은 없기 때문에, 불가피하게 <u> 와 </u> 사이에 넣어서 표현해야 합니다. 그러나 이 태그는 프로그램 태그의 느낌 없이 원래의 '읽기 가독성'을 보존하겠다는 취지에 어긋나는 것 같네요.
사진 하나 넣으려고 할 때 html 태그가 상당히 번거롭습니다. MarkDown 문법에서는 그림이나 사진 삽입 태그를 아래와 같이 사용합니다.
사진경로는 http:// 로 시작하는 사진파일 경로 전체를 쓰셔도 되고, title 지정되어 있으면 같은 서버 경로에서 호출해도 됩니다.
먼저, 링크 주소 자체를 클릭할 수 있도록 하려면, 간단하게 <기호와 > 기호 사이에 넣어주기만 하면 됩니다.
이렇게만 쓰면 아래처럼 표시되는 것이죠.
이메일 주소도 꺽쇠 안에 넣어만 주세요.
<smith@gmail.com>
아래처럼 클릭할 수 있게 됩니다. (기본 메일 클라이언트로 연결)
MarkDown 문법에 사용되는 기호를 있는 그대로 출력하고 싶을 때가 있습니다. 예를 들어 # 마크를 그냥 쓰면 실제로는 H1 제목으로 출력되기 때문에 이 기호를 그대로 출력하고 싶다면 기호 앞에 \ 문자를 써주면 됩니다.
앞에 \ 문자를 쓰는 순간 문법 기능으로 쓰이는 대신 기호 모습 그대로 출력되는, 다시 말해서 MarkDown 문법에서 주요하게 사용되는 기호는 다음과 같습니다.
\ (역방향 슬래시) ... 따라서 역방향 슬래시를 그대로 표현하려면 역방향 슬래시 기호를 두 번 쓰면 됩니다. \\ 이렇게요.
` (backtick = 제2강세 악센트 기호)
* 별표
_ 언더바
{ } 중괄호
[ ] 대괄호
( ) 소괄호
# 우물정자
+ 플러스기호
- 마이너스 기호
. 마침표
! 느낌표