콩바구니의 그림일기

티스토리 가 뭔가 대대적인 개편을 시작하려나 봅니다. 그 변화가 구체적으로 어떠한것인지는 지금으로서는 가늠하기 어렵지만. 공지사항에 있는 내용을 보면 그간 지적되왔던 티스토리의 여러가지 문제들(스킨 변경시 CSS업데이트가 잘 안되던 문제 같은것) 이 해결될 전망입니다.
그러한 개편에 앞서서 배타테스트를 시작한다고 하는군요. 이참에 신청서를 작성해볼까 합니다. 선정된다면 열심히 활동할것을 약속드립니다!

본인이 사용하는 사용 환경 (OS 및 인터넷 브라우저)

본인은 마이크로 소프트에의 윈도우XP를 운영체제로 사용하고, 웹브라우저는 파이어폭스를 사용합니다.

티스토리를 사용하면서 가장 좋았던 기능

글작성시 HTML편집모드에서 태그를 입력해주는 기능이 좋더군요. 여러모로 편리합니다. 다른 기능은 특별히 사용하는것이 없습니다.

티스토리를 사용하면서 가장 불편했던 기능

웹표준 문법을 지키지않아 W3C의 유효성검사를 통과하지 못하는 문제가 있습니다. 스킨을 만들어 테스트를 할때 이점때문에 유효성검사를 하는것이 상당히 까다롭게 됩니다. 아예 해당 플러그인을 사용하지 않는 방법으로 유효성검사를 통과했습니다만. 이문제는 꼭 해결되어야 할 사항 이라고 생각합니다.

글작성하면서 스크롤을 위아래로 오르락내리락 해야할경우가 많습니다. 사용하기가 좀 불편합니다. 스프링노트 의 레이아웃 을 도입할수 있다면 글쓰기가 조금 편해지지 않을까 생각합니다.

위지웍 모드 전환후 HTML로 돌아오면 img 태그의 alt 가 사라져버리는 현상이 있습니다. 매우 불편합니다. 저는 이 이유때문에 위지웍을 거의 사용하지 않습니다.

베타테스터가 되어야 하는 이유

티스토리는 티스토리 만의 장점이 있어야 합니다. 하이퍼 텍스트 마크업 랭기지를 마스터한사람이 사용하기에는(사실 그렇게 어려운 언어도 아닌데 왜 다들 어려워하는지 모르겠습니다.) 지금의 티스토리 입력방식도 나쁘지 않습니다. 개선되었으면 하는점이 없는것은 아닙니다만, 그것이 네이버 의 스마트 웹에디터 방식은 아닙니다. 물론 HTML을 잘 모르는사람도 고려해야하고, 그것을 위한 스마트 웹에디터 입니다만, HTML을 잘 아는사람도 사용하기 편리해야 한다는것이 저의 생각입니다. 즉 파워유저를 도 고려해야 한다는 말씀입니다.네이버의 HTML입력방식은 CSS를 링크할수 없는 문제가 있어 티스토리만큼 입력이 자유롭지 않습니다. 굳이 네이버의 스마트 웹에디터를 티스토리가 따라해야할 이유가 없다고 생각합니다.

제가 베타테스터가 되어야 하는 이유는, HTML, CSS 등에 상당한 지식을 가지고 있고, 발생할수 있는 유효성및 접근성 문제등에 구체적인 지적을 할수 있다는 자신감이 있기때문입니다. 베타테스터로 선정해주십시오! 열심히 하겠습니다!

책정보 넣기 문제있습니다.

티스토리에 새로 추가된 플러그인. 책정보 넣기 . 보니까 문제 있더군요. 소스 보고 깜짝 놀랐습니다. 이게 뭡니까?

