PDF Viewer With Tistory

구글 드라이브를 사용하지 않고 해볼게요.

들어가기 전

티스토리에서 PDF Viewer를 제공하고 있지 않아서, HTML 모드로 글을 작성해서 <iframe> 태그를 사용해서 PDF를 올릴 수 있습니다. <iframe> 태그는 인라인 요소로 html.4.01부터 제공하는 기능입니다. 현재 거의 모든 브라우저에서 지원이 가능하고 다른 HTML요소인 작성하는 글에 영향을 미치지 않기 때문에 걱정 없이 사용할 수 있습니다.

많은 글들이 구글 드라이브 1)를 사용해서 업로드를 하거나, 글에 파일을 업로드 2) 한 이후에 해당 위치를 사용하는 방식에 대해서 소개하고 있습니다.

구글 드라이브 1)의 경우 업로드 한 사용자의 정보(이름, 드라이브 계정 아이디, ...)가 노출될 수 있고, 공유를 하기 위해서 따로 리파지토리를 만들고 관리해야 할 수 도 있습니다. 또한 파일의 이름이나 페이지가 길어지면, Viewer가 깨지는 현상이 있었습니다.

글에 파일을 업로드 2) 한 이후 <object> 태그와 <param> 태그를 사용해서 글에 업로드 한 파일을 사용하도록 만들게 되면, 블로그 글을 들어올 때 자동으로 다운로드되는 현상이 있습니다.

그래서 제가 공유 드릴 방법은 관리적 측면에서도 조금 더 쉽게 파일을 관리할 수 있으며 간단하게 사용할 수 있습니다. 다만 티스토리 정책이나 버전이 바뀔 경우 안될 수 있으니 이점 유의하시기 바랍니다.

PDF 업로드

티스토리의 입장에서 내부 자원이 아닌 경우 네트워크의 특정 위치에서 PDF자원을 가져와야 합니다. 그렇다는 뜻은 구글 드라이브에 파일을 업로드하는 것과 같은 행위를 해야 하는 것을 의미합니다. 관리적 측면에서 파일을 티스토리와 연관 있는 곳에 업로드하는 것이 적합하다는 생각이 들었습니다.

https://블로그.tistory.com/manage/design/skin/edit#/source/file

[블로그] 위치에 사용하시는 티스토리 주소를 입력해서 이동을 하게 되면 다음과 같은 위치로 이동합니다.

 

폴더를 따로 넣을 수 있는 방법이 있을 듯 한데 아직 못찾았습니다. 제보(?)해 주시면 감사합니다.

해당 페이지에서 하단의 "+추가" 버튼을 통해서 사용할 PDF를 업로드하고 적용을 합니다. 그리고 해당 파일을 클릭하면 좌측 하단에 파일이 있는 위치가 나옵니다. 혹은 F12를 통해서 개발자 모드에서 파일을 가지고 있는 위치를 확인할 수 있습니다. 해당 위치를 이제 <iframe> 태그와 함께 사용하면 끝입니다.

<iframe>

글 작성 모드에서 상단의 "기본모드" 버튼을 클릭해서 HTML모드로 이동합니다. 내가 적용할 공간에 대해서 코드 작성을 하면 적용이 끝입니다.

 

<div>
	<iframe src="https://tistory파일위치/파일이름.pdf" width="100%" height="100%"/>
</div>

 

다만 아쉬운 점은 모바일로 접근했을 때 PDF가 잘려서 보인다는 점인데요, 해당 부분은 구글 드라이브에서 적용을 해도 동일하게 나오는 현상인 듯합니다. mediaQuery를 사용해서 다르게 적용을 해야 할 듯한데, 이 부분 정확한 방법을 찾은 이후 공유드리도록 하겠습니다.