Textile 링크와 한글 입력

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 변환 화면 출력
"큰 따옴표" &#8220;큰 따옴표&#8221; “큰 따옴표”
'작은 따옴표' &#8216;작은 따옴표&#8217; ‘작은 따옴표’
하이픈--둘 하이픈&#8212;둘 하이픈—둘
말줄임... 말줄임&#8230; 말줄임…
2x2 2&#215;2 2×2

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

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

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

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

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

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

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

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

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

em { font-style: normal; }

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

Textile 관련 글 안내

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

댓글 2개가 달렸습니다. 태그: , , ,

  1. 김한조 | 2007-04-01 20:06

    좋은 글 감사드립니다. 사실 이 문제에 대한 해결 방법을 찾을 수가 없어서 최근에 markdown으로 전향을 한 상태였습니다. Wystan님 덕분에 좋은 해결 방법을 찾았네요. 앞으로도 좋은 글 많이 읽겠습니다.

  2. wystan | 2007-04-01 21:36

    좋은 글이라고 말씀해주시니 고맙습니다. 저도 한조 님 블로그에서 텍스트패턴 플러그인과 스팸 트랙백에 대한 좋은 정보 많이 얻었답니다^^

    포스팅하신 markdown에 관한 글을 읽고 홈페이지에 가서 문법을 살펴봤는데 아무래도 제게는 Textile이 맞더군요. html 태그에 class를 많이 쓰는지라 markdown으로는 사용할 수 있는 표현이 많이 제한되기 때문입니다.

댓글이 닫혔습니다.