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

티스토리에서는 PDF 플러그인을 별도로 지원해주지 않습니다.

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

물론, 첨부 파일을 한번만 클릭하면 손쉽게 저장하거나 Acrobat Reader나 Foxit 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 님께서 정말 많은 도움을 주셨습니다.
      두 분께 다시 한 번 감사드립니다.