PDF 로딩 속도 최적화: 빠르고 효율적인 PDF 경험 제공하기

PDF는 일상적으로 사용되는 문서 형식이지만, 특히 콘텐츠가 많거나 복잡한 경우 로딩 속도가 문제가 될 수 있습니다.
이번에 아이패드를 새로 사면서 가지고 있던 책을 스캔하고 아이패드에서 열었는데 페이지를 넘길 때마다 로딩이 20초 이상 걸리고, 봤던 페이지를 다시 볼 때도 평균 5초 정도 걸렸습니다.

이에 PDF 로딩에 관해 공부해보았습니다.

 

PDF 로딩의 병목 이해하기

PDF 파일 로딩 속도가 느려지는 주요 원인으로는 파일 크기, 이미지 품질, 임베디드 폰트, 스크립트 복잡도 등이 있습니다. 특히 고해상도 이미지나 여러 개의 폰트를 임베딩한 경우 파일이 무거워지고, 이로 인해 브라우저나 뷰어에서 렌더링하는 데 더 많은 시간이 소요됩니다. 또한, 페이지 수가 많은 PDF는 DOM 요소가 급증하기 때문에 처리 속도가 느려질 수 있습니다.

 

최적화 기법

이미지 압축 및 최적화

PDF에서 이미지가 차지하는 용량은 파일 크기에 크게 기여합니다. 이미지 최적화를 위해 다음과 같은 기법을 사용할 수 있습니다:
-  JPEG 압축 : 고해상도 이미지를 낮은 품질의 JPEG로 변환하여 파일 크기를 줄입니다. 단, 품질 저하가 사용자 경험에 미치는 영향을 신중히 평가해야 합니다.
-  WebP 변환 : WebP 형식은 JPEG에 비해 더 나은 압축률을 제공합니다. 가능하다면 WebP를 사용해 PDF 파일 내 이미지를 최적화하세요.
-  DPI 낮추기 : 화면에서 표시될 이미지는 72~96 DPI로 충분한 경우가 많으므로 필요 이상으로 높은 DPI를 사용하지 않도록 합니다.

 

폰트 임베딩 최적화

폰트 임베딩은 PDF의 가독성을 높이는 데 필수적이지만, 모든 글리프를 포함시키면 파일 크기가 급격히 커질 수 있습니다. 이를 해결하려면:
-  부분 임베딩 : 문서에서 사용된 글리프만 포함시켜 용량을 줄입니다.
-  폰트 서브셋(subset) 사용 : 필요한 문자만 포함된 서브셋 폰트를 사용하여 파일 크기를 감소시킬 수 있습니다.

 

페이지 스트리밍과 로드 분할

PDF 파일의 로딩 시간을 줄이기 위해 전체 파일을 한 번에 다운로드하는 대신 페이지 스트리밍을 사용하는 방법이 있습니다. 이 방식은 사용자가 특정 페이지를 요청할 때 해당 페이지만 로드할 수 있도록 해줍니다. 이를 통해 초기 로딩 시간을 줄일 수 있으며, 사용자가 빠르게 콘텐츠를 볼 수 있게 됩니다.

 

불필요한 메타데이터 및 태그 제거

PDF 파일에는 제작 툴 정보, 저작권 관련 메타데이터, 히스토리 정보 등 불필요한 태그와 메타데이터가 포함될 수 있습니다. 이러한 데이터를 제거하여 파일 크기를 줄이고, 로딩 성능을 향상시킬 수 있습니다. `PDFtk` 같은 툴을 이용해 이러한 메타데이터를 쉽게 제거할 수 있습니다.

 

JavaScript를 활용한 로딩 최적화

PDF를 웹에서 로딩할 때 자주 사용하는 라이브러리 중 하나는 `PDF.js`입니다. 이 라이브러리를 사용하여 PDF 로딩 속도를 최적화하려면 다음을 고려할 수 있습니다:
-  비동기 로딩 : PDF를 비동기적으로 로드하여 웹 페이지의 다른 요소들이 먼저 표시되도록 합니다. 이렇게 하면 사용자 경험이 향상됩니다.
-  페이지 단위로 로딩 : `PDF.js`에서 페이지를 순차적으로 로드하도록 설정하면 첫 페이지가 로드되는 즉시 사용자가 볼 수 있도록 하여 기다림의 시간을 줄일 수 있습니다.

 

사전 렌더링 및 캐싱

사전 렌더링(pre-rendering)은 자주 사용하는 PDF를 캐시에 저장해두어 빠르게 접근할 수 있게 하는 방법입니다. 이를 통해 같은 PDF를 반복해서 열어야 하는 사용자가 더욱 빠르게 접근할 수 있도록 도울 수 있습니다.
-  서비스 워커(Service Workers) : PWA(프로그레시브 웹 앱)를 구축할 때 서비스 워커를 이용해 자주 사용하는 PDF 파일을 캐싱하여 네트워크 상태와 관계없이 빠르게 접근하게 할 수 있습니다.

 

PDF 분할 사용

대규모 PDF 파일을 다룰 때는 특정 섹션으로 분할하여 필요한 부분만 로드하도록 만드는 것도 좋은 방법입니다. 예를 들어 매뉴얼 같은 긴 PDF의 경우, 챕터 단위로 파일을 나누고 사용자가 특정 챕터를 선택할 때만 해당 파일을 로드하게 하면 전반적인 로딩 시간이 줄어듭니다.

 

최적화 사례 연구

-  구글의 PDF 뷰어 최적화 : 구글은 PDF 파일을 로딩할 때 먼저 페이지 미리보기를 제공하고, 사용자가 요청하는 페이지를 동적으로 로드하는 방식을 사용합니다. 이를 통해 전체 파일을 로딩하는 시간을 줄이고 사용자 경험을 개선합니다.
-  Adobe Acrobat의 Fast Web View : Adobe Acrobat에서는 PDF 파일을 웹에서 점진적으로 로드하는 'Fast Web View' 기능을 제공합니다. 이 기능은 페이지별로 로드되도록 PDF를 최적화하여 사용자에게 빠른 접근을 가능하게 합니다.

 

결론

PDF 로딩 속도 최적화는 사용자 경험을 향상시키는 중요한 요소입니다. 이미지 압축, 폰트 최적화, 페이지 스트리밍, 메타데이터 제거 등 다양한 기법을 활용하여 PDF의 크기를 줄이고 로딩 속도를 높일 수 있습니다. 실제로, 제 경우에는 PDF 자체의 문제보다는 어플리케이션의 문제였던 것 같습니다. '자유노트'라는 어플을 사용했을 때는 로딩이 느렸지만, '플렉슬'로 변경하고 나서 빠르게 로딩할 수 있었습니다.