레이블이 티스토리인 게시물을 표시합니다. 모든 게시물 표시
레이블이 티스토리인 게시물을 표시합니다. 모든 게시물 표시

2010년 10월 6일 수요일

텍큐닷컴 블로그의 모바일 페이지 만들기

by BLUEnLIVE | 2009/12/12 10:00

티스토리와 텍큐닷컴은 근본도 비슷하고, 기능도 여러모로 비슷하다. 하지만, 세세하게 뜯어보면 지원되는 기능이 미묘하게 다른데, 그 중...



유사한 기반의 티스토리가 간단한 방식으로 모바일 페이지를 지원하는 것과는 달리 텍큐닷컴은 그런 거 없다.
오히려, 구글 코리아는 텍큐닷컴을 버릴 것이란 입장을 명확히 했기 때문에 앞으로도 그런 서비스는 없다.

하지만, 궁하면 통하는 법이요, 모든 솔루션은 구글에서 나오는 법.



1. 모바일 페이지 생성

Google Mobilizer라는 서비스가 있다.
이 서비스를 이용하면 멀쩡한(?) 블로그에서 모바일 페이지를 생성해준다.

이 서비스를 이용해서 본 블로그의 모바일 주소를 추출하면 아래와 같다.

http://www.google.com/gwt/x?u=http://zoc.kr/2

이로써 비교적 간단한 방법으로 모바일 페이지를 만들었다.


2. 자동으로 모바일 페이지로 전환

위의 방법이 간단한 방법이긴 하지만, 그렇다고, 저런 주소를 정말로 모바일 환경에서 입력할 수는 없다.
모바일 페이지에서 접속하면 자동으로 모바일 페이지로 넘어가도록 해보자.

텍큐닷컴의 스킨에서 <body> 바로 아래에 아래와 같은 코드를 삽입하면 된다.

<script type="text/javascript">
//<![CDATA[
if (navigator.userAgent.match(/Mobile|Windows CE|Windows Phone|Opera Mini|POLARIS/) && !navigator.userAgent.match(/iPad/))
    location.href = "http://www.google.com/gwt/n?u=http://(블로그주소)" + location.pathname;
//]]>
</script>

이 코드는 브라우저에서 페이지를 읽었을 때 모바일 환경이라면 위에서 설명한 모바일 페이지로 이동시킨다.


이렇게 만들어진 내 블로그를 아이폰에서 띄우면 아래와 같은 결과가 나온다.
비록 페이지 이동 등의 기능은 정상동작하지 않지만, 아쉬운 대로 쓸 수는 있다. OTL


덧. 본 포스팅 작성시  블로그를 모바일 페이지로 만들기와 자동으로 모바일 페이지로 이동하기가 큰 도움이 되었다.

2010년 5월 5일 수요일

텍큐닷컴이 문 닫으면 어디로 가야 하나?


수많은 텍큐닷컴 사용자들이 이 황당하기 짝이 없는 공지 문구를 보고 당황했다.
나도 마찬가지...

그런데, 막상 옮기려고 생각하니 고민해야할 거리가 한둘이 아니다. 헐...

1. 서비스 제공자가 외부의 압력에 잘 버틸 수 있을까?

거의 같은 구조를 갖고 있지만, 티스토리를 떠났던 이유가 바로 이것이었다.
현정부 들어 정치 관련 글은 아예 쓰지도 않지만, 그런다고 이런 문제에 대해 무관심할 수는 없으니...

이 관점에선 티스토리는 이사갈 후보에 들어가지 않는다.


2. 현재 내 블로그의 data는 100% 그대로 이전할 수 있을까?

멍청한 구글 번역기가 반복적으로 지껄여대는 말이 바로
Q. 내 블로그에 있는 모든  콘텐츠를 블로거로 옮길 수 있나요? 텍스트큐브닷컴의 어떤 기능들이 블로거와 통합되나요?
A. 구글은 사용자 데이터를 그  무엇보다 중시하고 있으며 여러분의 텍스트큐브닷컴에 있던 모든 데이터가 블로거에 이전될 수 있도록 최선을 다할 것입니다. 다만 저희의 노력에도 불구하고 호환이 안되는 몇몇 기능은 이전하기가 여의치 않을 수도 있습니다.있습니다. 새로운 내용이 있으면 업데이트할 계획입니다.
이다.

이게 잘 읽고 생각해보면 지대로 犬소리인 것이... 가령 이미지 슬라이드 쇼의 경우 이전이 가능하냔 거다.
상당히 완성도 높은 이전율을 보이는 크래커(및 워드프레스)에서도 슬라이드 쇼는 첫 이미지만 나타난다.

이걸 나중에 새로운 내용이 있으면 업데이트 한다고 해서 없던 슬라이드 쇼가 생기냔 말이다.

더군다나, 내 블로그엔 내가 만들어 사용하는 BBCode, Cumulus-Tagcloud, LongTail Player 등의 부가 기능이 들어있다.
이 기능들이 100% 그대로 동작할 수 있나? BBCode, LongTail의 경우 내가 추가/변경한 기능도 있는데 말이다.


3. 특히, 바이너리 첨부파일이 잘 올라올 수 있을까?

티스토리/텍큐닷컴 공히 바이너리 파일의 첨부가 원활하기 때문에 작은 크기의 파일을 여럿 올려두었다.
과연 새로운 시스템에서 이제 잘 올라갈 수 있을까?

blogger.com의 경우 바이너리의 업로드는 "구글 사이트 도구"를 사용해야 한다고 하는데, 그럼 자료의 저장이 이원화되는 것이다.
다시 말해 이후 죽었다 깨어나도 다른 서비스로 갈아탈 수는 없다는 것이다. 헐...


4. 기존 블로그와 전혀 다른 시스템에 억지로 적응해야 하나?

텍스트큐브/텍큐닷컴/티스토리는 Blog API를 지원하며, 이를 통해 트랙백, 댓글알림 등의 기능을 제공한다.
하지만, blogger.com은 Blog API를 지원하지 않는다.
(지금은 바뀌었는지 모르겠지만, 어쨌거나 트랙백 기능이 없는 건 확실함)

텍큐닷컴 사용자들이 미친듯한 충성심으로 텍큐닷컴 사용자들끼리만 뭉칠 리가 없잖아!

이미 이 시스템에 적응이 되어있는데, 완전히 새로운 환경에 적응할 수 있을까? 아니, 그럴 필요가 있을까?


여러모로 고민해봤지만, 쉽게 결론이 나지 않는다.
젠장... 걍 다시 친 현정부 성향의 티스토리로 돌아가야 되나? ㅠ.ㅠ

2009년 12월 12일 토요일

텍스트큐브닷컴은 모바일 페이지를 지원하라!

티스토리의 모바일 버전 화면


티스토리와 텍큐닷컴은 근본도 비슷하고, 기능도 여러모로 비슷하다.
하지만, 세세하게 뜯어보면 지원되는 기능이 미묘하게 다른데, 그 중 가장 신경쓰이는 부분 중 하나가 모바일 환경 지원이다.

티스토리에서는 블로그주소뒤에 /m을 붙이면 모바일용 화면이 표시된다.
하지만, 무려 구글 코리아에서 운영하는 텍큐닷컴은 이에 해당하는 기능이 없다.

이제 아이폰이나 노키아 5800 등의 웹브라우징이 충실히 지원되는 모바일 환경이 점점 확산되고 있다.
게다가 구글은 안드로이드 환경을 하나씩 준비하고 있다.

이런 상황에서 구글 코리아의 텍큐닷컴이 모바일 환경을 대비하지 않는 것은 넌센스이다.

텍큐닷컴은 어서 빨리 모바일 페이지를 지원하라!

2009년 12월 6일 일요일

블로그 이전 완료

스킨도 기존과 거의 동일함. popeye님께 감사드릴 뿐.


