왕미친놈의 왕미친세상

티스토리에서 이미지 갤러리를 넣으려고 했는데, 뜻밖에도 본문에 삽입된 것은 슬라이드쇼였다. 의도하지 않은 일이 생겨서 기분이 좋지 않았는데, 삽입된 슬라이드쇼가 정상 동작하지 않았다. 첫째 이미지와 마지막 이미지를 보여주지 않았다. 다시 말해 7개의 이미지로 이미지 갤러리를 만들어서 본문에 넣게 했는데, 실제로 본문에 들어간 것은 5개의 이미지를 가진 슬라이드쇼였다.

벌레의 유형

1. 맏이와 막내를 왕따시키는 별난 벌레이다. 아, 벌레는 원래 이상한 놈들이라고. 그 말도 맞다.
2. 실제로는 저와 관련없이 업로드 실패 시에 나타나는 벌레이다.

한편 티스토리나 다른 블로그에서 등장했던 변신술을 익힌 벌레가 여기에서도 등장한다고 생각했다. 이미지 갤러리를 만들라고 하니까 왜 슬라이드쇼를 만들어 버렸기 때문이다. 그러나 검색 결과 티스토리 매뉴얼 블로그에 [확장 업로드 기능] 업로드된 파일을 다양한 형태로 이용해 봅시다 및 [이미지] 슬라이드쇼의 사용법을 알고 싶어요라는 글이 있었다. 결국 이미지 갤러리를 만들게 되면 슬라이드쇼로서 그것을 구현한다는 사실을 알게 되었다. 그밖에 사항은 다음 고객센터에서 TISTORY > 글 관리 부분을 살펴보기 바란다.

벌레의 발견

[확장 업로드 기능] 업로드된 파일을 다양한 형태로 이용해 봅시다라는 블로그 기사에서 이미지 갤러리는 슬라이드 효과를 자바스크립트를 이용하여 갤러리로 생성한다고 설명하고 있다. 나는 그것을 몰랐지만, 아무튼 HxD 소개 기사를 쓰면서 이미지 갤러리 기능을 이용하여 슬라이드쇼를 만들었다.

위의 그림에서 빨갛게 표시한 부분(? (경)자처럼 보이는 부분)을 클릭하여 이미지 갤러리를 만들었다. 이때 파일을 7개 선택하였다.

그런데 실제로 만들어진 이미지 갤러리에서는 위와 같이 5개의 파일만 포함되어 있다고 나타나고 있었다. 참고로 저 저작권 화면은 2번째 파일이다. ▶▶ 아이콘을 클릭하여 다음 파일을 살펴보았다. 그럼으로써 알게 된 사실은 첫 파일과 마지막 파일이 나타나지 않는다는 점이었다.

위의 두 파일은 모질라 파이어폭스(v3.0.9)에서의 티스토리 편집창 화면이다. 두 화면 모두 오른쪽에 보면 파일이 7개임을 알 수 있다. 이미지 갤러리를 만들때 순서가 흩트러지기에 파일명 맨 앞에 숫자를 붙여두었다. 다시 말해 1번부터 7번까지 있다는 말이다. 첫 화면은 위지위그 편집기 모드이고, 두 번째 화면은 HTML 편집 모드이다.

첨부한 파일의 수를 세었다. 그러나 위와 같이 모두 7개였다. 결국 화면에 나타낼 때 오류가 생긴다는 사실을 알게 되었다.

혹시나 하는 마음에 인터넷 익스플로러(v6 sp2)에서도 시험해 보았다. 결과는 마찬가지였다.

결국 편집창 상단에 있는 슬라이드쇼 아이콘()을 클릭하여 이미지 갤러리를 삽입하게 되었다. 그 과정에서 알게된 이 버그가 이미지 파일을 정확히 인식하지 못해서 발생하고 있다는 심증을 갖게 하였다.

위의 그림은 슬라이드쇼에서 업로드시킨 이미지 파일이다. 그런데 조금 이상한 점이 보이지 않는가? 바로 첫째와 둘째 파일은 이미지의 크기와 파일 크기가 나타나고 있으나, 셋째 파일은 파일 크기만 나타나고 있다.

