본문으로 건너뛰기

PDF 빈칸 자동 채우기

딸깍문서의 혁신적인 PDF 빈칸 감지 및 자동 채우기 기능을 상세히 설명합니다.

개요​

AI Vision (Claude) 기술을 사용하여 PDF 양식의 빈칸을 자동으로 감지하고, 사용자가 입력한 내용으로 채워 새로운 PDF를 생성합니다.

flowchart TB
    A[PDF 업로드] --> B[페이지 이미지 변환]
    B --> C[AI Vision 분석]
    C --> D[빈칸 좌표 추출]
    D --> E[입력 필드 생성]
    E --> F[사용자 입력]
    F --> G[PDF 생성]
    G --> H[다운로드]

지원 양식 유형​

감지 가능한 빈칸​

유형예시감지 정확도
밑줄 입력란성명: ____________높음
점선 입력란성명: ............높음
박스 입력란□ □ □ □ □ □중간
테이블 빈 셀빈 테이블 셀높음
체크박스□ 동의함중간
서명란(인), [서명]높음

필드 타입​

type FieldType =
  | "text" // 일반 텍스트
  | "date" // 날짜
  | "number" // 숫자
  | "checkbox" // 체크박스
  | "signature" // 서명
  | "other"; // 기타

빈칸 감지 프로세스​

1. PDF 이미지 변환​

PDF 각 페이지를 고해상도 이미지로 변환합니다:

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const scale = 2; // 고해상도를 위한 스케일
canvas.width = viewport.width * scale;
canvas.height = viewport.height * scale;

2. AI Vision 분석​

Claude Vision API로 이미지를 분석합니다:

const response = await anthropic.messages.create({
  model: "claude-sonnet-4-20250514",
  max_tokens: 4000,
  messages: [
    {
      role: "user",
      content: [
        {
          type: "image",
          source: {
            type: "base64",
            media_type: "image/png",
            data: base64Image,
          },
        },
        {
          type: "text",
          text: "PDF 양식에서 밑줄 입력란을 찾아주세요...",
        },
      ],
    },
  ],
});

3. 좌표 추출​

AI가 반환하는 빈칸 좌표 형식:

interface DetectedBlank {
  label: string; // 옆 라벨 텍스트
  x_percent: number; // X 좌표 (0-100%)
  y_percent: number; // Y 좌표 (0-100%)
  width_percent: number; // 너비 (%)
  height_percent: number; // 높이 (%)
  field_type: FieldType; // 필드 타입
  is_required: boolean; // 필수 여부
}
좌표 시스템

좌표는 이미지 기준 퍼센트(%)로 표현됩니다. 좌측 상단이 (0, 0), 우측 하단이 (100, 100)입니다.

사용 방법​

1. PDF 업로드​

<input type="file" accept="application/pdf" onChange={handlePdfUpload} />

2. 빈칸 확인​

감지된 빈칸들이 PDF 미리보기 위에 입력 필드로 표시됩니다.

3. 내용 입력​

각 빈칸에 내용을 입력합니다:

  • 텍스트 필드: 직접 타이핑
  • 날짜 필드: 날짜 선택기
  • 체크박스: 클릭으로 토글
  • 서명: 서명 패드

4. PDF 생성 및 다운로드​

import { PDFDocument, rgb, StandardFonts } from "pdf-lib";

const pdfDoc = await PDFDocument.load(existingPdfBytes);
const page = pdfDoc.getPages()[0];

// 텍스트 삽입
page.drawText("입력 내용", {
  x: 100,
  y: 700,
  size: 12,
  font: koreanFont,
  color: rgb(0, 0, 0),
});

const pdfBytes = await pdfDoc.save();

한글 폰트 지원​

PDF에 한글 텍스트를 올바르게 렌더링하기 위해 NotoSansKR 폰트를 임베드합니다:

import fontkit from "@pdf-lib/fontkit";

pdfDoc.registerFontkit(fontkit);
const fontBytes = await fetch("/fonts/NotoSansKR-Regular.otf").then((res) =>
  res.arrayBuffer(),
);
const koreanFont = await pdfDoc.embedFont(fontBytes);

API 엔드포인트​

빈칸 감지​

POST /api/pdf/detect-blanks
Content-Type: application/json

{
  "image": "base64_encoded_image",
  "strip_index": 0,
  "total_strips": 1,
  "locale": "ko"
}

응답:

{
  "success": true,
  "blanks": [
    {
      "label": "성명",
      "x_percent": 45,
      "y_percent": 20,
      "width_percent": 30,
      "height_percent": 3,
      "field_type": "text",
      "is_required": true
    }
  ],
  "table_detected": false,
  "confidence": 0.95
}

빈칸 채우기​

POST /api/pdf/fill-blanks
Content-Type: application/json

{
  "pdf_base64": "base64_encoded_pdf",
  "blanks": [
    {
      "id": "blank_1",
      "value": "홍길동",
      "x": 100,
      "y": 700
    }
  ]
}

감지 정확도 향상​

이미지 품질​

  • 최소 150 DPI 권장
  • 선명한 스캔/PDF 원본

양식 구조​

더 잘 감지되는 양식:

  • 명확한 밑줄 또는 박스
  • 일관된 레이아웃
  • 표준화된 양식

수동 조정​

감지가 정확하지 않은 경우:

  1. 빈칸 위치 드래그로 조정
  2. 크기 조절
  3. 필드 추가/삭제

제한사항​

제한값
최대 파일 크기10MB
최대 페이지 수20 페이지
지원 언어한국어, 영어

에러 처리​

일반적인 오류​

"빈칸을 찾을 수 없습니다"
  • 양식에 감지 가능한 빈칸이 없을 수 있습니다
  • 수동으로 빈칸을 추가해보세요
"PDF 파싱 오류"
  • PDF가 손상되었거나 보호되어 있을 수 있습니다
  • 다른 PDF 리더로 열어서 다시 저장해보세요

다음 단계​