그간 약 3주에 걸쳐 진행한 티스토리 → 텍스트큐브닷컴 블로그 이전을 완료했다.
마지막 작업은 2차 도메인 맞추기. 이건 아무래도 하루 정도 시간이 더 걸릴 것 같다.

그동안 한 작업들 중 공개할만한 가치가 있는 것들은 별도로 포스팅 예정임.

티스토리와 텍큐닷컴이 유사한 점이 많기는 하지만, 특히 image 폴더에 대한 접근 규칙이 달라서 여러모로 애먹은 점이 많았다.

2009년 12월 2일 수요일

티스토리 → 텍큐닷컴 이전 준비 중간보고

이전을 결심한 뒤에 가장 먼저 추진한 것은 다름아닌 기존의 티스토리 블로그와 유사한 화면을 유지하도록 하는 것이었다.
이를 위해 추진되는 중간상황을 정리함.


1. 스킨

직접 iNove 스킨을 변환하려하다가 금방 포기했지만, popeye 님께서 이 지존급 스킨을 텍큐닷컴 용으로 변환해주셨더라. 다시 한 번 감사드린다.

참고로, popeye 님의 버전은 티스토리용과는 다르게 검색창, 하단 등을 모두 사이드바로 분리해서 관리한다.
즉, 디자인은 물론, 스킨 자체의 완성도 역시 ㅎㄷㄷ한 수준인 거다.

사용자 삽입 이미지


2. TeCumulus 플러그인 변환

명품 플러그인 Cumulus를 텍큐닷컴에서도 사용할 수 있도록 변환했다.
텍큐닷컴은 확장자가 js인 파일을 업로드할 수 없기 때문에 파일명을 j_cumulus.gif로 변경함.

사용자 삽입 이미지


3. 글목록/링크 드롭다운리스트 적용


별거 아니지만 역시 javascript를 사용하기 때문에 약간의 꼼수 사용.

사용자 삽입 이미지


4. BBCode & 입력 도우미

BBCode는 물론 적용했다. 이미 많은 분들께서 텍큐닷컴에 적용하셨기 때문에 전술한 확장자 js 외엔 별 문제 없었음.
단, 중간에 버그가 발견되어 패치하느라 약간의 시간 소요됨.

입력 도우미는 티스토리와 구조가 완전히 바뀌어 약간 애를 먹음.
너무 구조가 특이하게 변해 일반화하기 어렵다. 역시 도우미 쪽은 포스팅하기 곤란함. ㅠ.ㅠ

사용자 삽입 이미지


5. to-do jobs

아직 작업을 다 못한 것이 3가지다.
- 구글 검색창 달기
- JW Player 도우미
- 각주 풍선말 구현 (가능은 할까?)
- Syntax Highlighter 추가 문법

참, Syntax Highlighter는 텍큐닷컴에서 기본적으로 제공하기 때문에 작업할 필요가 없더라. ^^;


2009년 11월 21일 토요일

티스토리 → 텍큐닷컴 이사 고민 중...

이제 텍큐닷컴도 나름 안정화 단계인 것 같아 다시 솔솔 부활하는 텍큐닷컴 이사 여부 고민.

이사 가고 싶은 이유

1. 크롬에서 편집기가 잘 동작함.
    기능이 충분히 구현되지 않은 기존관리와 버그 투성이인 새관리 사이의 고민은 불필요

2. 파일 첨부가 상식적으로 동작함.
    확장자를 알아서 고치는 따위의 짓은 하지 않음

3. 티스톨은 여기서 정체된 듯함.
    새로운 기능이란 건 없고, 업뎃해도 기능 재배치가 전부이며, 새로운 플러그인은 커녕 이미 있는 것도 적용하지 않음.

4. 텍큐닷컴은 연관글이란 게 있어 관련글을 뒤지기 쉽게 되어있음.

5. 구글이다!
    못미더운 면도 있지만, 그래도 구글이라면 왠지...


그래도 꺼려지는 이유

1. 티스토리는 약간의 문제가 있어도 장/단점을 모두 파악하고 있음.

2. 텍큐닷컴은 mp3 첨부 불가.
    저작권이 시끄러운 이 시국에는 오히려 장점일 수도 있긴 하지만...

3. 각주 풍선도움말 구현 필요.
    뭐, 구현하면 되긴 하지만... 쩝.

4. .js 파일 첨부 불가.
    스킨 편집을 통한 기능 확장의 핵심은 .js인데, .js 첨부 불가.
    확장자를 바꾸는 삽질이 가능하지만 왠지...

5. 구글이 맞냐?
    솔까말, 구글 서비스 중에 가장 구글답지 않는 놈이다.

고민하다 보면 언제나 원위치...


2009년 11월 14일 토요일

Syntax Highlighter 2.1.364 업데이트

무려 1달이나 전에 Syntax Highlighter가 2.1.364로 업데이트되었다.
이제야 알았다는 아쉬움을 뒤로하고, 바로 티스토리에 적용했다.

사용자 삽입 이미지


이번 패치 역시 많은 양의 버그 패치와 더불어 약간의 기능 추가 및 변화가 있다.

수정된 주요 기능은 아래와 같다.

- ruler 기능 제거. 아무도 안 쓰는 것 같아서임
- line wrapping이 모든 환경에서 정상 작동
- expand source를 show source로 변경
- <pre> 태그 외에 <script> 로 사용 가능 (updated usage page)
- 테마 파일 구성의 변경 (즉, 기존에 자체적으로 만든 테마가 있으면 사용 불가 ㅡ.ㅡ;)

더 자세한 변경된 기능은 공식 홈페이지에 올라온 변경 내역를 참고하기 바란다.

이 중 가장 주목할만한 기능은 <script> 태그이다.
기존의 사용법은 아래와 같았다.


이것을 아래와 같이도 쓸 수 있다.


이렇게 <script> 태그를 사용하면 아래와 같은 장단점이 있다.

장점
- 티스토리 새관리의 개같은 버그인 <pre> 태그에 지맘대로 <br />을 붙이는 버그에서 해방
- <pre>를 사용하면 하일라이팅 되지 않은 코드가 보였다 하일라이팅된 모양으로 변하는데, 이런 깜박임이 없어짐

단점
- 위지윅 편집기에서 볼 수 없음 ㅡ.ㅡ;


설치는 아래의 파일을 다운받아 압축푼 뒤, 스킨 업로드로 올린 뒤에 스킨을 수정하면 되며, 세부 수정 방법은 티스토리에 Syntax Highlighter 2.0 적용하는 방법 포스트를 참고하면 된다.


이 스킨에는 기존에 공개한 스킨에 포함된 아래의 패치가 모두 포함되어있다.

- 치환자 입력 가능
- 언어팩 추가: MSX, AviSynth
- Copy to Clipboard 버그 수정


덧. 이 버전을 적용하면서 커맨트 영역이 제대로 출력되지 않는 문제가 발생했다.
여러모로 확인한 결과 스킨 css의  .post  .comments가 SH의 .comments와 충돌한다는 것을 알게되었다.

이 문제를 해결하려고 Firefox+Web Developer와 Internet Explorer 8의 개발자 도구를 사용해봤는데, 결국 IE8로 찾았다.

IE8이 여전히 다수의 문제점을 안고 있는 브라우저이긴 하지만, 엄청난 발전이 있던 것도 사실이다.
IE8의 개발자 도구는 css의 충돌을 찾는데 있어서 최적의 도구이다.

사용자 삽입 이미지

저렇게 엔터를 끼워넣은 적이 없다구!


2009년 10월 25일 일요일

링크와 글보관함을 드롭다운 목록으로 보여주기

티스토리에서 링크를 드롭다운 목록으로 보여주기의 업그레이드 포스트임. 이 포스트를 먼저 읽기를 권장함.

