Wiki

1. 태터툴즈 개요

1.1 좋은 점

• 운영자(개발자)와 사용자간의 직접적인 커뮤니케이션이 잘 되므로 안 좋은 점은 수정이 바로바로 가능하다.
• 웹표준을 지키기 위한 노력이 감격스럽다.
• 플러그인, 스킨 edit, 웹 리더기 등등 (웹 리더기가 티스토리에도 있다면 엄청 좋았을!)
• 쉽다. 누구나 조금만 신경쓰면 툴에 대한 이해가 될 것이다.
• 여러모로 사용자를 위한 최상의 블로그 툴이다.

1.2 별로인 점

1. 웹표준에 대한
2. 편집창에 입력한 글이 제대로 저장되지 않고 하나씩 빠진다. - 조금 많이 승질난다.
3. 자바스크립트에 의존하는 비중이 매우 크다.
   • 접근성에 무지 해가 된다. - 사실 태터툴즈는 본격적인 접근성에는 신경을 거의 쓰지 않았다.
   • 웹 페이지의 무게가 더해진다.
4. 디자인의 어느 면에서는 사용자의 의사가 무시된다. - 꼭 태터툴즈의 치환자에 따라야 하므로

1.3 별로인 점의 예

1. 웹표준에 대한
   • MP3 플레이어를 삽입하면 가운데 정렬만 되고 있으며 그 html은 다음과 같다.
     <center><script 어쩌구>어쩌구</script></center>
     물론 제대로 해야 한다면 다음과 같아야겠다. (xhtml 1.0 strict 기준)
     <div style="text-align:center;"><script 어쩌구>어쩌구</script></div>
     또한 자바스크립트를 차단시킨 브라우저 환경을 위해서는 다음처럼 noscript 를 사용하여 접근성에 신경쓰면 좋겠다.

     <div style="text-align:center;">
     	<script 어쩌구>어쩌구</script>
     	<noscript>
     		<p>
     		<a href="MP3 주소" title="MP3 듣기">에러 문구</a>
     		</p>
     	</noscript>
     </div>
     

2. 편집창에 입력한 글이 제대로 저장되지 않고 하나씩 빠진다. (이외에도 몇가지 있었는데 자세히 기억나지 않는다.)
   1. 이미지를 Free 버튼을 이용해 다음과 같이 삽입했다. [html 코드창으로 : 난 위지윅 에디터 쓰지 않는다.]
      <img src="[##_ATTACH_PATH_##]/xxxx.jpg" width="300" height="300" alt="그림 설명" title="그림 설명" />
      한 번 저장하면 괜찮다. 다시 수정을 하려하면 코드는 다음처럼 바뀌어있다.
      <img src="[##_ATTACH_PATH_##]/xxxx.jpg" width="300" height="300" alt=""/>
   2. 현재 보고한 것이지만<dl><dt>정의</dt><dd>정의한 내용</dd></dl>이라고 저장하면 다음처럼 </dt>가 빠져있다. <dl><dt>정의<dd>정의한 내용</dd></dl>
