한컴오피스 베타버전 버그 29 - 옛한글이 포함된 파일의 PDF 출력 버그

ᄒᆞᆫ글2010 베타버전에서 출력한 PDF 파일을 살펴보다가 이상한 점을 발견했습니다. 그래서 PDF 파일 출력에 대한 사항을 살펴보게 되었습니다. 매번 느끼지만 옛한글과 얽히면 판도라 상자처럼 온갖 악(벌레)이 튀어나옵니다. 특별히 이번 포스팅은 놈팡이 백수가 드리는 일요스페셜 또는 월요일 선물이라고 생각하시면 됩니다.

  • 참고 1 : 이 글은 매우 많은 그림을 포함하고 있어서 읽어오는 데 시간이 오래 걸릴 수도 있습니다. 느긋하게 기다려 주십시오.
  • 참고 2 : 이 글에서 사용한 그림과 출력한 PDF 파일 및 문서 파일을 압축 파일로 제공합니다. PDF-Output.zip 파일(1.31 MB)을 받으세요.

벌레의 유형

ᄒᆞᆫ글 씨! 옛한글을 화면에 잘 나타내면 끝이 아닙니다. 화면 출력뿐만 아니라 프린트 출력이나 PDF 출력도 잘 나타내 주어야 합니다.

개발자의 답변

2010년 2월 1일 버그 리포팅을 한 상태입니다.

벌레의 발견

ᄒᆞᆫ글에서 올바르게 나타나는 옛한글

ᄒᆞᆫ글에서 올바르게 나타나는 옛한글


PDF 파일에서 해괴하게 바뀐 옛한글 - 이건 어느 프로그램에서 출력했을까요?

PDF 파일에서 해괴하게 바뀐 옛한글 - 이건 어느 프로그램에서 출력했을까요?

사용할 프로그램

오피스웨어 프로그램

  • 한컴오피스2010 베타버전 : 처음에는 ᄒᆞᆫ글만 시험
  • OpenOffice Writer v3.1.1 : Writer만 시험

PDF 제작 프로그램

위에서 PostScript?라는 부분은 gsdll32.dll 파일을 발견하였기 때문에 표시하였습니다.

PDF 보기 프로그램

검증 1 : ᄒᆞᆫ글에서 출력하기

ᄒᆞᆫ글에서 프린트 - PDF 출력

ᄒᆞᆫ글에서 프린트 - PDF 출력

위와 같이 인쇄 화면을 불러 PDF로 출력하는 가상 프린터를 선택하여 [인쇄] 단추를 클릭하면 만들 수 있습니다.

PDF를 지원하는 가상 프린터 1

PDF를 지원하는 가상 프린터 1


PDF를 지원하는 가상 프린터 2

PDF를 지원하는 가상 프린터 2

위의 그림 가운데 Microsoft XPS 부분과 PC-000의 Samsung ML-1610 부분은 PDF 출력 가상 프린터가 아닙니다.

혹시 시험해 보고 싶은 사람은 프로그램마다 파일로 출력하는 방식이 다르므로 각자 프로그램 설명서를 참조하여 출력하기 바랍니다. 이 글에서는 다루지 않습니다.

각각의 PDF 출력 프로그램을 이용하여 PDF 파일을 만들었습니다. 이것을 PDF 보기 프로그램을 살펴보겠습니다.

  • 알파벳 순서로 시험했으므로 첫 번째 파일 또는 이상이 있는 파일만 나타내겠습니다.
  • 출력 품질 자체는 비교하지 않습니다.
  • 복사 작업은 평가하지 않습니다. PDF 출력의 경우 옛한글을 정상적으로 복사할 수 없었습니다.

Adobe Reader

ePapyrus PDF-Pro 4 Free

Foxit Reader

이미 결론이 난 듯하죠? 하지만 ᄒᆞᆫ글만큼은 끝까지 해보겠습니다.

UNIDOCS ezPDF Reader

결론 1

