웹페이지에서 PDF 파일 보여주는 방법 3가지: iframe, JS 라이브러리, 외부 서비스

 

 

2020년에 웹페이지에서 PDF 파일을 보여주는 방법에 대해 글을 작성한 적이 있습니다.

당시에는 웹사이트에 어떤 기능을 하나 넣을 때, 브라우저에 따라 (심지어 같은 브라우저라도 버전에 따라) 지원 여부가 다르던 시기라, 글 내용도 그에 맞추어 여러 브라우저별 실제 테스트 화면 위주로 작성했었습니다.

하지만 요즘에는 대부분의 기능을 브라우저 종류에 상관없이 범용으로 사용할 수 있고, 안 되거나 막히더라도 해결할 수 있는 방법이 많아졌기 때문에, 이번 글에서는 어떤 용도로 기능을 구현할 것인가 상황별로 나누어서 정리해보고자 합니다.

 

1. 간단하고 빠르게: iframe 태그

iframe 태그를 사용하면 웹페이지에서 PDF 파일을 가장 빠르게 보여줄 수 있습니다. 

<iframe
  src="/files/sample.pdf"
  width="100%"
  height="600"
  title="PDF 미리보기"
  loading="lazy">
</iframe>

이렇게 짧은 코드 1줄만 있으면 되어 간단합니다.

브라우저의 기본 PDF 뷰어에 출력을 맡기는 방식이라 보는 사람의 환경에 따라 화면이 조금씩 다르게 보일 수 있습니다.

 

2. 기본적인 기능이 내장된 뷰어: 자바스크립트 라이브러리

PDF.js, PDFObject.js와 같은 자바스크립트 라이브러리는 페이지 이동, 확대/축소, 검색, 펜, 지우개, 텍스트 삽입 등의 기능이 내장된 PDF 뷰어를 제공하며 여러 브라우저에서 일관된 모양으로 PDF 파일을 보여줄 수 있습니다.

 

PDF.js

PDF.js - Home

 

설치 방법이나 사용 방법은 여러가지가 있는데 제가 테스트한 방법을 간략히 알려드리겠습니다.

우선 PDF.js 공식 사이트의 Getting Started 페이지에서 Prebuilt (modern browsers) 아래 Stable 버튼을 눌러 파일을 다운로드 받은 후 압축을 풀고 서버에 업로드 합니다.

그리고 PDF 파일을 출력할 페이지에 아래와 같이 코드를 삽입합니다

<iframe
  src="/pdfjs/web/viewer.html?file=/files/sample.pdf"
  width="100%"
  height="600"
  title="PDF.js PDF 뷰어"
  loading="lazy">
</iframe>

src에는 실제 viewer.html 파일과 pdf 파일이 있는 곳의 경로에 맞춰 수정하여 넣어주면 됩니다.

PDF.js 테스트 화면

 

PDFObject.js

PDFObject

PDFObject.js는 별도의 파일 다운로드 없이 아래 코드만으로 구현 가능합니다.

<div id="pdf-viewer" style="height: 800px;"></div>

<script src="https://unpkg.com/pdfobject"></script>
<script>
  PDFObject.embed("./web/sample.pdf", "#pdf-viewer", {
    fallbackLink: "<p>PDF를 볼 수 없는 환경입니다. <a href='./web/sample.pdf'>PDF 다운로드</a></p>"
  });
</script>

pdf 파일의 경로만 잘 맞춰주면 됩니다.

PDFObject.js 테스트 화면

각 공식 사이트에 심화 내용이 문서로 제공되니 한 번 살펴보셔도 좋을 것 같습니다.

 

3. PDF를 보기 좋은 콘텐츠로: 외부 서비스 사용

2번까지의 방식은 'PDF 파일을 웹페이지에 보여주는 것' 까지가 중점적인 기능이라, 디자인적으로 보면 다소 딱딱한 느낌이 들 수 있습니다.

PDF를 좀 더 보기 좋게 보여주고 싶다면 Heyzine, FlipHTML5, FlippingBook 같은 외부 서비스를 사용할 수 있습니다.

이 서비스들은 PDF 파일을 Flipbook 형태로 책자처럼 바꿔주거나, 이미지, 동영상, 텍스트 삽입 등을 할 수 있는 에디터 기능이 있어 PDF 파일을 쉽고 다양하게 편집할 수 있습니다.

내가 편집한 PDF 파일은 웹페이지에 바로 붙여 넣을 수 있는 임베드 코드나 공유 링크로 제공됩니다.

다만 무료 플랜에서는 워터마크, 용량 제한, 커스터마이징 제한, 공개 범위 제한 등이 있을 수 있습니다.

각 공식 사이트에서 데모, 가이드, 가격 정책 등을 확인할 수 있습니다.

 

Heyzine PDF To Flipbook - Online flipbook maker

PDF To Flipbook | Flipbook Online

 

Top FlipBook Maker & Digital Publishing Platform - FlipHTML5

Top FlipBook Maker & Digital Publishing Platform - FlipHTML5

 

FlippingBook | Flipbook Maker for Digital Publishing

FlippingBook | Flipbook Maker for Digital Publishing

 

 

이 글은 예전에 작성했던 PDF 관련 글을 AI의 도움을 받아 새롭게 정리한 것입니다.

작성하는 과정에 ChatGPT 최신모델인 5.5 Thinking 모드를 사용했는데, 제가 아직까지 많이 쓰질 않아서 덜 길들여진(?) 것인지 답변의 방향이 잘못되거나 쓸데없는 내용이 과하게 들어가거나 하는 아쉬움이 좀 있었습니다.

하지만 가장 크게 와닿았던 부분은 글쓰기를 시작하는 게 쉬웠다는 점입니다. ChatGPT의 답변을 바로 가져다 쓸 수는 없었지만 참고해서 글을 방향을 잡고 내용을 채우는 데 많은 도움이 되었습니다.

AI가 없던 시절에는 일단 글쓰기를 시작하는 것부터 막막해서 끄적끄적하다가 결국 안 쓰게 된 경우도 많았던걸 생각하면 참...

이번에는 처음부터 끝까지 제가 일일이 검토 및 수정을 했지만 얘도 학습을 할 테니 쓰다 보면 점점 나아지지 않을까 생각됩니다.

앞으로도 예전에 작성했던 글 중 살려볼 만한 것은 이런 식으로 AI의 도움을 받아서 다시 정리해 볼 생각입니다.