21:I[94636,["/_next/static/immutable/chunks/06df7kl64iaox.js","/_next/static/immutable/chunks/3ms0baajlq1_a.js","/_next/static/immutable/chunks/309b9k7ucpdrm.js","/_next/static/immutable/chunks/20ld9uq1tdc0_.js"],"default"] 22:T7f2d,

CONNECTED PRINT INSIGHTS · ARCHITECTURE10 MIN READ

쇼핑몰은 그대로.
인쇄 기능은 API로 연결.

Headless Web-to-Print는 온라인 주문 화면과 인쇄 처리 기능을 분리합니다. 디자인 편집, 견적, 파일 검수, 생산 준비를 필요한 곳에 연결하는 방법을 실제 주문 흐름과 인터랙티브 도구로 살펴보겠습니다.

Headless CommerceAPI-firstPrint Automation

판매 채널API인쇄 서비스생산

01 · DEFINITION

Headless Web-to-Print란 무엇인가?

한 문장 정의

Headless Web-to-Print는 고객에게 보이는 인쇄 주문 화면(프런트엔드)과 가격 계산·디자인 편집·파일 검수·생산 처리 기능(백엔드)을 분리하고, API를 통해 이 기능과 데이터를 연결하는 웹투프린트 아키텍처입니다.

일반적인 온라인 인쇄 쇼핑몰은 상품 페이지와 주문 처리, 디자인 편집기, 관리자 기능이 한 플랫폼에 묶여 있는 경우가 많습니다. 기능을 추가하거나 외부 생산 시스템을 연결할 때 플랫폼 자체를 수정해야 할 수도 있습니다.

Headless 접근은 판매 화면과 인쇄 서비스 사이의 의존성을 줄입니다. 예를 들어 고객은 기존 쇼핑몰에서 주문하고, 견적은 별도의 가격 엔진에서 계산하며, PDF는 전문 Preflight 서비스에서 검수한 뒤 생산 시스템에 전달할 수 있습니다.

왜 Headless라고 부를까?

여기서 Head는 고객이 접하는 화면입니다. Headless는 특정 화면에 백엔드가 묶이지 않도록 분리한다는 뜻입니다. 따라서 동일한 백엔드 서비스를 웹사이트, 기업 전용 포털, 모바일 앱에서 활용하는 설계가 가능합니다.

중요한 구분

기존 쇼핑몰에 인쇄용 API 하나를 연동했다고 해서 반드시 완전한 Headless Commerce가 되는 것은 아닙니다. 상품·장바구니·주문과 같은 커머스 핵심 기능까지 API로 분리했는지에 따라 구조가 달라집니다. 이 글에서는 완전한 Headless 방식과 실무적인 API 기반 인쇄 기능 분리를 함께 다룹니다.

02 · COMPARISON

기존 Web-to-Print와 무엇이 다른가?

핵심 차이는 디자인 편집이나 자동견적의 존재 여부가 아니라, 해당 기능을 얼마나 독립적으로 교체하고 연결할 수 있는가입니다. 아래에서 두 구조를 선택해 비교해 보세요.

단일 인쇄 커머스 플랫폼

상품 · 주문 화면디자인 편집가격 계산파일 및 생산 관리

특징: 설정과 운영이 비교적 단순할 수 있지만, 일부 기능의 독립 교체는 제한될 수 있습니다.

Storefront / Brand Portal

↓ API LAYER ↓

EditorPricingPreflightProduction

특징: 채널과 기능을 분리할 수 있지만, 연동 개발·장애 대응·데이터 정합성을 직접 관리해야 할 수 있습니다.

항목	일체형	Headless / API-first
기능 구성	플랫폼 안에 결합	서비스별 분리 가능
화면 수정	제공 기능과 제약에 영향	독립적인 화면 개발 가능
외부 연동	솔루션 지원 범위에 의존	API 계약으로 연동 설계
초기 구축	상대적으로 간단할 수 있음	통합 개발이 필요할 수 있음
운영 책임	공급업체에 집중 가능	여러 서비스의 상태 관리 필요
채널 확장	플랫폼 방식에 따라 차이	공통 서비스를 다양한 채널에 연결

어떤 구조가 더 적합할까?

표준 상품을 적은 종류로 판매하고 외부 시스템 연동이 거의 없다면 일체형 솔루션이 합리적일 수 있습니다. 여러 브랜드 스토어, 커스텀 주문 화면, ERP·MIS 연동이 필요한 사업이라면 Headless 또는 API 중심 구조의 유연성이 중요해집니다.

03 · SYSTEM ARCHITECTURE

Headless Web-to-Print의 핵심 아키텍처

아래 다이어그램은 설명을 위한 개념 설계입니다. 각 모듈을 선택하면 역할과 데이터 흐름을 확인할 수 있습니다. 실제로 모든 서비스를 반드시 별도로 운영해야 하는 것은 아닙니다.

PRODUCT DATAPRINT-READY FILEORDER STATUS

SELECTED MODULEStorefront — 고객이 주문하는 화면

고객이 상품, 용지, 수량, 옵션을 선택하고 디자인을 업로드하거나 편집하는 접점입니다.

예: 웹 쇼핑몰 / 기업 전용 명함 포털

화살표는 개념적인 처리 방향입니다. 실제 시스템에서는 비동기 작업 큐, 파일 저장소, 웹훅 등을 사용할 수 있습니다.

Storefront와 API는 각각 무엇을 담당할까?

Storefront는 상품 구성, 미리보기, 장바구니 등 고객 경험을 담당합니다. API Layer는 견적 요청, 파일 작업, 주문 확인을 각 서비스에 전달하며 인증, 오류 응답, 데이터 형식을 관리합니다. 예를 들어 상품 규격과 수량이 일관된 필드로 전달되어야 가격 엔진과 생산 시스템이 같은 주문을 해석할 수 있습니다.

Print Engine과 Production은 어떻게 연결될까?

Print Engine은 디자인 개인화, Preflight, 인쇄용 PDF 준비, 판면 배치 등 인쇄 전문 기능을 수행합니다. Production은 최종 승인된 작업을 MIS·ERP·장비 운영 프로세스로 전달합니다. 두 영역을 분리하면 파일에 문제가 생겼을 때 생산 전 단계에서 보류할 수 있습니다.

설계 원칙

각 시스템 사이에 주문 식별자, 파일 버전, 승인 여부, 처리 상태를 명확하게 정의하세요. API 호출이 성공했다는 사실과 실제 인쇄 작업이 완료되었다는 사실은 다릅니다.

04 · ORDER WORKFLOW

인쇄 주문은 어떤 순서로 처리되는가?

고객이 90 × 50 mm 양면 명함 500매를 주문한다고 가정하겠습니다. 다음은 설명을 위한 가상 워크플로이며, 실제 단계는 상품과 운영 정책에 따라 달라집니다.

PRODUCT · BUSINESS CARD

90 × 50 mm500매양면 컬러무광 코팅

STEP 01 / 06READY

상품 선택 및 실시간 견적

용지, 규격, 수량, 인쇄 면수, 후가공 옵션을 받아 가격 엔진이 견적을 계산합니다.

EXAMPLE EVENTquote.created

FILE VALIDATION SCENARIO

검수 결과가 달라지면 다음 생산 단계로의 진행 가능 여부도 달라집니다.

1 / 6

실제 적용 시 확인해야 할 6단계

자동견적: 상품 옵션, 수량, 고객별 가격, 세금, 배송 조건을 반영합니다.
디자인 또는 업로드: 편집 결과나 고객 PDF를 주문에 연결하고 버전을 관리합니다.
Preflight: 규격·도련·이미지 해상도·폰트·색상 기준을 검사하고 PASS, WARNING, ERROR를 구분합니다.
결제 및 주문 확정: 결제 성공, 고객 승인, 생산 승인 상태를 혼동하지 않고 관리합니다.
Imposition 및 생산 파일: 출력 규격, 재단 간격, 앞뒤 면 대응, 배열 조건에 맞게 준비합니다.
생산·출고: MIS 또는 작업 시스템으로 전달하고 제작 및 배송 상태를 동기화합니다.

