티스토리에 본문 인쇄 및 저장 기능 추가하기

2013. 8. 12. 23:50IT/Tistory Tips

PrintWhatYouLike.com은 웹페이지에서 내가 원하는 부분만 선택해서 인쇄하는 기능을 제공하는 웹서비스다. 사이트에 접속해서 인쇄할 주소를 입력하고 [START]를 누르면 두 번째 그림처럼 입력한 주소의 사이트와 간단한 편집창이 나온다. 붉은 선으로 영역을 선택하고 [Isolate]나 [Remove], [Widen] 등을 선택하면 해당 영역만 남기거나 제거 또는 확장할 수 있다. 배경이나 이미지를 없애는 것도 간단한 조작만으로 가능하다. [Undo] 버튼을 제공해서 편집한 내용을 되돌릴 수 있고, 편집을 마치고 [Print]를 눌러 내용을 인쇄하거나 [Save as]를 눌러 파일로 저장할 수도 있다.

PrintWhatYouLike는 일반 웹사이트 인쇄에도 유용하지만, 블로그 게시물에 현재 페이지를 PrintWhatYouLike.com으로 열어주는 링크를 추가하면 누구나 간단히 내 블로그 게시물을 필요한 부분만 인쇄할 수 있다. 블로거 입장에서도 복잡하게 인쇄영역에 대한 CSS를 따로 생각하지 않아도 되니 편하다.

적용은 아주 간단하다. [티스토리 관리] - [HTML/CSS 편집] - [HTML/CSS] - [skin.html]로 이동해서 <s_t3></s_t3> 사이에 적당한 위치에 아래 내용을 입력한다.

<예제1>
<a href="http://www.printwhatyoulike.com/print?url=http://circlash.tistory.com[##_article_rep_link_##]" title="웹페이지를 인쇄하거나 PDF/HTML로 저장합니다." target="_blank">Print/Save</a>

▼ 링크에 마우스를 올려보고 클릭해보세요.   Print/Save

위의 예제 코드에서 Print/Save가 화면에 표시되는 부분이다. 이 링크를 클릭하면 블로그 현재 페이지의 인쇄 미리보기 화면이 나온다. 링크는 위 예제처럼 문자를 사용할 수도 있고 이미지를 사용할 수도 있다. 방식은 일반적인 하이퍼링크 사용법과 같다.

<예제2>
<a href="http://www.printwhatyoulike.com/print?url=http://circlash.tistory.com[##_article_rep_link_##]" title="웹페이지를 인쇄하거나 PDF/HTML로 저장합니다." target="_blank"><img src="이미지 주소" alt="대체 텍스트" width="이미지 너비" height="이미지 높이" /></a>

▼ 링크에 마우스를 올려보고 클릭해보세요.   인쇄 및 저장

한 가지 주의할 점은, PrintWhatYouLike.com에서 [Save as] - [PDF]를 선택하면 한국어 글자가 제대로 표시되지 않는 점이다. 글꼴이 제대로 인식되지 않아서 한글 게시물에선 PDF 저장 기능을 사용할 수 없다. 대신 [Print] - [Microsoft XPS Document Writer]를 사용해서 XPS 문서로 저장하면 Windows 운영체제의 XPS 뷰어를 통해 PDF와 유사한 방식으로 문서를 확인할 수 있다.