PDF 파일을 티스토리 내부에 게시하는 방법

사용자 삽입 이미지
티스토리에서는 PDF 플러그인을 별도로 지원해주지 않습니다.

PDF 파일을 첨부한 뒤에 다운받게 할 수는 있지만, 블로그 내부에 PDF를 쉽게 게시할 수 있는 방법은 없었습니다.

물론, 첨부 파일을 한번만 클릭하면 손쉽게 저장하거나 Acrobat ReaderFoxit Reader 등으로 볼 수는 있지만, 브라우저 내에서 볼 수 있는 기능이 없다는 점이 아쉬운 것이 사실입니다.

게다가 이번에 스타워즈 해부학 사전을 연재하면서 브라우저 내에서 PDF를 보여주는 기능이 더욱 필요해졌습니다. (아무래도 명색이 연재인데, 다운받아 보는 것은 좀 어색합니다)

그래서, 약간의 삽질 끝에 알아낸 PDF를 티스토리 내부에 게시하는 방법을 소개합니다.





0. 사전 준비

이 방법으로 게시된 PDF 파일은 반드시 Acrobat Reader가 설치되어 있어야 볼 수 있습니다.
아주 빠른 PDF 뷰어인 Foxit Reader 등을 사용하시는 분들도 별도로 Acrobat Reader를 설치해야 합니다.


1. 블로그 본문 폭의 확인

관리 메뉴의 스킨에서 style.css 파일을 보면 본문의 폭을 확인할 수 있습니다.

사용자 삽입 이미지

.article { width:710px; font-size:12px; font-family: Gulim; color: #666666; }
.article을 찾으면 위와 같은 형식으로 본문의 스타일이 기록되어 있는데, 이 중 width의 값을 확인하면 됩니다.
여기서는 폭이 710 픽셀입니다.


2. PDF 파일의 추가

첨부파일 기능을 이용해서 PDF 파일을 추가합니다. (①번 버튼)

사용자 삽입 이미지

추가한 뒤에 미리보기를 하면 아래와 같이 첨부된 것을 확인할 수 있습니다.

사용자 삽입 이미지


3. PDF 파일명 확인

HTML 편집 모드에서 첨부된 PDF 파일의 진짜 파일명을 확인합니다. (위 2번 그림의 ②번 버튼)

사용자 삽입 이미지

여기서는 파일명이 gk150000000011.pdf 이라는 것을 볼 수 있습니다.


4. <object> 태그 삽입

위의 1번에서 확인한 본문의 폭과 3번에서 확인한 진짜 파일명을 이용해서 <object> 태그를 적습니다.
이 때 진짜 파일명 앞에 /attachment/ 를 붙이면 브라우저에서 참조할 수 있는 진짜 주소가 됩니다.

사용자 삽입 이미지

<object type="application/pdf" data="/attachment/fk140000000004.pdf" width="710" height="800">
<param name="src" value="/attachment/fk140000000004.pdf">
</object>
이 코드 세 줄을 그대로 복사한 뒤에 pdf의 파일명만 그대로 바꿔주고 폭(width)를 지정하면 됩니다.
(파일명은 두 번 적어야 한다는 점에 유의하세요)
높이(height)는 적당한 값을 집어넣으면 되는데, 요즘 PC들의 해상도를 고려해보면 800이 적당할 것 같습니다.


5. 결과 화면

4번 화면에서 맨 앞에 있는 첨부 코드를 삭제하고 나면 (즉, <object> 태그만 남기면) 아래와 같은 화면을 볼 수 있습니다.

사용자 삽입 이미지

이제 기본적인 PDF가 삽입되었습니다.
하지만, Acrobat Reader가 설치되지 않은 경우를 고려해서 별도로 다운받는 박스를 만들어두는 것도 필요할 것 같습니다.

[\#M_다운받아서 보려면 열기..|닫기..| [\##_1C|fk140000000004||_#\#]_M\#]
이런 식으로 말이죠…





덧1. width에는 원칙적으로 "100%"를 적는 것이 맞습입니다.
      하지만, 티스토리에서는 "100%"를 적으면 "100"%로 알아서 바꿔주더군요. 뭐 하는 짓인지, 원…

덧2. 참고로, data와 src에 각각 같은 값을 저장하는 이유는 FireFox<param>을 제대로 인식하지 못하고,
      IE<data>를 제대로 인식하지 못하기 때문입니다. (CJ COMMUNICATIONS 참조)

덧3. 이 방법을 알아내는 과정에서 QAOS의  도아 님과 parankiho 님께서 정말 많은 도움을 주셨습니다.
      두 분께 다시 한 번 감사드립니다.



Trackback 3 Comment 7
  1. Favicon of http://jvmblog.tistory.com BlogIcon jvm 2008.03.04 22:13 address edit & delete reply

    좋은 팁이네요. 저도 가끔은 필요하다고 생각했던 것인데 덕분에 삽질의 수고를 덜겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.03.04 22:15 address edit & delete

      큰 도움이 되기를 바라겠습니다. ^^;;;

  2. Favicon of http://zfanta.com BlogIcon 환타 2008.03.04 23:26 address edit & delete reply

    우와~~~~~~~~ 감사합니다.
    수고하셨습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.03.05 06:56 address edit & delete

      환타님께도 필요한 기능이었나 봅니다. 잘 쓰시기 바랍니다. ^^;;;

  3. Favicon of http://blutom.com BlogIcon 파란토마토 2008.03.05 05:33 address edit & delete reply

    죄송합니다. 저같은 웹맹... 초보 블로거는 아직;;;;;
    나중에 필요하면 꼭 사용하도록 할게요. 그리고 질문도 하겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.03.05 06:57 address edit & delete

      죄송이라니... 무슨 말씀을...
      필요하게 되면 그 때 보고 쓰시면 됩니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.03.05 10:32 address edit & delete

      참, 토마토님. 지난번에 /login 쓰실 때 '#' 대신에 '샵' 이라고 입력하셨죠?
      제가 수정한 코드 하일라이터 쓰시면
      ##도 입력할 수 있답니다. 이 글 맨 아래쪽 한번 보시기 바랍니다.