techlist.io
KREN
figma

피그마의 PDF 내보 (새 탭에서 열림)

figmavector-graphicssvgpdfrasterizationgradientsgraphics-pipeline

Figma는 디자인을 정확하게 보존하는 고품질 PDF 익스포터를 만들기 위해 기존 라이브러리 대신 자체 PDF 라이브러리를 처음부터 개발했다. PDF의 벡터 특성을 활용해 확대해도 선명한 결과를 제공하는 동시에, 그림자·블러·복잡한 그라디언트처럼 PDF에서 표현하기 어려운 요소도 가능한 한 래스터화하지 않고 구현했다. 다양한 PDF 뷰어의 호환성 문제까지 고려해 정밀도와 실용성을 모두 확보하는 것이 이 프로젝트의 결론이다.

Figma에서 PDF 내보내기

  • 레이어를 선택한 뒤 속성 패널 하단에서 PDF 형식으로 내보낼 수 있다.
  • 아무것도 선택하지 않으면 페이지 전체를 내보낸다.
  • 파일 메뉴의 **“Export Frames to PDF”**를 사용하면 한 페이지의 모든 프레임을 하나의 다중 페이지 PDF로 만들 수 있다.
  • 프레임은 Figma 캔버스의 위치에 따라 왼쪽 위에서 오른쪽 아래 순서로 PDF 페이지에 배치된다.
  • PDF는 iOS 개발, 인쇄, 정밀한 색상 처리 등 다양한 용도로 활용되므로 Figma 사용자들의 요구가 특히 컸던 기능이다.

자체 PDF 라이브러리를 개발한 이유

  • Figma 팀은 PDF 관련 문서 1,300쪽을 검토하고 기존 라이브러리를 조사했다.
  • 기존 도구들은 복잡한 디자인 요소를 처리할 때 품질과 제어력 측면에서 타협이 필요했다.
  • PDF는 PNG처럼 단순한 이미지가 아니라 텍스트와 도형을 설명하는 벡터 형식이다.
    • 따라서 확대해도 텍스트와 선이 선명하게 유지된다.
    • 동시에 벡터 도형, 임베디드 이미지, 색상·셰이딩 정보를 함께 다뤄야 하므로 구조가 훨씬 복잡하다.
  • 구현이 어려운 효과를 이미지로 래스터화하면 개발은 쉬워지지만, 큰 인쇄물이나 다양한 크기의 디지털 에셋에서 픽셀이 드러날 수 있다.
  • 자체 라이브러리를 만들면서 어떤 요소를 벡터로 표현하고 언제 래스터화를 허용할지 직접 통제할 수 있게 됐다.

그림자와 블러의 정밀한 처리

  • PDF에는 그래픽 셰이더처럼 그림자와 블러를 직접 계산할 수 있는 수준의 제어 기능이 부족하다.
  • Figma는 그림자와 블러 효과를 코드로 합성해 결과를 만들어냈다.
  • 흐릿한 영역만 고해상도로 래스터화하고 이를 소프트 마스크로 사용한다.
    • 그림자 뒤에 있는 다른 도형은 계속 선명하게 유지된다.
    • 전체 디자인을 이미지로 바꾸는 것보다 래스터화 범위를 크게 줄일 수 있다.
  • 블러가 부모 경로의 경계를 넘지 않도록 벡터 방식으로 클리핑한다.
  • 그 결과 블러 효과와 부모 경로 사이에 부자연스러운 틈이나 균열이 생기는 문제를 방지한다.

단순한 그라디언트와 복잡한 그라디언트

  • 선형 및 타원형 그라디언트는 PDF가 제공하는 셰이딩 기능으로 비교적 쉽게 표현할 수 있다.
  • 반면 각도형 그라디언트와 Figma의 다이아몬드 그라디언트는 구현이 어렵다.
  • PDF에서는 복잡한 그라디언트를 여러 개의 단순한 색상 영역으로 쪼개 이어 붙이는 방식으로 표현해야 한다.
  • 이 방식은 단순 래스터화보다 품질이 좋지만 다음 문제가 발생한다.
    • 영역을 어떻게 근사할지에 대한 수학적 계산이 필요하다.
    • 근사 과정에서 수치 오차가 누적될 수 있다.
    • 색상 경계가 눈에 띄지 않도록 세밀한 조정이 필요하다.

PDF 뷰어 간 호환성 문제

  • PDF 표준은 매우 광범위하지만 모든 뷰어가 모든 기능을 완전히 지원하지는 않는다.
  • 특히 고급 셰이딩 기능은 뷰어마다 지원 방식이나 버그가 다르다.
  • 각도형 그라디언트는 PDF에서 여러 가지 우아한 구현 방법이 가능하지만, 주요 뷰어와 macOS 미리보기에서 모두 안정적으로 동작하는 방법은 제한적이었다.
  • 따라서 표준에 맞는 것만으로는 충분하지 않고, 실제 사용자가 이용하는 주요 뷰어에서 동일하게 보이는 구현을 선택해야 했다.

래스터화와의 싸움

  • Figma는 복잡한 효과를 무조건 이미지로 변환하는 대신 가능한 한 벡터 표현을 유지하는 방향을 택했다.
  • 이는 다음 환경에서 특히 중요하다.
    • 대형 인쇄물처럼 출력 크기가 큰 경우
    • 동일한 디자인을 여러 해상도와 크기로 재사용하는 경우
    • 클라이언트나 이해관계자에게 정밀한 결과물을 전달해야 하는 경우
  • 다만 모든 효과를 완전히 벡터화하는 작업은 끝난 것이 아니며, 향후에도 래스터화 감소와 고급 내보내기 옵션을 계속 개선할 계획이라고 밝혔다.

실무적으로는 인쇄나 확대 사용이 예정된 디자인일수록 Figma의 PDF 내보내기를 우선 고려할 만하다. 다만 복잡한 효과가 포함된 결과물은 사용 대상인 PDF 뷰어와 실제 출력 환경에서 반드시 검수하는 것이 좋다.