Preflight가 모든 오류를 자동으로 수정할까?

아닙니다. Preflight는 문제를 검출하고 판단하기 위한 검사입니다. 일부 문제는 별도의 자동 수정 기술로 처리할 수 있지만, 잘못된 원본 이미지나 누락된 내용까지 안전하게 복원할 수 있는 것은 아닙니다. 경고 또는 오류를 승인 없이 생산으로 넘기지 않는 규칙이 중요합니다.

05 · BUSINESS VALUE

Headless Web-to-Print의 도입 효과

01 / KEEP기존 판매 채널 유지

쇼핑몰 전체를 교체하지 않고 필요한 인쇄 서비스부터 단계적으로 연결할 수 있습니다.

02 / AUTOMATE반복 업무 감소

견적 작성, 파일 확인, 주문 정보 복사 등의 반복 작업을 자동화 대상으로 선정할 수 있습니다.

03 / EXPAND다중 채널 확장

스토어, 기업 포털, 크리에이터 채널에 동일한 인쇄 처리 서비스를 제공하도록 설계할 수 있습니다.

우리 회사에서는 얼마나 절약할 수 있을까?

아래 계산기는 월 주문량과 현재 수작업 시간을 이용해 절약 가능한 인건비의 단순 추정치를 보여줍니다. 기본값은 설명용 가정이며 실제 성과나 특정 서비스의 보장 수치가 아닙니다.

월 주문 건수 건 / 월현재 건당 수작업 분 / 건시간당 인건비 원 / 시간예상 수작업 절감률 %

월 절약 시간15시간 / 월

월 인건비 절감 추정225,000원 / 월

자동화 후 잔여 수작업10시간 / 월

300건 × 5분 × 60% = 900분 절약

API 이용료, 초기 개발비, 유지보수비, 검수 예외, 자동화되지 않는 업무는 포함하지 않습니다. 실제 순절감액은 별도 산정해야 합니다.

자동화 성과는 어떤 지표로 측정할까?

단순 인건비뿐 아니라 주문당 수작업 시간, 고객 파일 재요청률, 생산 오류율, 주문 처리 리드타임, 재작업 비용을 함께 측정하는 것이 좋습니다. 업무 범위와 상품 구성이 다르면 숫자를 직접 비교하기 어렵기 때문에 도입 전후에 동일한 기준을 사용해야 합니다.

06 · USE CASES

어떤 비즈니스에 적합할까?

Headless 또는 API-first 방식은 온라인 인쇄소뿐 아니라 기존 쇼핑몰, 기업 전용 주문 시스템, 주문형 인쇄(POD) 플랫폼에도 응용할 수 있습니다. 업종을 선택하면 추천되는 기능 구성을 볼 수 있습니다.

EXISTING COMMERCE기존 쇼핑몰에 맞춤 인쇄 상품 추가

상품 판매, 결제, 회원 관리는 기존 쇼핑몰에서 처리하고 맞춤 디자인, 인쇄 파일 검수, 생산 데이터 생성만 외부 인쇄 서비스로 연결하는 모델입니다.

기존 StorefrontEditor APIPreflight

COMMERCIAL PRINTER견적과 파일 접수 공정의 표준화

전화·이메일로 접수하던 주문을 온라인화하고 규격별 가격 정책 및 파일 검수 기준을 일관되게 적용합니다. 필요하면 MIS·ERP와 생산 상태를 연결합니다.

Pricing EnginePreflightMIS 연동

B2B BRAND PORTAL기업별 템플릿과 승인 기반 주문

임직원이 승인된 디자인 템플릿에서 이름·직책·연락처를 입력하고, 회사별 권한과 승인 절차에 따라 주문하는 모델입니다.

Template Editor승인 워크플로기업별 가격

PRINT ON DEMAND크리에이터가 고객을 확보하는 판매 구조

디자인 상품을 여러 판매 채널에 노출하고 주문 발생 시 공통 인쇄 처리 시스템으로 작업을 전달합니다. 상품·디자인·판매자·주문을 연결하는 데이터 구조가 중요합니다.

상품 생성주문 연동Fulfillment

소규모 인쇄업체에도 적합할까?

가능하지만 구축 범위를 조절해야 합니다. 표준화된 상품 몇 가지부터 견적 또는 파일 검수 API를 도입해보고, 주문량과 절약 시간을 확인한 뒤 확대하는 접근이 현실적입니다. 개발·호스팅·사용량 기반 비용이 절감 효과보다 크지 않은지 검토해야 합니다.

07 · TECHNICAL REQUIREMENTS

구축 전에 반드시 검토할 사항

영역	실무 확인 사항
상품 · 가격	규격, 수량, 인쇄 면수, 후가공, 고객별 가격, 세금과 배송 조건
디자인 데이터	템플릿, 최종 승인 파일, 파일 버전 및 미리보기 일치 여부
Preflight	도련, 규격, 해상도, 폰트, 색상, 경고와 보류 규칙
주문 · 결제	주문 고유 ID, 결제 결과, 승인 상태, 중복 요청 방지
생산 연동	ERP·MIS 데이터 형식, 작업 큐, 상태 동기화, 출고 정보
보안 · 안정성	API 인증, 고객 파일 접근 권한, 로그, 재시도, 백업 및 장애 알림
운영 비용	초기 개발, API 이용료, 인프라, 모니터링, 유지보수

API 보안과 중복 생산은 어떻게 방지할까?

인증 토큰과 API 비밀 키는 서버에서 보호해야 하며, 고객 파일에는 접근 제한과 보관·삭제 정책을 적용해야 합니다. 같은 주문이 네트워크 오류로 재전송되더라도 두 번 생산되지 않도록 주문별 고유 식별자와 멱등성(idempotency), 상태 기록 및 재시도 정책을 설계하는 것이 중요합니다.

현실적인 제약

API가 존재한다는 사실만으로 모든 기능이 연동 가능한 것은 아닙니다. 사용 가능한 필드, 호출 한도, 인증 방식, 비동기 처리 여부 및 실제 서비스 계약 조건을 확인해야 합니다.

08 · IMPLEMENTATION ROADMAP

Headless Web-to-Print 구축 로드맵

처음부터 전 기능을 도입하기보다 수작업과 오류가 많은 공정부터 개선하세요. 아래 항목을 선택하면 준비 정도를 확인할 수 있습니다. 체크 상태는 현재 화면에서만 유지됩니다.

0 / 5 완료

1. 주문 업무와 상품 규칙 정리상품 옵션, 견적 기준, 수작업 구간, 데이터 입력 항목 정의2. 핵심 인쇄 API 선정Pricing · Editor · Preflight의 우선순위와 인터페이스 확인3. 검수·승인·예외 처리 설계경고 처리, 고객 승인, 재제출 및 파일 버전 관리4. 주문과 생산 시스템 연동주문 ID, 작업 상태, 중복 방지, 장비·MIS 데이터 매핑5. 운영 KPI와 비용 검증처리 시간, 오류율, API 비용, 장애·유지보수 정책 확인

완료한 항목을 선택하면 진행률을 확인할 수 있습니다.

구축 성과를 판단하는 기준

같은 기간과 유사한 상품군을 대상으로 주문당 수작업 시간, 파일 재요청률, 오류·재작업률, 생산 준비 리드타임, 주문당 총 운영비를 측정하세요. 절감액과 비교할 때는 API 요금과 개발·유지보수비를 반드시 포함해야 합니다.

