데이터시트 문서화의 고통

펌웨어 개발하면서 IC 데이터시트를 자주 본다. 문제는 이걸 문서화해야 할 때다.

데이터시트 PDF에서 Figure나 Table을 뽑아서 마크다운 문서에 넣으려면:

  1. PDF 열기
  2. 스크린샷 찍기
  3. 이미지 편집기로 크롭
  4. 파일 저장
  5. 마크다운에 삽입
  6. 캡션 작성

이걸 Figure 하나당 반복한다. 100페이지짜리 데이터시트에서 Figure 30개 뽑으면? 손목이 나간다.

기존 도구들의 한계

PDF를 마크다운으로 변환하는 도구는 많다. 근데 다 문제가 있다.

1. 온라인 변환기

  • 파일 업로드해야 함 (보안 이슈)
  • 레이아웃 깨짐
  • Figure/Table 인식 못 함

2. Adobe Acrobat

  • 비쌈
  • Figure 영역 선택이 번거로움
  • 마크다운 지원 안 함

3. 파이썬 라이브러리 (PyMuPDF, pdfplumber)

  • 설치 필요
  • 코드 짜야 함
  • 비개발자는 사용 불가

내가 원하는 건 단순했다:

  • 브라우저에서 바로 실행
  • 서버 없이 로컬에서 처리
  • 영역 선택해서 바로 이미지 추출
  • Figure/Table 자동 인식
  • 마크다운으로 한 번에 내보내기

없으니까 만들기로 했다.

서버리스로 만들고 싶었던 이유

서버 올리면 귀찮은 게 한두 개가 아니다:

  • 서버 비용
  • 파일 업로드/다운로드 처리
  • 보안 (사용자 파일 저장?)
  • 유지보수

브라우저에서 다 처리하면:

  • 배포만 하면 끝
  • 파일이 서버로 안 감
  • 오프라인에서도 동작 가능

다행히 요즘 브라우저는 거의 뭐든 된다:

  • PDF.js: PDF 렌더링
  • Tesseract.js: OCR
  • Canvas API: 이미지 크롭
  • IndexedDB: 로컬 저장
  • JSZip: ZIP 생성

WASM 덕분에 무거운 연산도 브라우저에서 돌릴 수 있다.

최종 목표

  1. PDF 업로드 - 드래그 앤 드롭
  2. 페이지 탐색 - 이전/다음, 줌
  3. 영역 선택 - 클릭 두 번으로 사각형 영역 지정
  4. 자동 인식 - OCR로 “Figure 1”, “Table 2” 같은 텍스트 추출
  5. 메타 편집 - Type, Name, Caption 수정 가능
  6. 마크다운 생성 - 선택한 영역들을 마크다운으로 정리
  7. ZIP 내보내기 - 마크다운 + 이미지 파일 한 번에 다운로드

기술 스택

프론트엔드: Vue 3 + Composition API
빌드: Vite
PDF 렌더링: PDF.js
OCR: Tesseract.js
로컬 저장: Dexie.js (IndexedDB)
ZIP 생성: JSZip

Vue 3를 선택한 이유:

  • Composition API가 상태 관리하기 좋음
  • 단일 파일 컴포넌트로 구조 깔끔
  • Vite랑 궁합이 좋음

React도 고려했는데, 이 정도 규모에서 Vue가 더 빠르게 개발할 수 있었다.

다음 글에서

PDF.js로 브라우저에서 PDF를 렌더링하는 방법을 다룬다. 생각보다 삽질 포인트가 많다.