단상, 그러나 짧지 않은...

마크다운을 사용한 뒤로는 글쓰기가 상당히 편해졌다. 나는 글을 쓸 때 글의 내용뿐만 아니라 글의 배치까지 상당히 신경을 쓴다. 또 중요한 단어를 강조하거나 내부링크와 외부링크를 아주 많이 사용한다. 이렇다 보니 글 내용을 작성하는 시간 보다 글에 마크업을 입히는 시간이 상당히 오래 걸린다.

이렇게 오랜 시간 작업을 해서 글을 올린 뒤 다시 텍스트큐브의 미리보기 기능을 이용해서 다시 배치를 잡고 또 마크업을 다시한다. 이런 마크업 작업이 끝나면 글을 읽으면 태그로 사용할 단어를 뽑아낸다. 따라서 아무리 간단한 글이라고 해도 보통 한시간 이상 걸린다. 그런데 이런 글을 쓰는 시간이 절반 이하로 줄었다.

이렇게 시간을 줄일 수 있는 첫번째 이유는 바로 마크다운 포매터 덕이다. 생각의 흐름을 끊지 않고 글을 작성할 수 있고 읽기 쉽고 쓰기 쉽다. 입력한 글과 브라우저가 최종적으로 랜더링한 글의 차이가 많지 않기 때문이다.

두번째 이유는 며칠 전 블로그에 올린 팁 덕분이다. 마크다운만으로 글을 입력하면 최종 렌더링된 결과를 확인할 필요가 없다. 입력한 글과 렌더링된 글에 큰 차이가 없기 때문이다. 그러나 마크다운에서 지원하지 않는 것들은 태그로 입력하기 때문에 최종 렌더링 된 화면과 입력한 글의 차이가 있다.

지금까지는 마크다운으로 입력하면서 렌더링된 결과를 알기 위해 계속해서 텍스트큐브의 미리보기를 이용했다. 그런데 지금은 편집기에서 바로 렌더링된 결과를 확인할 수 있기 때문에 텍스트큐브의 미리보기를 이용하는 시간이 줄었다.

아무리 좋다고 해도 쓸 사람은 쓰고 말 사람은 말기 때문에 마크다운을 굳이 남에게 권하지는 않는다. 다만 써보면 그 철학에 빠지고 읽기 쉽고 쓰기 쉬운 매력에 푹 빠질 수 있다. 시간이 나면 이전에 번역한 마크다운 문서를 기반으로 완전한 사용자 길잡이를 만들어 공개할 생각이다. 이렇게 마크다운에 공을 들이는 이유는 그만한 가치가 있기 때문이다.

예전에 터치웹폰으로 블로그에 글을 올리려고 한적이있다. 그런데 결국 포기했다. 그 이유는 위지윅 편집기는 동작하지 않았다. 원래 HTML을 직접입력해서 글을 작성했지만 작은 화면에서 태그를 입력할 수 없었다.

그런데 마크다운을 사용하면 이런 문제를 쉽게 해결할 수 있다. 그 이유는 마크다운은 간단한 구두점만으로 태그를 입력할 수 있기 때문이다. 참고로 마크다운은 시각 장애인도 아주 유용하게 사용한다고 한다.

HTML을 모르면 마크다운을 사용하자

참고로 이 글은 아이팟 터치로 작성한 것이다.

텀블을 사용하면서 얻은 소득 중 하나는 자연스럽게 글을 쓰면서 글을 마크업할 수 있는 마크다운 포매터를 알았다는 것이다. 마크다운 포매터를 사용하면 위지윅 편집기를 사용할 필요가 없을 정도로 간다히 HTML 문서를 만들 수 있다. 또 마크다운 포매터의 철학 자체가 읽기 쉽고 쓰기 쉽다이기 때문에 마크다운을 사용해서 작성한 문서는 HTML로 브라우저가 랜더링한 문서와 원본 문서가 큰 차이가 없다.

따라서 지난 며칠 간 틈나는 대로 마크다운 문법을 번역했다. 번역하면서 느낀 점은 쓰면 쓸 수록 마음에 드는 포매터라는 점이다. 생각의 흐름을 끊지 않고 원하는 마크업을 하면서 글을 쓸 수 있다. 텀블에서 글쓰기가 많아진 이유는 이 마크다운 포매터 때문이다.

또 텍스트큐브에서도 마크다운 포매터를 지원하기 때문에 블로그에서도 마크다운 포매터를 이용해서 글을 쓰고 있다. 아울러 댓글에서도 마크다운 포매터를 사용할 수 있도록 플러그인까지 만들었다. 완료된 마크다운 포매터에 대한 문서는 다음 링크에서 확인할 수 있다.

마크다운 포매터