본 블로그에선 위의 포스트에서 설명한 방법과는 다소 다른 방법을 적용했다.

사용자 삽입 이미지

이제 정말로 이 방식을 설명함.


보면 알 수 있듯이 (그리고, 전술했듯이) 2가지 스타일의 목록을 사용한다.
하나는 글 보관함에 적용한, 모든 내용을 한 곳에 몰아넣기.
또 하나는 링크에 적용한, 목록을 구분하여 나눠서 저장하기.

이렇게 두 가지 스타일의 목록을 적용하려면 아래와 같이 수정한다.


0. 사전 준비: 링크 목록 분류

먼저, 링크의 목록을 분류한다.
본 블로그에선 QAOS, 기술관련, 영화, 사회, 기타의 5 종류로 구분하여, 이들을 각각 1qa, 2te, 3mo, 4so, 5bl라고 명명했다.


1. 이미지 준비

QAOS, TECH 등의 분류된 링크를 의미하는 이미지를 만든다.
참고로, 본 블로그에는 26x9 크기의 GIF 파일을 만들어 사용했다.



2. 자바스크립트 코드 삽입

블로그 스킨의 헤더 내에 아래와 같은 코드를 삽입한다.
appendlink()는 link_* 로 시작하는 각 목록들을 구분해서 삽입한다.
(이 목록 이름은 뒤에 다시 설명함)

<script type="text/javascript">
//<![CDATA[
//링크 추가
function appendlink(linkname, linkurl){
  if (/^\[...\]/.test(linkname))
  {
  var opt = document.createElement("option");
  document.getElementById("link_"+linkname.substr(1,3)).options.add(opt);
  opt.text = linkname.substr(5);
  opt.value = linkurl;
  }
  else
  {
    var opt = document.createElement("option");
    document.getElementById("link_5bl").options.add(opt);
    opt.text = linkname;
    opt.value = linkurl;
}
}
//]]>
</script>


3. 글 보관함 스킨 수정