한컴오피스2010 베타버전에서 제공하는 Haansoft PDF 가상 프린터의 출력과 PDF로 저장하기 기능으로 저장한 PDF 파일에서는 옛한글이 제대로 나타나지 않았습니다.

검증 2 : 오픈오피스에서 출력하기

오픈오피스에서도 한컴오피스2010 베타버전에서 제공하는 Haansoft PDF 가상 프린터의 출력 기능이 작동합니다. 또한 오픈오피스에도 PDF로 내보내기 기능이 존재합니다.

오픈오피스의 예제 글귀

오픈오피스의 예제 글귀

앞서 올린 글에서 밝혔듯이 함초롬 글꼴은 ᄒᆞᆫ글에서만 예쁘게 나옵니다.

결론 2

위 그림과 같이 오픈오피스에서 출력한 PDF 파일은, 비록 그 겉모습은 예쁘지 않았지만, 단 하나의 오류도 나타내지 않았습니다. 심지어 한글과컴퓨터사에서 제공하는 Haansoft PDF 가상 프린터에서도 정상 출력하였습니다.

검증 3 : ᄒᆞᆫ셀과 ᄒᆞᆫ쇼에서 출력하기

지금까지 PDF 보기 프로그램에 따라 화면 출력 결과가 다르지 않았기 때문에 이제부터는 어도비 리더만 보이겠습니다. 또한 다른 PDF 가상 프린터는 제외하고, 한글과컴퓨터에서 제공하는 두 기능만 사용하겠습니다.

ᄒᆞᆫ셀은 흉칙한 모양을 보여줍니다.

ᄒᆞᆫ셀은 흉칙한 모양을 보여줍니다.


ᄒᆞᆫ셀은 흉칙한 모양을 보여줍니다.

ᄒᆞᆫ셀은 또다시 흉칙한 모양을 보여줍니다.


ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.

ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.


ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.

ᄒᆞᆫ쇼는 예쁜 모양을 보여줍니다.

벌레 분석 및 덧붙이는 말

처음 이 벌레를 발견했을 때 Haansoft PDF 또는 PDF로 저장하기 기능에서 오류가 있다고 생각했습니다. 그런데 실험을 해 본 결과 그 두 기능보다는 한컴오피스의 출력 기능에 벌레가 사는 듯싶습니다.

이번 글을 작성하면서 발견한 벌레입니다. 벌레에도 급과 격이 있음을 보여주는 엄청난 놈입니다. ᄒᆞᆫ글2010 베타버전과 옛한글 표기 오류에서 발견한 벌레는 애송이였습니다. 이 벌레야말로 압권입니다.

모가지가 떨어진

모가지가 떨어진

위의 벌레는 ᄒᆞᆫ글 ᄒᆞᆫ글이라는 글귀를 입력한 뒤에 실수로 스페이스바를 계속 누르고 있어서 발견한 벌레입니다. 본문 작성하면서 단순노동[각주:1]에 짜증도 나고 했는데, 이걸 발견한 순간 헛웃음이 나오면서 짜증이 사라지더군요. 저는 별수없이 남의 불행을 먹고 사는 버그 리포터인가 봅니다. "혹시 나 변태?"라는 걱정도 들더군요.

본문에서 사용한 PDF 파일의 섬네일 이미지도 첨부해 봅니다.

모두 18개의 섬네일 이미지

모두 18개의 섬네일 이미지

장장 이틀간(준비까지 사흘간) 작성한 포스팅을 마치겠습니다. 2월에도 기운 내서 힘 차게 잘 지내시기 바랍니다. ^.^b

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다.

관련 문서

내부 문서

외부 문서

PDF 제작 프로그램

PDF 보기 프로그램

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


  1. 프린트를 수십 번 하고, 그것을 다시 문서 보기 프로그램으로 열었습니다. 그 작업을 하다 보면 그게 왜 단순노동인지 뼈저리게 느끼게 됩니다. 거기에 더하여 스크린샷도 그만큼 찍어서 편집하고 웹에 올리는 작업을 해 보면, 못 느끼면 목석이지 사람이 아닙니다. [본문으로]
