FreeGraphPaper.net: 브라우저 기반 벡터 PDF 그래프 용지 생성기

FreeGraphPaper.net: 브라우저 기반 벡터 PDF 그래프 용지 생성기

FreeGraphPaper.net은 브라우저에서 동작하는 도구로, 인쇄 준비가 된 벡터 PDF 그래프 용지를 생성합니다. 로그인, 회원가입, 워터마크 없이도 사용자가 간격, 색상, 여백을 조정할 수 있는 다양한 사전 구성 템플릿과 맞춤 생성기를 제공합니다.

기술 아키텍처: 렌더링을 위한 단일 진실 소스

도구의 핵심은 순수 함수 buildPaper(config) 하나로 구성되어 있으며, 이 함수는 기하학 원시 요소(선, 원, 텍스트)를 출력합니다. 이 아키텍처 덕분에 화면상의 SVG 미리보기, 다운로드 가능한 PDF, 빌드 시 생성되는 자산이 모두 동일한 로직에서 파생되어 출력 형식 간 중복이 없습니다.

렌더링 파이프라인

  • SVG 미리보기: renderPaperSvg() 함수는 원시 요소를 인라인 SVG로 변환하여 사전 렌더링된 HTML에 삽입합니다. 이를 통해 클라이언트 측 JavaScript 없이도 미리보기가 렌더링됩니다.
  • PDF 생성: 브라우저에서 맞춤 구성을 할 경우, 도구는 동적 import를 통해 jsPDF를 사용합니다. 빌드 시 정적 PDF를 생성할 때는 Bun 스크립트가 동일한 원시 요소를 재사용해 파일을 만듭니다.
  • PDF 정확도: 격자가 실제 크기와 일치하도록 SVG viewBox와 PDF 모두 밀리미터 단위로 정의됩니다. 사용자는 정확한 측정을 유지하기 위해 100% 배율(“페이지에 맞추기” 비활성)으로 인쇄할 것을 권장합니다.
  • 소셜 이미지: 빌드 시 OG 이미지(1200x630)와 전체 A4 시트가 SVG에서 PNG로 @resvg/resvg-js를 사용해 생성됩니다.

정적 생성 및 pSEO 전략

사이트는 완전 정적으로 구성되어 Cloudflare Pages에 백엔드나 데이터베이스 없이 파일만 배포됩니다.

생성 규모

  • 페이지 수: 약 1,900개의 페이지가 HTML로 사전 렌더링되고, 1,700개의 PDF가 빌드 시 미리 생성됩니다.
  • 데이터 기반 pSEO: 단일 데이터 테이블을 기반으로 전체 ISO A/B/C 및 US/Imperial 용지 크기에 대해 약 40개의 스타일 페이지를 생성합니다. 여기에는 WebSite, HowTo, FAQ, Breadcrumb 스키마용 JSON‑LD가 포함되어 검색 엔진 최적화를 돕습니다.
  • 얇은 콘텐츠 관리: 수요가 낮은 크기 조합에는 선택적으로 noindex 태그를 사용해 얇은 콘텐츠가 SEO 순위에 영향을 주는 것을 방지합니다.

기술 스택

Component Technology Technology
Framework Nuxt 4 / Vue 3 TypeScript, script setup
Static Generation Nitro (nuxt generate) Cloudflare Pages
** uma l** Bun Package manager and native-TS runner
Styling Tailwind CSS v4 Scoped CSS with design tokens
PDF Engine jsPDF Dynamic import for browser-side generation
Image Rendering @resvg/resvg-js SVG to PNG conversion

사용자 경험 및 커뮤니티 피드백

이 도구는 정사각형 격자, 점 격자, 등축격자, 육각형, Cornell 노트 용지 등 다양한 템플릿을 제공하며, US Letter, Legal, Tabloid 및 전체 ISO A, B, C 시리즈를 포함한 광범위한 용지 크기를 지원합니다.

커뮤니티 인사이트

사용자들은 몇 가지 기술적 문제와 버그를 보고했습니다:

"Safari, Mac에서 첫 번째 두 개(표준 남‑북/동‑서 그래프)를 볼 수 없습니다. 등축격자와 육각형은 보이지만."

"격자를 육각형으로 바꾸고 'snap to grid'가 체크되어 있는지 확인하세요. 여전히 원래 정사각형 격자에 스냅됩니다."

사용자들은 또한 펜타곤 패턴, 로그‑선형 격자, Smith 차트와 같은 추가 패턴을 요청하고 있습니다.

SUMMARY: FreeGraphPaper.net은 로그인 없이 무료로 사용할 수 있는 도구로, 다양한 ISO 및 US 용지 크기에 맞춰 실제 크기의 벡터 PDF(그래프, 점, 등축, 육각형 격자)를 생성합니다.

TITLE: FreeGraphPaper.net: 브라우저 기반 벡터 PDF 그래프 용지 생성기

Sources