황당한 점은 이미지 갤러리로 만든 슬라이드쇼에서는 정확히 인식하지 못한 파일은 최종 결과에서 빼버리고 슬라이드쇼를 만들지만, 슬라이드쇼 아이콘을 클릭하여 만든 슬라이드쇼에서는 제대로 인식하지 못하는 파일도 최종 결과에 포함시켜 슬라이드쇼를 만들어준다. 이렇게 제대로 인식되지 않는 원인으로는 업로드 실패일 가능성이 가장 높다고 생각한다.

벌레의 제거

이 벌레를 제거하는 방법은 단순하다.

아무리 해도 안 되는 일은 그냥 포기하고 다시 업로드 하면 된다. 이미 업로드 된 파일로 이미지 갤러리를 만들려고 해도 안 된다면 그냥 다시 업로드하는 쪽이 낫다는 말이다. 어차피 내 예상대로 업로드 오류였다면, 다시 업로드함으로써 그 벌레는 사라지게 된다. 실제로 HxD 소개 기사는 현재 이미지 갤러리가 제대로 보이고 있다.

또한 애초에 슬라이드쇼 아이콘을 클릭하여 슬라이드쇼를 만들어도 된다. 엎어치나 메치나 같은 결과를 보여주기 때문이다.

회사 측 답변

이 문제는 버그 리포팅을 하지 않았다.

관련 문서

• [유틸리티] - HxD
• 티스토리 매뉴얼 블로그 :: [확장 업로드 기능] 업로드된 파일을 다양한 형태로 이용해 봅시다 및 [이미지] 슬라이드쇼의 사용법을 알고 싶어요
• JYONG Blog :: 티스토리 슬라이드쇼 업로드 에러
• TISTORY > 글 관리

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

팁텍

티스토리는 인쇄 페이지 기능을 지원하지 않는다. 그러다가 인쇄CSS를 이용하면 어느 정도 자신이 바라는 부분만 인쇄할 수 있지 않을까 생각하여 이 팁을 작성하게 되었다.

팁의 발견

티스토리에서 인쇄 페이지를 지원하지 않는다는 사실은 우연히 알게 되었다. 그러다가 도아의 세상사는 이야기에서 블로그에 PDF 저장 단추를 달자 라는 글을 보게 되었다. 댓글로 의견을 나누는데, CSS 이야기가 나오게 되었고, 그것에서 힌트를 얻어 CSS를 적용해 보게 되었다.

프로그램 설명

CSS에 대한 기본 사용법은 각자 알아서 하기 바란다.

추천 사이트 - Learn CSS (한국어 사이트이지만, 글자가 깨질 수도 있다. 문자셋을 한국어 (UTF-8) 또는 유니코드 (UTF-8)로 맞추어야 한다.)

CSS 만들기

기본적인 부분 인쇄

CSS를 이용하지 않는 방법은 WWW이 생길 무렵부터 쓰던 방법인 드래그&프린트가 있다. 말 그대로 마우스로 화면에서 인쇄하고 싶은 부분을 주~욱 잡아당겨 선택한다. 그리고 메뉴에서 파일-인쇄를 누르면 된다.

일단은 이렇게 마우스로 좌~악 그어서 선택한다.

파일 메뉴에서 인쇄 선택

페이지 범위-선택 영역, 그 다음에 인쇄를 콕! 눌러주면 된다.

그러나 이 방법은 웹페이지 방문자가 해야 하는 작업이지, 웹페이지 제작자가 할 수 있는 작업이 아니다. 더구나 마우스 드래그를 막아놓은 웹페이지에서는 통하지 않는다.

인쇄 CSS 이용하기 1

인쇄용 CSS를 이용하면 웹페이지 제작자가 자신이 인쇄로 출력하고 싶은 부분을 정할 수 있다. 인쇄 CSS에서 인쇄하고 싶지 않은 부분에는 display: none 라는 속성을 주면 된다(참조 블로그에 PDF 저장 단추를 달자)