글 보관함의 소스는 아래와 같이 생겼다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<s_sidebar_element>
<!-- 글 보관함-->
<div class="widget">
<h3>글 보관함</h3>
<ul>
<s_archive_rep>
<li>
<a href="[#\#_archive_rep_link_##]">[#\#_archive_rep_date_##] </a>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>

위의 하일라이트된 부분을 아래와 같이 수정한다.

  <select id="archivelist" onchange="document.location=options[selectedIndex].value;" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif;color:#2970A6;width:214px;">
  <option value="">--- 기간 선택 ---</option>
  <s_archive_rep>
  <option value="[#\#_archive_rep_link_#\#]">[#\#_archive_rep_date_#\#] ([#\#_archive_rep_count_#\#])</option>
  </s_archive_rep>
  </select>

여기서 주목할 부분은 1행의 archievelist와 color, width.

archievelist는 위의 2.에서 설명한 archievelist이다.
color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.

즉, 이 부분들은 자신의 스킨에 맞게 수정해줘야 한다.


4. 링크 스킨 수정

링크의 소스는 아래와 같이 생겼다.
역시, 조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<s_sidebar_element>
<!-- 링크 모듈 -->
<div id="link" class="module">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[#\#_link_url_#\#]" onclick="window.open(this.href); return false"> [#\#_link_site_#\#].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>

위의 하일라이트된 부분을 아래와 같이 수정한다.

<img src="./images/bnl_ico_1qa.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_1qa" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- QAOSian 여러분 ---</option>
</select><br/>
<img src="./images/bnl_ico_2te.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_2te" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 기술 관련 사이트 ---</option>
</select><br/>
<img src="./images/bnl_ico_3mo.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_3mo" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 영화 세상 ---</option>
</select><br/>
<img src="./images/bnl_ico_4so.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_4so" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 사회에도 관심을 ---</option>
</select><br/>
<img src="./images/bnl_ico_5bl.gif" align="absmiddle" width="26" height="9">&nbsp;
<select id="link_5bl" onchange="window.open(this.value);" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#2970A6;width:180px;">
<option value="">--- 좋은 분들 ---</option>
</select>
<s_link_rep>
<div style="display:none;">
<script type="text/javascript">
appendlink("[#\#_link_site_#\#]", "[#\#_link_url_#\#]");
</script>
</div>
</s_link_rep>

여기서 주목할 부분은 표시한 행들.
link_1qa, link_2te 등은 링크를 분류한 것이다.
(전술했듯이) 총 5개의 목록으로 구분되어있고, 1qa_로 시작되는 링크는 link_1qa에, 2te_로 시작되는 링크는 link_2te에 삽입한다.
(3, 4, 5도 마찬가지다)

물론, 여기서도 color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.

이 부분들 즉, 드롭다운 목록을 구분하거나 색 및 폭은 자신의 스킨에 맞게 수정해줘야 한다.


5. 링크 제목 수정

지금까지 한 작업은 링크를 제목에 따라 각각의 위치에 삽입하는 방법이었다.

마지막으로 링크의 홈페이지 제목을 수정한다.
QAOS 팁'n텍, 순디자인연구소 등은 QAOS 카테고리에 들어갈 것이라 [1qa] QAOS 팁'n텍, [1qa] 순디자인연구소로 수정.
구차니의 잡동사니 모음은 technical 카테고리에 들어갈 것이라 [2te] 구차니의 잡동사니 모음으로 수정.
이런 식으로 모든 제목을 분류에 따라 수정한다.

이렇게 수정하면 아래와 같은 모습을 볼 수 있다.

사용자 삽입 이미지

앞의 이미지 재활용. v^.^v


덧. 하경 님의 댓글을 참조해 일부 코드를 수정함 (2009. 10.25)

티스토리에서 링크를 드롭다운 목록으로 보여주기

이미 많은 분들이 사용하시고 있고, 방법도 알려질만큼 알려졌다고 생각했는데, 의외로 물어보시는 분들이 많았다.
나도 배워서 쓰는 것이라 가급적 포스팅은 하지 않으려고 했는데, 질문이 좀 많이 들어와 걍 포스팅함.

블로그 스킨에서 사이드바를 가볍게 유지하는 것은 모든 블로거의 꿈이요 소망이다.
너무 많은 정보를 담으면 보기가 싫고, 너무 정보가 없으면 접근성이 부족하고...

글 보관함과 링크를 관리하는데 내가 선택한 것은 다름 아닌 드롭다운 목록.

사용자 삽입 이미지

바로 이것이긴 한데, 여기선 좀 더 단순한 방식을 설명함.


위 캡쳐 화면에선 2가지 스타일의 목록을 사용했다.
하나는 글 보관함에 적용한, 모든 내용을 한 곳에 몰아넣기.
또 하나는 링크에 적용한, 목록을 구분하여 나눠서 저장하기.

하지만, 본 포스트에서는 링크를 하나의 목록에 저장하는 방법을 설명한다.

링크를 드롭다운 목록으로 보여주려면 아래와 같이 수정한다.

링크의 소스를 찾는다. 보통 아래와 비슷하게 생겼다.
조금씩 모양은 다르지만, 하일라이트 처리된 부분은 거의 동일하다.

<s_sidebar_element>
<!-- 링크 모듈 -->
<div id="link" class="module">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[#\#_link_url_#\#]" onclick="window.open(this.href); return false"> [#\#_link_site_#\#].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>

위의 하일라이트된 부분을 아래와 같이 수정한다.

<select id="linklist" onchange="document.location=options[selectedIndex].value;" style="font:1.0em Verdana, Helvetica, Arial, Gulim, sans-serif;color:#2970A6;width:214px;">
<option value="">--- 링크 목록 ---</option>
<s_link_rep>
<option value="[#\#_link_url_#\#]">[#\#_link_site_#\#]</option>
</s_link_rep>
</select>

여기서 주목할 부분은 표시한 1행.

color는 드롭다운 목록 글자의 색이고, width는 드롭다운 목록의 가로 폭이다.
이 부분들은 자신의 스킨에 맞게 수정해줘야 한다.

이렇게 수정하면 훨씬 깔끔한 링크 목록을 볼 수 있다.

덧. 하경 님의 댓글을 참조해 일부 코드를 수정함 (2009. 10.25)


2009년 10월 16일 금요일

해결해줄 기미가 안 보이는 티스토리 버그들

1. 새 관리의 치명적 버그로 새 관리는 사용 불가

<pre> 태그를 이용해 코드를 입력하면 자동으로 태그가 추가되는 버그가 있어 새 관리를 사용할 수 없다.

코드를 입력하지 않는 블로그야 상관이 없지만, 여기처럼 심심하면 한번씩 코드를 올리는 블로그에선 사용 불가다.
기존 관리에서 코드를 입력해도 새 관리에서 열기만 하면 개떼같은 <br /> 태그가 자동삽입되니 근처에도 안 간다.

이 문제를 얘기하니 확인해보겠단 애매한 답 뿐이다.

사용자 삽입 이미지

두 달이 되어가는데, 확인이나 했을까 모르겠다



2. 기존 관리로는 크롬에서 위지윅 편집 불가

크롬에서 기존 관리 모드를 사용하면 위지윅 편집기가 동작하지 않는다.
많은 사람들이 이 문제를 제기했더니 나름 수정을 했다는데, 오직 새 관리에서만 위지윅 편집기가 동작한다.

새 관리의 버그도 해결하지 않고, 기존 관리에서 사용도 어렵게 해놓고는 간단한 답으로 도망간다.
"티스토리는 인터넷 익스플로러와 파이어 폭스에 최적화되어 있습니다."

이해를 못 하는 것 같은데... 크롬에 최적화를 해달라는 게 아니라 크롬에서 정상적인 동작만 되게 해달란 거다.

참, 이 문제는 오페라에서도 똑같이 발생한다.


3. 아직도 여전한 스킨 버그

스킨에서 비밀글 여부 체크 박스의 코드는 아래와 같다.
이 코드는 티스토리 스킨 제작 가이드에서 그대로 가져온 것이다.
<input type="checkbox" name="[#\#_rp_input_is_secret_#\#]" class="checkbox" />
<label for="secret"> 비밀글 </label>

하지만, 이 코드는 제대로 동작하지 않는다.
rp_input_is_secret라는 치환자는 절대로 치환되지 않는 신비의 치환자다. 그냥 사라진다.

그런데, 자동으로 생성되는 코드인 addComment엔 아래와 같은 줄이 있어 name이 "secret"인 체크박스만 인식한다.
  if(oForm["secret"] && oForm["secret"].checked)
queryString += "&secret_" + entryId +"=1";

즉, 비밀글 체크박스를 동작하게 하려면 아래와 같이 써야 하는 것이다.
<input type="checkbox" name="secret" class="checkbox" />
<label for="secret"> 비밀글 </label>

그리고, 방명록에도 같은 문제가 있으며, 같은 방식으로 해결할 수 있다.


2009년 10월 10일 토요일

플래쉬 갤러리 삽입시 적절한 크기는 얼마일까?

사용자 삽입 이미지

블로그에 여러 장의 그림을 삽입할 때 플래쉬 갤러리를 사용한다.
그런데, 이 플래쉬 갤러리의 크기가 은근히 신경쓰였다.

원본 이미지의 크기보다 너무 크면 여백만 많아 허전해지고, 너무 작으면 이미지가 어색하게 나온다.
(잘 보면 축소/확대할 때 리샘플링이 아닌, 리사이징(nearest neighbourhood)만 함)

따라서 최소한의 컨트롤 영역의 크기만을 남기도록 지정해야 나름 예쁜 사진을 볼 수 있다.

경험으로 찾은 수치는 가로는 +50, 세로는 +20.
그러니까 일일이 숫자를 바꿔가며 찾는 짓을 했다는 뜻이다. OTL

2009년 9월 28일 월요일

자신의 티스토리/텍스트큐브 포스트를 한눈에 보자! (재수정)

블로그를 관리하다보면 그럴 때가 있다.

내 글 중에 어디에선가 이런 내용이 있는데, 딱히 기억나지 않을 때...
검색기능 써서 일일이 뒤져보니 막상 검색이 안 될 때...
그림이고 뭐고 다 날리고 글만 한눈에 보고 싶을 때...

그런 경우에 사용할 수 있는 프로그램을 공개한다.

이 프로그램은 티스토리/텍스트큐브의 백업 파일(XML)에서 제목, 본문 등 최소한의 정보만을 HTML로 재구성해준다.

사용자 삽입 이미지

1.2로 업데이트 되어서도 단순하기 짝이 없는 화면은 역시 그대로임


이 프로그램의 기능은 아래와 같다.

1. XML 파일을 통째로 읽어 HTML로 재구성 (4GB 이상의 파일도 잘 읽고 쓰므로 첨부가 있어도 상관없음 ㅎㅎ)

2. css나 이미지 등의 별도 파일은 생성하지도 사용하지도 않음

3. HTML 본문의 폭 지정 (이것도 기능이냐면 할 말 없음)

4. 페이지 당 포스트 수를 지정해서 전체를 한 페이지에도 넣을 수 있고, 몇 개의 파일로 구분할 수도 있음

5. 각 포스트 별 접기/펼치기 및 전체 접기/펼치기의 기본적인 컨트롤 제공

6. 이미지, 첨부파일 및 화면에 표시되지 않는 공백이나 엔터(CR/LF/탭) 최소화

7. <br /> 태그가 3개 이상이면 3개만 남김

8. ASCII 형식으로 저장. 따라서, 일부 글자나 부호가 표시되지 않을 수 있음.
    (UTF-8을 굳이 ASCII로 변환하는 이유는 조금이라도 파일 크기를 더 줄이기 위함)

9. 저장되는 포스트의 순서를 지정. (새 포스트 → 헌 포스트 또는 그 반대)

생성된 HTML의 샘플 화면은 아래와 같다.

사용자 삽입 이미지

전체 포스트를 접은 상태임


아래 파일을 다운받아 압축을 풀면 사용할 수 있으며, (언제나 그렇듯이) 추가적인 라이브러리는 필요하지 않다.
윈도우 XP 이상의 환경이라면 어디서나 잘 동작한다.


덧1. 텍스트큐브의 데이터를 제대로 읽지 못하는 문제가 있어 수정했음. (2009.9.18)
덧2. 4GB 이상의 파일을 이상없이 읽고 쓸 수 있도록 수정함. 아싸! (2009.9.27)

2009년 9월 25일 금요일

티스토리/텍스트큐브 태그를 손쉽게 정리하자!

티스토리 사용하면서 내가 느낀 불편함 중 하나는 태그 정리다.

태그는 대략 아래와 같은 규칙 및 특성을 갖는다.

1. 대소문자의 구분은 없다. 즉, "it"와 "IT"는 같은 태그다.

2. 하지만, 처음 지정한 태그의 대소문자 규칙을 무조건 따라 통일한다.
   즉, 맨 처음 "it"라는 태그를 썼으면, 이후 "IT", "It", "iT"는 자동으로 "it"로 바뀐다.

3. 태그 사이에 공백이 들어갈 수 있으며, 공백도 그냥 문자다.
   즉, "제임스 본드"와 "제임스본드"는 다른 태그다.

4. 컴마(,)는 태그로 지정할 수 없다.

5. 특정 태그를 몽땅 없애거나, 몽땅 변환하는 기능은 없다.
   따라서, "James Bond"와 "제임스 본드"가 공존하기 시작하면 정신이 없어진다.

문제는 처음 블로그를 운영할 때는 별 생각없이 태그를 지정하다 막상 정신을 차려보면 태그를 정리할 수 없게 된단 거다.
(이건 시스템의 문제라기 보단 그냥 인간이 운영하기 때문에 생기는 한계 같음)

이런 문제를 한방에 해결할 수 있는 방법을 찾다가 결국 방법을 찾는 건 포기하고, 프로그램을 하나 간단하게 만들었다.

사용자 삽입 이미지

이젠 식상할 만도 한 특성인 단순하기 짝이 없는 화면.


이 프로그램은 백업파일을 읽어서 사용된 태그를 출력해주고, 규칙에 따라 태그를 정리해 다시 XML 파일로 기록해준다.
이 프로그램의 주요 기능 및 특성은 아래와 같다.

1. 태그 목록 파일은 UTF-8이 아니라 ANSI 포맷으로 저장하고 읽어들임
   (UTF-8 포맷을 쓰는 것이 상식이지만, 태그목록을 대부분 메모장으로 편집할 가능성이 높아 어쩔 수 없었음)

2. 태그 목록을 출력할 때 사용 빈도수를 함께 출력할 수 있음

3. 4GB 이상의 백업 XML 파일도 문제 없이 읽고 씀

4. 태그 목록을 출력할 때와 변환할 때 같은 에디트 박스를 사용함.
    즉, 태그 목록을 출력한 뒤 이 목록을 입맛에 맞게 수정하고 다시 태그 변환을 하면 됨.
    (한편으로는 귀차니즘으로 이런 식으로 구성한 면도 있음)

사용 방법 및 태그 목록 변환 규칙은 아래와 같다.

1. 백업 XML을 정한 뒤 기본 설정인 "TAG 목록 출력" 라디오 버튼을 그대로 두고 "처리!" 버튼 클릭

2. 태그 목록(text file)으로 아래와 같은 형태의 텍스트 파일이 생성됨. (ANSI 포맷이라 메모장으로 읽으면 됨)

it, 25
j, 1
James Bond, 15
제임스 본드, 8
제임스본드, 1
라데팡스, 1
파리, 1

3. 2번에서 생성된 파일을 직접 수정함. 규칙은 아래와 같음.

 - 규칙의 각 줄은 엔터로 구분됨
 - 각 태그는 컴마로 구분됨
 - 한 줄에 태그가 하나 있으면 그 태그를 삭제한다는 뜻임
 - 태그가 두 개 이상이면 맨 앞에 적힌 태그로 변경한다는 뜻임

즉, 위의 태그 목록에서 "it"는 대문자 "IT"로 바꾸고, "제임스 본드" 관련 태그는 몽땅 "제임스 본드"로 바꾸며 잘못 입력된 태그인 "j"를 없애려면 목록을 아래와 같이 작성하면 된다.

IT, it
제임스 본드, James Bond, 제임스본드
j
이렇게 하면 목록에서 언급되지 않는 "라데팡스", "파리"는 그대로 두고, 언급되는 태그만 수정되게 된다.
또한, 한 포스트에 "제임스 본드"와 "James Bond" 태그가 모두 있는 경우 "제임스 본드" 태그는 한번만 기록된다.

4. 설정을 "태그 변환"으로 바꾼 뒤 "처리!" 버튼 클릭.
새로운 파일명으로 새 백업파일이 생성된다.

이 프로그램을 사용하려면 아래 압축파일을 풀면 된다.
언제나 그렇듯이 윈도우 XP 이상의 환경에서는 어떠한 추가 라이브러리도 필요 없고, 언제라도 실행이 가능하다.



덧. 이 프로그램을 만들다 보니 티스토리에서 글의 작성자에 대한 사소한 문제가 생각났다.
팀블로깅을 하거나, 두 블로그를 합치는 등의 과정에서 글의 작성자가 제대로 인식되지 않는 경우가 발생한다.
(본 블로그도 예전 즉, http://bluenlive.net 시절에 작성된 글의 경우 작성자가 비회원으로 나옴)

위의 프로그램을 완성한 뒤에 이러한 목록을 정리해줄 수 있도록 슬쩍 수정했다.
화면이 비슷한데, 사실 화면이 비슷한 것이 아니라 아예 똑같다. 일부 이름과 파일명만 수정했다.

사용자 삽입 이미지

이 프로그램은 백업 XML 파일에서 작성자(author)의 목록을 뽑아주며, 정해진 규칙에 따라 작성자를 통일해준다.
즉, 아래와 같은 목록은

83261, 1284
작성자가 1284인 글을 찾아 작성자를 83261로 바꿔준다.
이 작성자는 티스토리/텍큐닷컴 내부적으로 부여되는 숫자이며, 백업 파일의 <author ....> 태그에서 볼 수 있다.

물론, 설치형 텍스트큐브에서는 이 <author> 태그 자체가 존재하지 않는다.
또한, 태그 정리 프로그램과는 달리 작성자를 없애는 기능은 제공하지 않는다.

이 프로그램은 위의 압축파일에 함께 넣어두었다.

2009년 8월 8일 토요일

Cumulus for Tistory 1.21a 업데이트! (버그패치 포함)

태그 구름을 멋지게 출력해주는 플러그인인 Cumulus for Tistory 1.21는 사소한 버그가 있다.

@, &, + 등 일부 태그가 제대로 출력되지 않거나, 출력이 되어도 정상적으로 클릭이 되지 않는 문제다.
일부 태그를 화면에 출력하지 않는 미봉책을 사용했었는데, 이걸 모든 태그에 대해 정상동작하도록 대폭 수정했다.

사용자 삽입 이미지

이렇게 & @ '



1. 파일의 설치

아래 파일을 다운받아 압축을 풀면 swfobject.js, TiCumulus.js 그리고 tagcloud.swf 세 개의 파일이 나온다.
이  세 파일을 스킨 직접올리기 기능을 이용해서 올린다.

TiCumulus_v121a.zip

엔터튤립9 글꼴을 이용해서 만들어 파일 크기가 157KB밖에 안 됨



2. 스킨 수정 (새로 설치하는 것을 기준으로 함)

우선 헤더에 아래와 같이 두 줄을 추가한다.

<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript" src="./images/TiCumulus.js"></script>

다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾는다.

<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>

스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.

이 부분을 아래와 같이 수정한다.

<div id="htags" style="display:none;"><tags>
<s_random_tags>
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
</s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript">
//<![CDATA[
var flashvars = {
tcolor: "0x2970A6",
hicolor: "0x462A56",
mode: "tags",
distr: "true",
tspeed: "100",
tagcloud: document.getElementById('htags').innerHTML.E4Cumulus()
};
var params = {
allowScriptAccess: "always",
wmode: "opaque",
bgcolor: "#f7f7f7"
};
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params);
//]]>
</script>

조금 길지만 소스 보기를 한 뒤에 복사하면 된다.

a. 22행의 "100%", "200"은 각각 가로, 세로의 크기임.

b. 20행의 "#f7f7f7"는 배경의 색상임.

c. 10행의 "0x2970A6"는 태그의 기본색상임.

d. 11행의 "0x462A56"는 선택된 태그의 색상임.

e. 1.21에 비해 바뀐 부분이 15행. 기존 버전에 비해 훨씬 정교하고 정확하게 변환하도록 수정되었음.

그럼 잘 쓰시기 바란다!!!

※ IE에서도 배경색이 잘 동작하도록 수정됨 (2009. 10. 19)

2009년 7월 17일 금요일

티스토리에서 악플러의 IP 차단하는 방법

이 포스트는 도아님의 악플러, 방문하면 구글로 보내자!의 내용 중 일부를 도아님 허락 하에 수정하여 올림


설치형 블로그와는 달리, 티스토리와 같은 가입형 블로그는 특정 IP 주소에서 접근하는 것을 차단하기가 어렵다.
javascript에서 로컬 PC의 IP 주소를 확인하는 것이 어렵기 때문이다.

또한, 로컬 IP 주소를 확인해도 공유기 뒤에 있다면 공유기의 주소를 확인하는 것 역시 쉽지 않다.

Zach라는 분이 Google App Engine에 로컬 IP 주소를 읽어주는 코드를 올려주셨다.

이를 이용해서 악플러의 IP를 차단하려면 블로그 스킨의 헤더에 아래와 같은 코드를 추가하면 된다.

<script type="text/javascript">
//<![CDATA[
   function getip(json){
   var banip = '120.142.*.*|58.232.*.*|125.251.*.*';
   var remoteip = json.ip;
   if(banip.match(remoteip)) document.location.href = 'http://google.com/';
}
//]]>
</script>
<script type="text/javascript" src="http://jsonip.appspot.com/?callback=getip"></script>

4행의 banip는 차단을 원하는 주소들의 목록이다.
주소 사이는 |를 이용해서 분리하면 된다.
현재 적어놓은 주소는 샘플이기 때문에 *로 표시했지만, 실제 주소를 적어야 한다.

6행의 주소는 블로그 대신해서 열어주는 페이지이다.

이 코드는 IE6~8, FF2~3.5, 크롬 2~3 등 거의 대부분의 웹브라우저에서 모두 정상동작한다. ^^;

덧. 차단할 대상이 악플러라면, 구글과 같은 나약한 주소보다는 아래와 같은 강한 주소를 추천한다.

Google에서 shit 검색:
http://images.google.co.kr/images?q=shit&oe=utf-8&rls=org.mozilla:ko:official&client=firefox-a&um=1&ie=UTF-8&sa=N&hl=ko&tab=wi


Google에서 똥 검색:
http://images.google.co.kr/images?hl=ko&client=firefox-a&rls=org.mozilla%3Ako%3Aofficial&um=1&newwindow=1&sa=1&q=%EB%98%A5&btnG=%EC%9D%B4%EB%AF%B8%EC%A7%80+%EA%B2%80%EC%83%89&aq=f&oq=


대검찰청:
http://www.spo.go.kr/


국정원(악플러에게 국정원 시계라도 하나 드리고 싶으면 사용):
http://www.nis111.co.kr/

2009년 7월 12일 일요일

Cumulus for Tistory 1.21 업데이트!

Cumulus for TiStory 공개을 통해 Cumulus 플러그인 1.20의 티스토리 버전을 공개했었다.

이 플러그인이 얼마 전 1.21로 업데이트 되었는데, 이제야 알았다.
티스토리용 플러그인도 한글 글꼴을 사용할 수 있도록 수정하여 1.21로 업데이트 한다.

제작자인 Roy Tanck가 밝히는 수정된 내용은 아래와 같다.

= Version 1.21 =
+ Adds an option to show the regular tag cloud to non-flash users (used to be hidden through CSS).
+ The widget title is now optional.
+ Adds support for 'target' attribute to the Flash movie.
+ XML path can now be set through a flashvar.
+ Fixed markup errors in the compatibility mode.
+ Several minor fixes.


그리고, 티스토리 플러그인(및 설치과정)의 수정된 내용은 아래와 같다.

- Cumulus 1.21을 기반으로 함
- swfobject 2.2 적용 (구조가 좀 더 안정적으로 변했다)
- 태그에 다음의 문자가 들어있어도 정상적으로 전시: &(amp), '(따옴표)


설치과정은 아래와 같다.

1. 파일의 설치

아래 파일을 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다.
이  두 파일을 스킨 직접올리기 기능을 이용해서 올린다.

TiCumulus_v121.zip

엔터 튤립 9 글꼴을 이용해서 만들었다



2. 스킨 수정

우선 헤더에 아래와 같은 한 줄을 추가한다.
swfobject가 2.x 대로 업데이트 되면서 <body>내에 위치하지 않고, <head> 내에 위치하는 것을 권장하고 있다.

<script type="text/javascript" src="./images/swfobject.js"></script>

다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾다.
<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>
스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.

이 부분을 아래와 같이 수정한다.
<div id="htags" style="display:none;"><tags>
<s_random_tags>
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
</s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript">
//<![CDATA[
var flashvars = {};
flashvars.tcolor = "0x2970A6";
flashvars.hicolor = "0x462A56";
flashvars.mode = "tags";
flashvars.distr = "true";
flashvars.tspeed = "100";
flashvars.tagcloud = document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/\'/gi, ' ').replace(/%27/gi, ' ').replace(/&quot;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'");
var params = {};
params.allowScriptAccess = "always";
var attributes = {};
attributes.bgcolor = "#f7f7f7"
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params, attributes);
//]]>
</script>
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.

a. 20행의 "100%", "200"은 각각 가로, 세로의 크기이다.

b. 19행의 "#f7f7f7"는 배경의 색상이다.

c. 10행의 "0x2970A6"는 태그의 기본색상이다.

d. 11행의 "0x462A56"는 선택된 태그의 색상이다.


인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.
설치된 화면은 아래와 같다.

사용자 삽입 이미지

당연한 얘기지만... 화면은 전혀 바뀌지 않았다.


2009년 6월 11일 목요일

BBCode for TiStory 3.1 업데이트: 이모티콘 기능 추가

들어가기에 앞서...

여러분은 티스토리의 이모티콘을 어떻게 생각하시는가?
난 개인적으로 굉장히 불만이다.

이모티콘이 예쁘지 않은 것은 기본인데다, 버그까지 있다.

그냥 서버 쪽에서 이미지만 좀 업데이트해줘도 좋을 것 같지만, 티스토리는 그런 신경 따윈 쓰지 않는다.
그냥 배째라고 앉아있어도 사용자들은 떠나지 않을 것이라 믿는 것 같다.


BBCode는 3.x대에 와서 충분히 안정화되었다고 생각한다.
그래서 가급적이면 업데이트를 자제하려고 했는데, 이놈의 이모티콘은 도저히 용서가 안 된다.
못생기려면 안정적이기라도 해야할 텐데, 이건 그런 개념이 없다.

우선, 아래의 화면을 보자. 이건 이모티콘이 설정된 상태에서 javascript 코드 일부를 답글로 단 화면이다.

사용자 삽입 이미지

); 가 8개나 들어있는 듯한 javascript 코드


이모티콘과 충돌이 난 것 같은가? 아니다.
원래의 내용을 보자.

사용자 삽입 이미지

짜잔~ ); 는 단 하나도 없다!


그냥 "100"); 이라고 썼을 뿐인데, 이걸 "100"[이모티콘];라고 변형을 한 것이다.
위 내용은 정상적으로 변환되면 이모티콘으로 해석될 부분이 단 하나도 없다.

이따위 버그가 없는 이모티콘 기능을 BBCode에 포함했다.
더불어, 이모티콘을 좀 더 예쁜 놈으로 교체했다. 그리고, 3개를 더 추가했다.

사용자 삽입 이미지
:D

사용자 삽입 이미지
:O

사용자 삽입 이미지
:x


따라서 이 BBCode를 사용하시면 2가지를 염두에 두어야 한다.

1. 기본 플러그인 중에서 이모티콘 플러그인은 사용하지 않아야 함
2. 이모티콘은 자동적으로 적용됨


원래 이모티콘은 잘 사용되지 않는 문자 조합으로 만들어진 것이라 고의로 집어넣지 않으면 만날 일은 별로 없다.
(그런 의미에서 --;는 이모티콘으로는 넌센스다. a--;와 같은 형태로 C/C++ 등의 언어에서 쉽게 볼 수 있으니까.)
그래서, 자동으로 적용되는 것이 그렇게 큰 제약은 되지 않을 것이라 생각한다.

아래 파일을 다운받아 설치하면 되며, 설치법은 역시 BBCode for Tistory 2.1을 참고하기 바란다.


덧. 첨부파일엔 bbemo?.gif의 파일 9개가 있다. 이 파일들이 이모티콘이다.


2009년 6월 4일 목요일

BBCode 삽입 도우미 만들기 (수정 공개)

Forevler님의 패치를 적용해서 다시 올린다. Forevler님께 다시 한번 감사드린다.

기존 포스팅에서 수정된 내용은 아래와 같다.


1. insertAtCursor() 함수 수정 (버그 패치 및 약간의 속도 증가)
2. 아이콘 링크 인자 수정 (버그 패치)

티스토리에서 BBCode for TiStory 3.0를 통해 BBCode를 사용할 수 있게 만들었다.
하지만, 막상 이걸 입력하려니 의외로 손이 많이 가더라.
(기술이 발달하면 편리성을 가져다준다지만, 더 불편해지는 경우가 훨씬 많다는 거~)

하지만, 스킨을 조금만, 아주 조금만 수정하면 아래와 같은 BBCode 입력 도우미 버튼(이하 도우미)을 달 수 있다.

사용자 삽입 이미지

Forevler님의 버튼 배치를 업어왔습니다. 이게 구성하기도 깔끔하고 예쁘더군요.


1. 추가 파일 설치


일단 아래의 파일을 다운받아 압축을 풉니다. 압축을 풀면 gif 파일 12개가 나온다.
그 파일 12개를 모두 스킨→직접올리기에서 업로드한다.

쉽죠잉?



2. 추가 스타일 지정

다음 먼저 할 일은 버튼 등에 사용될 스타일을 추가하는 것이다.
HTML/CSS 편집 메뉴에서 style.css의 맨 끝에 아래 내용을 추가한다.

/* BBCode 도우미 버튼들 */
.emoticonborder { border-style: solid; border-width: 1px; border-color: #cbcbcb; padding: 5px; margin: 0 0 7px 0; height: 22px;}
.emoticons { cursor:pointer; float: left; margin:2px 2px 1px 0; }
.emoticonspace { float: left; margin-right:0px; }
.emoticonusage { cursor:pointer; float: right; }
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; background-color:transparent !important;}
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }



3. skin.html 수정 #1 : javascript 코드 삽입

여기부터는 HTML/CSS 편집 메뉴에서 skin.html 파일을 수정한다.
내용이 길고 약간 (아주 약간) 복잡하므로 셋으로 나누어 올린다.

아래의 javascript 코드를 삽입한다.
삽입 위치는 헤더의 <title> ~ </title> 바로 다음이다.

<script type="text/javascript">
//<![CDATA[
//이모티콘 추가
function insertAtCursor(myField, openTag, closeTag)
{
var box = document.getElementById(myField);
//IE support
if (/msie/i.test (navigator.userAgent))
{
box.focus();
var sel = document.selection.createRange();
sel.text = openTag + sel.text + closeTag;
}
//Mozilla/Firefox/Netscape 7+ support
else
{
var startPos = box.selectionStart;
var endPos = box.selectionEnd;
box.value = box.value.substring(0, startPos) + openTag + box.value.substring(startPos, endPos) + closeTag + box.value.substring(endPos, box.value.length);
box.selectionStart = box.selectionEnd = endPos + openTag.length + closeTag.length;
}
box.focus();
}

function bbcodeintro(){
alert('1. 일반 BBCode \n\n[i]이탤릭[/i] : 이탤릭\n[b]볼드[/b] : 볼드\n[u]밑줄[/u] : 밑줄\n[quote]인용문[/quote] : 인용문\n[img]이미지 URL[/img] 또는 [img=이미지 URL] : 이미지\n[url=http://qaos.com]QAOS[/url] : QAOS (링크)\n[color=red]색깔[/color] : 색깔\n[email=주소]이름[/email] 또는 [email]주소[/email] : 전자우편 주소\n[list][*][/list] : 불릿이 달린 리스트\n\n2. 추가 BBCode\n\n[size=폰트크기]내용[/size] : 글자 크기 지정\n[ru]빨간 밑줄[/ru] : 빨간 밑줄\n[bu]파란 밑줄[/bu] : 파란 밑줄\n[rb]빨간 볼드[/rb] : 빨간 볼드\n[bb]파란 볼드[/bb] : 파란 볼드\n[red]빨간색[/red] : 빨간색\n[blue]파란색[/blue] : 파란색\n[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) \n[link=http://qaos.com]QAOS[/link] : QAOS (링크) \n[c=red]색깔[/c] : 색깔\n[q]인용문[/q] : 인용문\n[embed=주소 (폭) (높이)] 또는 [embed]주소 (폭) (높이)[/embed]: 동영상 embed \n[embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]\n[embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]\n※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정한다.');
}
//]]>
</script>



