Figma에서 직접 작성 가능한 필드가 포함된 대화형 PDF 만들기: 나의 첫 Vibe Coding 경험

저는 Cloud.ru의 인하우스 팀에서 커뮤니케이션 디자이너로 일하고 있습니다. 그전에는 다른 회사들에서 몇 년 동안 비슷한 역할을 수행했습니다. 회사의 규모와 상관없이, 어디에서나 조만간 똑같은 작업이 발생하곤 했습니다. 바로 작성 가능한(fillable) PDF 양식을 만드는 일입니다.

매니저를 위한 체크리스트, 상세한 클라이언트 브리프, 신입 사원을 위한 온보딩 설문지 — 이 모든 프로젝트는 매번 지치는 고난이 되었습니다.

내가 해결하고자 했던 고통

표준적인 워크플로우를 상상해 보세요. Figma에서 레이아웃 작업이 완료되었고, 디자인 검토와 승인이 끝났습니다. 이제 이 정적인 파일을 사용자가 실제로 내용을 채울 수 있는 대화형 PDF(interactive PDF)로 변환해야 합니다. 바로 이 지점에서 고통이 시작됩니다.

Figma의 내장 내보내기(export) 기능은 상호작용 요소가 전혀 없는 "평면적인(flat)" 파일을 생성합니다. 그러면 Adobe Acrobat을 열고 디자인 위에 텍스트 필드를 수동으로 배치하며 눈대중으로 정렬해야 합니다. 만약 클라이언트가 아주 작은 문구 수정이라도 요청하면, 전체 사이클이 다시 시작됩니다. Figma에서 수정 → 내보내기 → Acrobat에서 필드를 처음부터 다시 구축하기.

기존 플러그인들을 살펴보았습니다. 많지 않았습니다. 어떤 것들은 개발자에 의해 오래전에 방치되었고, 다른 것들은 기능이 지나치게 과하거나 단순히 작업에 맞지 않았습니다. 그래서 저는 저만의 도구를 직접 만들기로 결심했습니다.

컨셉: 마법은 레이어 이름에 있다

제 플러그인의 핵심 아이디어는 최대한 Figma의 네이티브 경험에 가깝게 유지하는 것입니다. 디자이너가 새로운 인터페이스를 배울 필요가 없어야 합니다. 특정 접두사(prefix)를 사용하여 레이어의 이름을 지정하기만 하면, 플러그인이 최종 PDF의 각 상호작용 필드를 어디에 배치할지 파악합니다.

저는 세 가지 필드 유형을 정의했습니다:

• field_layer name — 텍스트 입력용

• checkbox_layer name — 체크박스용

• radio_layer name — 라디오 버튼용

변환하려는 레이어를 선택하고 플러그인 패널에서 해당하는 접두사(예: checkbox_*)를 클릭하면, 플러그인이 알고리즘이 이해할 수 있는 접두사로 레이어 이름을 변경합니다.

추가 기능

• 그룹화 (Grouping): 동일한 이름을 공유하는 라디오 버튼 (Radio buttons)은 자동으로 하나의 선택 그룹으로 결합됩니다.

• 다중 페이지 내보내기 (Multi-page export): 선택된 여러 프레임 (Frames)이 하나의 다중 페이지 문서로 내보내집니다.

• 시각적 검증 (Visual validation): 필드 배경을 투명하게 설정하는 옵션(레이아웃에 이미 필드가 그려져 있는 경우 유용함)과, 최종 내보내기 전에 모든 대화형 영역이 올바르게 감지되었는지 확인하기 위한 파란색 외곽선 강조 모드가 있습니다.

기술 스택: Claude Code와 4가지 도구 구성

개발은 네 가지 도구의 긴밀한 통합을 통해 진행되었습니다:

• Claude Code — 나의 주요 AI 어시스턴트.

• VS Code — 주요 개발 환경 (Development environment).

• GitHub — 버전 관리 (Version control) 및 변경 이력 관리용.

• Figma — 실제 테스트를 위한 샌드박스(Sandbox)이자 플러그인 UI 자체를 위한 디자인 도구. 후자의 경우, Figma MCP를 사용했습니다.

Claude Code는 챗봇이 아닙니다. 터미널에서 직접 실행되며 파일을 읽고, 코드를 수정하고, 빌드를 실행하며, 커밋 (Commits)을 수행합니다. 이것은 단순히 "보기 좋게 만들어줘"라고 말하는 마법이 아닙니다. 당신이 제품 결정에 집중하는 동안 실행을 담당하는 AI 개발자와의 진정한 페어 프로그래밍 (Pair programming)입니다.

AI는 모든 일상적인 작업을 수행했습니다: webpack 빌드 구성, TypeScript 타입 (Types), CSS 애니메이션, 그리고 러시아어와 영어를 위한 현지화 (Localization) 시스템 구축 등입니다. 나는 작업을 정의하고, Figma에서 결과를 확인하며, 다음 반복 (Iteration)을 위한 피드백을 제공했습니다.

Figma 커뮤니티 리뷰에서의 놀라운 점

플러그인이 준비되었을 때, 나는 완전한 자신감을 가지고 리뷰를 제출했습니다. 며칠 후, 거절 통보를 받았습니다. 알고 보니 Figma의 검토 프로세스는 단순히 승인만 해주는 것이 아니라 매우 철저했습니다.

문제 #1: 콘텐츠 보안 정책 (Content Security Policy, CSP)

코드에는 여전히 HTML의 표준 태그인 Google Fonts를 통해 로드되는 Manrope 폰트에 대한 참조가 남아 있었습니다. 하지만 플러그인 UI는 격리된 iframe 내부에서 실행되기 때문에, 엄격한 콘텐츠 보안 정책 (Content Security Policy) 규칙이 외부 스타일시트의 로드를 차단합니다.

해결 방법: Google Fonts를 완전히 제거하고 시스템 폰트 스택 (system font stack)으로 전환합니다. 시각적인 차이는 미미하지만, 보안 문제는 해결되었습니다.

이슈 #2: 외부 링크

UI에 기부 링크를 포함하고 싶었습니다. Figma 플러그인 내부에서는 표준 window.open() 호출이 작동하지 않습니다. 플랫폼은 figma.openExternal()을 요구하는데, 이는 UI가 아닌 플러그인의 메인 스레드(main thread)에서 호출되어야 하는 전용 메서드입니다. 문서에 명시되어 있기는 하지만, 실제로 경험해 보면 거절당한 후에야 이를 발견하게 되는 경향이 있습니다.

전반적으로, Figma 검토자들은 실제로 플러그인을 실행하고, 콘솔에서 오류를 검사하며, 가이드라인에 따라 모든 것을 확인합니다. 제 조언은 이렇습니다. 첫 번째 거절을 당한 후가 아니라, 제출하기 전에 보안 요구 사항을 읽으세요.

결과 및 시사점

결과적으로, Interactive PDF Export는 약속한 기능을 정확히 수행하는 집중된 도구입니다. 즉, Figma 프레임을 작동하는 텍스트 필드, 체크박스, 라디오 버튼이 포함된 PDF로 변환해 줍니다.

만약 작성 가능한 (fillable) PDF가 귀하의 워크플로에서 정기적인 부분이라면, 한 번 사용해 보세요. 피드백은 언제나 환영합니다!

Figma Community의 플러그인