인쇄 CSS 이용하기 2

나는 티스토리에 적용할 때 주로 <div class="_ad"> 또는 <div class="noprint">와 같이 인쇄 금지 항목을 만들었다. 이것을 화면CSS에 응용하면, 화면에만 안 보이는 <div class="noseeing"> 또는 <div class="blind"> 항목을 만들 수도 있다.

참고로 현재 왕미친세상에 적용된 인쇄CSS는 다음과 같다.

1. /* 이 파일에 적용된 설정은 http://www.w3.org/StyleSheets/home-import.css 파일을 참조하여 만들었습니다. */
2.  
3. /* ****************** 프린트 CSS ****************** */
4. /* 아래에 설정값이 없으면 기본값을 따르게 됩니다. */
5.  
6. /* 개요 스타일 설정 */
7. h1, h2, h3,
8. h4, h5, h6     { page-break-after: avoid; page-break-inside: avoid }
9.  
10. /* 인용 스타일 설정 */
11. blockquote,
12. pre     { page-break-inside: avoid }
13.  
14. /* 목록 스타일 설정 */
15. ul, ol, dl     { page-break-before: avoid }
16.  
17. /* 링크 스타일 설정 */
18. a     { font-weight: normal }
19.  
20. /* 그림 파일 스타일 설정 */
21. img     { border: 0; }
22.  
23. /* 인쇄에서 제외할 부분 */
24. script     { display:none } /* 본문 안에 보일 내용을 script 태그 처리했을 경우 주의 요망 */
25. div script     { display:none } /* IE6 버그가 있음. div.noprint / div._ad 태그 설정이 되어도 인쇄에서 나타남.
26.                            그러므로 div 태그와 script 태그를 중첩하여 최대한 정돈하게 만듦. */
27. .noprint     { display:none } /* 말 그대로 인쇄 안함. */
28. ._ad     { display:none } /* 구글 광고 등은 인쇄 안 함. IE6은 오류가 있어서 그대로 인쇄됨. */
29. #paging     { display:none } /* 문서 하단의 #paging 아이디는 인쇄 안함 */
30. #header     { display:none } /* 문서 상단의 #header 아이디는 인쇄 안함 */

일단 저런 식으로 만들 수 있다.

저것을 티스토리에 적용한 다음 출력하고 싶지 않은 부분을 <div class="noprint"></div>로 감싸서 화면에서는 보이지만, 인쇄에서는 보이지 않게 했다.

• 참고 1 : 모든 경우에 적용할 수 있는 클래스 이름을 만들려고 한다면, <div class="displaynone"> 또는 <div class="nodisplay">를 추천한다. 이것은 화면CSS, 인쇄CSS, 음성CSS 등에서 같은 이름으로 쓸 수 있기 때문이다. 이 display:none와 비슷해서 나중에 적용할 값을 기억하기에도 좋다. 참고로 display:none은 사용자에게 "보여주지 않는다."라는 뜻이 아니다. 이것은 "사용자에게 내보내는 출력이 없다."라는 뜻이다.
• 참고 2 : div script  { display:none } 설정과 div, script { display:none } 설정은 서로 다르다. 앞엣것은 div 태그와 script 태그가 중첩될 경우에 출력을 없게 하라는 뜻이고, 뒤엣것은 div 태그와 script 태그 각각에게 출력이 없게 하라는 뜻이다.

티스토리에 적용

처음 적용 : 실패 1

처음에는 티스토리 스킨 편집 화면을 열었다.

HTML/CSS 편집은 두 부분으로 나뉘는데, 위가 skin.html 파일이고, 아래가 style.css 파일이다. 여기에서 style.css를 편집하였다. 위의 화면은 화면을 최대한 줄인 화면이다. skin.html과 style.css을 클릭하면 편집 영역이 아래로 길어지게 된다.

style.css 파일 맨 아래에 다음과 같이 끼워넣었다.