4. skin.html 수정 #2 : 방명록 수정

티스토리 스킨에는 <textarea> 태그가 2번 사용된다.
하나는 방명록, 다른 하나는 댓글 입력창으로 둘 다 수정해야 한다.

우선은 방명록을 수정하겠다.
아래와 비슷하게 생긴 부분을 찾는다.
<textarea name="[#\#_guest_textarea_body_#\#]" cols="50" rows="6"> </textarea>
여기서 굳이 "비슷하게"란 표현을 쓴 이유는 뒤의 인자가 조금씩 다르기 때문이다.
cols, rows는 대부분 다르고, 가끔은 id가 적혀있는 경우마저 있다.

이곳에 id를 아래와 같이 추가한다.
<textarea name="[#\#_guest_textarea_body_#\#]" id="[#\#_guest_input_comment_#\#]" cols="50" rows="6"> </textarea>
id만 추가한 것인데, 혹시나 다른 id 값이 적혀있었으면 그 내용을 지우고 이것으로 대체하면 된다.



다음으로 할 일은 이 부분 즉, <textarea> 태그 바로 앞에 다음의 내용을 추가하는 것이다.
이 부분이 바로 방명록의 도우미 부분이다.
<div class="emoticonborder" style="/*width:604px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<strong>가</strong></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<em>가</em></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<u>가</u></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<font color="red">가</font></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
"인용"</a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" src="./images/bb_img.gif" align="texttop" class="rollover">
<img src="./images/bb_imgb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img class="rollover" src="./images/bb_url.gif" align="texttop" class="rollover">
<img src="./images/bb_urlb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('[#\#_guest_input_comment_#\#]','','[embed=주소 폭 넓이]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" src="./images/bb_emb.gif" align="texttop" class="rollover">
<img src="./images/bb_embb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon01.gif">
<img src="./images/bb_emo1.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':P');return false;" title=":P" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon02.gif">
<img src="./images/bb_emo2.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '8D');return false;" title="8D" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon03.gif">
<img src="./images/bb_emo3.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon04.gif">
<img src="./images/bb_emo4.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('[#\#_guest_input_comment_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon05.gif">
<img src="./images/bb_emo5.gif"></a></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></span></div>
</div>