3. 자바스크립트에 의존하는 비중이 매우 크다.
   1. 검색폼, 답글폼, 방명록 폼, 이미지, MP3, 카테고리 목록 (폴더형) ….. 너무 많다. 조금 쓸데없다고 생각하지 않는가?
      1. 트랙백, 답글을 볼 때 토글은 조금 무의미하다고 생각한다. 웹 페이지에 안 보일 뿐이지, 이미 렌더링 되어버렸는데 byte 낭비가 아닐런지.. 관리자 페이지에서 펼쳐 보이지 않도록 설정하였을 경우에는 그 부분을 아예 퍼머링크에서만 렌더링되도록 했으면 싶다.
      2. 접근성을 생각하지 않은 자바스크립트라서 문제다. 워드프레스 플러그인 개발자들 중에는 자바스크립트를 쓰더라도 접근성을 생각하는 분들이 있어 꽤 놀라운데 아직 태터툴즈 플러그인 개발하는 분들은…
   2. 접근성을 생각한 플러그인의 예
      1. Ajax comment(워드프레스용), Ajax search(워드프레스용), Lightbox - 자바스크립트 끄더라도 목표하는 바를 이룰 수 있다.
      2. vpip 플러그인 : 이 플러그인은 퀵타임, 윈도우 미디어, 플래시 파일에 상관없이 플래이시켜주는 자바스크립트와 PHP를 이용한 플러그인이다. 그런데 그 방법이 매우 좋다. 만약 플래시 파일을 재생시키려면 에디터에 다음처럼 쓴다.

         <div class="hVlog">
         	<a href="플래시 주소" 
         	type="application/x-shockwave-flash" 
         	onclick="vPIPPlay(this, 'width=402, height=324, name=2hk8nrATtqI', '', ''); return false;">
         	Link Text
         	</a>
         </div>
         

         그럼 자바스크립트 파일과 연계되어 링크만 누르면 파일이 hVlog 레이어 안에서 재생된다. 여러모로 페이지 로딩에도 효과적이라고 할 수 있다. ( 예제 )
   3. 그 외
      • www.hanrss.com 에서 트리형 공유 목록 : 카테고리 폴더는 이런 방법이 더 의미에 맞지 않을까나.. 카테고리 목록은 html 상에 나타나야 함은 물론이고.
4. 디자인의 어느 면에서는 사용자의 의사가 무시된다.
   1. 웹표준을 지키면서 효율적인 방법으로 스킨을 짜고 싶다. 예를 들면 트랙백이나 답글들은 목록처리하고 싶어 <ul> 혹은 <ol>태그를 쓰고 싶다. 하지만 그것은 간단하지 않다.
      1. skin.html 파일에 코멘트부분을 다음처럼 짰다고 하자.

         <ol class="commentlist">
         <s_rp_rep>
         	<li class="rep">
         		<p>댓글 부분</p>
         		<ul>
         <s_rp2_rep>
                     	<li class="reply_rep">
         		<p>댓글에 댓글을 단 부분</p>
                    	</li>
         </s_rp2_rep>
         		</ul>
                 </li>
         </s_rp_rep>
         </ol>
         

         그럼 웹 페이지에 표현될 때는 다음과 같다.

         <ol class="commentlist">
         <a id="댓글의 퍼머링크ID"></a>
         	<li class="rep">
         		<p>댓글 부분</p>
         		<ul>
         <a id="댓글의 퍼머링크ID"></a>
                     	     	<li class="reply_rep">
         		     	     	<p>댓글에 댓글을 단 부분</p>
                    	     	</li>
         		</ul>
                 </li>
         </ol>
         

         바로 <a id="댓글의 퍼머링크ID"></a> 부분 때문에 웹표준에 어긋난다. 워드프레스에서는 댓글의 퍼머링크ID 부분을 치환자처럼 사용한다. 그래서 내가 표현하고 싶은대로 쓸 수 있다. 이런 식으로

         <ol class="commentlist">
         	<li id="댓글의 퍼머링크ID" class="rep">
         		<p>댓글 부분</p>
         		<ul>
                     	     	<li id="댓글의 퍼머링크ID" class="reply_rep">
         		     	     	<p>댓글에 댓글을 단 부분</p>
                    	     	</li>
         		</ul>
                 </li>
         </ol>
         

         물론 워드프레스 테마 자체가 PHP 스크립트이므로 가능한 듯 하지만… 태터툴즈에서는 가능하지 않은 것일까?
   2. 필요없는 태그는 별로 삽입하고 싶지 않다. 예를 들어, 아직 코멘트나 트랙백이 없는데도 html 상에 그 곳에 해당하는 empty div가 존재하거나 링크되는 주소가 없는데도 <a>1</a> 이런 식의 링크가 붙는다거나..

2. 관련 링크

• Tattertools 홈페이지
• vpip 플러그인
• HanRSS 트리형 공유 목록