Building True Vector PDF Export in the Browser with fabric.js

개요

YFT Design Pro는 Fabric.js와 Vue 3를 기반으로 클라이언트 측에서 실제 벡터 PDF를 브라우저 내에서 직접 생성하는 PDF 내보내기 파이프라인을 구축했습니다.

주요 내용

* 기존 PDF 내보내기 방식의 한계: 대부분의 브라우저 기반 디자인 편집기는 캔버스 스크린샷을 PDF로 래핑하는 방식으로 PDF를 내보내지만, 이는 텍스트 선택 불가, 확대 시 흐릿함, 파일 크기 증가, CMYK 지원 불가 등의 단점이 있습니다.
* YFT Design Pro의 벡터 PDF 내보내기 기능: 텍스트-to-path 변환, SVG path 렌더링, 그라디언트, CMYK 출력, 폰트 서브세팅, 다중 페이지 문서, Web Worker를 통한 비동기 내보내기를 지원합니다.
* 고수준 아키텍처: 내보내기 파이프라인은 'useCanvasExport' 오케스트레이션 레이어, 래스터 PDF 및 벡터 PDF를 위한 두 개의 경로, 'PdfGenerator' 컴포넌트, 'pdf-lib' 라이브러리 포크, Web Worker로 구성됩니다.
* 두 가지 내보내기 경로:
* 래스터 PDF (colorSpace = 0): 각 페이지를 300 DPI JPEG로 렌더링하여 PDF에 임베드합니다. 간단하고 빠르지만, 전문적인 인쇄 워크플로우에는 부적합합니다.
* 벡터 PDF (colorSpace >= 1): Fabric.js 캔버스의 모든 객체를 탐색하여 네이티브 PDF 콘텐츠로 렌더링합니다. 텍스트는 임베드된 폰트 또는 벡터 경로로, SVG는 재귀적으로 파싱, 그라디언트는 쉐이딩 딕셔너리로 처리됩니다.
* 좌표계 변환: 브라우저의 화면 좌표계(상단 좌측 원점, Y축 하향)를 PDF의 페이지 좌표계(하단 좌측 원점, Y축 상향, 포인트 단위)로 정확하게 변환하는 것이 중요합니다.
* 현재 변환 행렬(CTM) 추적: PDF의 그래픽 상태 스택 및 CTM을 병렬로 추적하여 중첩된 그룹, 회전된 요소, SVG 노드가 PDF 드로잉 상태와 일치하도록 합니다.
* SVG 경로를 PDF 연산자로 변환: SVG path 데이터를 파싱하여 'M', 'L', 'C', 'Z' 등의 명령을 'm', 'l', 'c', 'h' 등의 PDF 연산자로 매핑합니다. 특히 SVG 타원 호(A/a)는 PDF에 네이티브 연산자가 없어 여러 개의 3차 베지어 곡선으로 근사합니다.
* 텍스트 처리 방식:
* 임베드된 폰트: PDF 폰트를 사용하여 텍스트를 렌더링합니다.
* 텍스트-to-path: 각 글리프를 SVG 경로로 변환하여 벡터 외곽선으로 렌더링합니다. 폰트가 없는 환경에서도 동일한 출력을 보장하지만, 텍스트 선택 및 검색이 불가능해지고 파일 크기가 증가합니다.
* 폰트 서브세팅: PDF에 전체 폰트 파일 대신 문서에서 사용된 글리프만 임베드하여 파일 크기를 줄입니다.
* 객체 렌더링 전략: 이미지, 텍스트박스, SVG, 그룹 등 Fabric.js 객체 타입별로 전용 핸들러를 통해 PDF 출력 연산자로 변환합니다. 그룹 객체의 경우 중첩 변환을 정확히 처리하기 위해 그래픽 상태 스택을 사용합니다.
* 그라디언트 처리: Fabric.js의 선형 및 방사형 그라디언트를 PDF의 쉐이딩 타입 2 및 타입 3으로 변환합니다. 여러 색상 중지점의 경우 Type 3 스티칭 함수를 빌드합니다.
* CMYK 출력: 인쇄용 내보내기 시 색상 공간을 DeviceCMYK로 전환하여 4가지 색상 구성 요소 값을 사용합니다.
* Web Worker를 통한 내보내기 작업 분리: CPU 집약적인 PDF 생성을 메인 스레드에서 분리하여 편집기 UI가 응답성을 유지하도록 합니다. 각 내보내기마다 새 Worker를 생성하고, PdfGenerator는 동적으로 로드합니다.
* 컨텍스트 격리: 내부 플래그(_isExportContext)를 사용하여 내보내기 중에 UI 관련 로직, 객체 캐싱, 안내선, 애니메이션 등을 비활성화합니다.
* 성능 최적화:
* 리소스 사전 로딩: 렌더링 전 이미지 URL 및 폰트 패밀리를 수집하여 병렬로 사전 로드합니다.
* 리소스 캐싱: 동일한 이미지와 폰트는 한 번만 임베드합니다.
* 페이지 병렬 렌더링: 다중 페이지 문서의 경우 CTM 상태를 페이지별로 격리하여 병렬로 렌더링합니다.
* 결과 비교: 벡터 PDF는 래스터 PDF에 비해 파일 크기가 작고, 텍스트 선택이 가능하며, 확대 시 선명하고, CMYK 인쇄 워크플로우를 지원합니다.
* YFT Design Pro: Fabric.js와 Vue 3로 구축된 오픈 소스 온라인 디자인 편집기로, 다중 페이지 편집, 벡터 PDF/SVG 내보내기, 인쇄 중심 워크플로우를 지원합니다.

시사점

브라우저 환경에서 데스크톱 디자인 도구와 유사한 고품질의 벡터 PDF 내보내기는 기술적으로 가능하며, YFT Design Pro의 접근 방식은 파일 크기, 출력 품질, CMYK 지원 등 사용자 기대치를 충족하는 결과물을 제공합니다.