읽고 바로 번역한 문서라 아직 다듬어 지지 않았다. 그러나 HTML에 대한 이해가 있는 사람이라면 어떤 의미인지 쉽게 알 수 있을 것으로 생각한다. 다만 이 문서는 시간이 나는대로 다시 수정 보완 작업을 걸처 최종적으로 블로그에 공개할 생각이다.

HTML을 모르면? 마크다운을 사용하자!

자동링크

마크다운은 URL과 전자우편 주소를 만들기 위해 간단한 형식을 지원한다. 간단히 URL과 전자우편 주소를 꺽쇠괄호로 감싸면 된다. 이것이 의미하는 바는 URL과 전자우편 주소의 실제 주소를 표시하면서 클릭 가능한 링크를 만들고 싶다면 다음처럼 하면 된다는 것을 의미한다:

<http://example.com/>

마크다운은 이 것을 다음처럼 바꾼다:

<a href="http://example.com/">http://example.com/</a>

전자우편 주소에 대한 자동 링크도 비슷하지만 전자우편 주소는 스팸 봇의 접근을 막기위해 임의의 10진, 16진 인코딩을 한다는 점이 차이가 있다. 예를들어 마크다운은 다음처럼 처리한다:

<address@example.com>

을:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

로 바꾸다. 이 것을 브라우저에서 렌더링 하면 address@example.com이라는 전자우편 링크로 바뀐다.

(이 항목 인코딩 기법은 사실 많은 전자우편 수집 봇을 바보로 만든다. 그러나 이 방법이 모든 봇에게 동작하는 것은 아니다. 이 것은 하지 않는 것 보다 낫지만 이런 방법으로 전자우편 주소를 공개하는 것은 결국에 스팸을 받게 될 것으로 보인다.)

이스케이프

마크다운 문법에서 특별한 의미를 갖는 문자를 사용하기 위해 역 슬래시 이스케이프를 사용할 수 있다. 예를들어 HTML의 <em> 태그 대신에 별표 문자를 포함시키려면 별표 앞에 역 슬래시를 두면 된다.

\*별표 문자\*

마크 다운은 다음과 같은 문자에 대해 이스케이프를 지원한다:

