wystan's tales

자주 사용되거나 중요하다고 생각되는 Textile 태그들에 대해서는 거의 정리가 끝났네요^^ 그래서 자주 사용하지는 않지만 알아두면 편리한 몇 가지 기능들을 살펴보고 Textile 사용법을 마무리하려 합니다.

먼저 각주(footnote)를 글에 쉽게 넣을 수 있도록 해주는 태그를 알아보지요. 다른 태그들이 그렇듯이 문법은 간단합니다.

이 단어[1]에 대한 설명이 필요합니다.[2]

fn1. 단어의 의미

fn2. 상세한 설명

<p>이 단어<sup class="footnote"><a href="#fn30013461cba499ffc2">1</a></sup>
에 대한 설명이 필요합니다.
<sup class="footnote"><a href="#fn12594461cba49a0004">2</a></sup></p>
<p id="fn30013461cba499ffc2" class="footnote"><sup>1</sup> 단어의 의미</p>
<p id="fn12594461cba49a0004" class="footnote"><sup>2</sup> 상세한 설명</p>

소스가 복잡하네요^^; 우선 화면에 어떻게 표시되는지 볼까요? 시각 효과를 위해 적당히 CSS를 적용했습니다.

대괄호로 둘러싼 숫자에 링크를 걸고 설명이 있는 단락에 책갈피(anchor)를 만드는 방식으로, 각각의 책갈피에는 중복을 방지하기 위해 임의로 생성된 id가 부여됩니다.

그런데 설명이 있는 단락에는 용어 정의가 있는 곳으로 돌아가는 링크가 없답니다. Textile 포럼에 이에 대한 논의가 있는데 간단히 요약하면 용어 정의가 두 번 이상 반복해서 사용될 경우에 문제가 발생할 수 있기 때문에 기능을 제한했다는 얘기더군요. 물론 이렇게 사용되는 경우는 극히 드물겠지만요.

Textile의 각주 기능을 잘 사용하기 위해서는 몇 가지 주의할 점이 있는데 첫 번째가 fn_n. 태그가 각각 하나의 단락(paragraph)으로 이루어진다는 사실입니다. Textile 사용법에 관한 첫 글에서 설명했듯이 각각의 단락을 구분짓는 것이 빈 줄이기 때문에 위의 예처럼 각각의 태그 사이에 빈 줄을 넣어주셔야 합니다.

두 번째는 대괄호 안에 띄어쓰기 없이 숫자를 넣으면 fn_n. 태그가 없어도 무조건 각주로 인식한다는 점입니다. 이해를 돕기 위해 몇 가지 Textile 입력과 화면 출력의 예를 들어보겠습니다.

이[1] 단어[2]에 대한 [3]설명이 필요합니다.[4]

이1 단어2에 대한 [3]설명이 필요합니다.4

즉, 대괄호와 숫자를 그냥 표시하려면 반드시 앞에 띄어쓰기가 있어야 된다는 얘기입니다. 하지만 ‘반드시’라는 조건이 자유로운 표현을 막아서는 안되겠지요. 그래서 대안이 있는데 바로 == 태그입니다. 사실 이 태그를 지금껏 소개하지 않았던 이유는 단 한 가지입니다. 제가 명확하게 이해를 못했기 때문이지요^^;

일단 이 태그는 기본적으로 notextile. 태그처럼 글의 특정 부분을 Textile이 해석하지 않도록 하기 위해 사용됩니다. 차이가 있다면 notextile. 태그처럼 블록을 만들지 않고 인라인 스타일처럼 적용된다는 것이지요. 일단 몇 가지 예를 들어보겠습니다.

*강조* ==*강조*== [*강조*] [==*강조*==]
==h1. Textile _적용_ 금지==
이[1] 단어에==[2]== 관한 설명이[==3==] 필요합니다.
이[1] 단어에 ==[2]== 관한 설명이[==3==] 필요합니다.

강조 *강조* 강조 [*강조*]
h1. Textile _적용_ 금지
이1 단어에==2== 관한 설명이[3] 필요합니다.
이1 단어에 [2] 관한 설명이[3] 필요합니다.

첫 번째 예는 == 태그의 적용 방식을 보여줍니다. * 태그나 _ 태그가 대괄호를 이용해서 태그의 시작과 끝을 표시할 수 있는데 반해 == 태그는 대괄호를 무시한다는 점에 주의해야 합니다. 앞선 글에서 설명했듯이 이 대괄호는 한글을 사용할 때 발생하는 문제점을 해결하는데 사용됩니다. 따라서 == 태그 앞에 띄어쓰기가 없을 경우에는 의도했던 것과는 다른 결과가 발생할 수 있습니다.

세 번째와 네 번째 예에서 이 차이를 분명히 확인할 수 있습니다. 또한 대괄호 안의 숫자에 == 태그를 적용해서 해당하는 부분을 각주로 인식하지 않게 할 수 있다는 사실도 알 수 있지요. 즉, 띄어쓰기 대신 대괄호로 태그의 시작을 표시할 수 있지만 * 태그와는 달리 대괄호도 그대로 화면에 출력해준다는 얘기입니다.

물론 Textile로 문서를 작성할 때 의도하지 않았던 태그가 적용되는 경우는 많지 않습니다. 제가 드는 예는 이런 문제점을 일부러 부각시킨 경우가 대부분이지요. 하지만 일단 문제가 생기고, 해결되지 않는다면 Textile을 계속 사용하기 힘들겁니다. 그래서 == 태그나 notextile. 태그를 적절히 사용하는 것이 중요하지요.

만약 이 두 태그 사용에 어려움을 느낀다면 간단히 다음과 같은 방법을 따르면 됩니다.

“의도하지 않은 태그가 적용될 경우에는 해당 부분을 notextile. 태그로 시작하고 내용은 직접 html 태그를 사용해서 입력한다.”

다시 말씀드리지만 이런 경우는 극히 드뭅니다. 그러니 이런 이유로 Textile의 편리함을 포기해서는 안되겠지요? ^^;

마지막으로 머리글자를 이용한 약어 표기법(acronym)을 알아보겠습니다. 무척 간단하니 예만 봐도 아실겁니다.

CSS(Cascading Style Sheet), XML(eXtensible Markup Language)

<acronym title="Cascading Style Sheet"><span class="caps">CSS</span></acronym>,
<acronym title="eXtensible Markup Language"><span class="caps">XML</span></acronym>

브라우저 화면에 어떻게 표시되는지 한 번 볼까요?

CSS, XML