1. <div id="daum_book" style="border: 1px solid rgb(238, 238, 238); margin: 5px 0px 0px; padding: 10px; width: 94%;">
2. <a id="p_coverlink" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" target="_blank"> <img id="p_cover" src="http://photo-book.hanmail.net/images/book/large/074/l9788925506074.jpg" style="border: 0px solid rgb(221, 221, 221); float: left; margin-right: 10px; height: 99px;"> </a>
3. <a target="_blank" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" id="p_title" style="font-size: 12px; font-weight: bold;">현시연 9</a>
4. <a target="_blank" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" id="p_link" style="background: transparent url(http://cfs.tistory.com/blog/plugins/DaumBookInfo/images/icon_arrow.gif) no-repeat scroll right 3px; font-family: 돋움; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-size-adjust: none; font-stretch: normal; letter-spacing: -1px; color: rgb(153, 153, 153); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-right: 5px; text-decoration: underline; display: inline;">상세보기</a>
     <div id="p_author_area" style="margin-bottom: 8px;"> <span id="p_author">KIO SHIMOKU</span> 지음 | <span id="p_publish">북박스</span> 펴냄 </div>
5.   <div style="overflow: hidden; height: 52px;"> <span id="p_description" style="margin: 2px; font-family: Dotum,Sans-Serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: 1.5; font-size-adjust: none; font-stretch: normal;">지금까지 할 수 없었던 말, 이 자리에서 다 해버리고 싶다! 지금이라면 웃으면서 할 수 있을 것만 같아. 일본에 오타쿠가 있다면 한국엔 폐인이 있다! 각종 폐인 사이트 최고의 화제작!!</span> </div>
   </div>

보라색으로 밑줄그은부분이 삭제해야할 부분이고. 노란색부분은 고쳐야할 부분입니다.

클래스로 선언해도 충분한것을 굳이 ID로 선언한 이유를 모르겟습니다.

인라인스타일은 왜이렇게 많은것이며, target="_blank" 는 왜 들어갑니까?

이렇게하면 어떨까요?

아래는 제가 나름대로 마크업을 수정한것입니다.

1. <div class="daum_book" >
2. <a class="p_coverlink" href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074">
3. <img class="p_cover" src="http://photo-book.hanmail.net/images/book/large/074/l9788925506074.jpg" alt = "책표지그림" /></a>
4. <a href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" class="p_title">현시연 9</a>
5. <a href="http://book.daum.net/bookdetail/book.do?bookid=KOR9788925506074" class="p_link" >상세보기</a>
6. <div class="p_author_area" >
7. <span class="p_author">KIO SHIMOKU</span> 지음 | <span class="p_publish">북박스</span> 펴냄
8. </div>
9. <div>
10. <span class="p_description" >지금까지 할 수 없었던 말, 이 자리에서 다 해버리고 싶다! 지금이라면 웃으면서 할 수 있을 것만 같아. 일본에 오타쿠가 있다면 한국엔 폐인이 있다! 각종 폐인 사이트 최고의 화제작!!</span>
11. </div>
12. </div>

인라인스타일과 비표준요소인 target 을 제거하고. ID를 class로 대치한것입니다. 얼마나 보기 좋습니까?

한 페이지안에서 두게이상의 ID를 선언하면 안되는 이유.

한페이지 안에서 두게이상의 ID를 선언하면 안됩니다. ID는 한페이지에 오직 하나만 있어야 합니다.

자바스크립트로 다음북의 컨텐츠에 접근하고자 할때  document.getElementByID("daum_book")으로 접근해야하는데. 책정보를 하나넣으면 상관없지만. 여러개를 집어넣으면. 두번째 아이디부터 아래로는  도저히 접근할수가 없습니다.

1. var daumbook_EL = document.getElementById("daum_book");
2. daumbook_EL.setAttribute("style","background:#ffa");

이방법으로는 첫번째 책정보의 배경색만 노란색으로 바뀔뿐. 그 다음의 두번째, 세번째는 도저히 조작할 방법이 없는것입니다.

제가 제시한 벙법인 클레스로 선언하면 다음의 방법으로 각각의 엘리멘트에 접근할수  있습니다.

1. function getElementsByClassName(clsName,parentNode) {
2. var arr = new Array();
3. if (parentNode == null) {
4. var elems = document.getElementsByTagName("*");
5. } else { var elems = parentNode.getElementsByTagName("*");}
6. for ( var cls, i = 0; ( elem = elems[i] ); i++ ) {
7. if ( elem.className == clsName ) {
8. arr[arr.length] = elem;
9. }
   }
   return arr;
   }

클레스 이름으로 특정 엘리멘트에 접근하는 자바스크립트 함수입니다. 이것을 사용하면. class로 정의된 다음 책정보 넣기의 엘리멘트에 각각 접근할수 있습니다.

1. var content = document.getElementById("content");
2. var daumbook_EL = etElementsByClassName("daum_book",content)

이렇게하면 daum_book 으로 정의된 각각의 책정보에대한 엘리멘트가 daumbook_EL 이라는 이름의 변수에 배열로 저장됩니다.

1. for (i=0; i<daumbook_EL,length; i++) {
2. daumbook_EL[i].setAttribute("style","background:#ffa");
3. }

그러면 이런방법으로 다음책정보의 색을 모두 노란색으로 바꿀수 있습니다.

인라인스타일은 CSS를 모르는사람을 위한 배려라고 생각할수 있지만. CSS를 만질줄 아는사람 입장에서는 불필요하게 여겨지는 요소입니다. 가급적 빼주시거나, 인라인스타일이 없는 코드를 집어넣을수 있게 해주셨으면 합니다.

인라인스타일이 없는 마크업을 생성할수 있게 해주세요.

1. <div id="content" class = "content">
2. <p class = "hello">안녕하세요 </p>
3. </div>

여기에 "안녕하세요" 라는 내용에 5픽셀 마진. 10픽셀 패딩. 2픽셀 검은색 단선 보더를 주고자합니다. 방법이야 수십가지가 넘겠지만. 제가아는 몇가지 방법을 들자면 다음과 같습니다.

1. 1 helo {padding:10px; margin:5px; border:2px solid #000}
2. 2 p.helo {padding:10px; margin:5px; border:2px solid #000}
3. 3 #content p.helo {padding:10px; margin:5px; border:2px solid #000}
4. 4 <p style="padding:10px; margin:5px; border:2px solid #000">

1번부터 3번까지는 스타일시트(CSS)에서 선언하는 방법이고 4번은 인라인스타일입니다.  이 4가지 방법에 차이가 있다면. 그것은 우선순위입니다.

한가지 앨리먼트에 중복되는 속성이 있을경우.  웹브라우저에서는 1번보다 2번이 우선하고, 2번보다 3번이 우선하며, 3번보다 4번을 우선하여 해석합니다.

따라서 인라인스타일에서 border:2px solid #000 로 보더를 검정색으로 잡아버리면. 스타일시트에서 무슨수를 써도 검은색보더를 없앨수 없게 됩니다.

1. 1 helo {border:2px solid #ff0}
2. 2 p.helo {border:2px solid #fa00}
3. 3 #content p.helo {border:2px solid #040}
4. 4 <p style="border:2px solid #000">

이와같이 하나의 엘리멘트에 중복되는속성이 있는경우. 웹브라우저는 4번의 인라인스타일을 최우선해석하기때문에. p의 보더값은 2px solid #000 이 됩니다.

결국 인라인스타일 선언으로 인해서. 사용자는 CSS에서 책정보보기의 스타일을 도저히 정의할수 없게 됩니다. 입맛에 맞게. 사용하는 스킨에 맞게. 다시 디자인할수 없습니다.

편법으로 자바스크립트를 사용해서 강제로 인라인스타일을 변경하는 방법이 있긴합니다만. 좋은방법은 아니라고 생각합니다.

물론 인라인스타일은. CSS를 모르는 사용자를 위해 불가피하게 필요한 요소이긴합니다.

하지만. 저같이 CSS를 직접 다루는 사용자도 분명 존제합니다.

따라서, 인라인스타일이 없는 마크업을 생성할수 있도록 옵션형식으로 추가해주셨으면 합니다.

정리하겠습니다.

제가 원하는 수정사항은 전부 5가지이고 다음과 같습니다.

저는 상기 5가지 수정요구사항이 관철되는 그날까지. 티스토리 책정보 플러그인을 사용하지 않을것입니다. 아니 사용못합니다.

작년에 제기했던.  티스토리 플러그인 유효성문제 언제나 해결됩니까? 검토중이라고 하셨는데.. 그후 전혀 소식이 없으니..  검토 하긴 한건가요? 아니면 수정할 필요가 없다고 판단하여 보류중인것인가요?

소스코드 몇줄만 고치면되는 문제가 뭐가 그리 어려워서 1년이 넘도록 답보상태인지 답답하기만합니다. 이번 책정보 플러그인의 유효성문제또한 이전의 문제와 같이 무시되는것은 아닐련지 걱정됩니다.

마크업 수정전의 책정보 넣기 결과물  : W3C 유효성검사 결과

마크업 수정 후의 책정보 넣기 결과물  : W3C유효성검사 결과

이 글은 스프링노트에서 작성되었습니다.

티스토리 백일장 관련해서 작성했던 글에서 트랙백을 보내고 있었습니다.

2007/09/21 - [일기장/오늘의 일기] - 나의 블로깅 역사 훓어보기 : 네이버에서 티스토리까지.

그런데 어느순간부터 트랙백을 보내려 하면 위 그림과 같은 알림창이 뜨면서 트랙백을 걸수 없게 되었습니다. 해당블로그에서 트랙백을 막아놓았는줄 알았는데 그것도 아닙니다. 어느 블로그의 어느글에도 더이상 트랙백을 걸수가 없었습니다. 혹시나 해서 걸었던 트랙백기록 의 몇몇글을 지운다음에 다시걸어봤지만 마찬가지였습니다.

티스토리에는 하나의 글에서 트랙백을 걸수있는 숫자에 제한이 있는것이 아닐까 의심이 들었습니다.

그래서 티스토리 블로그에 문의도 해봤습니다.

관리자분이 티스토리에는 트랙백걸기에 제한이 없다 하시는군요. 그렇다면 제글에 뭔가 문제가 있었던것일까요?

그래서 다른글 ^{2007/10/14 - [일기장/포토앨범] - 2007 세계 불꽃축제 다녀왔습니다.} 에서 트랙백을 걸어봤습니다. 결과는 다음입니다.

정확히 24개까지 트랙백이 걸리고 그다음은 어떤 주소를 적어도 트랙백을 보낼수 없다는 알림창이 뜹니다.

관리자분께서는 트랙백걸기에 제한이 없다고 하셨지만. 이것이 어떤 에러가 아니라면 티스토리에는 트랙백을 걸수있는 수에 제한이 있는것이 틀림없습니다. 그런데 관리자분이 잘 모르시고 답변한게 아닐까 추측됩니다.

트랙백제한은 티스토리에서 스펨트랙백을 보내는것을 방지하기 위한 목적인것일까요? 아니면 같은글에 두번 트랙백보낼수 없는 장치가 있는데 그것이 오작동 하는것일까요? 무었이 원인이든간에. 저는 24번의 트랙백 제한에 반대합니다.

티스토리는 해당문제를 조속히 해결해주셨으면 합니다.

이런식으로 입력한후

위지웍모드로 전환한다음

다시 HTML편집모드로 전환하면 위와같이 종결문자 / 가 사라집니다. 즉 아래와 같이 작성한코드가.

<img src="../../../images/3-04-1/thumbnail/3-04-1GeoJeaDo04.jpg" alt="사진" />

위지웍모드 갔다오면 아래와 같이 변환된다는것입니다.

<img src="../../../images/3-04-1/thumbnail/3-04-1GeoJeaDo04.jpg" alt="사진">

한가지더.

<img src="[## _ATTACH_PATH_##]/om268.png" width="545" height="471" alt="사용자 삽입 이미지"/>

<img src="[## _ATTACH_PATH_##]/om268.png" width="545" height="471" />

티스토리 배경음악 서비스 사용해보면서 발견한 몇가지 문제점을 지적해볼까 합니다.

1. 배경음악이 자동으로 시작하는지 버튼을 눌러야 시작하는지 에 대한 설정이 없습니다. 무조건 자동으로 BGM을 띄우는것을 싫어하는사람도 있기때문에.. 이에대한 설정이 있어야 한다고 봅니다.
2. 배경음악 듣기 싫으면 ESC키 누르면 되죠. 하지만 그상태에서 블로그 내의 다른 링크를 타면 배경음악이 다시 자동으로 재생됩니다. 이거 불편합니다.  일단 정지를 하면 플래이어의 재생버튼을 누를때까지 무슨일이 있어도 다시 재생되는 일은 없어야 하는것이 아닐까요..
3. 파이어폭스및 모질라 계열 브라우저에 해당하는 문제이겠습니다만..   주소표시줄의 RSS 버튼이 배경음악 플러그인을 활성화하면 사라져버립니다.
   
4. 이건 어쩌면 치명적일수도 있는데요... 반나절동안 배경음악 을 활성화시켜놨더니 카운터가 전혀 올라가지 않았습니다. 이점은 좀 난감하네요...
   

제 블로그에서 유효성검사를 해보았는데요. 몇몇 플러그인에서 웹표준에 부합하지 않는 요소가 발견되더군요.

1. Lightbox TT EX 플러그인을 활성화하면 다음의 부분에서

   <script language="javascript" src="/plugins/lightbox/lightbox_plus_ope.js" type="text/javascript"></script>
   <script language="javascript" type="text/javascript">

   아래의 에러가 납니다.

   1. line 57 column 17 - Error: there is no attribute "language"
2. MyEolin 을 활성화하면
   <iframe id="eolin_iframe" src='about:blank' width='550' height='500' scrolling='no' frameborder='no'></iframe>

   여기서 frameborder 는 no 라는 값을 가지면 안되고 1이나 0값을 가져야 한다고 에러나네요...

   1. line 121 column 125 - Error: value of attribute "frameborder" cannot be "no"; must be one of "1", "0"
   
   
3. CallBack 플러그인을 활성화하면.
   
   <span id="callbacknestkongbagunitistorycom5022310" style="width:1px; height:1px;float:left"><embed  allowscriptaccess="always"  id="bootstrapperkongbagunitistorycom5022310"  src="http://kongbaguni.tistory.com/plugin/CallBack_bootstrapperSrc"  width="1"  height="1"  wmode="transparent"  type="application/x-shockwave-flash"  EnableContextMenu="false"  FlashVars="&amp;callbackId=kongbagunitistorycom5022310&amp;host=http://kongbaguni.tistory.com&amp;embedCodeSrc=http%3A%2F%2Fkongbaguni.tistory.com%2Fplugin%2FCallBack_bootstrapper%3F%26src%3Dhttp%3A%2F%2Fkongbaguni.tistory.com%2Fplugins%2FCallBack%2Fcallback%26id%3D502%26callbackId%3Dkongbagunitistorycom5022310%26destDocId%3Dcallbacknestkongbagunitistorycom5022310%26host%3Dhttp%3A%2F%2Fkongbaguni.tistory.com%26float%3Dleft" swLiveConnect="true"/></span>

   이한줄에서 무려 11개의 에러가 나옵니다. 에러는 다음과 같습니다.

   1. line 605 column 150 - Error: there is no attribute "allowscriptaccess"
   2. line 605 column 163 - Error: there is no attribute "id"
   3. line 605 column 210 - Error: there is no attribute "src"
   4. line 605 column 281 - Error: there is no attribute "width"
   5. line 605 column 293 - Error: there is no attribute "height"
   6. line 605 column 304 - Error: there is no attribute "wmode"
   7. line 605 column 324 - Error: there is no attribute "type"
   8. line 605 column 375 - Error: there is no attribute "EnableContextMenu"
   9. line 605 column 394 - Error: there is no attribute "FlashVars"
   10. line 605 column 826 - Error: there is no attribute "swLiveConnect"
   11. line 605 column 833 - Error: element "embed" undefined
4. 하나더. 스킨파일의 페이징 부분에 관한건입니다.
   
       <s_paging>
           <div class="paging">
               <a class="[ ##_no_more_prev_##]">☜ 이전 페이지  </a>
                   <span class="numbox">
                       <s_paging_rep>
   
                           <a class="num"></a>
                       </s_paging_rep>
                   </span>
               <a class="[ ##_no_more_next_##]">다음페이지 ☞</a>
           </div>
       </s_paging>
   
   
   여기서 페이징의 처음이나 끝부분이 아닐때 클레스 이름 [ ##_no_more_prev_##][ ##_no_more_next_##] 이 공백으로 치환되는 문제가 있습니다. "" 이렇게요. xhtml1.0이라면 문제없지만.. xhtml1.1에서는 이거 걸립니다. 공백대신 "none"같은 다른 문자로 치환하면 해결되는 문제라고 생각합니다.
   
   1. line 898 column 28 - Error: syntax of attribute value does not conform to declared value
5. 댓글을 달면 댓글의 이름을 표시하는부분에서
   <span class="name"><img src="http://kongbaguni.tistory.com/favicon.ico" width="16" height="16" onerror="this.parentNode.removeChild(this)"/> <a href="http://kongbaguni.tistory.com" onclick="return openLinkInNewWindow(this)">콩바구니</a></span>
   

   다음의 에러가 발생합니다.
   

   1. line 609 column 107 - Error: there is no attribute "onerror"
   2. line 609 column 143 - Error: required attribute "alt" not specified

6. 댓글이나 방명록에 html 주소를 적으면 만들어지는 링크나 이올린 최근글 추천글등의 링크에 onclick="return openLinkInNewWindow(this)" rel="external nofollow" 를 사용하여 무조건 새창으로 띄우는것은 문제라고 생각합니다. 웹표준권고안에서 target="_blank" 를 금지한것이 사용자의 선택권을 제한하지 않기 위해서라는데, 굳이 이런식으로 자바스크립트를 써가며 새창으로 띄어야 할 이유를 모르겠습니다.

   사용자는 링크를 현제창에서 띄울지. 새창에서 띄울지. 새탭에서 띄울지 선택할수 있어야 하고 그것에 제한을 두면 안된다.

   이런식이면 링크를 현제창에서 띄울수가 없습니다. 링크에 대한 태그는 <a href="주소">링크</a>  면 충분하다고 생각합니다.

   무조건 새창으로 띄우는 링크에 대한 자바스크립트를 제거하거나. 아니면 그것에 대한 옵션을 관리자 환경설정에서 선택할수 있게 해주셨으면 합니다.

7. 현제 보고있는 글의 트랙백 혹은 댓글이 펼쳐지지 않은상태에서 사이드바의 최신댓글. 최신트랙백의 현제글에대한 링크를 클릭했을때 트랙백.댓글란이 펼쳐지지 않는 문제가 있습니다. 확인바랍니다.
   

1번~5번항목만 잡으면 유효성검사를 통과하는데요. 사소한것이지만.. 좀 고쳐주셨으면 합니다. 유효성검사를 통과하기 위해서 플러그인을 비활성화시켜야 하다니요.. 이건좀 아닌것 같아요. 소스를 조금만 손보면 될것 같은데요...

일단 문제가 되는 플러그인 켜놨습니다. 위의 버튼을 누르면 어떤 에러가 있는지 보실수 있습니다.