Posted by koc/SALM 트랙백 0 : 댓글 0

한컴오피스 베타버전 버그 13 - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 3

ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 문서에 이어 ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2 문서를 작성하면서 예상보다 사태가 심각하다고 여기게 되었습니다.

1. 벌레의 유형

이번에는 인쇄(프린트) 기능과 관련하여 하이퍼링크 색상을 엉뚱하게 보여주고 있음을 확인했습니다. 물론 이전에 제가 예상했던 그 원인 때문이었습니다. 바로 열어 본 링크열어 보지 않은 링크에 대한 정보를 파일 포맷에서 따로 관리하지 않고, 문서 내용으로서 관리함으로써 문서 내용으로 인식된 그것이 오류를 일으키고 있습니다.

2. 개발자의 답변

2010년 1월 7일 버그 리포팅을 한 상태입니다.

3. 벌레의 발견

‘그저 PDF 파일이나 만들어 볼까?’라는 가벼운 마음으로 인쇄를 했다가 발견했습니다.

3.1. 열어 본 링크가 없는 문서를 PDF로 저장

그림 1 편집 화면

그림 2 인쇄 미리보기 화면

위에서 보면 편집 화면과 미리보기 화면에는 보라돌이 링크가 전혀 보이지 않습니다. 일부러 앞서 ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2 문서에서 이 버그에 대해 확인하면서 새로 만든 하이퍼링크이기 때문입니다.

그림 3 인쇄 대화상자

위와 같은 인쇄 대화상자에서 Haansoft PDF를 선택한 다음 인쇄를 클릭한다.

그림 4 PDF 파일로 출력하게 되면….

그림 5 PDF 출력 정보

PDF 파일로 출력하게 되면 난데없이 다른 이름으로 저장 대화상자가 나타난다. 이 대화상자에 이름을 지정해 주면 PDF 파일로 저장해 줍니다. 이때 이름은 링크 테스트.pdf라고 주었습니다.

이때 PDF 파일로 출력하려면, 파일 메뉴에서 PDF로 저장하기를 선택해도 됩니다.

그림 6 출력한 PDF 파일 보기

3.2. 열어 본 링크가 하나 있는 문서를 PDF로 저장

이번에는 링크 하나를 골라서 클릭합니다. 그리고 그것을 인쇄 미리보기 하면 다음과 같습니다.

그림 7 열어 본 링크를 하나 만들었습니다.

그림 8 인쇄 미리보기에서도 나타난 열어 본 링크 하나

이것을 PDF로 저장한다면, 그래도 나타날까요? 지금까지의 과정을 살펴보면 나타나게 됩니다. 하지만 나타나지 않았으면 합니다.

그림 9 PDF 출력 정보 2

이번에는 링크 테스트 1.pdf 파일로 저장했습니다.

그림 10 출력한 PDF 파일 보기

불행히도 제 바람은 이루어지지 않았습니다.

3.3. 어떤 곳에서 발생하나?

이 벌레는 어떤 곳에 살고 있는지 점검해 보겠습니다.

일단 인쇄와 관련된 기능에는 모두 이 벌레가 나타난다고 여겨집니다. 그림 3 인쇄 대화상자에 나타난 PDF-Pro Free, Microsoft XPS Document Writer, Haansoft PDF 및 그 그림에는 나타나지 않은 PDF 저장, 그림으로 저장하기 기능에서는 이 벌레를 발견했습니다. Send To OneNote 2010 또는 팩스로 보내기에서도 역시 이 벌레가 나타나리라 생각합니다. 이것은 인쇄 기능의 문제가 아니라 파일 구조와 내용에 대한 문제이기 때문입니다.

그림 11 출력한 XPS 파일 내용

저장 기능에서도 나타나고 있습니다. 저장하기다른 이름으로 저장하기에서도 역시 나타나는 내용입니다.

또한 웹 게시 기능에서도 나타났습니다. 이 기능은 다른 이름으로 저장하기의 대상을 단순히 또는 블로그로 바꾸었을 뿐이기 때문에 당연히 나타나게 된다고 생각합니다. 블로그로 올리기, 초안으로 올리기, 웹 브라우저로 보내기, 웹 서버로 올리기 등에서도 발견했습니다.