열심히 입력한 약어에 대한 설명이 안보이네요. 하지만 마우스를 머리글자 위에 올리면 사라졌던 설명이 표시되는 것을 볼 수 있습니다. 바로 html의 <acronym> 태그가 적용되었기 때문이지요. 브라우저에 따라서 이 태그를 보여주는 방식이 다른데 위 예에서는 시각 효과를 위해 다음과 같은 CSS 스타일을 적용시켰습니다.

acronym { border-bottom: 1px dotted #699; cursor: help; }

또한 CSS와 XML이라는 텍스트에는 caps라는 class가 적용되는데, Textile에서는 석 자 이상의 알파벳 대문자가 이어질 경우에 자동으로 이 클래스가 적용됩니다. 글자 간격 같은 스타일을 적용하기 위해서라고 하는데 한글을 사용하는 입장에서는 가뿐히 무시하셔도 좋습니다^^

그러면 이번에는 어떻게 해야 <acronym> 태그가 자동으로 적용되는 것을 방지할 수 있는지 알아볼 차례겠지요? 앞서 설명한 == 태그를 사용하면 간단히 해결됩니다. 알파벳 약어는 앞에 띄어쓰기가 항상 있으니까 특별히 문제될 것도 없지요.

==CSS(Cascading Style Sheet), XML(eXtensible Markup Language)==

CSS(Cascading Style Sheet), XML(eXtensible Markup Language)

이 기능은 알파벳 약어를 사용할 경우에만 적용되지만 약어 설명에는 한글도 쓸 수 있습니다. 아래 약어 위에 마우스를 올리면 확인할 수 있습니다.

CSS, XML

이렇게 해서 Textile 사용법에 관한 글을 모두 마칩니다. 빠진 부분도 있고 대충 넘어간 부분도 있지만 그래도 Textile에 관심을 갖고 찾아오신 분들께 도움이 되었으면 하는 바램입니다.

혹시라도 궁금한 점 있으면 언제든지 댓글이나 메일 주세요~

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어

Textile 사용법에 관한 첫 글에서 여러 가지 블록 설정 태그를 소개했던 적이 있습니다. 바로 아래 문장이지요.

Textile의 블록 설정 태그에는 이외에도 h2. ~ h6. , pre. , bc. , bq.. , fn_n. 등이 있는데 이 태그들에 대해서는 나중에 따로 알아보겠습니다.

그래서 이 태그들을 하나씩 설명해볼까 합니다. 헤드라인을 설정할 때 사용하는 h1. ~ h6. 태그는 특별히 설명할 만한 내용이 없으니 그냥 넘어가고^^; 일반적인 텍스트가 아닌 html 코드를 직접 화면에 표시하는데 사용되는 태그들부터 알아보겠습니다.

당연한 얘기지만 html 문서는 html 태그로 이루어져 있습니다. 우리가 브라우저를 통해 보는 화면은 브라우저가 이 html 태그들을 해석한 결과물이지요. 그런데 이 html 태그를 브라우저가 해석하지 않고 보통의 텍스트처럼 화면에 보여줘야 할 경우도 있습니다. 예들 들어서 이런 경우지요.

<br> 태그와 <br /> 태그 중에서 어느 것이 맞나요?

간단하게 보이지만 사실 이 문장을 표시하려면 html 문서에 아래와 같이 입력해야 한답니다.

<br> 태그와 <br /> 태그 중에서 어느 것이 맞나요?

즉, html 태그를 나타내기 위해 사용하는 왼쪽(<)과 오른쪽 꺽쇠 기호(>)를 각각 < , >로 바꿔줘야 브라우저가 태그로 인식하지 않는다는 얘기지요. 어렵지는 않지만 이렇게 일일이 바꿔주려면 상당히 귀찮습니다.

† < , > 대신 < , > 사용도 가능합니다. 각각 ‘less than’, ‘greater than’을 의미하지요.

그래서 Textile에서는 이런 변환을 쉽게 해주는 세 개의 태그를 고안했는데 각각 @ 태그, pre. , bc. 입니다. 하나씩 설명을 해보지요.

먼저 @ 기호로 어떤 텍스트를 감싸면 그 안에 있는 모든 꺽쇠 문자가 자동으로 변환되고, 텍스트에는 html의 <code> 태그가 적용됩니다. 예를 들어보지요.

@<br>@ 태그와 @<br />@ 태그 중에서 어느 것이 맞나요?

<code>&#60;br&#62;</code> 태그와 <code>&#60;br /&#62;</code> 태그 중에서 어느 것이 맞나요?

html의 <code> 태그는 컴퓨터와 관련된 모든 코드를 표시하기 위해 사용되는데 대부분의 브라우저는 이 태그 안의 문자와 기호를 고정폭 폰트로 출력해 줍니다. 물론 CSS를 이용하면 얼마든지 다른 스타일을 적용시킬 수 있지요.

그런데 <code> 태그 만으로는 여러 줄의 컴퓨터 코드(이하 소스 코드)를 보기 좋게 표현하는데 한계가 있습니다. 브라우저가 소스 코드의 줄바꿈과 띄어쓰기를 무시하기 때문이지요. 그래서 만들어진 html 태그가 <pre> 태그랍니다. 이 태그는 블록을 설정해서 그 안의 모든 내용을 사용자가 입력한 그대로 출력해줍니다. 그러면 <code> 태그와 <pre> 태그를 비교해 볼까요? 위 박스는 html 코드를, 아래 박스는 브라우저 출력을 나타냅니다.

<code>가나다
라마바    사아</code>
<pre>가나다
라마바    사아</pre>

가나다 라마바 사아
가나다
라마바    사아

차이를 아시겠지요? html의 <pre> 태그에 대응되는 Textile 태그가 pre. 태그입니다. pre. 태그는 html의 <pre> 태그처럼 소스 코드의 줄바꿈과 띄어쓰기를 그대로 표현해 주면서 앞서 설명한 @ 태그가 했던 꺽쇠 기호 변환까지 함께 해주므로 무척 편리하답니다. Textile로 입력한 텍스트가 어떻게 html 코드로 변환되는지 예를 들어보겠습니다.

pre. 
<div>
    <p>단락 1</p>
    <p>단락 2</p>
</div>

<pre>
&#60;div&#62;
    &#60;p&#62;단락 1&#60;/p&#62;
    &#60;p&#62;단락 2&#60;/p&#62;
&#60;/div&#62;
</pre>

html 문서에서 소스 코드를 표현할 때에는 보통 <code> 태그와 <pre> 태그를 함께 사용합니다. <pre> 태그가 안의 내용물을 입력한 그대로 출력해 주고, <code> 태그가 그 내용물이 소스 코드라는 것을 알려주는 식이지요. 그래서 이 둘을 결합한 Textile의 bc. 태그가 생겨났습니다. ‘Block Code’라는 말 그대로 소스 코드 블록을 설정하는 태그랍니다. 예를 들어보지요.

bc. <br> 태그와 <br /> 태그 중에서 어느 것이 맞나요?

<pre><code>&#60;br&#62; 태그와 &#60;br /&#62; 태그 중에서 어느 것이 맞나요?
</code></pre>

지금 보시는 이 박스 안의 결과들도 모두 bc. 태그로 작성한 것이랍니다. 그러면 이 태그에도 class와 id를 지정해 볼까요?

bc(someclass#someid). 소스 코드

<pre class="someclass" id="someid"><code class="someclass">소스 코드
</code></pre>

소스 코드를 감싸는 <pre> 태그에는 class와 id가 지정되고 <pre> 태그 안의 <code> 태그에는 class만 지정되는 것을 볼 수 있습니다. 내부의 <code> 태그에 따로 class를 지정할 수 없으므로 그냥 <pre> 태그의 class를 물려받는 방식입니다. id까지 물려받으면 한 문서에 동일한 id 값이 두 개 이상이어서 html 기본 문법에 어긋나니 당연히 안되겠지요.

이제 다른 태그로 넘어가볼까요? bq. 태그와 비슷한 bq.. 태그입니다. 이 태그는 앞서 간단히 소개했던 bq. 태그의 확장판이라고 생각하시면 됩니다. html의 <blockquote> 태그는 인용문을 표현하는데 사용되는데 이 인용문이 하나의 단락(paragraph)일 경우도 있지만 여러 단락으로 이루어진 경우도 많습니다. 그런데 bq. 태그를 사용하면 하나의 단락만 처리할 수 있지요. 예를 들어볼까요?

bq. 첫 번째 인용
두 번째 인용

세 번째 인용

<blockquote>
  <p>첫 번째 인용<br />
  두 번째 인용</p>
</blockquote>
<p>세 번째 인용</p>

물론 <br /> 태그를 사용해서 한 단락으로 처리할 수도 있겠지요. 하지만 ‘의미 있는’ 방법은 아닙니다. 이런 경우에 bq.. 태그가 필요하지요. 이 태그는 이후의 모든 단락을 <blackquote> 태그로 묶어준답니다. 그러면 어떻게 인용문의 끝을 알 수 있을까요? 이 예를 보면 아실겁니다. 아울러 class와 id도 함께 지정해보도록 하지요.

bq(someclass#someid).. 첫 번째 인용
두 번째 인용

세 번째 인용

p. 단락 시작

<blockquote class="someclass" id="someid">
  <p class="someclass">첫 번째 인용<br />
  두 번째 인용</p>
  <p class="someclass">세 번째 인용</p>
</blockquote>
<p>단락 시작</p>

즉, 새 단락이 시작된다는 것을 명시적으로 표현해주면 인용문을 끝내고 새 단락으로 인식하게 됩니다. 또한 bc. 태그와 마찬가지로 <p> 태그가 <blockquote> 태그의 class 지정을 물려받는 것도 확인할 수 있습니다.

간단한 내용을 너무 복잡하게 설명했네요. 이번 글로 Textile 사용법을 마치려고 했는데 다음으로 미뤄야겠습니다. 다음 글에서 각주(foot note) 사용법과 머리 글자를 이용하는 약어 표기법(acronym)을 알아보고 정말 마칠겁니다^^;

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어

Textile에 익숙해진 후로는 직접 html 태그를 입력하는게 한없이 귀찮네요^^; 그래서 브라우저가 아닌 텍스트 에디터로 Textile을 사용할 수 있는 방법을 찾아서 구글을 열심히 뒤졌답니다.

그런데… 검색 능력이 부족해서인지 도움이 될만한 정보가 거의 없더군요. 한참을 헤매다가 직접 방법을 찾아보자는 생각으로 이것 저것 시도해봤습니다.

결국 방법을 알아냈는데… 너무 간단하더군요^^;

먼저 준비물(?)은 다음과 같습니다.

1. php 실행 파일: php 홈페이지에서 다운 받거나 APM을 설치하면 됩니다. APM은 윈도우즈 환경에서 아파치 서버와 PHP, MySQL을 사용할 수 있도록 해주는 패키지인데 오토셋이나 근사모 홈페이지에서 배포판을 구할 수 있습니다.
2. classTextile.php 파일: Textpattern 개발자 페이지에서 최종 버전을 다운받을 수 있습니다.
3. textile_this.php 파일: 다운받거나 아래 설명을 참고해서 직접 작성하면 됩니다.
4. 텍스트 에디터: 외부 명령을 실행하고 그 결과를 받아올 수 있는 텍스트 에디터가 필요합니다. 아크로 에디트, 에디트 플러스 등이 이 기능을 지원합니다.

준비가 끝났으면 다운받은 textile_this.php를 텍스트 에디터로 열어보세요. 파일을 직접 작성하실 분은 아래 내용을 textile_this.php 파일로 저장하면 됩니다.

<?php
include('e:\classTextile.php');
$content = file_get_contents($argv[1]);
$textile = new Textile;
echo $textile->TextileThis($content);
?>

두 번째 줄의 include(‘e:\classTextile.php’); 부분을 다운받은 classTextile.php 파일이 있는 경로에 맞게 각자 수정한 다음 저장하세요.

그 다음 텍스트 에디터의 사용자 도구를 아래 이미지를 참고해서 설정해주면 됩니다. 아크로 에디트의 설정 창을 캡처했는데 다른 에디터 설정도 크게 다르지 않을 겁니다.

‘명령’에 php 실행 파일의 경로를 지정해주고, 첫 번째 인수로 textile_this.php 파일 경로를, 두 번째 인수로 텍스트 에디터에서 현재 작업중인 문서의 경로를 전달하는 것이지요.

명령이 실행되면 php.exe가 첫 번째 인수로 전해진 textile_this.php 파일을 처리하게 됩니다. 먼저 Textile 라이브러리인 classTextile.php 파일을 불러온 다음 두 번째 인수로 전해진 현재 작업중인 문서의 내용을 html 코드로 변환해서 출력하게 됩니다.

마지막으로 텍스트 에디터가 이 출력 결과를 다시 가져옵니다. 위 설정에서 ‘도스 화면 캡처’가 이 부분을 담당하는 옵션이지요.

단축키를 지정해두면 변환 명령을 쉽게 내릴 수 있습니다. 문서 작성 중에 언제라도 단축키만 누르면 작성한 내용이 즉시 html 태그로 변환되어 출력 창에 표시됩니다.

textile_this.php 파일을 수정해서 헤더나 푸터를 가져온다거나 하는 응용도 가능합니다.

html 문서. 이제 Textile로 편하게 작성하세요~^^

리스트와 표 작성은 더 이상 짜증나는 작업이 아닙니다. Textile을 사용하면 간단하게 입력할 수 있거든요.

먼저 순서 없는 리스트(Unordered List)를 만들어 볼까요? 리스트의 각 항목을 * 기호로 시작하면 됩니다. 아래 예처럼요.

* 리스트 항목 1
* 리스트 항목 2
** 리스트 항목 2-1
* 리스트 항목 3

<ul>
  <li>리스트 항목 1</li>
  <li>리스트 항목 2
    <ul>
      <li>리스트 항목 2-1</li>
    </ul>
  </li>
  <li>리스트 항목 3</li>
</ul>

* 기호와 항목 사이가 띄어쓰기 되어있는 것만 주의하시면 됩니다. 중첩된 리스트의 경우는 * 기호를 두 개 써주시면 XHTML 문법에 맞는 html 코드를 만들어 준답니다.

순서가 있는 리스트(Ordered List)도 같은 방법으로 만들 수 있습니다. * 기호 대신 # 기호를 써줘야 한다는 것 빼고요.

그럼 이번에는 순서 있는 리스트에 class, id 속성을 지정해 볼까요? CSS로 리스트의 모양을 조절할 수 있도록 말입니다.

#(someclass#someid) 리스트 항목 1
# 리스트 항목 2
## 리스트 항목 2-1
## 리스트 항목 2-2
# 리스트 항목 3

<ol class="someclass" id="someid">
  <li>리스트 항목 1</li>
  <li>리스트 항목 2
    <ol>
      <li>리스트 항목 2-1</li>
      <li>리스트 항목 2-2</li>
    </ol>
  </li>
  <li>리스트 항목 3</li>
</ol>

리스트를 시작하는 #, * 기호에 class나 id를 괄호 안에 넣어서 붙여주면 된답니다. 중첩된 리스트(리스트 항목 2-1)에는 ##(someclass) 처럼 class나 id를 적용할 수 없지만 아무 문제 없이 CSS를 적용할 수 있습니다. 예를 들어 다음과 같이 CSS를 작성하면 상위 리스트와 중첩된 리스트에 서로 다른 스타일의 항목 번호를 표시할 수 있습니다.

ol.someclass { list-style-type: upper-roman; }
ol.someclass li ol { list-style-type: lower-roman; }

그럼 리스트가 아래와 같이 화면에 표시됩니다.

리스트에 관해서는 더 설명드릴 내용이 없네요. 너무 간단하지요?

그러면 표 작성으로 넘어가볼까요? 일단 간단한 예로 시작하겠습니다.

|1행 1열|1행 2열|1행 3열|
|2행 1열|2행 2열|2행 3열|

<table>
  <tr><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td>2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

리스트와 마찬가지로 너무 쉽습니다. | 기호로 각 항목을 묶어주면 표가 만들어지지요. 그런데 첫 번째 행은 나머지 행에 어떤 자료들이 들어가는지 알려주는 역할을 하는 경우가 많습니다. 그래서 그 행을 헤더로 만들어주면 CSS를 이용해서 표를 훨씬 보기 좋게 꾸밀 수 있지요.

|_. 1행 1열|_. 1행 2열|_. 1행 3열|
|2행 1열|2행 2열|2행 3열|

<table>
  <tr><th>1행 1열</th><th>1행 2열</th><th>1행 3열</th></tr>
  <tr><td>2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

| 기호 다음에 _ 기호와 마침표를 이어서 쓰면 표의 헤더로 인식해서 자동으로 <td> 태그 대신 <th> 태그를 붙여줍니다.

이제 조금 복잡한 테이블을 만들어 보겠습니다. 두 개 이상의 셀을 가로나 세로 방향으로 병합한 테이블이지요.

|1행 1열|1행 2열|1행 3열|
|\2. 2행 1,2열|2행 3열|

<table>
  <tr><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td colspan="2">2행 1,2열</td><td>2행 3열</td></tr>
</table>

|1행 1열|/2. 1,2행 2열|1행 3열|
|2행 1열|2행 3열|

<table>
  <tr><td>1행 1열</td><td rowspan="2">1,2행 2열</td><td>1행 3열</td></tr>
  <tr><td>2행 1열</td><td>2행 3열</td></tr>
</table>

셀을 가로 방향(colspan 태그)으로 병합할 때에는 | 기호 다음에 백슬래시(\)와 병합할 셀의 개수를 이어서 써주면 됩니다. 세로 방향(rowspan)이라면 백슬래시를 그냥 슬래시(/) 기호로 바꿔주시기만 하면 됩니다. 마침표와 띄어쓰기 한 칸을 잊지마세요. 그래야 Textile이 그 셀을 특별한 처리가 필요한 셀이라고 인식한답니다.

표에 자료를 입력했으니 스타일을 입힐 수 있도록 class와 id를 지정해 봐야겠지요? 이렇게 하시면 됩니다.

table(someclass#someid).
|1행 1열|1행 2열|1행 3열|
|2행 1열|2행 2열|2행 3열|

<table class="someclass" id="someid">
  <tr><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td>2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

table 태그에 class와 id를 지정했습니다. 이 table 태그는 p 태그처럼 꼭 필요한 경우가 아니면 생략할 수 있기 때문에 앞선 예에서는 볼 수 없었답니다. 그럼 table 태그는 class, id 지정 말고 또 어떤 경우에 사용할까요?

table{border:1px solid black}.

<table style="border:1px solid black;">

지난 글에서 다루었던 ‘인라인 스타일’을 적용시킬 때에도 사용할 수 있습니다. 물론 ‘의미있는 마크업’을 위해서는 class와 id를 사용하는 것이 좋겠지요. class와 id는 테이블 전체 뿐 아니라 특정한 행이나 셀에도 부여할 수 있습니다.

table(tableclass).
(rowclass). |1행 1열|1행 2열|1행 3열|
|(cellclass). 2행 1열|2행 2열|2행 3열|

<table class="tableclass">
  <tr class="rowclass"><td>1행 1열</td><td>1행 2열</td><td>1행 3열</td></tr>
  <tr><td class="cellclass">2행 1열</td><td>2행 2열</td><td>2행 3열</td></tr>
</table>

그럼 CSS를 이용해서 표를 자유롭게 꾸밀 수 있습니다. 예를 들어서 첫 번째 행의 배경색과 2행 1열의 글자 색을 바꿔보겠습니다.

table.tableclass tr.rowclass { background-color: #aaa; }
table.tableclass tr td.cellclass { color: red; }

아래 표에서 배경색과 글자색이 바뀌는 것을 확인할 수 있습니다. 물론 이 표의 실제 CSS는 조금 더 복잡하지만 배경색과 글자색은 위 CSS 규칙과 동일합니다.

1행 1열	1행 2열	1행 3열
2행 1열	2행 2열	2행 3열

이렇게 해서 Textile로 리스트와 표를 작성하는 법을 알아봤습니다. 개인적으로는 이 부분이 Textile의 편리함을 가장 잘 보여준다고 생각한답니다. 복잡한 표를 제외하고는 그냥 눈에 보이는대로 작성하면 되니까요.

이제 Textile에 관해서 대부분 설명했네요. 다음 글에서 html 코드를 그대로 출력하는 방법과 인용문을 표시하는 방법을 알아보고 몇 가지 기타 태그 사용법을 정리하는 것으로 Textile 사용법에 관한 글을 끝맺을까 합니다.

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어

Textpattern은 업로드된 이미지를 쉽게 불러올 수 있도록 해주는 자체적인 태그를 갖고 있습니다.

바로 <txp:article_image />와 <txp:image /> 태그지요. 하지만 외부 이미지를 불러올 때처럼 직접 img 태그를 써야 할 경우도 있는데 Textile을 사용하면 쉽고 편하게 태그를 입력할 수 있습니다.

계정 루트 디렉토리에 carver.gif 이미지가 있다고 가정하고 불러와 볼까요? 간단하게 불러올 파일의 절대경로를 느낌표로 묶어주면 됩니다.

!http://blog.wystan.net/carver.gif!
!/carver.gif!

<p><img src="http://blog.wystan.net/carver.gif" alt="" /><br />
<img src="/carver.gif" alt="" /></p

그럼 이번에는 img 태그의 title, alt 속성을 함께 넣어보겠습니다.

!/carver.gif(sometext)!

<p><img src="/carver.gif" title="sometext" alt="sometext" /></p>

위 예처럼 파일명 뒤에 텍스트를 괄호로 감싸서 넣어주면 두 가지 속성에 적용됩니다. 그러면 이 이미지에 링크를 넣어볼까요? 앞서 다루었던 Textile 링크 태그와 거의 같습니다. 따옴표가 느낌표로 바뀐 것 빼고는요.

!/carver.gif(sometext)!:http://.../

<p><a href="http://.../">
<img src="/carver.gif" title="sometext" alt="sometext" /></a></p>

이미지의 align 속성을 이용해서 왼쪽이나 오른쪽, 중앙 정렬을 시킬 수 있는데 각각 !< , !> , != 태그를 사용하면 됩니다.

!>/carver.gif!:http://.../

<p><a href="http://.../">
<img src="/carver.gif" align="right" /></a></p>

앞에서 소개하지 않았지만 Textile을 이용해서 태그에 직접 스타일을 지정할 수 있습니다. ‘인라인 스타일’이라고 하는데 간단한 예를 들어보지요.

!{border: 1px solid black;}/carver.gif!:http://.../

<p><a href="http://.../">
<img src="/carver.gif" style="border: 1px solid black;" /></a></p>

Textile의 인라인 스타일은 p, h1, table 등의 여러 태그에 적용됩니다. 하지만 지금껏 소개하지 않은 이유는 스타일을 적용시키는 더 좋은 방법이 있기 때문이랍니다. 바로 class와 id를 이용하는 것이지요. 이런 방법을 이용하면 보다 ‘의미있는(Semantic)’ html 문서를 만들 수 있습니다. 여기서 말하는 ‘의미있다’는 표현을 명확하게 정의하기는 어렵지만 제 생각은 이렇습니다.

“html 태그는 문서의 내용을 체계적으로 담는데 사용하고, 문서를 꾸미고 디자인하기 위해서는 CSS를 사용한다.”

간단히 요약하면 디자인을 위한 html 태그 사용을 최대한 줄이자는 것입니다. 위의 예를 다시 생각해볼까요? 이번에는 p 태그를 빼서 코드를 간단히 써보겠습니다.

!{border: 1px solid black;}/carver.gif!
!(someclass)/carver.gif!

<img src="/carver.gif" style="border: 1px solid black;" alt="" />
<img src="/carver.gif" class="someclass" alt="" />

인라인 스타일을 사용한 예는 이미지가 들어간다는 문서의 내용과 함께 그 이미지가 어떤 테두리를 가져야 하는지를 함께 알려주고 있습니다. 하지만 두 번째 예는 문서에 이미지가 들어가고, 그 이미지가 어떤 부류에 속하는가에 대한 정보만을 담고 있지요.

이미지가 어떤 특정한 ‘부류’에 속하기 때문에 CSS를 사용해서 이 부류에 적용될 스타일을 지정할 수 있습니다. 그러면 두 이미지가 브라우저에서 똑같이 보이게 됩니다.

img.someclass { border: 1px solid black; }

위에서 이미지를 정렬하기 위해서 align 속성을 이용했는데 이 속성도 문서의 내용과는 관련이 없고 다만 어떻게 보여지는가를 지정할 뿐입니다. 그래서 의미를 강조하는 엄격한 html 표준(XHTML 1.0 Strict)에서는 이 속성의 사용을 금지하고 있습니다. 이 속성 대신에 CSS를 사용하면 보다 의미있는 html 문서를 작성할 수 있는데 동일한 결과를 얻기 위해서는 다음과 같이 태그를 작성하면 됩니다.

p(pclass). !(imageclass)/carver.gif!

<p class="pclass"><img src="/carver.gif" class="imageclass" alt="" /></p>

CSS에서는 이미지에 직접 align 속성을 지정할 수 없지만 대신 이미지를 감싸는 p 태그에 오른쪽 정렬을 주거나 이미지 자체를 오른쪽으로 띄울 수 있습니다.

p.someclass { text-align: right; } or img.imageclass { float: right; }

이미지 태그에서 시작했는데 어느덧 주제에서 벗어난 글이 되었네요^^; ‘의미있는 마크업’의 장점에 대해서는 나중에 다시 다뤄볼 생각입니다. 원래 Textile을 이용한 리스트와 표 작성까지 정리하려고 했는데 다음 글로 미뤄야겠네요.

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어

Textile을 사용하면 쉽고 편하게 html 태그를 입력할 수 있는데 그 이유중의 하나는 태그의 끝을 알리는 ‘닫는 태그’가 없기 때문입니다.

예를 들어 html과 Textile의 링크 태그를 비교해보겠습니다.

"링크":http://.../

<p><a href="http://.../">링크</a></p>

html은 태그의 끝을 </a>로 표시하지만 Textile은 이런 표시가 없습니다. 그럼 Textile은 어떻게 태그의 끝을 알 수 있을까요?

그건 Textile이 영어를 기반으로 만들어졌기 때문입니다. 영어에서는 강조나 링크 같은 어떤 표현의 기본 단위가 ‘단어’로 제한됩니다. 영어와 한글 링크의 예를 들어보겠습니다.

click here to go, 여기를 클릭하세요.

한글 링크에서는 체언과 조사가 띄어쓰기 없이 같이 쓰이기 때문에 단순히 앞 뒤의 띄어쓰기 만으로는 태그의 끝을 판별할 수 없습니다. 이 한글 링크를 Textile로 쓰면 아래와 같습니다.

"여기":http://.../를 클릭하세요.

<p><a href="http://.../�">여기</a>�� 클릭하세요.</p>

물론 이런 오류는 대부분 자동으로 수정됩니다. 지금까지 특별한 처리를 하지 않았음에도 링크 태그에 문제가 생긴적은 없었습니다. 하지만 명확하지 않은 문법은 언제든 문제를 일으키기 마련이지요. 초기 버전의 Textile은 이런 문제를 고려하지 않았지만 꾸준한 업데이트로 문제를 해결했습니다.

바로 대괄호[]를 사용하는 것이지요. 위의 예를 다시 쓰면 다음과 같습니다.

["여기":http://.../]를 클릭하세요.

<p><a href="http://.../">여기</a>를 클릭하세요.</p>

링크가 이상없이 연결되었으니 CSS 스타일링을 위해 class와 id를 지정해볼까요? 또한 링크의 title 속성도 함께 입력해보겠습니다.

["(someclass#someid)여기(sometitle)":http://.../]를 클릭하세요.

<p><a href="http://.../" class="someclass" id="someid" title="sometitle">여기</a>
를 클릭하세요.</p>

class 지정이 안되신다고요? 텍스트패턴 4.0.4 버전에 포함된 Textile 라이브러리를 최신 버전으로 업데이트하면 문제가 해결됩니다.

이 대괄호는 비단 링크 태그 뿐 아니라 비슷한 문제를 일으킬 수 있는 여러 인라인 태그에 동일하게 적용됩니다. 인라인 태그란 블록이 아닌 일부분의 텍스트에 강조나 링크 등의 의미를 부여할 때 사용되는데 그 예는 아래와 같습니다.

Textile 입력	html 변환	화면 출력
*강하게*	<strong>강하게</strong>	강하게
**두껍게**	<b>두껍게</b>	두껍게
_강조_	<em>강조</em>	강조
__이탤릭__	<i>이탤릭</i>	이탤릭
??사이트??	<cite>사이트</cite>	사이트
-지워짐-	<del>강하게</del>	지워짐
+더해짐+	<ins>더해짐</ins>	더해짐
^윗 첨자^	<sup>윗 첨자</sup>	윗 첨자
~아랫 첨자~	<sub>아랫 첨자</sub>	아랫 첨자
@코드@	<code>코드</code>	코드
%span%	<span>span</span>	span

이런 태그들은 시작과 끝을 알리는 태그가 동일하고, 보통 글을 입력할 때 충분히 사용할 가능성이 있는 기호를 태그로 사용합니다. 그러면 글 중간에 단순히 기호로 사용하기 위해서 이 문자들을 입력하면 어떻게 될까요? 아래 예를 통해 확인하시기 바랍니다.

가나* 다라*마바 *사아*자차* 카타*

<p>가나* 다라*마바 <strong>사아*자차</strong> 카타*</p>

시작과 끝을 표시한다고 해서 문제가 다 해결되는 것은 아니라는 것을 알 수 있습니다. 여기서 앞서 얘기한 ‘단어’ 개념이 다시 등장하지요. 즉 시작되는 태그 앞과 닫는 태그 뒤에 공백이 있을 경우에만 태그가 적용되도록 한 것입니다. 당연히 링크 태그와 같은 문제가 생길 것이고, 마찬가지로 대괄호를 이용해서 문제없이 입력할 수 있습니다.

가나* 다라*마바 [*사아*]자차* 카타*

<p>가나* 다라*마바 <strong>사아</strong>자차* 카타*</p>

이번에는 Textile이 자동으로 바꿔주는 html 기호 문자(Symbolic Character Entities)에 대해 알아보지요. 이 기능을 통해서 일부 기호 문자를 쉽게 입력할 수 있습니다. 그럼 어떤 기호가 어떻게 바뀌는지 보실까요?

Textile 입력	html 변환	화면 출력
"큰 따옴표"	“큰 따옴표”	“큰 따옴표”
'작은 따옴표'	‘작은 따옴표’	‘작은 따옴표’
하이픈--둘	하이픈—둘	하이픈—둘
말줄임...	말줄임…	말줄임…
2x2	2×2	2×2

편리한 기능이지만 역시 한글을 입력하면 문제가 생깁니다. 더군다나 현재까지는 대괄호를 사용해도 같은 결과가 발생합니다. 예를 들어볼까요? 앞으로는 아래 박스에 html 코드가 아닌 직접 화면에 출력되는 텍스트를 표시하겠습니다.

“큰 따옴표 쓰기”, “큰 따옴표“를 쓰기, ‘작은 따옴표 쓰기’, ‘작은 따옴표‘를 쓰기

"큰 따옴표"를 쓰기, ["큰 따옴표"]를 쓰기

“큰 따옴표“를 쓰기, [“큰 따옴표”]를 쓰기

대괄호가 아무 효과를 발휘하지 못하고 그냥 문자로 표시되는 것을 볼 수 있습니다. 그러면 어떻게 해야할까요?

제가 선택한 방법은 따옴표로 묶을 부분에 강조 태그를 넣는 겁니다. 따옴표를 인용문에 사용할 경우에는 대부분 따옴표로 행을 끝맺기 때문에 특별히 문제가 생기지 않습니다. 하지만 강조의 의미로 따옴표를 사용할 경우가 문제이지요.

"강조의 의미로 '따옴표'를 사용하기"

“강조의 의미로 ‘따옴표‘를 사용하기”

그렇기 때문에 강조 태그를 함께 써줘도 의미상 큰 차이가 없습니다. 강조를 표현하는 em 태그를 써볼까요?

"강조의 의미로 [_'따옴표'_]를 사용하기"

“강조의 의미로 ‘따옴표’를 사용하기”

작은 따옴표가 제대로 표시되는 것을 볼 수 있습니다. 다만 대부분의 브라우저에서 기본적으로 em 태그를 이탤릭체로 나타내므로 CSS에 다음과 같은 규칙을 추가시켜줘야 합니다.

em { font-style: normal; }

이런 방식으로 Textile에서의 한글 입력 문제를 해결할 수 있습니다. 다음 글에서는 Textile을 사용해서 이미지를 표시하고 리스트와 표를 작성하는 방법을 알아보겠습니다.

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어

Textile은 ‘가벼운 마크업 언어’입니다. 여기서의 ‘가볍다’는 표현은 ‘간단한 문법’, ‘쉬운 태그 입력’, ‘사용자 친화적인 코드’ 등의 의미를 내포합니다. 즉 간단하고 쓰기 쉬운 마크업 언어라는 것이죠.

Textile은 Dean Allen에 의해 PHP로 개발되었으며, 펄, 파이썬, 루비, 자바 등으로 다양하게 컨버전되었습니다. Textile이 Textpattern에 포함된 것은 어찌보면 당연한 일입니다. 왜냐하면 Textpattern의 개발자가 앞서 말한 Dean Allen이기 때문이지요. 또한 워드프레스 사용자들도 Textile Wrapper 플러그인을 설치하면 Textile로 글을 쓸 수 있습니다.

Textile의 문법이 html보다 쉬운건 사실이지만 html 태그에 익숙한 분들이라도 어느 정도 연습을 해야만 쓸 수 있습니다. 새로운 문법을 배우는 것이니까요. 하지만 이지윅이 아닌 텍스트 입력 방식을 선호하는 분들께는 충분히 배울 만한 가치가 있답니다.

문법을 연습할 가장 좋은 장소는 Threshold State의 Textile 페이지입니다. 페이지 왼쪽의 도움말을 참고해서 글을 입력하면 변환된 html 코드와 그 출력 결과를 볼 수 있습니다.

문법에 관한 보다 자세한 설명은 Textile Reference 페이지를 참고하시면 됩니다.

그럼 Textile Reference의 글을 참고해서 몇 가지 실용적인 예를 들어보겠습니다. 각 예에서 위 박스는 입력한 텍스트를, 아래 박스는 변환된 html 코드를 나타냅니다.

가장 먼저 이해해야 할 것은 문단 태그인 p 태그입니다. Textile에서는 기본적으로 모든 입력이 p 태그 안에서 이루어집니다. 즉 태그 없이 입력한 텍스트에도 자동으로 p 태그가 붙게 되죠.

간단한 텍스트

<p>간단한 텍스트</p>

p 태그는 div, bq, ul, ol, h1, h2 등의 태그처럼 블록을 설정해서 그 안에 내용물을 표시해줍니다. 그럼 이 블록의 끝을 표시하려면 어떻게 해야할까요? Enter 키로 줄을 바꿔도 블록은 유지됩니다. 바뀐 줄 앞에 <br /> 태그가 삽입될 뿐이죠.

줄바꿈
테스트

<p>줄바꿈<br />
테스트</p>

하지만 Enter 키를 한 번 더 눌러서 중간에 빈 줄을 넣어주면 블록 태그가 닫히고 새 블록이 시작됩니다.

줄바꿈

테스트

<p>줄바꿈</p>
<p>테스트</p>

이렇게 자동으로 붙는 p 태그지만 때로는 직접 지정해줄 필요가 있습니다. 바로 CSS 스타일을 적용하기 위해서죠. Textile에서 태그에 id와 class를 지정하려면 괄호 안에 넣어주면 됩니다. 이제 p, h1, blockquote 태그에 id와 class를 지정해 볼까요?

p(#someid). id 지정

h1(someclass). class 지정

bq(someclass#someid). id, class 지정

<p id="someid">id 지정</p>
<h1 class="someclass">class 지정</h1>
<blockquote class="someclass" id="someid">
  <p class="someclass">id, class 지정</p>
</blockquote>

† blockquote 태그에 class를 지정할 경우 blockquote 태그 안의 p 태그에도 동일한 class가 적용됩니다. 오류 알려주신 연가시 님께 감사드립니다.

blockquote 태그 안의 텍스트에도 자동으로 p 태그가 붙는다는 것에 유의하세요. Textile의 블록 설정 태그에는 이외에도 h2. ~ h6. , pre. , bc. , bq.. , fn_n. 등이 있는데 이 태그들에 대해서는 나중에 따로 알아보겠습니다. 다만 이 태그들이 식별자(p, h1, bq)와 마침표, 공백 하나로 시작된다는 것은 기억해두시길 바랍니다.

때로는 여러 블록을 div 태그로 감싸서 스타일을 적용해야 할 경우도 있습니다. Textile에서는 자체적으로 div 태그를 지원하지 않지만 모든 html 태그를 그대로 사용할 수 있으므로 아무 문제가 없습니다. 예를 보실까요?

<div class="someclass">
간단한 텍스트
</div>

<div class="someclass">
간단한 텍스트
</div>

하지만 div 태그 안에 빈 줄이 들어가게 되면 문제가 생깁니다. 빈 줄을 넣지 않으면 블록을 닫을 수 없기 때문에 div 태그 안에서는 Textile을 전혀 쓸 수 없게 됩니다.

<div class="someclass">

간단한 텍스트
</div>

<p><div class="someclass"></p>
<p>간단한 텍스트<br />
</div></p>

이런 문제를 해결하기 위해서는 특정한 행이나 블록에 Textile이 적용되지 않도록 해야하는데 두 가지 방법이 있습니다. 먼저 notextile. 태그를 사용해서 명시적으로 지정하는 방법입니다.

notextile. <div class="someclass">

notextile. 간단한 텍스트
</div>

<div class="someclass">
간단한 텍스트
</div>

위 예처럼 notextile. 로 시작되는 블록은 Textile이 적용되지 않습니다. 또 다른 방법은 무척 간단합니다. 태그 앞에 공백 하나를 넣는 것이지요. Textile은 항상 행의 첫 번째 문자부터 블록 레벨의 태그를 인식합니다. 즉, 행 중간에 h1. 같은 태그가 있으면 태그가 아닌 일반 택스트로 판단한다는 얘기지요. 예를 보시죠.

  <div class="someclass">

   간단한 텍스트
  </div>

  <div class="someclass">
   간단한 텍스트
  </div>

이런 방식으로 Textile 태그와 html 태그를 자유롭게 섞어서 사용하실 수 있습니다.

† Textile 사용법을 간단하게 정리하려고 글을 시작했는데 간단하게 정리가 안되네요^^; 그래서 부분적으로 나누어 쓰기로 했습니다. 다음 글에서는 자주 사용되는 링크와 강조 태그에 대해 알아보고 Textile로 한글을 입력할 경우 발생하는 문제와 해결책을 다루겠습니다.

Textile 관련 글 안내

1. 시작하기
2. 링크와 한글 입력
3. 이미지 태그
4. 리스트와 표
5. 코드 출력과 인용문
6. 각주와 약어

Textpattern이라는 블로깅 툴에 대한 한글로 된 정보가 거의 없어서 간단하게 소개를 해볼까 합니다.

대부분의 국내 블로거들이 태터툴즈나 티스토리, 이글루스, 네이버 블로그 등을 사용하고 일부는 워드프레스를 사용합니다. 그중에서 제가 사용해 봤던 태터툴즈, 워드프레스와 구별되는 Textpattern의 특징을 먼저 적어 보겠습니다.

일단 Textpattern은 단순한 블로깅 툴이 아닌 CMS 툴입니다. 블로그 전용으로 만들어지지 않았다는 얘기지요. 그렇기 때문에 다양한 용도로 사용할 수 있습니다. 제 홈페이지인 ‘울티마 가이드’는 html 파일 위주로 제작했는데 Textpattern으로도 동일한 사이트를 만들 수 있겠더군요. 이런 유연함의 핵심은 ‘섹션’이 담당합니다. 워드프레스의 ‘페이지’와 비슷하지만 각각의 섹션마다 독립적인 레이아웃과 CSS를 지정할 수 있고, 독립적으로 글을 쓸 수 있습니다. 블로그도 하나의 섹션에 포함되어 운영되는 구조입니다. 아래 이미지는 제 블로그를 담당하는 ‘article’ 섹션 설정입니다.

또 다른 특징은 글 입력 방식입니다. 태터툴즈나 워드프레스가 이지윅(WYSIWYG) 에티터를 이용해서 html 코드를 입력하는데 반해 Textpattern은 Textile이라는 독특한 입력 방식을 사용합니다. Textile은 html 태그를 편하게 입력하기 위해 개발되었는데 익숙해지면 상당히 편합니다. Textile에 관한 자세한 설명은 Textile 시작하기를 참고하세요.

스킨이나 플러그인을 사용하는 방식에도 큰 차이가 있습니다. 보통은 php나 html 파일 등을 서버에 업로드 한 후 사용하게 되는데 Textpattern은 특이하게도 MySQL DB에 이런 정보를 보관합니다. 즉 스킨이나 플러그인을 파일에서 읽어오는 것이 아니라 DB에서 불러오는 것이죠. 그렇기 때문에 관리자 페이지에서 스킨이나 CSS를 만들거나 수정할 수 있고 별도의 에디터 없이도 플러그인 코드를 편집할 수 있습니다. 이뿐만이 아니라 다국어 지원을 위한 문자열 정보도 DB에 저장됩니다. 결국 사용자가 올리는 이미지와 파일(다운로드 용)을 제외한 모든 것들이 DB에 담긴다는 얘기죠.

마지막으로 언급할 차이점은 간단합니다. 바로 트랙백 기능이 없다는 것이죠. 이 부분에 대해서는 더 설명하지 않겠습니다. 필수적인 기능이라 생각하는 분들도 있을 것이고, 그렇지 않은 분들도 있을 겁니다.

Textpattern의 특징 소개는 이만 마치고, 이제 장단점을 써보겠습니다. 극히 주관적인 견해니 감안하시길 바랍니다.

먼저 장점을 꼽아보자면…

1. 빠른 페이지 로딩 속도: Textpattern FAQ에 설명된 것처럼 정말 빠릅니다. 참고로 Wystan’s tales는 비누넷 호스팅을 이용하고 있습니다.
2. Textile: 익숙해지면 쉽게 html 태그를 입력할 수 있고, Textile과 html 태그를 혼용해서 쓸 수 있습니다. 이지윅 만큼 편하면서 직접 html 태그를 입력하는 것과 같은 디테일을 얻을 수 있습니다. 단! 익숙해져야 한답니다^^;
3. 심플한 코드 생성: 현재 페이지의 소스를 보면 아시겠지만 불필요한 코드가 거의 없습니다. 이건 특별히 태터툴즈와 비교되는 부분입니다. 태터툴즈가 자바 스크립트를 많이 사용하는 반면 워드프레스나 Textpattern은 소스에 자바 스크립트를 거의 사용하지 않습니다.

막상 적어보려니 장점이 별로 없군요^^; 그저 빠르고, 글 쓰기 쉽고, 심플한게 전부네요. 반면에 단점을 열거하자면…

1. 최악의 스킨 설치: Textpattern 스킨은 여러 개의 텍스트 파일(.txt)로 되어 있습니다. 하나씩 열어서 내용을 복사한 다음 입력 폼에 붙여넣고 저장해야 설치됩니다. 그 과정에서 기존 스킨 정보를 덮어 쓰는 경우가 많으므로 여러 개의 스킨을 기분따라 바꿀 수 있는 워드프레스의 편리함은 꿈도 꿀 수 없습니다.
2. 제한적인 댓글 기능: 태터툴즈와 같은 ‘댓글에 댓글 달기’ 기능이 없으며 한 번 작성한 댓글은 관리자가 아니면 수정하거나 삭제할 수 없습니다. 이런 기능 제한의 근본 원인은 스팸 때문이라고 생각하지만 그래도 지원됐으면 하는 바램입니다. 참고로 현재까지 이 기능을 구현한 플러그인은 없습니다^^;
3. 이미지 삽입의 불편함: 관리자 페이지에서 글 쓰는 부분과 이미지 올리는 부분이 분리되어 있습니다. 글에 이미지를 삽입하려면 먼저 이미지 올리고, 이미지 ID를 글 쓸 때 적어줘야 합니다.
4. 백업 기능 미지원: 자체적인 백업 기능이 없으므로 phpMyAdmin 같은 DB 관리 툴을 사용해야 합니다.

마지막으로 Textpattern이 지원하는 기타 기능을 적어보겠습니다.

1. XML-RPC를 이용한 오프라인 글 쓰기를 지원합니다만 추가로 파일을 다운받아야 합니다.
2. 설정한 기간이 경과한 글의 댓글을 자동으로 잠글 수 있습니다. 스팸 방지에 유용하리라 생각됩니다.
3. 특정한 섹션의 글 전부나 개별 글에 대해 ‘암호’를 설정할 수 있습니다.

하나 하나 적자니 끝이 없네요. Textpattern의 세부적인 기능과 플러그인 만드는 법에 관해서는 추후에 포스팅하겠습니다. Textpattern에 대해서 궁금한 점이 있으면 언제든지 댓글이나 메일 남겨주세요. 아는 한도에서 답변 드리겠습니다.