맨 앞부분에 주석처리되어 있는 /*width:604px*/ 부분은 스킨에서 폭을 별도로 지정하는 경우엔 적절한 값을 스킨에다 적기 위해 빼놓은 부분이다.
필요시 주석을 제거하고 원하는 값을 지정하면 더 깔끔한 화면을 볼 수 있다.



5. skin.html 수정 #3 : 댓글창 수정

아래와 비슷하게 생긴 부분을 찾는다.
<textarea name="[#\#_rp_input_comment_#\#]" rows="10" cols="50"></textarea>
여기도 앞과 같은 이유로 "비슷하게"란 표현을 썼다.
이곳에 id를 아래와 같이 추가한다.
<textarea name="[#\#_rp_input_comment_#\#]" id="comment_[#\#_article_rep_id_#\#]" rows="10" cols="50"></textarea>
역시 id만 추가한 것인데, 혹시나 다른 id 값이 적혀있었으면 역시 그 내용을 지우고 이것으로 대체하면 된다.

마지막으로 할 일은 이 부분 즉, <textarea> 태그 바로 앞에 다음의 내용을 추가하는 것이다.
이 부분은 댓글창의 도우미 부분이다.
<div class="emoticonborder" style="/*width:604px;*/">
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[b]','[/b]');return false;" title="진하게" class="rollover">
<strong>가</strong></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[i]','[/i]');return false;" title="기울임" class="rollover">
<em>가</em></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[u]','[/u]');return false;" title="밑줄" class="rollover">
<u>가</u></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[color=red]','[/color]');return false;" title="글자색" class="rollover">
<font color="red">가</font></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[quote]','[/quote]');return false;" title="인용" class="rollover">
"인용"</a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" src="./images/bb_img.gif" align="texttop" class="rollover">
<img src="./images/bb_imgb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img class="rollover" src="./images/bb_url.gif" align="texttop" class="rollover">
<img src="./images/bb_urlb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_[#\#_article_rep_id_#\#]','[embed=주소 폭 넓이]','[/img]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" src="./images/bb_emb.gif" align="texttop" class="rollover">
<img src="./images/bb_embb.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon06.gif">
<img src="./images/bb_emo6.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon01.gif">
<img src="./images/bb_emo1.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':P');return false;" title=":P" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon02.gif">
<img src="./images/bb_emo2.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '8D');return false;" title="8D" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon03.gif">
<img src="./images/bb_emo3.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon04.gif">
<img src="./images/bb_emo4.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_[#\#_article_rep_id_#\#]', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="http://cfs.tistory.com/blog/plugins/EmoticonOnComment/emoticon05.gif">
<img src="./images/bb_emo5.gif"></a></div>
<div class="emoticonspace">&nbsp;</div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></div>
</div>