1. @media print {
   h1, h2, h3,
   h4, h5, h6     { page-break-after: avoid; page-break-inside: avoid }
   
   blockquote,
   pre     { page-break-inside: avoid }
   
   ul, ol, dl     { page-break-before: avoid }
   
   a     { font-weight: normal }
   
   img     { border: 0; }
   
   /* 인쇄에서 제외할 부분 */
   script     { display:none }
   div script     { display:none }
   .noprint     { display:none }
   ._ad     { display:none }
   #paging     { display:none }
   #header     { display:none }
   }
   

그러나 작동하지 않았다. 다른 부분은 추가 작업이 필요했지만, 최소한 #paging 아이디 선택자와 #header 아이디 선택자를 사용한 곳에서는 적용이 되어야 했기 때문이다. 다시 말해 화면 인쇄를 하면 화면에 나타나지 않아야 하는 #paging 아이디 선택자와 #header 아이디 선택자를 사용한 곳이 버젓히 드러나 있었다.

나는 내 실수를 알지 못해 한참을 헤매야 했다.

참고로 내가 참조한 http://www.w3.org/StyleSheets/home-import.css 파일은 http://www.w3.org/StyleSheets/home.css 파일에서 @import 를 이용하여 불러왔고, http://www.w3.org/StyleSheets/home.css 파일은 http://www.w3.org/ 페이지 헤더 태그에서 link 태그를 이용하여 불러왔다.

1. <?xml version="1.0" encoding="utf-8"?>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
4. <head profile="http://www.w3.org/2000/08/w3c-synd/#"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.   ... 생략 ...
6.   <title>World Wide Web Consortium - Web Standards</title>
7.   <link rel="meta" href="/Overview-about.rdf" />
8.   <link rel="stylesheet" type="text/css" href="/StyleSheets/home.css" />
9.   ... 생략 ...
10. </head>

그런데 내가 쓰는, 그리고 이전에 썼던 티스토리 스킨의 헤더에서 공통적인 부분만 뽑아내면 다음과 같았다.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <link rel="alternate" type="application/rss+xml" title="왕미친놈의 왕미친세상" href="https://koc2000.tistory.com/rss" />
6. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
7. <link rel="shortcut icon" href="https://salm.pe.kr/favicon.ico" />
8. <title>왕미친놈의 왕미친세상 :: '티스토리' 태그의 글 목록 (2 Page)</title>
9.  
10. </head>

차이가 나는 부분은 빨간색으로 처리했다. 저 부분을 발견하지 못해서 헤매고 말았다.

다시 말해 내가 style.css 내용에 아무리 인쇄에 대한 내용을 넣어서 반응하지 않을 수밖에 없었다.

1. @media print {
2.     ... 인쇄 CSS 내용 ...
3. }

위와 같은 설정은 처음부터 무시되었다는 뜻이다. 왜? 처음 읽어들일 때부터 화면(screen)에 맞게 읽어들였다는 뜻이고, 인쇄(print)나 음성(aural)은 무시한다는 뜻이다. 위에 빨간색으로 된 media="screen"은 그런 뜻이다.

실패 2

HTML/CSS 편집이 안 된다면 파일로 처리하자는 생각을 가지게 되었다. 이때 위의 화면에 있는 "파일 업로드" 탭이 눈에 들어왔다.

흠, 파일업로드를 클릭하여 파일을 찾아 올렸다. 여기에서도 또 실수를 하고 만다. 바로 print.css 파일이 올라간 곳을 확인하지 않아 버렸다. 아무튼 다음과 같이 입력했다.

1. <link rel="alternate" type="application/rss+xml" title="왕미친놈의 왕미친세상" href="https://koc2000.tistory.com/rss" />
2. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
3. <link rel="stylesheet" media="print" type="text/css" href="./print.css" />
4. <link rel="shortcut icon" href="https://salm.pe.kr/favicon.ico" />

아무 생각 없이 당연히 style.css와 같은 경로에 있겠거니 생각하고, 써넣어 버린 무지막지한 실수였다.

당연히 실패!

그렇다면 파일은 어디에 있을까?

인쇄CSS 적용 성공

인쇄 CSS 파일을 찾아서 다시 파일업로드 탭을 쿡 눌러주었다. 스크롤바를 아래로 주~욱 내리자 보였다.

