Fabric.js 7.4 캔버스 편집·브라우저 저장·PNG/SVG 출력은 실제 동작합니다. 서버 PDF·결제·주문 전송은 제안 시연입니다.

템플릿에서 시작해, 필요한 만큼 직접 편집합니다.

객체를 선택해 이동·크기·회전·스타일을 바꾸고 인쇄 점검 뒤 주문용 PDF를 준비합니다.

  1. 1상품 조건
  2. 2디자인 편집
  3. 3인쇄 점검
  4. 4결제
100%
FREE OBJECT CANVAS · BANNER1200 × 600 mm
○시연 저장됨
○Fabric.js 캔버스를 준비하고 있습니다.

□객체를 직접 선택해 이동·크기·회전·기울이기를 조절할 수 있습니다. 안전선은 출력물에 포함되지 않습니다.

IMPLEMENTATION BOUNDARY

자유 편집은 Fabric.js,
인쇄 확정은 서버가 책임집니다.

인쇄 주문에 유효한 Fabric.js 기능을 넓게 사용합니다. 브라우저 객체 상태를 그대로 주문 파일로 신뢰하지 않고 서버에서 권한·자산·규격을 다시 확인합니다.

□01 · BROWSER

Fabric.js · MIT

객체 변형·텍스트·도형·이미지·필터·드로잉·직렬화와 브라우저 출력을 담당합니다.

✓02 · VALIDATION API

서버 재검증

템플릿 버전, 객체 정책, 이미지 소유권, 실제 규격과 견적 토큰을 다시 확인합니다.

✓03 · PDF WORKER

주문용 PDF

실제 규격, bleed, 폰트, 이미지를 승인 프로파일로 합성하고 checksum을 남깁니다.

□04 · COMMERCE

WooCommerce

서버 가격, 결제, 주문 snapshot, 원고와 제작 상태를 하나의 주문에 연결합니다.

i현재 시안의 캔버스는 실제 Fabric.js로 동작합니다. 서버 저장·PDF worker·WooCommerce 연결은 계약 후 운영 환경에서 구현합니다.

※ 본 시안에 표시된 수치(매출·객단가·고객 수·운영 지표 등)는 화면 구성을 위한 가상 예시입니다. 실제 데이터를 전달해 주시면 그대로 교체 반영되며, 전달되지 않은 수치는 최종 결과물에서 제외됩니다.

FABRIC.JS · IMPLEMENTATION SCOPE

가능한 기능과 이번 견적의 경계

Fabric.js는 편집 객체를 다루는 오픈소스 엔진입니다. 완성형 편집기·인쇄 서버·쇼핑몰을 자동으로 제공하지 않으므로, 아래처럼 엔진 기능과 맞춤 개발 범위를 나눕니다.

1차 포함인쇄에 유효한 Fabric.js 기능을 1,200만원·8주 범위에 넣습니다.

5개 시작 템플릿을 자유 편집하고 운영자는 같은 객체 모델로 템플릿을 복제·편집·발행합니다.

Fabric.js 네이티브 활용

  • ✓단일·다중 선택, 이동·크기·회전·기울이기
  • ✓텍스트·도형·이미지·그룹·자유 드로잉
  • ✓이미지 필터, 색상·선·투명도·레이어 순서
  • ✓JSON 저장·복원, PNG·SVG 브라우저 출력
  • ✓5개 시작 템플릿·앞뒷면 객체 편집

앱·서버 맞춤 개발

  • □실행취소·복제·단축키·레이어 잠금·스냅
  • □운영자 템플릿 복제·편집·검수·발행
  • □자산 권한·가격·객체 정책 서버 재검증
  • □주문용 PDF·snapshot·checksum 생성
  • □WooCommerce 회원·상품·PG·주문 연결

무엇을 만들고 싶으세요?