4. 벌레의 원인

앞서 밝혔듯이 링크에 대한 정보, 열어 본 링크 또는 열어 보지 않은 링크 여부파일 내용으로 직접 저장하고 있기 때문에 발생한 문제로 여겨집니다.

또한 앞서 주장했듯이, 이 문제는 비단 파일 저장(다른 이름으로 저장 포함)이나, 블로그로 올리기에만 한정된 벌레가 아닙니다. 파일의 내용을 입력하거나 편집하고, 또는 외부로 출력하는 모든 기능에서 이 벌레가 나타날 가능성이 있고, 이번에 인쇄 미리보기, 인쇄 PDF 등의 인쇄 기능에서 확인했습니다. 직접 종이에 인쇄하기는 할 수 없지만, PDF 출력과 비교하여 그리 다르지 않으리라 예상하고 있습니다.

5. 비슷한 벌레

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2

6. 관련 문서

시험 결과를 알고 싶은 분들을 위해 압축파일을 열어 보시면 PDF 파일 2개(PDF 저장), PNG 파일(그림으로 저장하기), XPS 파일 등이 들어 있습니다.

6.1. 내부 문서

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 기본은 지켜야죠!

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 맞춤법 도우미로 엉뚱한 곳을 표시하면 어떡해요?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

[벌레와 팁/제안] - 한컴오피스 베타버전의 공백과 이동 기능

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 글을 하나만 올리란 말입니다.

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그 카테고리는 어디에?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 게시판이 없거든요.

[벌레와 팁/버그] - HTML 태그 해석 오류 문제

[벌레와 팁/버그] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

[프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

[벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

[프로그램/설치] - 한컴오피스2010 베타버전 설치기

6.2. 외부 문서 - 테스트 블로그

이 글은 ᄒᆞᆫ글 2010 베타버전에서 작성하였습니다.

Posted by koc/SALM 트랙백 0 : 댓글 0

팁텍

티스토리는 인쇄 페이지 기능을 지원하지 않는다. 그러다가 인쇄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="[##_title_##]" href="[##_rss_url_##]" />
  6. <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
  7. <link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
  8. <title>[##_title_##] :: [##_page_title_##]</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="[##_title_##]" href="[##_rss_url_##]" />
  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="[##_blog_link_##]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="[##_title_##]" href="[##_rss_url_##]" />
  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="[##_blog_link_##]favicon.ico" />

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

좀 더 추가

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

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

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

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

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

      CSS 적용 전 인쇄 미리보기

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

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

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

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

      CSS 적용 후 인쇄 미리보기 2 (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_rep_desc_##] 치환자가 바로 본문을 만들어 주는 부분입니다. 이때 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 파일로 변환하였다.

관련 문서

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

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

  1. 참고로 파이어폭스는 전체 5쪽이었다. [본문으로]
  2. 인터넷 익스플로러 6은 CSS를 제대로 지원하지 못하고 있다. 이는 모질라 파이어폭스도 비슷하나, 인터넷 익스플로러에 비하면 매우 양호하다. 또한 인터넷 익스플로러 사용자가 많으므로 자료화면은 인터넷 익스플로러에서 따왔다. [본문으로]
  3. 참고로 파이어폭스는 80% 축소 인쇄로 전체 3쪽, 100% 인쇄로 전체 4쪽이었다. [본문으로]
  4. 파이어폭스에서는 아예 구글 광고가 사라져 있다(두 번째 그림) [본문으로]
  5. 파이어 폭스에서는 위젯 없이 공백으로 남아 있다. 이 부분에 대해 좀 더 연구가 필요하다. [본문으로]
  6. article 및 article_ 로 시작하는 클래스를 편의상 article 클래스 모듬이라고 하겠다. [본문으로]
Posted by koc/SALM 트랙백 1 : 댓글 3

티스토리 툴바