09 · FAQ

자주 묻는 질문

Headless와 일반 Web-to-Print의 가장 큰 차이는 무엇인가요?

일반 Web-to-Print는 온라인으로 인쇄물을 주문하는 시스템을 의미합니다. Headless는 화면과 백엔드 기능을 분리하는 아키텍처로, 독립적인 화면 개발과 서비스 간 API 연동이 핵심입니다.

Shopify나 WooCommerce에도 적용할 수 있나요?

가능합니다. 각 플랫폼의 지원 API와 확장 방식, 결제·주문 제약을 확인하여 디자인 편집이나 인쇄 처리 기능을 연동할 수 있습니다. 실제 구현 범위는 사용 중인 플랜과 연동 서비스의 지원 기능에 달려 있습니다.

온라인 디자인 에디터가 반드시 필요한가요?

아닙니다. 완성된 PDF를 업로드받는 방식이라면 에디터 없이 파일 접수와 Preflight만 연결할 수 있습니다. 고객이 템플릿의 텍스트와 이미지를 바꾸어야 할 때 에디터가 유용합니다.

API 연동만으로 인쇄 주문을 완전히 자동화할 수 있나요?

보장되지 않습니다. 인쇄 파일 품질, 고객 승인, 장비 조건, 후가공, 예외 상황에 따라 사람이 확인해야 할 수 있습니다. API는 자동화를 가능하게 하는 연결 수단입니다.

소규모 인쇄소도 시작할 수 있나요?

가능합니다. 수작업이 많은 상품 한 종류 또는 업무 단계 한 가지부터 연결하는 것이 좋습니다. 도입 전 주문량 대비 개발·API·유지보수 비용을 검토해야 합니다.

10 · CONNECTED PRINT

Connected Print와 API 중심 인쇄 서비스

Connected Print KR은 온라인 인쇄 주문과 인쇄 기술 서비스를 구분하여 안내합니다. 사업자는 필요한 기능을 기준으로 설계 방향을 살펴볼 수 있습니다. 다음 링크는 서비스 소개 페이지이며, 실제 API 사양과 사용 가능 범위는 별도 확인이 필요합니다.

DESIGNEditor API웹 기반 디자인 편집 및 개인화자세히 보기 ↗FILE QUALITYPreflight API인쇄 파일 검사 및 결과 처리자세히 보기 ↗PREPRESSImposition API인쇄 작업을 위한 판면 구성자세히 보기 ↗B2B COMMERCEBrand Store기업 전용 주문 환경자세히 보기 ↗

11 · CONCLUSION

인쇄 쇼핑몰에서 인쇄 커머스 인프라로

Headless Web-to-Print는 온라인 쇼핑몰을 무조건 새로 만드는 접근이 아닙니다. 판매 채널과 인쇄 전문 기능을 분리하여 필요한 부분을 독립적으로 개선하고 연결할 수 있게 하는 설계 방식입니다.

도입의 성공 기준은 화려한 기술 구조보다 반복 업무가 실제로 줄었는지, 오류가 감소했는지, 고객 주문 경험이 개선되었는지에 있습니다. 기존 쇼핑몰을 유지하면서 작은 자동화부터 시작할 수도 있습니다.

THE FUTURE OF WEB-TO-PRINT판매는 유연하게.
인쇄 업무는 체계적으로.

Headless Web-to-Print의 핵심은 시스템을 더 많이 만드는 것이 아니라, 필요한 시스템을 효율적으로 연결하는 것입니다.

Connected Print 살펴보기 →

참고 자료

외부 자료는 기술적 개념을 이해하기 위한 참고 링크입니다. 특정 연동·제휴 또는 호환성을 보증하지 않습니다.