\   역 슬래시
`   역 따옴표
*   별표
_   밑줄
{}  중괄호
[]  대괄호
()  둥근괄호
#   해시
+   더하기
-   빼기
.   마침표
!   느낌표

이미지

이미 알고 있는 것처럼 일반 텍스트 문서에 이미지를 둘 수 있는 문법을 만드는 것은 상당히 어렵다.

마크다운은 링크와 비슷한 형식 - 인라인과 참조 - 의 이미 형식을 사용한다.

인라인 이미지 형식은 다음과 같다:

![Alt 설명](/path/to/img.jpg)

![Alt 설명](/path/to/img.jpg "제목")

대괄호 다음에 느낌표: !;가 이어지며, 이미지의 ALT 속성을 포함한다. 이어 중괄호가 나오며 중괄호에 이미지의 URL이나 경로를 넣는다. 마지막으로 옵션으로 작은 따옴표나 큰 따옴표로 인용한 TITLE 속성이 이어진다.

참조 형식의 이미지 문법은 다음과 같다:

![Alt text][id]

여기서 “id”는 참조하는 이미지의 이름(ID)이다. 이미지 참조는 링크 참조와 같은 형식을 사용해서 정의한다.:

[id]: url/to/image  "추가적인 제목"

위에서 알 수 있듯이 마크다운은 이미지 크기를 지정하는 문법이 없다는 것을 알 수 있다. 이미지의 크기가 중요하다면 간단히 일반적인 HTML <IMG> 태그를 사용할 수 있다.

강조

마크다운은 별표()와 밑줄()을 강조 문자로 다룬다. 하나의 *나 _로 감싼 문자열은 HTML EM 태그로 감싸게 된다. 두개의 *나 _로 감싸면 HTML STRONG 태그로 감싸게 된다. 예:

*별표*

_밑줄_

**별표 두개**

__밑줄 두개__

이 것은 다음과 같은 결과를 만든다:

<em>펼표</em>

<em>밑줄</em>

<strong>별표 두개</strong>

<strong>밑줄 두개</strong>

좋하하는 형식을 사용하면 된다. 유일한 제한은 열고 닫을 때 같은 문자를 사용해야 한다는 것이다.

강조는 단어 중간에도 사용할 수 있다:

un*frigging*believable

만약 공백을 *나 _로 감싸면 별표와 밑줄 문자로 처리된다.

임의의 위치에서 별표와 밑줄을 표시하기 위해 역슬래시로 처리하면 된다:

\*이 문장은 별로로 감싸여 집니다\*

링크

마크다운은 인라인과 참조의 두가지 형식의 링크를 지원한다.

두 형식에서 링크 문자열은 [대괄호]로 구분한다.

인라인 링크를 만들기 위해 링크 문자열을 대괄호로 닫고 이어 링크를 둥근괄호로 닫는다. 둥근괄호에 링크 URL과 링크에 대한 설명을 추가할 수 있다. 예를들어:

이 것은 인라인 링크에 대한 [예](http://example.com/ "제목")입니다.

[이 링크](http://example.net/)는 제목 속성이 없습니다.

이 예는 다음처럼 바뀐다:

<p>이 것은 인라인 링크에 대한 <a href="http://example.com/" title="제목">예</a>입니다.</p>

<p><a href="http://example.net/">이 링크</a>는 제목 속성이 없습니다.</p>

만약 같은 서버의 로컬 리소스를 참조하려면 상대 경로를 사용해야 한다:

자세한 것은 내 [소개](/about/)페이지를 보세요.

참조 형식의 링크는 두개의 대괄호를 사용하며 링크를 구분하기 위해 제목을 대괄호에 둔다.:

이 것은 참조 형식의 [예][id]입니다.

옵션으로 대괄호를 공백으로 분리할 수 있다:

이 것은 참조 형식의 [예] [id]입니다.

그리고 문서내에서 다음과 같은 방법으로 링크를 참조할 수 있다:

[id]: http://example.com/  "추가 제목은 여기에"

이 것은:

대 괄호에는 링크를 구분하는 ID를 포함해야 한다(옵션으로 최대 세개의 공백으로 들여 쑬 수 있다); 콜론이 이어 지며, 하나 이상의 공백(또는 탭)이 이어진다. 그리고 마지막으로 링크에 대한 URL이 이어진다. 옵션으로 링크에 대한 제목을 제정할 수 있다. 이 제목은 작은 따옴표나 큰 따옴표로 인용하거나 괄호로 감싸야 한다. 다음 세개의 링크는 모두 같다:

[foo]: http://example.com/  "추가 제목은 여기에"
[foo]: http://example.com/  '추가 제목은 여기에'
[foo]: http://example.com/  (추가 제목은 여기에)

주의: 링크 타이틀 구분에 작은 따옴표를 사용할 수 없는 버그가 Markdown.pl 1.0.1에 있다.

옵션으로 링크 URL은 작은 괄호로 감쌀 수 있다:

[id]: <http://example.com/>  "추가 제목은 여기에"

또 제목 속성을 다음 행에 두고 공백이나 탭으로 들여쓸 수 있다. 긴 URL은 이렇게 하는 것이 보기에 더 좋다:

[id]: http://example.com/longish/path/to/resource/here
    "추가 제목은 여기에"

링크 ID는 마크다운 처리 과정 중 링크를 만드는데 사용되며 HTML 출력에서 제거된다.

링크 ID의 이름은 문자, 숫자, 공백, 구두점으로 구성된다 - 그러나 이들은 대소문자를 구분하지는 않는다. 예를 들어 다음 두개의 링크:

[link text][a]
[link text][A]

는 같다.

함축적 링크 이름을 사용하면 링크 ID를 생략할 수 있다. 이 경우 링크의 제목 그 자체가 ID로 사용된다. 빈 대괄호를 사용하면 된다. - 예: google.com 사이트를 링크하는 “Google” 라는 단어를 링크하기 위해 ㅏㄴ단히 다음처럼 사용할 수 있다:

[Google][] 그리고 다음 처럼 링크를 정의한다:

[Google]: http://google.com/

링크 이름에 공백을 포함할 수 있기 때문에 링크 제목으로 여러 단어를 사용해도 잘 동작한다:

자세한 정보를 위해 [Daring Fireball][]를 방문하세요.

그리고 다음처럼 링크를 정의한다:

[Daring Fireball]: http://daringfireball.net/

링크 정의는 마크다운 문서 어디에든 둘 수 있다. 읽기 쉽도록 문단 바로 아래에 둘 수 있다. 그러나 원한다면 일종의 주석처럼 문서 끝에 모두 모아 두어도 된다.

이 것은 실제 동작하는 참조 링크의 예이다:

[Yahoo] [2]나 [MSN] [3] 보다 [Google] [1]로부터 10배 이상의 전송량을 얻는다.

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

함축적 이름을 사용하면 다음처럼 쓸 수 있다:

[Yahoo][]나 [MSN][] 보다 [Google][]로부터 10배 이상의 전송량을 얻는다.

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

위의 예는 모두 다음과 같은 HTML 출력을 만든다:

<p><a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
나 <a href="http://search.msn.com/" title="MSN Search">MSN</a> 보다 <a href="http://google.com/"
title="Google">Google</a>로부터 10배 이상의 전송량을 얻는다.</p>

비교를 위해 마크다운의 인라인 링크 형식을 사용해서 쓴 같은 문장이 있다:

[Yahoo](http://search.yahoo.com/ "Yahoo Search")나
[MSN](http://search.msn.com/ "MSN Search") 보다 [Google](http://google.com/ "Google")로부터 10배 이상의 전송량을 얻는다. 원시 HTML은 234자이다.

참조 형식의 링크는 쓰기 쉬운 것은 아니다. 중요한 점은 참조 형식의 링크로 문서의 가독성이 훨씬 올라간다는 것이다. 위의 예를 비교해 보면 참조 링크를 사용하면 문단은 81자 더 길다. 인라인 형식으로는 176자이다. 원시 HTML에서 문자 수가 더 늘어난다.

마크다운의 참조 형식 링크로 소스 문서의 가독성이 올라가며 브라우저로 랜더링한 최종 출력과 거의 비슷하게 된다. 문단의 마크업에 관련된 메타 데이타를 이동할 수 있도록 함으로서 글을 쓰면서 자연스런 흐름을 방해받지 않고 링크를 추가할 수 있다.

마크다운을 배우는 것이 좋습니다. 나중에 블로그에 따로 설명하겠지만 마크다운을 사용하면 글 쓰는 것이 정말 편해집니다. 또 HTML의 복잡하며 어지러운 문법을 몰라도 됩니다. 아울러 태그를 달기 위해 블럭을 지정하는 일도 필요없습니다. 물론 마크다운은 기본적으로 서비스형 블로그에서는 사용할 수 없습니다. 그러나 진정한 마이크로 블로그라고 할 수 있는 텀블에서는 사용할 수 있고 설치형인 경우 포매터를 바꿈으로서 사용할 수 있습니다. 일단 현재까지 번역된 문서를 올림니다.

마크다운 포매터 - 목차

HTML을 모르면? 마크다운을 사용하자!

가끔 신문기사를 읽다 드는 생각 중 하나는 왜 언론사는 태그를 사용하지 않을까?하는 의문이다. 간단한 B태그도 사용하지 않고 출처를 밝힐 수 있는 A 태그도 사용하지 않는다. 강조를 나타내는 B 태그는 기사를 객관적으로 볼 수 없도록 할 수 있기 때문이라고 생각할 수 있지만 링크조차 하지 않는 것은 조금 의외다.

언론사의 기사가 이렇기 때문에 내가 해당 언론사의 글을 그대로 가져와 조금만 마크업을 하면 내 기사가 언론사의 기사 보다 훨씬 상단에 뜬다. 구글에서 검색해 보면 알 수 있지만 언론사의 기사가 검색 결과 상위에 뜨는 때는 거의 없다. 대부분 언론사 기사를 퍼가서 올린 블로그의 글이 먼저 뜬다. 그 이유는 검색엔진은 본문에 사용된 태그에 의해서도 문서의 가중치를 바꾸기 때문이다.

언론사에서 태그를 사용하지 않는 이유는 사실 나도 모른다. 그러나 언론사 기자들도 대부분 컴퓨터와 관련이 없는 사람이 많고 따라서 HTML 태그를 모르는 것이 아닌가 하는 생각도 든다. 또 태그를 입력하려고 하면 글만 쓰는 것 보다 시간이 오래 걸리기 때문이라는 생각이 든다. 만약 이런 이유때문에 글을 쓸 때 태그를 사용하지 않는 것이라면 나는 마크다운 포매터를 사용할 것을 강력히 권한다.

써보면 알 수 있지만 일반 글을 쓰는 것처럼 글을 쓰면서 HTML 태그를 입힐 수 있다. 오늘 올린 시국성명도 마크다운 형식으로 작성했다. 일부 HTML 태그를 사용했지만 글에 해당되는 부분은 모두 마크다운 형식을 사용했다. 그러나 이렇게 마크다운 형식을 사용해도 일반 텍스트 문서를 만드는 것과 큰 차이가 없다.

읽기 쉽고 쓰기 쉽게

이것이 마크다운의 철학이다. 그래서 마크업을 하기 위해 따로 블럭을 지정할 필요가 거의없다. 일반 글쓰기를 하듯 내려쓰면 된다. 이렇다 보니 블로그 댓글에도 마크다운이 동작하도록 플러그인을 작성했다. 예전에는 BBCode를 사용했었는데 BBCode보다 확실히 편하다. 또 마크다을 편하게 입력하기 위해 자판도 세벌식 최종에서 다시 세벌식 390으로 빠꿨다.

HTML을 모르면? 마크다운을 사용하자!