이렇게 수정하면 앞에서 본 것과 같은 도우미를 장착할 수 있다.
그리고, 여기서는 이모티콘 플러그인을 설치한 것으로 가정하고, 이모티콘을 삽입해주는 부분도 함께 구현했다.
만약, 이모티콘을 사용하지 않는 경우에는 적절히 수정해서 사용하시기 바란다.
(게으르니즘이 결코 아니다. 쿨럭)

2009년 5월 21일 목요일

짜잔~ Cumulus for TiStory 공개 (버그수정)

블로그의 구성요소 중 태그목록은 좋은 기능이긴 하지만, 미관상 그닥 예쁘지 않아 정작 쓰는 사람이 많지는 않다.
태그목록의 기능은 그대로 유지하면서도 보기에도 멋있는 기능을 구현한 플러그인으로 WP-Cumulus가 있다.

사용자 삽입 이미지

WP-Cumulus


이 플러그인은 Roy Tanck라는 분이 공개한 워드 프레스용 명품 플러그인이다.
하지만, 우리나라에서 그리고, 티스토리 환경에서 사용하기엔 한계가 있었다.

1. 워드 프레스 용으로 개발되어 티스토리 환경에서는 많은 변형이 필요함
2. 글꼴이 swf 파일에 포함되어있는데, 영문 글꼴만 포함되어 있음

이 두 가지 한계를 극복한 티스토리용 Cumulus를 공개한다.

사용자 삽입 이미지

짜잔~ Ti-Cumulus


설치과정은 아래와 같다.


1. 파일의 설치

아래 링크를 다운받아 압축을 풀면 swfobject.js와 tagcloud.swf 두 개의 파일이 나온다.
이  두 파일을 스킨 직접올리기 기능을 이용해서 올린다.



2. 스킨 수정

스킨을 직접 편집해서 아래와 같은 내용을 찾는다.
<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>
스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.

이 부분을 아래와 같이 수정한다. (& 출력 버그 수정: 2009. 5. 22)
<div id="htags" style="display:none;"><tags>
<s_random_tags>
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
</s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zoc.kr">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript">
var t = new SWFObject("./images/tagcloud.swf", "tagcloud", "100%", "200", "7", "#ffffff");
t.addVariable("tcolor", "0x222222");
t.addVariable("mode", "tags");t.addVariable("distr", "true");t.addVariable("tspeed", "100");t.addParam("allowScriptAccess", "always");
t.addVariable("tagcloud", document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'"));
t.write("TiCumulus");
</script>
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.
9행의 "100%", "200"은 각각 가로, 세로의 크기이다. 그리고, "#ffffff"는 배경의 색상이다.
(정식 플러그인이 아니라 비주얼한 설정은 불가능함. ㅠ.ㅠ)

그리고, 10행의 "0x222222"는 태그의 기본색상이다.


덧1. 인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.

덧2. mepay님. 코드가 약간 수정되었습니다. 해당되는 부분을 찾아 똑같이 수정하시기 바랍니다.

덧3. rezlog에 텍스트큐브용 Cumulus가 공개되었지만, 설치형에서의 용량의 압박때문에 anti-aliasing이 안 되도록 만들어졌다. Ti-Cumulus는 가입형 티스토리의 장점을 십분 활용해서 anti-aliasing기 적용된 미려한 모습을 보여준다.

덧4. 태그 중에 &(amp)가 들어가면 태그가 표시되지 않는 버그가 있었다.
태그 중에 &가 있으면 공백으로 대치하도록 수정했다. (2009. 5. 22)


2009년 4월 28일 화요일

티스토리 새관리 편집기의 버그: 자동으로 태그가 추가됨

티스토리에서 새관리를 오픈한 것이 2008년 8월 28일이니 지금으로부터 딱 8개월 전입니다.
하지만, 여러가지 이유로 사용자들은 새관리를 많이 사용하지 않고 있습니다.

개인별 호불호가 나뉘겠지만, 제가 아는 대다수의 티스토리 유저분들은 새관리를 싫어하시더군요.
특히 미움을 받는 놈은 편집기입니다.
이 놈은 개선(?) 이후에 불편해졌을 뿐만 아니라 버그가 좀 있어 도저히 쓸 수가 없습니다.

그 중 하나가 <pre> 태그에 관련된 버그로 <pre> 태그로 내용을 감싸면 편집기가 마음대로 엔터를 추가합니다.

이 버그가 신경쓰이는 것이... Syntax Highlighter를 적용하려면 <pre>를 꼭 써야하거든요...

일단 아래와 같은 내용을 입력했습니다.
test 아래 부분의 간단한 C 코드가 <pre> 태그로 감싼 부분입니다.

사용자 삽입 이미지

이것을 HTML 보기로 보면 아래와 같이 나옵니다.
여기까진 별 문제가 없어보입니다만...

사용자 삽입 이미지

이걸 다시 WYSIWYG 모드로 보면 아래와 같이 변신(?)합니다. 젠장!

사용자 삽입 이미지

어떻게 변했는지를 HTML 모드에서 보면 아래와 같은 코드를 볼 수 있습니다.

사용자 삽입 이미지

이걸 다시 WYSIWYG 모드로 보면 아래와 같이 또 변신합니다. 젠장! 젠장!

사용자 삽입 이미지

이번엔 도대체 어떻게 변했는지를 HTML 모드에서 보면 아래와 같은 코드를 볼 수 있습니다.

사용자 삽입 이미지

그럼... HTML 모드로 안 가면 되지 않느냐... 이게 안 됩니다.
<pre> 태그를 넣으려면 무조건 HTML 모드로 가야 하기도 하지만, 근본적으로 편집을 끝내고 저장하면 저장하는 과정에서 일단 <br/>을 추가하고 시작합니다.

기능 개선을 게을리 하는 것도 답답하지만, 이런 근본적인 버그는 제발 좀 잡아주면 좋겠습니다.