23:T5837,/* Connected Print KR | Scoped Article CSS | v1.0 */ /* 모든 선택자는 article 전용 ID에서 시작합니다. CMS 목차/헤더/스크롤 비간섭 */ #cp-article {width:100%;max-width:1156px;margin:0 auto;padding:0 0 18px;color:#26384d;background:#fff;font-family:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:17px;line-height:1.85;letter-spacing:-.018em;overflow-wrap:break-word;} #cp-article * {box-sizing:border-box;} #cp-article [hidden] {display:none!important;} #cp-article p {margin:0 0 20px;font-size:16px;line-height:1.95;word-break:keep-all;} #cp-article strong {font-weight:750;} #cp-article h2 {margin:0 0 22px;color:#0e2037;font-size:clamp(25px,3.2vw,31px);font-weight:800;line-height:1.4;letter-spacing:-.042em;word-break:keep-all;} #cp-article h3 {margin:34px 0 13px;color:#16314f;font-size:19px;font-weight:750;line-height:1.55;letter-spacing:-.025em;word-break:keep-all;} #cp-article a {color:#1855a0;text-decoration:none;} #cp-article a:hover {text-decoration:underline;} #cp-article button,#cp-article input {font:inherit;} #cp-article button {cursor:pointer;} #cp-article button:focus-visible,#cp-article a:focus-visible,#cp-article input:focus-visible {outline:3px solid #65a8ff;outline-offset:3px;} #cp-article .cp-section {padding:66px 0;border-bottom:1px solid #e6ecf3;} #cp-article .cp-kicker {margin-bottom:12px;color:#1e68bd;font-size:12px;line-height:1.5;font-weight:800;letter-spacing:.11em;} #cp-article .cp-label {display:block;color:#2b69bc;font-size:11px;line-height:1.6;font-weight:800;letter-spacing:.1em;} #cp-article .cp-hero {padding:clamp(30px,5.5vw,64px);border-radius:18px;color:#fff;background:radial-gradient(ellipse at 100% 0%,rgba(91,155,235,.28),transparent 55%),linear-gradient(124deg,#0c192b,#14325a 80%,#18375e);} #cp-article .cp-hero-meta {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:32px;} #cp-article .cp-overline {color:#9dcbff;font-size:11px;font-weight:800;line-height:1.5;letter-spacing:.12em;} #cp-article .cp-readtime {padding:5px 11px;border:1px solid rgba(255,255,255,.27);border-radius:20px;color:#e1ecfa;font-size:11px;font-weight:750;letter-spacing:.05em;} #cp-article .cp-hero-title {max-width:850px;margin-bottom:23px;color:#fff;font-size:clamp(29px,4.6vw,44px);font-weight:850;line-height:1.36;letter-spacing:-.055em;} #cp-article .cp-hero-title span {color:#9bcdff;} #cp-article .cp-hero-lead {max-width:780px;margin-bottom:26px;color:#d9e7fa;font-size:17px;line-height:1.92;} #cp-article .cp-keywords {display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px;} #cp-article .cp-keywords span {padding:6px 11px;border:1px solid rgba(255,255,255,.19);border-radius:5px;background:rgba(255,255,255,.06);color:#e8f1fd;font-size:12px;font-weight:650;} #cp-article .cp-hero-path {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:17px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.06);} #cp-article .cp-hero-path span {color:#f2f7ff;font-size:12px;font-weight:700;} #cp-article .cp-hero-path b {color:#8cc6ff;font-size:16px;} #cp-article .cp-definition {margin:26px 0;padding:24px 28px;border-left:4px solid #317bea;border-radius:0 10px 10px 0;background:#f0f6ff;} #cp-article .cp-definition p {margin:9px 0 0;color:#183c66;font-size:17px;line-height:1.9;} #cp-article .cp-note {margin:26px 0 0;padding:21px 24px;border:1px solid #d4e2f2;border-radius:9px;background:#f8fbff;} #cp-article .cp-note>strong {display:block;margin-bottom:6px;color:#1e5eaa;font-size:14px;} #cp-article .cp-note p {margin:0;color:#445b74;font-size:15px;} #cp-article .cp-interactive {min-width:0;margin:27px 0 32px;padding:28px;border:1px solid #dce6f2;border-radius:14px;background:#f8fbff;} #cp-article .cp-widget-top {display:flex;align-items:start;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:23px;} #cp-article .cp-widget-title {margin:6px 0 0;color:#17304d;font-size:20px;font-weight:800;line-height:1.45;} #cp-article .cp-widget-hint {padding:5px 10px;border:1px solid #d9e6f7;border-radius:30px;background:#fff;color:#5f7794;font-size:11px;font-weight:700;white-space:normal;} #cp-article .cp-switches {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:19px;} #cp-article .cp-choice {min-height:42px;padding:9px 15px;border:1px solid #cbd9e9;border-radius:7px;background:#fff;color:#375472;font-size:13px;font-weight:700;line-height:1.4;transition:background-color .15s,border-color .15s,color .15s;} #cp-article .cp-choice:hover {border-color:#6c9bda;} #cp-article .cp-choice.cp-is-selected {border-color:#1c5ba9;background:#1d5ba9;color:#fff;} #cp-article .cp-compare-panel {padding:19px;border:1px solid #e0e8f3;border-radius:10px;background:#fff;} #cp-article .cp-compare-panel + .cp-compare-panel {margin-top:12px;} #cp-article .cp-js-ready .cp-compare-panel + .cp-compare-panel {margin-top:0;} #cp-article .cp-monolith {max-width:470px;margin:0 auto;padding:20px;border:2px solid #bdcddd;border-radius:10px;background:#ecf1f7;text-align:center;} #cp-article .cp-monolith>span {display:block;margin-bottom:12px;color:#2b4e72;font-size:14px;font-weight:800;} #cp-article .cp-block-stack {display:grid;gap:6px;} #cp-article .cp-block-stack span {padding:10px;border:1px solid #d5deea;border-radius:5px;background:#fff;color:#4c637d;font-size:13px;font-weight:700;} #cp-article .cp-headless-flow {max-width:480px;margin:0 auto;text-align:center;} #cp-article .cp-flow-head {padding:17px;border-radius:7px;background:#183e78;color:#fff;font-size:15px;font-weight:800;} #cp-article .cp-flow-arrow {padding:12px 0;color:#2876cf;font-size:19px;font-weight:850;} #cp-article .cp-flow-arrow span {font-size:11px;letter-spacing:.08em;} #cp-article .cp-mini-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} #cp-article .cp-mini-grid span {padding:13px 5px;border:1px solid #c9daf2;border-radius:6px;background:#eaf3ff;color:#1b4e88;font-size:12px;font-weight:800;overflow-wrap:anywhere;} #cp-article .cp-panel-summary {margin:20px 0 0;color:#4e647c;font-size:14px;line-height:1.85;text-align:center;} #cp-article .cp-table-scroll {max-width:100%;margin:26px 0 28px;overflow-x:auto;border:1px solid #dce5ef;border-radius:9px;} #cp-article .cp-table {width:100%;min-width:550px;border-collapse:collapse;text-align:left;} #cp-article .cp-table th,#cp-article .cp-table td {padding:15px 16px;border-bottom:1px solid #e9edf4;color:#4b6078;font-size:14px;line-height:1.7;vertical-align:top;word-break:keep-all;} #cp-article .cp-table thead {background:#edf4fc;} #cp-article .cp-table thead th {color:#294865;font-weight:800;} #cp-article .cp-table tbody th {color:#273c55;font-weight:750;} #cp-article .cp-table tbody tr:nth-child(even) {background:#fbfcff;} #cp-article .cp-table tr:last-child th,#cp-article .cp-table tr:last-child td {border-bottom:0;} #cp-article .cp-system-chain {display:flex;align-items:stretch;gap:6px;} #cp-article .cp-system-node {flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:138px;padding:14px 7px;border:1px solid #cdddeb;border-radius:9px;background:#fff;text-align:center;color:#365b83;transition:background-color .15s,border-color .15s;} #cp-article .cp-system-node small {color:#6f8bad;font-size:10px;line-height:1.5;font-weight:800;letter-spacing:.04em;} #cp-article .cp-system-node strong {font-size:16px;line-height:1.45;overflow-wrap:anywhere;} #cp-article .cp-system-node span {color:#657b95;font-size:11px;line-height:1.5;word-break:keep-all;} #cp-article .cp-system-node:hover {border-color:#6c9cd9;} #cp-article .cp-system-node.cp-is-selected {border-color:#1f64b7;background:#e5f0ff;color:#144f9b;box-shadow:inset 0 0 0 1px #1f64b7;} #cp-article .cp-chain-arrow {align-self:center;color:#2b71c1;font-size:20px;font-weight:850;} #cp-article .cp-data-band {display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0;} #cp-article .cp-data-band span {padding:4px 9px;border:1px solid #d0dff0;border-radius:20px;color:#5981b1;font-size:10px;font-weight:800;letter-spacing:.05em;} #cp-article .cp-module-detail {min-height:171px;padding:23px;border:1px solid #d6e4f4;border-radius:9px;background:#fff;} #cp-article .cp-module-detail>strong {display:block;margin:7px 0;color:#163f70;font-size:17px;line-height:1.55;} #cp-article .cp-module-detail>p {margin-bottom:9px;color:#4b617b;font-size:14px;line-height:1.85;} #cp-article .cp-module-detail .cp-module-example {margin:0;color:#2664b1;font-size:13px;font-weight:700;} #cp-article .cp-caption {margin:13px 0 0;color:#74859b;font-size:12px;line-height:1.75;} #cp-article .cp-order-spec {margin:25px 0;padding:20px 22px;border:1px solid #dfe8f2;border-radius:10px;background:#f5f8fc;} #cp-article .cp-order-spec>span {display:block;margin-bottom:12px;color:#3776bf;font-size:11px;font-weight:800;letter-spacing:.07em;} #cp-article .cp-order-spec>div {display:flex;gap:9px;flex-wrap:wrap;} #cp-article .cp-order-spec strong {padding:7px 12px;border-radius:5px;background:#fff;color:#294565;font-size:13px;} #cp-article .cp-workflow-track {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:18px;} #cp-article .cp-flow-step {min-width:0;min-height:72px;padding:9px 4px;border:1px solid #d2dfef;border-radius:8px;background:#fff;color:#316295;font-size:13px;font-weight:800;text-align:center;line-height:1.5;} #cp-article .cp-flow-step span {display:block;color:#6a7d93;font-size:11px;font-weight:700;overflow-wrap:anywhere;} #cp-article .cp-flow-step.cp-is-selected {border-color:#2066bb;background:#e2efff;color:#1556a5;box-shadow:inset 0 0 0 1px #2066bb;} #cp-article .cp-flow-step.cp-is-complete:not(.cp-is-selected) {border-color:#b5d8c5;background:#eff9f3;} #cp-article .cp-workflow-detail {min-height:209px;padding:23px;border:1px solid #dce6f0;border-radius:9px;background:#fff;} #cp-article .cp-workflow-detail-head {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;} #cp-article .cp-workflow-detail-head>span:first-child {color:#4976a7;font-size:11px;font-weight:800;letter-spacing:.07em;} #cp-article .cp-status-pill {padding:4px 9px;border-radius:20px;background:#eaf3ff;color:#2460aa;font-size:10px;font-weight:800;} #cp-article .cp-status-pill.cp-status-warn {background:#fff0cf;color:#855a15;} #cp-article .cp-status-pill.cp-status-error {background:#ffe8e8;color:#ae3333;} #cp-article .cp-status-pill.cp-status-ok {background:#eaf7f0;color:#1c7a4c;} #cp-article .cp-workflow-detail>strong {display:block;margin-bottom:8px;color:#1b3656;font-size:20px;line-height:1.5;} #cp-article .cp-workflow-detail>p {margin-bottom:11px;color:#516a82;font-size:14px;line-height:1.85;} #cp-article .cp-workflow-event {display:flex;align-items:center;gap:12px;flex-wrap:wrap;} #cp-article .cp-workflow-event span {color:#758ba5;font-size:10px;font-weight:800;letter-spacing:.06em;} #cp-article .cp-workflow-event code {padding:5px 8px;border-radius:4px;background:#eef3fa;color:#375f90;font-family:Consolas,"Cascadia Code",monospace;font-size:12px;overflow-wrap:anywhere;} #cp-article .cp-scenario {margin-top:16px;padding:18px;border:1px dashed #c8d8e9;border-radius:9px;background:#fbfdff;} #cp-article .cp-scenario .cp-switches {margin:10px 0;} #cp-article .cp-small {margin:0;color:#71839b;font-size:12px;line-height:1.7;} #cp-article .cp-workflow-actions {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;} #cp-article .cp-workflow-actions>span {color:#6e7f93;font-size:12px;font-weight:800;} #cp-article .cp-primary-button,#cp-article .cp-secondary-button {min-height:42px;padding:9px 17px;border-radius:6px;font-size:13px;font-weight:750;line-height:1.6;} #cp-article .cp-primary-button {border:1px solid #205da8;background:#205da8;color:#fff;} #cp-article .cp-secondary-button {border:1px solid #c8d6e6;background:#fff;color:#2d547e;} #cp-article button:disabled {cursor:not-allowed;opacity:.48;} #cp-article .cp-editorial-steps {margin:18px 0 28px;padding-left:24px;} #cp-article .cp-editorial-steps li {padding:3px 0 11px;color:#4a5f77;font-size:15px;line-height:1.9;word-break:keep-all;} #cp-article .cp-editorial-steps li::marker {color:#2466ba;font-weight:800;} #cp-article .cp-benefit-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0;} #cp-article .cp-benefit-grid>div {min-width:0;padding:23px;border:1px solid #e0e9f2;border-radius:9px;background:#fcfdff;} #cp-article .cp-benefit-grid span {display:block;margin-bottom:12px;color:#2366b9;font-size:11px;font-weight:800;letter-spacing:.06em;} #cp-article .cp-benefit-grid strong {display:block;margin-bottom:9px;color:#203953;font-size:17px;line-height:1.55;} #cp-article .cp-benefit-grid p {margin:0;color:#64758a;font-size:14px;line-height:1.82;} #cp-article .cp-input-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:6px 0 22px;} #cp-article .cp-input-grid label {display:flex;flex-direction:column;gap:7px;color:#294462;font-size:14px;font-weight:750;} #cp-article .cp-input-grid label span {color:#7a8da3;font-size:11px;font-weight:600;} #cp-article .cp-input-grid input {width:100%;min-width:0;padding:11px 13px;border:1px solid #c7d8ea;border-radius:7px;background:#fff;color:#173657;font-size:16px;font-weight:700;line-height:1.5;} #cp-article .cp-calc-results {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:20px 0;border-top:1px solid #dae6f3;border-bottom:1px solid #dae6f3;} #cp-article .cp-calc-results>div {min-width:0;padding:17px 12px;border-radius:8px;background:#e9f2ff;text-align:center;} #cp-article .cp-calc-results span,#cp-article .cp-calc-results small {display:block;color:#5b7798;font-size:12px;line-height:1.6;} #cp-article .cp-calc-results strong {display:block;margin:6px 0;color:#154e95;font-size:clamp(20px,2.5vw,27px);font-weight:850;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;} #cp-article .cp-calc-foot {padding-top:18px;} #cp-article .cp-calc-foot p:first-child {margin-bottom:8px;color:#265e9f;font-size:14px;font-weight:800;} #cp-article .cp-calc-foot p:last-child {margin:0;color:#7a8799;font-size:12px;line-height:1.8;} #cp-article .cp-case-buttons {margin-bottom:17px;} #cp-article .cp-case-panel {padding:25px;border:1px solid #d9e5f1;border-radius:9px;background:#fff;} #cp-article .cp-case-panel + .cp-case-panel {margin-top:10px;} #cp-article .cp-js-ready .cp-case-panel + .cp-case-panel {margin-top:0;} #cp-article .cp-case-category {display:block;margin-bottom:9px;color:#2b6ebd;font-size:11px;font-weight:800;letter-spacing:.08em;} #cp-article .cp-case-panel>strong {display:block;margin-bottom:10px;color:#1a3553;font-size:20px;line-height:1.5;} #cp-article .cp-case-panel>p {margin:0 0 20px;color:#506881;font-size:15px;line-height:1.9;} #cp-article .cp-case-chips {display:flex;gap:8px;flex-wrap:wrap;} #cp-article .cp-case-chips span {padding:7px 10px;border-radius:5px;background:#eaf2fe;color:#2b63a9;font-size:12px;font-weight:750;} #cp-article .cp-warning {margin:27px 0;padding:21px 24px;border:1px solid #efdbaf;border-radius:9px;background:#fffaf0;} #cp-article .cp-warning strong {display:block;margin-bottom:6px;color:#86590d;font-size:14px;} #cp-article .cp-warning p {margin:0;color:#675a47;font-size:14px;} #cp-article .cp-check-summary {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:4px 0 24px;} #cp-article .cp-check-summary>span,#cp-article .cp-check-summary>strong {color:#2361aa;font-size:13px;font-weight:800;white-space:nowrap;} #cp-article .cp-progress {height:11px;overflow:hidden;border-radius:20px;background:#dce9f6;} #cp-article .cp-progress>span {display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#3079d5,#62b2ed);transition:width .2s;} #cp-article .cp-check-items {border:1px solid #dde7f0;border-radius:9px;overflow:hidden;background:#fff;} #cp-article .cp-check-item {display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid #edf0f5;cursor:pointer;} #cp-article .cp-check-item:last-child {border-bottom:0;} #cp-article .cp-check-item input {flex:0 0 auto;width:20px;height:20px;margin:3px 0 0;accent-color:#2369be;cursor:pointer;} #cp-article .cp-check-item span {display:flex;flex-direction:column;gap:5px;min-width:0;} #cp-article .cp-check-item strong {color:#25415c;font-size:15px;line-height:1.55;} #cp-article .cp-check-item small {color:#73849a;font-size:13px;line-height:1.7;word-break:keep-all;} #cp-article .cp-check-item:has(input:checked) {background:#f1f8ff;} #cp-article .cp-check-feedback {margin:17px 0 7px;color:#3d6fa7;font-size:13px;line-height:1.8;font-weight:700;} #cp-article .cp-text-button {padding:6px 0;border:0;background:transparent;color:#5479a3;font-size:12px;font-weight:750;text-decoration:underline;text-underline-offset:3px;} #cp-article .cp-faq-item {padding:23px 0;border-bottom:1px solid #e7edf4;} #cp-article .cp-faq-item h3 {margin:0 0 10px;font-size:18px;} #cp-article .cp-faq-item p {margin:0;color:#566a82;font-size:15px;} #cp-article .cp-link-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:24px 0;} #cp-article .cp-link-grid>a {display:flex;flex-direction:column;min-width:0;padding:23px;border:1px solid #d7e4f3;border-radius:9px;background:#f7faff;text-decoration:none;transition:border-color .16s,background-color .16s;} #cp-article .cp-link-grid>a:hover {border-color:#5b92d1;background:#eaf3ff;text-decoration:none;} #cp-article .cp-link-grid span {margin-bottom:11px;color:#2e6cba;font-size:11px;font-weight:800;letter-spacing:.07em;} #cp-article .cp-link-grid strong {color:#193d64;font-size:19px;line-height:1.5;} #cp-article .cp-link-grid small {flex:1;margin:9px 0 14px;color:#667b94;font-size:13px;line-height:1.75;} #cp-article .cp-link-grid em {color:#2667b4;font-size:13px;font-style:normal;font-weight:800;} #cp-article .cp-end-section {border-bottom:0;padding-bottom:0;} #cp-article .cp-final {margin:26px 0 36px;padding:clamp(26px,4vw,44px);border-radius:12px;background:linear-gradient(130deg,#142642,#204c7a);color:#fff;} #cp-article .cp-final>span {display:block;margin-bottom:16px;color:#a6cffe;font-size:11px;font-weight:800;letter-spacing:.11em;} #cp-article .cp-final>strong {display:block;margin-bottom:16px;color:#fff;font-size:clamp(25px,3.4vw,35px);line-height:1.43;font-weight:850;letter-spacing:-.045em;} #cp-article .cp-final p {max-width:700px;margin-bottom:21px;color:#d3e2f3;font-size:15px;} #cp-article .cp-final a {display:inline-block;padding:11px 17px;border-radius:6px;background:#fff;color:#17467a;font-size:13px;font-weight:800;text-decoration:none;} #cp-article .cp-final a:hover {background:#e9f3ff;text-decoration:none;} #cp-article .cp-references {padding-top:22px;border-top:1px solid #e4eaf1;} #cp-article .cp-references>strong {display:block;margin-bottom:8px;color:#38516e;font-size:14px;} #cp-article .cp-references ul {margin:0 0 12px;padding-left:21px;} #cp-article .cp-references li {margin-bottom:5px;color:#5f7791;font-size:13px;line-height:1.8;overflow-wrap:anywhere;} #cp-article .cp-references a {text-decoration:underline;text-underline-offset:3px;} #cp-article .cp-references p {margin:0;color:#7b899b;font-size:12px;} @media (max-width:900px) { #cp-article .cp-section {padding:52px 0;} #cp-article .cp-system-chain {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;} #cp-article .cp-chain-arrow {display:none;} #cp-article .cp-system-node {min-height:138px;} #cp-article .cp-benefit-grid {grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:640px) { #cp-article {font-size:16px;} #cp-article p {font-size:15px;line-height:1.92;} #cp-article h2 {font-size:25px;} #cp-article h3 {margin-top:27px;font-size:18px;} #cp-article .cp-section {padding:43px 0;} #cp-article .cp-hero {padding:29px 21px;border-radius:12px;} #cp-article .cp-hero-meta {margin-bottom:24px;} #cp-article .cp-hero-title {font-size:clamp(29px,7.5vw,36px);} #cp-article .cp-hero-lead {font-size:15px;} #cp-article .cp-keywords {margin-bottom:24px;} #cp-article .cp-hero-path {gap:7px;padding:12px;} #cp-article .cp-hero-path span {font-size:11px;} #cp-article .cp-definition {padding:20px;} #cp-article .cp-definition p {font-size:16px;} #cp-article .cp-note,#cp-article .cp-warning {padding:18px;} #cp-article .cp-interactive {padding:18px 14px;border-radius:10px;} #cp-article .cp-widget-title {font-size:18px;} #cp-article .cp-widget-top {margin-bottom:18px;} #cp-article .cp-choice {min-height:40px;padding:8px 10px;font-size:12px;} #cp-article .cp-compare-panel {padding:15px;} #cp-article .cp-mini-grid {grid-template-columns:repeat(2,minmax(0,1fr));} #cp-article .cp-system-chain {grid-template-columns:repeat(2,minmax(0,1fr));} #cp-article .cp-system-node {min-height:119px;} #cp-article .cp-system-node strong {font-size:15px;} #cp-article .cp-module-detail {padding:17px;} #cp-article .cp-order-spec {padding:16px;} #cp-article .cp-workflow-track {grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;} #cp-article .cp-flow-step {min-height:63px;} #cp-article .cp-workflow-detail {padding:18px;} #cp-article .cp-workflow-detail>strong {font-size:18px;} #cp-article .cp-workflow-actions {gap:6px;} #cp-article .cp-primary-button,#cp-article .cp-secondary-button {padding:9px 11px;font-size:12px;} #cp-article .cp-benefit-grid {grid-template-columns:minmax(0,1fr);} #cp-article .cp-benefit-grid>div {padding:18px;} #cp-article .cp-input-grid {grid-template-columns:minmax(0,1fr);gap:12px;} #cp-article .cp-calc-results {grid-template-columns:minmax(0,1fr);gap:8px;} #cp-article .cp-calc-results>div {padding:12px;} #cp-article .cp-calc-results strong {font-size:24px;} #cp-article .cp-case-panel {padding:18px;} #cp-article .cp-case-panel>strong {font-size:18px;} #cp-article .cp-check-summary {grid-template-columns:1fr auto;gap:8px;} #cp-article .cp-progress {grid-column:1/-1;grid-row:2;} #cp-article .cp-check-item {padding:16px 12px;gap:10px;} #cp-article .cp-link-grid {grid-template-columns:minmax(0,1fr);} #cp-article .cp-final {padding:26px 21px;} #cp-article .cp-table th,#cp-article .cp-table td {padding:12px;font-size:13px;} } @media (prefers-reduced-motion:reduce) { #cp-article .cp-choice,#cp-article .cp-system-node,#cp-article .cp-progress>span,#cp-article .cp-link-grid>a {transition:none;} } 24:T356b,/* Connected Print KR | Scoped interactions | v1.0 * HTML/CSS만으로 모든 핵심 설명을 읽을 수 있습니다. * 현재 article 내부만 탐색/수정하며 CMS 목차·부모 iframe·네트워크에 접근하지 않습니다. */ (function () { "use strict"; var root = document.getElementById("cp-article"); if (!root) return; if (root.getAttribute("data-cp-initialized") === "true") return; root.setAttribute("data-cp-initialized", "true"); function one(selector, scope) { return (scope || root).querySelector(selector); } function all(selector, scope) { return Array.prototype.slice.call((scope || root).querySelectorAll(selector)); } function setText(target, text) { if (target) target.textContent = String(text); } function setSelected(buttons, selected, attribute, selectedClass) { buttons.forEach(function (button) { var match = button.getAttribute(attribute) === selected; button.classList.toggle(selectedClass || "cp-is-selected", match); button.setAttribute("aria-pressed", match ? "true" : "false"); }); } /* 01. 일체형 / Headless 비교 */ (function setupComparison() { var widget = one('[data-cp-widget="comparison"]'); if (!widget) return; var buttons = all("[data-cp-compare]", widget); var panels = all("[data-cp-compare-panel]", widget); if (!buttons.length || !panels.length) return; function choose(value) { setSelected(buttons, value, "data-cp-compare"); panels.forEach(function (panel) { var current = panel.getAttribute("data-cp-compare-panel") === value; panel.hidden = !current; panel.classList.toggle("cp-is-selected", current); }); } buttons.forEach(function (button) { button.addEventListener("click", function () { choose(button.getAttribute("data-cp-compare")); }); }); choose("monolith"); })(); /* 02. 아키텍처 모듈 설명 */ (function setupArchitecture() { var widget = one('[data-cp-widget="architecture"]'); if (!widget) return; var buttons = all("[data-cp-module]", widget); var title = one("[data-cp-module-title]", widget); var copy = one("[data-cp-module-copy]", widget); var example = one("[data-cp-module-example]", widget); var content = { store: { title: "Storefront — 고객이 주문하는 화면", copy: "고객이 인쇄 상품, 규격, 수량, 후가공을 고르고 디자인 파일을 업로드하거나 편집하는 판매 채널입니다.", example: "예: 일반 쇼핑몰 · 기업 전용 주문 포털" }, api: { title: "API Layer — 서비스 간 연결과 제어", copy: "주문 식별자, 상품 옵션, 인증, 요청과 응답을 관리하며 외부 인쇄 기능과 판매 화면 사이의 데이터 전달을 담당합니다.", example: "예: 견적 요청 · 작업 등록 · 오류 응답 · 웹훅" }, engine: { title: "Print Engine — 인쇄 전문 처리", copy: "가격 계산, 디자인 개인화, PDF 검수, 판면 배치처럼 인쇄에 특화된 작업을 독립된 서비스로 실행할 수 있습니다.", example: "예: Pricing · Editor · Preflight · Imposition" }, production: { title: "Production — 제작과 배송 상태 관리", copy: "승인된 파일과 작업 지시를 MIS·ERP 또는 실제 생산 프로세스로 보내고 제작·출고 결과를 주문과 연결합니다.", example: "예: 작업 지시 · 제작 상태 · 배송 추적" } }; if (!buttons.length) return; function choose(value) { var item = content[value]; if (!item) return; setSelected(buttons, value, "data-cp-module"); setText(title, item.title); setText(copy, item.copy); setText(example, item.example); } buttons.forEach(function (button) { button.addEventListener("click", function () { choose(button.getAttribute("data-cp-module")); }); }); choose("store"); })(); /* 03. 6단계 주문 시뮬레이터 */ (function setupWorkflow() { var widget = one('[data-cp-widget="workflow"]'); if (!widget) return; var stepButtons = all("[data-cp-flow-step]", widget); var scenarioButtons = all("[data-cp-scenario]", widget); var previous = one("[data-cp-prev]", widget); var next = one("[data-cp-next]", widget); var indexText = one("[data-cp-flow-index]", widget); var title = one("[data-cp-flow-title]", widget); var copy = one("[data-cp-flow-copy]", widget); var event = one("[data-cp-flow-event]", widget); var status = one("[data-cp-flow-status]", widget); var count = one("[data-cp-step-count]", widget); if (stepButtons.length !== 6) return; var steps = [ {title:"상품 선택 및 실시간 견적",copy:"상품 사양과 수량을 받아 가격 엔진이 기준에 따라 견적을 계산합니다. 표시된 금액과 실제 결제 금액에 적용할 세금·배송 정책은 별도로 확인합니다.",event:"quote.created"}, {title:"디자인 편집 또는 파일 업로드",copy:"고객이 템플릿을 수정하거나 인쇄용 PDF를 제출합니다. 어떤 파일이 고객에게 승인되었는지 버전을 연결해 둡니다.",event:"artwork.submitted"}, {title:"인쇄용 파일 검수 (Preflight)",copy:"PDF 규격, 도련, 해상도, 폰트 등 인쇄 기준을 검사합니다. 결과에 따라 통과·검토·중단으로 분기합니다.",event:"preflight.passed"}, {title:"결제 및 주문 데이터 확정",copy:"결제 결과, 고객 승인, 상품 사양과 파일 버전을 주문 ID로 연결합니다. 결제 성공과 생산 승인은 구분해 관리합니다.",event:"order.confirmed"}, {title:"Imposition 및 생산 파일 준비",copy:"인쇄 장비와 작업 규격에 맞춰 재단 여백, 앞뒤 면 대응, 판면 배치 등을 준비합니다.",event:"artwork.prepared"}, {title:"생산 지시 및 상태 동기화",copy:"승인된 작업을 MIS·생산 시스템에 전달하고 제작 및 배송 상태를 주문과 연결합니다.",event:"production.queued"} ]; var selectedStep = 0; var scenario = "pass"; function blocked() { return scenario !== "pass"; } function render() { var step = steps[selectedStep]; stepButtons.forEach(function (button, index) { var selected = index === selectedStep; button.classList.toggle("cp-is-selected", selected); button.classList.toggle("cp-is-complete", index < selectedStep); button.setAttribute("aria-pressed", selected ? "true" : "false"); button.setAttribute("aria-disabled", blocked() && index > 2 ? "true" : "false"); }); setText(indexText, "STEP 0" + (selectedStep + 1) + " / 06"); setText(count, (selectedStep + 1) + " / 6"); setText(title, step.title); var text = step.copy; var exampleEvent = step.event; var state = "READY"; var stateClass = "cp-status-ok"; if (selectedStep === 2 && scenario === "warning") { text = "검수에서 도련 또는 화질 관련 경고가 발견되었습니다. 고객 확인 또는 작업자 검토 후 다음 단계 진행 여부를 결정해야 합니다."; exampleEvent = "preflight.review_required"; state = "REVIEW"; stateClass = "cp-status-warn"; } else if (selectedStep === 2 && scenario === "error") { text = "규격 불일치 등 생산 불가능한 오류가 발견되었습니다. 파일 수정이나 재제출 전까지 후속 단계 진행을 보류합니다."; exampleEvent = "preflight.failed"; state = "BLOCKED"; stateClass = "cp-status-error"; } else if (selectedStep === 2) { state = "PASS"; } setText(copy, text); setText(event, exampleEvent); setText(status, state); if (status) status.className = "cp-status-pill " + stateClass; if (previous) previous.disabled = selectedStep === 0; if (next) { next.disabled = selectedStep === steps.length - 1 || (selectedStep === 2 && blocked()); setText(next, selectedStep === steps.length - 1 ? "완료" : "다음 단계 →"); } } stepButtons.forEach(function (button) { button.addEventListener("click", function () { var target = Number(button.getAttribute("data-cp-flow-step")); if (!Number.isInteger(target) || target < 0 || target >= steps.length) return; selectedStep = blocked() ? Math.min(target, 2) : target; render(); }); }); scenarioButtons.forEach(function (button) { button.addEventListener("click", function () { scenario = button.getAttribute("data-cp-scenario") || "pass"; setSelected(scenarioButtons, scenario, "data-cp-scenario"); if (blocked() && selectedStep > 2) selectedStep = 2; else selectedStep = 2; render(); }); }); if (previous) previous.addEventListener("click", function () { selectedStep = Math.max(0, selectedStep - 1); render(); }); if (next) next.addEventListener("click", function () { if (selectedStep === 2 && blocked()) return; selectedStep = Math.min(steps.length - 1, selectedStep + 1); render(); }); render(); })(); /* 04. 자동화 효과 계산기: 예시 입력에 대한 산술만 수행 */ (function setupCalculator() { var widget = one('[data-cp-widget="calculator"]'); if (!widget) return; var orders = one('[data-cp-input="orders"]', widget); var minutes = one('[data-cp-input="minutes"]', widget); var hourly = one('[data-cp-input="hourly"]', widget); var rate = one('[data-cp-input="rate"]', widget); if (!orders || !minutes || !hourly || !rate) return; var numberFormat = new Intl.NumberFormat("ko-KR", {maximumFractionDigits:1}); var currencyFormat = new Intl.NumberFormat("ko-KR", {maximumFractionDigits:0}); function safeValue(input, minimum, maximum) { var n = Number(input.value); if (!Number.isFinite(n)) return minimum; return Math.max(minimum, Math.min(maximum, n)); } function render() { var o = safeValue(orders, 0, 1000000); var m = safeValue(minutes, 0, 1440); var wage = safeValue(hourly, 0, 10000000); var r = safeValue(rate, 0, 100); var savedMinutes = o * m * r / 100; var hoursSaved = savedMinutes / 60; var hoursRemain = o * m / 60 - hoursSaved; var salary = hoursSaved * wage; setText(one('[data-cp-result="hours"]', widget), numberFormat.format(hoursSaved)); setText(one('[data-cp-result="money"]', widget), currencyFormat.format(salary)); setText(one('[data-cp-result="remaining"]', widget), numberFormat.format(hoursRemain)); setText(one("[data-cp-calc-formula]", widget), numberFormat.format(o) + "건 × " + numberFormat.format(m) + "분 × " + numberFormat.format(r) + "% = " + numberFormat.format(savedMinutes) + "분 절약"); } [orders, minutes, hourly, rate].forEach(function (input) { input.addEventListener("input", render); input.addEventListener("change", render); }); render(); })(); /* 05. 업종별 탭 */ (function setupUseCases() { var widget = one('[data-cp-widget="usecases"]'); if (!widget) return; var buttons = all("[data-cp-case-tab]", widget); var panels = all("[data-cp-case-panel]", widget); if (!buttons.length || !panels.length) return; function select(name) { setSelected(buttons, name, "data-cp-case-tab"); panels.forEach(function (panel) { var chosen = panel.getAttribute("data-cp-case-panel") === name; panel.hidden = !chosen; panel.classList.toggle("cp-is-selected", chosen); }); } buttons.forEach(function (button) { button.addEventListener("click", function () { select(button.getAttribute("data-cp-case-tab")); }); }); select("commerce"); })(); /* 06. 구현 체크리스트 */ (function setupChecklist() { var widget = one('[data-cp-widget="checklist"]'); if (!widget) return; var checks = all("[data-cp-check]", widget); var reset = one("[data-cp-check-reset]", widget); var progress = one("[data-cp-progress]", widget); var bar = one("[data-cp-progress-bar]", widget); if (!checks.length) return; function render() { var finished = checks.filter(function (input) { return input.checked; }).length; var percent = Math.round(finished / checks.length * 100); setText(one("[data-cp-check-count]", widget), finished + " / " + checks.length + " 완료"); setText(one("[data-cp-check-percent]", widget), percent + "%"); if (progress) progress.setAttribute("aria-valuenow", String(percent)); if (bar) bar.style.width = percent + "%"; var message = finished === 0 ? "완료한 항목을 선택하면 진행률을 확인할 수 있습니다." : finished === checks.length ? "5개 항목을 모두 확인했습니다. 이제 실제 사양과 운영 비용을 검증하세요." : "선택하지 않은 항목도 확인하여 연동 범위와 운영 책임을 정리하세요."; setText(one("[data-cp-check-feedback]", widget), message); } checks.forEach(function (input) { input.addEventListener("change", render); }); if (reset) reset.addEventListener("click", function () { checks.forEach(function (input) { input.checked = false; }); render(); }); render(); })(); root.classList.add("cp-js-ready"); })(); 1e:["$","div",null,{"className":"article-module__L9KIzq__content public-article-module__avAi7q__body","children":["$","div",null,{"className":"content-module__FCWS-W__content","children":[["$","div","b-0f322334-9550-44f9-91bb-8b2e1be7861f",{"id":"b-0f322334-9550-44f9-91bb-8b2e1be7861f","children":["$","$L21",null,{"block":{"id":"b-0f322334-9550-44f9-91bb-8b2e1be7861f","type":"scoped_html","html":"$22","css":"$23","javascript":"$24"},"publicView":true}]}]]}]}] 1f:["$","footer",null,{"className":"cp-footer","children":["$","div",null,{"className":"cp-container cp-footer__inner","children":[["$","div",null,{"className":"cp-footer__top","children":[["$","section",null,{"className":"cp-footer__brand","aria-labelledby":"footer-brand-title","children":[["$","$L7",null,{"className":"cp-brand cp-brand--footer","href":"/","aria-label":"Connected Print 홈","children":["$","$L8",null,{"className":"cp-brand__logo cp-brand__logo--footer","src":"/brand/logo-main.png","alt":"Connected Print","width":600,"height":120}]}],["$","h2",null,{"id":"footer-brand-title","className":"cp-sr-only","children":"Connected Print"}],["$","p",null,{"children":"인쇄 주문부터 생산까지 연결하는 웹투프린트 스토어와 APIs."}]]}],["$","nav",null,{"className":"cp-footer__nav","aria-label":"푸터 메뉴","children":[[["$","section",null,{"children":[["$","h3",null,{"children":"스토어"}],["$","ul",null,{"children":[["$","li",null,{"children":["$","a",null,{"href":"/open-store/","children":"Open Store"}]}],["$","li",null,{"children":["$","a",null,{"href":"/brand-store/","children":"Brand Store"}]}]]}]]}],["$","section",null,{"children":[["$","h3",null,{"children":"APIs"}],["$","ul",null,{"children":[["$","li",null,{"children":["$","a",null,{"href":"/editor-api/","children":"Editor API"}]}],["$","li",null,{"children":["$","a",null,{"href":"/preflight-api/","children":"Preflight API"}]}],["$","li",null,{"children":["$","a",null,{"href":"/imposition-api/","children":"Imposition API"}]}],["$","li",null,{"children":["$","a",null,{"href":"/printlink-api/","children":"PrintLink API"}]}]]}]]}]],["$","section",null,{"children":[["$","h3",null,{"children":"바로가기"}],["$","ul",null,{"children":[["$","li",null,{"children":["$","$L7",null,{"href":"/#solutions","children":"솔루션"}]}],["$","li",null,{"children":["$","a",null,{"href":"/pricing/","children":"요금"}]}],["$","li",null,{"children":["$","a",null,{"href":"/blog/","children":"블로그"}]}],["$","li",null,{"children":["$","a",null,{"href":"/web-apps/","children":"Web Apps"}]}],["$","li",null,{"children":["$","a",null,{"href":"/support","children":"고객지원"}]}]]}]]}]]}]]}],["$","div",null,{"className":"cp-footer__business","children":[["$","section",null,{"aria-labelledby":"footer-company-title","children":[["$","div",null,{"className":"cp-footer__company-heading","children":[["$","h2",null,{"id":"footer-company-title","children":"주식회사 프린트로보"}],["$","p",null,{"className":"cp-footer__operator","children":"Connected Print는 주식회사 프린트로보가 운영합니다."}]]}],["$","div",null,{"className":"cp-footer__business-grid","children":[["$","div",null,{"className":"cp-footer__business-row","children":[["$","span",null,{"children":[["$","b",null,{"children":"대표자"}]," 이현주"]}],["$","span",null,{"children":[["$","b",null,{"children":"사업자등록번호"}]," 104-86-47219"]}],["$","span",null,{"children":[["$","b",null,{"children":"통신판매업 신고번호"}]," 2014-서울중구-0797호"]}]]}],["$","address",null,{"children":[["$","span",null,{"children":[["$","b",null,{"children":"사업장 소재지"}]," 서울 중구 을지로18길 31 402호 505호"]}],["$","span",null,{"children":[["$","b",null,{"children":"개인정보 보호책임자"}]," 박미"]}],["$","a",null,{"href":"tel:0222855203","children":[["$","b",null,{"children":"전화"}]," 02-2285-5203"]}],["$","a",null,{"href":"mailto:service@printrobo.co.kr","children":[["$","b",null,{"children":"이메일"}]," service@printrobo.co.kr"]}]]}]]}]]}],["$","div",null,{"className":"cp-footer__legal","children":[["$","nav",null,{"className":"cp-footer__policies","aria-label":"정책 링크","children":[["$","a",null,{"href":"/terms/","children":"이용약관"}],["$","a",null,{"href":"/privacy/","children":"개인정보처리방침"}],["$","a",null,{"href":"/refund-policy/","children":"환불·취소·교환 정책"}],["$","a",null,{"href":"/sitemap/","children":"사이트맵"}]]}],["$","p",null,{"className":"cp-footer__copyright","children":["© ",2026," Printrobo Co., Ltd. All rights reserved."]}]]}]]}]]}]}]