어라, preview.gif는 다른 파일과 달리 앞에 images/ 가 없었다. 물론 print.css도 다른 파일처럼 images/ 가 붙어 있었다. 결국 preview.gif 파일만 빼면 같은 디렉터리에 있다는 말이었다. 

다시 HTML/CSS 편집 탭으로 넘어가서, 아까 편집했던 부분을 적당히 고쳤다.

1. <link rel="alternate" type="application/rss+xml" title="왕미친놈의 왕미친세상" href="https://koc2000.tistory.com/rss" />
2. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
3. <link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
4. <link rel="shortcut icon" href="https://salm.pe.kr/favicon.ico" />

위와 같이 고치자 드디어 작동했다.

좀 더 추가

아까 서버에 올린 인쇄CSS 파일에는 .noprint 및 ._ad 클래스에 대한 설정이 있었다. 이것은 곧 인쇄하지 않을 부분과 광고 부분을 <div></div>로 감쌀 수 있다는 뜻이다. 

또한 마지막으로 화면에는 안 보이지만 인쇄에서만 보일 부분도 설정하였다.

최종적으로 인쇄 CSS 적용 전과 적용 후의 화면 인쇄(일부)는 다음과 같다.  

• 인쇄CSS 적용 전 인쇄 미리보기 화면 (전체 7쪽^[각주:1]) : 삭제할 내용을 분홍색으로 표시하였다.^[각주:2]

  • 처음 두 쪽은 쓸모 없는 내용이다. 아니 쓸모는 있지만, 인쇄에서는 굳이 필요하지 않다.
  • 3쪽 위의 내용은 "My 블로거 뉴스"이다. 역시 방문자에게는 필요하지 않은 내용이다. 가운데 있는 내용은 구글 광고라서 역시 인쇄에서는 필요하지 않다.
  • 6쪽에서 보이는 것은 위젯이다. 역시 인쇄에서는 필요하지 않다.
  • 7쪽은 티스토리 저작권 정보이다. 화면이 아닌 인쇄 결과는 티스토리 회사에서 만든 페이지 구성대로 되지 않으므로 인쇄할 필요가 없는 부분이다.
    

    CSS 적용 전 인쇄 미리보기

  • 인쇄 CSS 적용 후 화면 (전체 4쪽^[각주:3]) : CSS 적용 전 화면과 비교하면, 헤더 부분이 모두 사라져서 앞부분이 아주 깔끔해졌다.^[각주:4] 또한 화면에는 나타나지 않지만, 맨 마지막 쪽에 위젯이 사라지지 않고 남아 있다. 이 부분도 script 태그와 embed 태그의 영향으로 보인다.^[각주:5]
    

    CSS 적용 후 인쇄 미리보기 (IE)

    

    CSS 적용 후 인쇄 미리보기 1 (FF)

    

    CSS 적용 후 인쇄 미리보기 2 (FF)

위와 같이, 인터넷 익스플로러 6 환경에서는 구글 광고 및 위젯 사이에는 인쇄CSS 적용에서 약간의 문제가 있다.

적용 및 원리

티스토리에서는 게시글 부분이 따로 분리되어 있다. 그 점을 이용하여 인쇄할 때 나타날 부분만 골라낼 수 있다. 또한 내가 했던 것처럼 자세히 할 필요도 없다. 그저 본문만 남겨도 된다.

이때 몇 가지를 중시해야 한다. 우선 티스토리 HTML 파일은 들여쓰기가 되어 있다. 이때 같은 단계끼리 짝을 짓도록 노력하라. 화면에서 보이지 않게 할 부분을 찾아, 그것이 HTML 코드의 어느 부분인지를 알아내야 한다. 그 뒤에 알맞은 곳에 noprint 클래스를 삽입하여야 한다. 아래 그림에서는 <s_tb> 태그에 noprint 클래스를 삽입하였다.

가장 중요한 것은 본문을 잘 찾아야 한다는 점이다. 왜냐하면 본문은 반드시 인쇄할 때 종이에 출력되어야 하기 때문이다. 자세한 사항은 티스토리 스킨 제작 가이드에 나오는 스킨의 구조를 살펴보시기 바랍니다. 간단히 말한다면, 구글 광고가 없다면, <div class="article"> 태그를 찾아야 합니다. 구글 광고가 있다면 <div class="article">를 찾고, 그 뒤에 <div class="article_post"> 태그를 찾아야 합니다. 특히 <div class="article_post"> 부분은 티스토리 글쓰기에서 입력한 내용이 나타나는 부분입니다. 치환자가 바로 본문을 만들어 주는 부분입니다. 이때 article 클래스 및 article 클래스 모듬^[각주:6]이 화면에서 "게시글"을 이루게 됩니다. 앞서 말한 "본문"은 그러한 의미입니다. 따라서 인쇄할 때도 이 article 클래스 모듬 부분이 주를 이루게 해야 합니다.

그 다음으로 중요한 것은 paging 아이디 선택자와 header 아이디 선택자를 찾아야 한다. 이 두 부분은 반드시 인쇄할 때 출력하지 않아야 하기 때문이다. header 부분은 방문객에게는 쓸모가 없는 부분이 많고, paging 부분은 저작권 정보에 해당하는데 화면 구성에서는 옳지만, 인쇄에서는 그 저작권 정보가 그다지 유용하지 않다. 그러므로 인쇄할 때는 나타나지 않게 해야 한다. 하지만 이 부분을 모두 인쇄에서 나타나지 않게 하려면 굳이 HTML에서 찾기보다 인쇄CSS 파일에 아래와 같이 처리하면 된다.

1. #paging     { display:none }
2. #header     { display:none }

나머지 부분은 스스로 잘 찾아서 잘 처리하기 바란다.

PDF 저장

원래 인쇄CSS에 관심을 가지게 된 까닭이 바로 웹페이지를 PDF로 저장해 주는 기능 때문이었다. 이것은 도아의 세상사는 이야기의 게시글 블로그에 PDF 저장 단추를 달자를 읽고 나서 생각했다. 자신의 홈페이지나 블로그에 PDF 단추를 다는 기능은 도아의 세상사는 이야기를 참고하기 바란다.

각설하고, 이 PDF 저장 단추도 인쇄CSS를 이용하기 때문에 자신의 홈페이지에 인쇄CSS를 적용해 두면 PDF 저장 기능에서 더 짧은 시간에 그 기능을 이용할 수 있다. PDF 저장 기능은 외국 사이트에 웹페이지 정보를 보내면, 그곳에서 PDF로 저장해서 자신의 컴퓨터로 내려받을 수 있게 해 주는 서비스이기 때문이다.

아래 다운로드는 왕미친세상에 달아둔 PDF 저장 단추를 클릭하여 만든 PDF 파일이다. 참고하기 바란다.

다운로드

다음과 같이 아이디 페이지를 PDF 파일로 변환하였다.

• 인쇄CSS 적용 전 PDF 파일 :
  invalid-file
• 인쇄CSS 적용 후 PDF 파일 :
  invalid-file

관련 문서

• 도아 님의 블로그 도아의 세상사는 이야기 : 블로그에 PDF 저장 단추를 달자
• Learn CSS : CSS 문법을 한국어로 번역해 놓은 사이트. 글자가 깨질 수도 있다. 문자셋을 한국어 (UTF-8) 또는 유니코드 (UTF-8)로 맞추면 해결된다.

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

읽기에 앞서

이 문제는 티스토리 시스템의 문제가 아님을 확인하였다. 이 글에 나타난 현상을 겪는 사람은 자신의 불여우에 확장 기능 MR Tech's Link Wrapper 가 설치되어 있는지를 먼저 살피기 바란다. 혹시 그것을 설치하였다면, 삭제하기 바란다. 그 확장 기능은 한메일 및 티스토리 시스템과 약간의 충돌을 보이고 있다.

벌레의 유형

티스토리 파일 첨부 창이 파이어폭스에서 제대로 표시되지 않는 문제가 있다.

좀 짓궂게 이야기하면 파일 첨부 창을 잘라먹는 벌레로서, 과식을 자주 하는 듯이 보인다.

벌레의 발견

벌레 정보

티스토리에 가입한 뒤 곧바로 발견할 수 있었다. 그때는 티스토리 그림 파일 업로드 벌레 건에 매달려 있던 때라 이것은 그다지 신경을 쓰지 않았다. 그러나 매번 그림을 올릴 때마다 파일 첨부 창을 아래로 늘여야 하기에, 귀찮음이 더해져서 결국 올리게 되었다.

우선 이 벌레가 익스플로러에서 발견된 적은 없다. 한메일 프리징 현상처럼 파이어폭스에 특정 확장 기능을 잘못 설치하여 나타나는 문제도 아니었다. 다시 말해 파이어폭스를 설치한 뒤 3.0.4판부터 3.0.7판까지 나타나는 문제이며, 아무 확장 기능도 설치하지 않았을 때에도 발생했다. 참고로 3.0.8판에서는 확인하지 못하였다.

벌레 찾기

아래는 티스토리 글쓰기 화면이다. 오른쪽 파일첨부를 클릭하여 파일 첨부 창을 보이게 한다.

아래 파일 첨부 창은 아래 부분이 조금 이상하다. 맨 마지막 줄에서 "음원 필터링 시스템은 저작권 침해로 인한 문제로부터 회원 여러분을 보호하"라고 나온 뒤 잘려 있다. 오른쪽 아래 파란 화살표가 가리키는 부분을 클릭한 뒤 아래로 드래그 하면 파일 첨부 창이 늘어남을 알 수 있다.

아래 그림은 파일 첨부 창을 아래로 늘인 모습이다. 결국 아래 그림처럼 되어야 하는데, 위의 그림처럼 아랫부분을 잘라먹고 있었던 셈이다.

제작자/제공자의 답변

4월 7일 현재 회사 측으로부터 답변이 왔다. 회사 측에서는 이 문제를 재현하지 못하였으나, 지속적으로 개선안을 찾고 있다고 하였다. 아울러 이 문제가 발생하는 원인으로는 창의 크기을 변화시키는 스크립트를, 창을 읽어들인 나서 불러오기 때문에 일어난 문제로 보고 있었다.

관련 문서

• 2009/03/21 - [벌레와 팁] - 티스토리 그림 파일 업로드 벌레

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

벌레의 유형

알려주지 않고 파일 형식을 바꾸는 벌레 : 아마도 변신술을 익힌 벌레이지 않을까?
알려주지 않고 파일 용량을 늘리는 벌레 : 몸속에 뻥튀기 기계를 갖추고 있지 않을까?

벌레의 발견

티스토리에서는 그림파일을 첨부할 때 황당한 버그를 보여준다.
무슨 뜻이냐 하면 파일 업로드할 때 파일이 그대로 올라가지 않고, 그 과정에서 다른 형식으로 바뀔 수도 있음을 알려주지 않고 있다.

그런데 현재 업로드되어 있는 파일은 원본과는 달랐다.

회사 측 답변

이 문제가 해결되었음을 2008년 3월 6일 밤 0시 56분 현재 확인하였다.

접기

D사 고객센터에 올린 내용은 다음과 같다.

D사 고객센터에서는 다음과 같은 답변을 하였다.

재미 있는 점은 "확인하고 있다."라는 말과 "블로그 특성상 테스트에 시간이 많이 소요될 수 있어"라는 부분이다.
파일 업로드에 소요되는 시간은 겨우 1분 남짓이고, PNG 원본 파일이 JPEG으로 바뀌었음을 확인하기까지 걸리는 시간도 채 10분이 걸리지 않는다.
흠, 그게 시간이 많이 소요되는 문제였나?
( 파일 크기야 24비트 1천6백만 색상의 그림 파일을 4비트 16 색상으로 바꾸었기 때문에 일어난 일이라지만, PNG↔JPEG 변환은 무언가 답변이 있어야 하지 않았을까? )

접기