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:Ta875,

COMMERCE UX / PURPOSE-BASED CURATION

인쇄 방법을 몰라도,
무엇을 만들고 싶은지만
말하면 됩니다.

고객에게 종이의 평량, 인쇄 방식, 후가공을 먼저 묻는 대신 사용 목적과 예산, 필요한 시점을 질문합니다. 시스템은 그 답변을 적절한 상품과 제작 옵션으로 연결합니다. 이것이 목적 중심 인쇄 큐레이션 UX입니다.

고객의 언어로 질문 추천 이유를 설명 디자인부터 주문까지 연결

START WITH A PURPOSE 무엇을 위해
인쇄하시나요?

명함 교환 행사 홍보 제품 포장 고객 감사

↓

RECOMMENDATION 목적에 맞는 상품 제안 품질 · 예산 · 수량 · 일정

핵심 개념

목적 기반 인쇄 주문은 고객이 기술 사양을 직접 결정하기 전에 사용 상황을 입력하고, 시스템이 적합한 상품·옵션·디자인 경로를 추천하는 주문 방식입니다. 고객의 선택권은 유지하면서 첫 결정을 쉽게 만드는 것이 핵심입니다.

01 / THE PROBLEM

왜 인쇄 주문은 여전히 어려울까?

고객은 행사장에서 나눠줄 홍보물을 만들고 싶을 뿐인데, 주문 화면에서는 용지 종류, 평량, 인쇄도수, 코팅, 접지 방식부터 선택해야 하는 경우가 있습니다. 제작자에게 익숙한 정보가 고객에게는 어려운 결정이 됩니다.

01 정보의 비대칭

고객은 필요한 결과물을 알지만 그 결과를 만드는 제작 사양은 모를 수 있습니다.

02 선택의 부담

서로 다른 옵션의 차이와 적합성을 판단하기 위해 추가 검색이나 상담이 필요합니다.

03 주문 과정의 단절

상품 선택 후 별도로 디자인을 의뢰하거나 파일 오류를 수정해야 할 수 있습니다.

복잡한 것은 제작 과정이지 고객의 목적이 아닙니다

인쇄 제작에는 전문적인 사양이 필요합니다. 문제는 그 사양을 모든 고객에게 첫 화면부터 요구하는 구조입니다. 고객이 실제로 해결하고 싶은 문제를 먼저 파악하면, 전문적인 선택은 추천 엔진과 제작 시스템으로 옮길 수 있습니다.

“

고객이 인쇄를 배우도록 만들기보다, 주문 시스템이 고객의 목적을 이해하도록 설계해야 합니다.

02 / THE PARADIGM SHIFT

제품 중심에서 목적 중심으로: 주문 UX의 전환

전통적인 인쇄 쇼핑몰은 상품 분류를 중심으로 탐색을 시작합니다. 목적 중심 UX는 사용 상황을 출발점으로 삼아 적합한 상품을 좁혀 나갑니다. 두 방식은 대체 관계만이 아니라 고객의 숙련도에 따라 함께 제공할 수 있습니다.

BEFORE 제품 중심 주문

어떤 제품을 주문하시겠습니까?

명함 / 전단 / 리플릿 용지 종류 / 평량 인쇄 / 코팅 / 후가공 파일 업로드

고객이 상품과 제작 사양을 직접 선택

AFTER 목적 중심 주문

무엇을 위해 인쇄하시나요?

명함 교환 / 행사 홍보 / 포장 예산과 원하는 품질 수량과 필요한 날짜 추천 상품 확인 및 주문

시스템이 목적을 제작 사양으로 변환

목적 기반 큐레이션 UX란?

목적 기반 큐레이션 UX는 사용자의 목적, 상황, 제약 조건을 입력으로 받아 관련 상품을 정렬하고 그 추천 이유를 설명하는 사용자 경험입니다. 단순히 인기 상품을 나열하는 것과 다르게, 선택에 필요한 맥락을 반영합니다.

제품 중심 주문과 목적 중심 주문의 비교
비교 기준	제품 중심 주문	목적 중심 주문
출발점	제품 카테고리	사용 목적과 상황
주요 질문	어떤 사양을 원하나요?	어디에 사용할 예정인가요?
선택 방식	고객이 옵션 직접 조합	추천안을 확인하고 조정
정보 구성	제작 사양 중심	사용 경험과 기대 결과 중심
적합한 고객	사양을 알고 있는 고객	목적은 있지만 사양은 모르는 고객

실무에서는 두 경로를 병행하는 것이 유용합니다. 기존 고객에게는 사양 직접 선택을 제공하고, 처음 주문하는 고객에게는 목적 중심 추천을 제공할 수 있습니다.

03 / HUMAN LANGUAGE

인쇄 용어 대신 고객이 이해하는 언어 사용하기

좋은 주문 질문은 기술적으로 정확하면서도 이해하기 쉬워야 합니다. 제작 용어를 완전히 없애기보다는 고객이 이해할 수 있는 표현으로 먼저 안내하고, 필요할 때 상세 사양을 확인할 수 있게 구성합니다.

LANGUAGE TRANSLATION 기술 사양을 구매 경험의 언어로 바꾸기

인쇄 전문 용어와 고객 친화적 표현의 예시
제작자 관점	고객에게 먼저 보여줄 표현
350gsm 용지	두께감과 탄탄함을 중요하게 생각하시나요?
무광 코팅	반짝임을 줄이고 차분한 느낌을 원하시나요?
Spot UV	로고나 특정 부분만 반짝이게 강조할까요?
양면 컬러 인쇄	앞면과 뒷면 모두에 내용을 넣으시겠습니까?
도련 / 재단 여유	가장자리까지 디자인이 자연스럽게 이어지도록 확인합니다.

사용 목적별로 시작하는 상품 탐색

새로운 고객을 만나요

첫인상, 정보 전달, 휴대성을 고려한 명함을 추천합니다.

명함 · 네트워킹

행사를 홍보하고 싶어요

배포 환경, 읽는 거리, 정보량에 맞춰 홍보물을 제안합니다.

전단 · 리플릿 · 카드

상품을 포장하고 싶어요

부착 표면, 보관 환경, 브랜드 표현을 함께 고려합니다.

스티커 · 라벨

감사의 마음을 전하고 싶어요

메시지 분량과 전달 상황에 맞는 카드를 제안합니다.

감사 카드 · 엽서

용지 특성, 코팅 효과, 실제 내구성은 재질과 생산 조건에 따라 달라질 수 있습니다. 고객 친화적 표현은 정확한 제품 설명을 대체하지 않으며, 상세 사양에서 검증할 수 있어야 합니다.

04 / INTERACTIVE DEMO

목적 기반 큐레이션의 핵심 질문 설계

모든 옵션을 한꺼번에 보여줄 필요는 없습니다. 목적, 우선순위, 수량, 디자인 준비 상태처럼 추천에 필요한 질문부터 제시합니다. 아래 예시에서 조건을 선택하면 추천 상품과 이유가 변경됩니다.

LIVE UX SIMULATION 목적 중심 주문 경험하기

아래 버튼을 선택해 추천 결과가 어떻게 달라지는지 확인하세요.

DEMO / 가상 추천

01 무엇을 위해 인쇄하시나요?

02 가장 중요한 기준은 무엇인가요?

03 어느 정도 수량이 필요하신가요?

04 디자인 파일은 준비되었나요?

CURATED RESULT 추천 결과

명함 교환과 첫인사

브랜드 명함 패키지

기본적인 정보 전달과 브랜드 표현을 균형 있게 고려한 구성입니다.

WHY THIS RECOMMENDATION?

균형 우선 조건에 따라 실용성과 브랜드 인상을 함께 고려했습니다.

선택 조건 균형 우선 · 일반 수량

다음 단계

디자인 생성 또는 편집 단계로 연결할 수 있습니다.

필요한 질문만 단계적으로 보여주기

고객이 처음부터 수십 개의 옵션을 이해할 필요는 없습니다. 기본 정보로 추천안을 만든 뒤 실제 제작에 영향을 주는 추가 조건만 질문합니다. 예를 들어 포장용 스티커를 선택했다면 부착 표면과 물·마찰 노출 여부를 추가로 확인하는 방식입니다.

질문은 짧게추천에 영향을 주는 정보부터

선택 결과는 즉시응답에 따라 추천 근거 갱신

상세 사양은 나중에필요한 경우 전문가 옵션 제공

05 / RECOMMENDATION ENGINE

추천 엔진은 적합한 인쇄 상품을 어떻게 선택할까?

목적 기반 추천은 반드시 생성형 AI로 시작할 필요가 없습니다. 초기에는 검증 가능한 규칙 기반 엔진으로 목적과 상품의 대응 관계를 정의하는 편이 관리하기 쉬울 수 있습니다.

INPUT 고객의 목적 상황 · 예산 · 수량 · 디자인

LOGIC 추천 규칙 엔진 적합성 · 제약 조건 · 우선순위

OUTPUT 추천 상품 추천 사유 · 가격 확인 · 다음 단계

목적과 제품 사양을 연결하는 규칙

추천 엔진은 먼저 제작 가능한 상품만 남기고, 사용 목적과 우선순위에 따라 상품을 정렬해야 합니다. 가격이 저렴하더라도 고객의 실제 용도에 적합하지 않다면 높은 순위를 부여하지 않는 것이 중요합니다.

EXAMPLE / RULE DESIGN 가상의 추천 규칙 예시

IF 사용 목적 = 행사 홍보

AND 배포 대상 = 불특정 다수

AND 우선순위 = 경제성

THEN 배포 효율이 높은 홍보물 우선 추천

추천 엔진에서 검토할 주요 판단 기준
판단 기준	확인할 정보	추천에 반영하는 방법
목적 적합성	사용 장소, 용도, 전달 대상	목적에 맞는 상품 우선
예산	총예산, 수량, 배송비	예산 범위 내 대안 비교
제작 일정	필요 날짜, 제작·배송 기간	기한 충족 가능성 확인
디자인 상태	파일 유무, 편집 필요 여부	디자인 도구와 연결
생산 제약	지원 규격, 최소 수량, 후가공	제작 불가 조합 필터링

선택지를 줄이면서 고객의 결정권은 유지하기

상품을 하나만 추천하면 고객은 다른 선택지가 궁금할 수 있습니다. 반대로 지나치게 많은 상품을 제시하면 판단 부담이 커집니다. 실용적인 설계안 중 하나는 경제형, 균형형, 프리미엄형처럼 서로 다른 선택 기준을 명확히 구분하는 것입니다.

ECONOMY

경제형

꼭 필요한 기능을 우선하고 비용 부담을 줄이는 방향입니다.

기본적인 용도 충족
불필요한 옵션 최소화
비용 효율 우선

BALANCED

균형형

가격과 실용성, 브랜드 표현 사이의 균형을 고려합니다.

일상적인 사용에 적합
품질과 예산 함께 고려
불필요한 고급 옵션 제한

PREMIUM

프리미엄형

촉감과 시각적 인상 등 브랜드 경험을 더 중시합니다.

차별화된 표현 검토
소재와 마감에 비중
예산·납기 영향 재확인

선택 기준 설명

균형형은 실용성과 브랜드 표현을 함께 고려하는 기본 비교 기준입니다.

AI 디자인과 결합한 인쇄 주문 자동화

목적 기반 추천은 상품 선택 단계에서 끝날 필요가 없습니다. 디자인 파일이 없는 고객에게는 AI 디자인 보조 도구나 템플릿 편집기를 연결하고, 기존 파일이 있는 고객에게는 업로드 및 파일 검증 경로를 제공할 수 있습니다.

01 목적 입력

어떤 상황에서 사용할지 질문합니다.

02 상품 추천

제작 가능한 옵션을 비교합니다.

03 디자인 제작

AI 보조 또는 템플릿 편집을 제공합니다.

04 파일 검증

크기, 여백, 해상도 등 필요한 항목을 확인합니다.

05 주문 및 제작

최종 사양과 가격을 확정합니다.

전문 디자인 프로그램 없이 주문하는 경로

고객은 사용 목적과 브랜드 정보, 원하는 스타일을 입력하여 초안이나 템플릿을 만들 수 있습니다. 이후 웹 편집기에서 텍스트와 이미지의 위치를 수정하고 제작용 파일로 변환하는 구조를 설계할 수 있습니다.

이 방식은 전문 디자이너를 완전히 대체한다는 의미가 아닙니다. 단순한 상품의 제작 진입 장벽을 낮추고, 복잡한 디자인은 전문가 작업으로 연결하는 이중 경로를 제공하는 것이 현실적입니다.

자동 파일 검증이 필요한 이유

화면에서 디자인이 정상적으로 보여도 실제 제작에 필요한 여백, 재단 위치, 해상도, 색상 등의 조건을 충족하지 않을 수 있습니다. 따라서 디자인 완료 이후에는 별도의 파일 검증과 최종 미리보기 확인 단계가 필요합니다.

자동화 설계 시 주의할 점

AI가 생성한 디자인이나 웹 편집기에서 출력한 PDF가 자동으로 인쇄 적합성을 보장하는 것은 아닙니다. 지원되지 않는 효과, 글꼴, 이미지 품질, 재단 위험 및 주문 사양 불일치는 검증 규칙과 예외 처리의 대상입니다.

08 / INTERACTIVE CUSTOMER JOURNEY

인터랙티브 UX로 구매 완료 가능성을 높이는 방법

인터랙티브 주문 경험에서 중요한 것은 화려한 애니메이션보다 고객의 현재 선택이 다음 단계에 어떤 영향을 주는지 명확하게 보여주는 것입니다. 아래 단계 버튼을 선택해 각 화면이 제공해야 하는 피드백을 확인해 보세요.

STEP 01 / UNDERSTAND

고객의 목적을 파악합니다

무엇을 제작하려는지, 누구에게 전달하는지 등 쉽게 답할 수 있는 질문부터 시작합니다.

권장 화면 피드백 선택한 목적을 간단히 요약하고 다음 질문을 제시합니다.

선택 결과와 가격은 가능한 한 즉시 보여주기

고객이 수량이나 상품 등급을 변경했을 때 추천 결과와 예상 가격이 갱신되면 선택에 따른 차이를 이해하기 쉬워집니다. 단, 가격 계산 엔진이 연결되지 않은 상태에서는 임의의 가격을 실시간 견적으로 표시해서는 안 됩니다.

성과를 판단하기 위한 측정 지표

목적 기반 UX가 기존 주문보다 우수한지는 실제 사용자 데이터로 확인해야 합니다. 측정 대상으로는 주문 시작률, 추천안 선택률, 디자인 단계 완료율, 파일 오류 발생률, 결제 완료율, 고객 문의 건수 등이 있습니다.

01주문 완료율주문을 시작한 사용자 중 결제 완료 비율

02파일 오류율검증 단계에서 문제가 발견된 주문 비율

03상담 필요율주문 과정에서 별도 상담이 필요했던 비율

04주문 소요 시간주문 시작부터 최종 확정까지 걸린 시간

위 지표는 권장 측정 항목이며, 특정 성과 향상을 보장하는 통계나 실측 결과가 아닙니다. 실제 도입 효과는 동일한 기준의 데이터와 사용자 실험을 통해 검증해야 합니다.

09 / SYSTEM ARCHITECTURE

인쇄 서비스 제공자를 위한 시스템 설계

목적 기반 주문 시스템은 새로운 화면만 만든다고 완성되지 않습니다. 고객이 입력한 목적이 상품 데이터, 제작 가능 규칙, 견적 엔진, 디자인 편집, 파일 검증, 주문 관리로 일관되게 전달되어야 합니다.

목적과 상품을 연결하는 데이터 구조

추천 데이터와 실제 상품 데이터를 분리하면 고객에게 노출하는 질문을 변경해도 기존 상품의 제작 사양을 불필요하게 수정하지 않아도 됩니다.

목적 기반 주문 시스템의 개념적 데이터 구성
데이터 영역	주요 필드 예시	역할
Purpose	목적 ID, 명칭, 설명	고객의 사용 목적 관리
Question	질문 ID, 입력 유형, 표시 조건	목적에 맞는 질문 제공
Recommendation Rule	적용 조건, 상품 ID, 우선순위	목적과 상품 매칭
Product	상품 ID, 규격, 용지, 옵션	실제 제작 사양 정의
Pricing	수량, 사양, 가격 규칙	실제 견적 산출
Order Session	선택 목적, 응답, 추천, 확정 사양	고객의 선택 과정과 최종 주문 연결

기존 Web-to-Print 시스템 및 API와 연동

기존 쇼핑몰을 모두 교체할 필요는 없습니다. 목적 기반 질문과 추천 로직을 주문 화면 앞단에 추가하고, 최종 선택된 사양을 기존 가격 계산 및 주문 시스템으로 전달하는 방식도 가능합니다.

01 / CURATION 질문 및 상품 추천

고객의 목적을 제작 가능한 상품 ID와 옵션으로 매핑합니다.

02 / PRICING 서버 기반 가격 계산

실제 상품 사양으로 견적을 산출하고 가격 변경을 검증합니다.

03 / DESIGN 웹 디자인 및 편집

필요한 고객을 템플릿 또는 편집 도구로 연결합니다.

04 / PRODUCTION 파일 검증 및 주문 처리

최종 인쇄 파일을 점검하고 주문 사양을 확정합니다.

연관 기술 및 서비스 살펴보기

Editor API 웹 디자인 편집 기술 알아보기 ↗ Preflight API 인쇄 파일 자동 검증 알아보기 ↗ PrintLink API 인쇄 주문 연결 구조 알아보기 ↗

위 구조는 설계 예시입니다. 실제 서비스 연결을 위해서는 각 API의 지원 기능과 인증, 가격 검증, 파일 전달, 오류 처리 조건을 별도로 확인해야 합니다.

10 / IMPLEMENTATION ROADMAP

목적 기반 인쇄 주문의 미래와 도입 전략

목적 중심 주문 시스템을 처음부터 모든 제품에 적용할 필요는 없습니다. 고객이 자주 주문하고 제작 조건을 표준화하기 쉬운 상품군을 대상으로 작은 실험을 시작한 뒤 추천 품질과 운영 효율을 검증하는 방식이 현실적입니다.

PHASE 01

작은 범위의 큐레이션 MVP

명함, 스티커 등 일부 상품을 대상으로 목적별 질문과 정해진 추천 규칙을 구현합니다. 실제 상품 가격과 주문 경로를 연결합니다.

확인 항목: 추천 적합성 · 질문 이탈률

PHASE 02

디자인 및 제작 파일 자동화

템플릿 편집, AI 디자인 보조, 파일 검증 기능을 연계해 주문 중간의 수작업과 반복적인 문의를 줄입니다.

확인 항목: 디자인 완료율 · 파일 오류율

PHASE 03

추천 최적화 및 상품 확대

실제 주문과 수정, 반품, 상담 데이터를 검토하여 추천 규칙을 개선하고 더 다양한 상품으로 확대합니다.

확인 항목: 주문 완료율 · 상담 필요율 · 수익성

자주 묻는 질문 (FAQ)

Q. 목적 기반 주문은 기존 상품 카테고리를 없애야 하나요?

아닙니다. 일반적인 상품 탐색과 목적 중심 추천을 함께 제공할 수 있습니다. 직접 사양을 선택하려는 고객의 주문 경로를 유지하는 것이 중요합니다.

Q. 추천 엔진에 반드시 생성형 AI가 필요한가요?

필요하지 않습니다. 목적별 질문과 제작 가능한 상품을 연결하는 규칙 기반 엔진으로 시작할 수 있습니다. AI는 자연어 이해나 디자인 생성 등 필요한 부분에 선택적으로 적용할 수 있습니다.

Q. 추천된 인쇄 상품을 고객이 수정할 수 있나요?

수정할 수 있도록 설계하는 것이 좋습니다. 수량, 예산, 디자인과 상세 사양을 변경할 때마다 추천 적합성과 가격, 제작 가능 여부를 다시 확인해야 합니다.

Q. 목적 기반 주문이 구매 전환율을 높인다고 보장할 수 있나요?

보장할 수 없습니다. 복잡한 선택을 줄이는 접근은 검토할 가치가 있지만, 실제 효과는 고객 구성과 상품, 가격, UX 완성도에 따라 달라집니다. 기존 주문 방식과 비교 실험을 통해 판단해야 합니다.

23:T797d, /* ========================================== CONNECTED PRINT KR PURPOSE-BASED CURATION UX Scoped CSS v1.0 ========================================== */ /* 01. BASE */ #cp-article { --cp-ink: #17243b; --cp-muted: #607087; --cp-red: #cf1737; --cp-border: #e3e8ef; --cp-soft: #f5f7fa; --cp-navy: #10203a; --cp-radius: 16px; width: 100%; max-width: 1156px; margin: 0 auto; padding: 0 20px; color: var(--cp-ink); 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: -0.018em; word-break: keep-all; } #cp-article, #cp-article * { box-sizing: border-box; } #cp-article p { margin: 0 0 17px; font-size: 16px; line-height: 1.95; } #cp-article h2 { margin: 0 0 23px; color: var(--cp-ink); font-size: clamp(25px, 3.2vw, 31px); line-height: 1.4; letter-spacing: -0.045em; font-weight: 800; word-break: keep-all; } #cp-article h3 { margin: 37px 0 14px; color: var(--cp-ink); font-size: 19px; line-height: 1.55; letter-spacing: -0.035em; font-weight: 700; } #cp-article strong { font-weight: 750; } #cp-article a { color: inherit; text-decoration: none; } #cp-article button { font: inherit; cursor: pointer; touch-action: manipulation; } #cp-article button:focus-visible, #cp-article a:focus-visible { outline: 3px solid #517bd9; outline-offset: 3px; } #cp-article button:disabled { cursor: not-allowed; opacity: .55; } #cp-article img { max-width: 100%; height: auto; } /* 02. HERO */ #cp-article .cp-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr); gap: 40px; align-items: center; padding: clamp(35px, 6vw, 70px); border-radius: 22px; background: linear-gradient(140deg, #10203b, #162b4b 70%, #263c5d); color: white; } #cp-article .cp-hero-content { min-width: 0; } #cp-article .cp-eyebrow { margin-bottom: 20px; font-size: 11px; line-height: 1.5; font-weight: 800; letter-spacing: .13em; } #cp-article .cp-eyebrow-light { color: #f1a3b1; } #cp-article .cp-hero-title { margin: 0 0 24px; color: white; font-size: clamp(29px, 4.6vw, 44px); line-height: 1.38; font-weight: 850; letter-spacing: -.055em; } #cp-article .cp-hero-title span { color: #ff879b; } #cp-article .cp-hero-lead { max-width: 590px; margin-bottom: 26px; color: #d5dfed; font-size: 17px; line-height: 1.95; } #cp-article .cp-hero-points { display: flex; flex-wrap: wrap; gap: 8px; } #cp-article .cp-hero-points span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #e5edf7; font-size: 12px; line-height: 1.5; } /* HERO VISUAL */ #cp-article .cp-hero-visual { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #cp-article .cp-visual-question { width: 100%; padding: 23px; border: 1px solid rgba(255,255,255,.17); border-radius: 15px; background: rgba(255,255,255,.095); } #cp-article .cp-visual-label { display: block; margin-bottom: 14px; color: #9fb3d1; font-size: 10px; letter-spacing: .1em; } #cp-article .cp-visual-question strong { display: block; color: white; font-size: 23px; line-height: 1.5; letter-spacing: -.04em; } #cp-article .cp-visual-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; } #cp-article .cp-visual-options span { padding: 10px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; color: #e2e9f4; font-size: 12px; line-height: 1.4; text-align: center; } #cp-article .cp-visual-options span:first-child { border-color: #fa9aac; background: rgba(207,23,55,.32); color: white; } #cp-article .cp-visual-arrow { padding: 12px 0; color: #f1a3b1; font-size: 26px; line-height: 1; } #cp-article .cp-visual-result { width: 100%; padding: 18px 20px; border: 1px solid #e5ecf5; border-radius: 12px; background: white; color: var(--cp-ink); } #cp-article .cp-visual-result > span { display: block; margin-bottom: 6px; color: var(--cp-red); font-size: 10px; font-weight: 800; letter-spacing: .1em; } #cp-article .cp-visual-result strong { display: block; font-size: 16px; line-height: 1.5; } #cp-article .cp-visual-result small { display: block; margin-top: 5px; color: var(--cp-muted); font-size: 12px; } /* INTRO */ #cp-article .cp-intro-strip { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 28px 5px; border-bottom: 1px solid var(--cp-border); } #cp-article .cp-strip-label { padding-top: 5px; color: var(--cp-red); font-size: 13px; font-weight: 800; } #cp-article .cp-intro-strip p { margin: 0; color: #39485e; font-size: 17px; line-height: 1.9; } /* 03. SECTION */ #cp-article .cp-section { padding: 67px 0; border-bottom: 1px solid var(--cp-border); } #cp-article .cp-section-index { margin: 0 0 13px; color: var(--cp-red); font-size: 12px; line-height: 1.5; font-weight: 850; letter-spacing: .1em; } #cp-article .cp-section > p:not(.cp-section-index) { max-width: 900px; } #cp-article .cp-small-note { margin-top: 20px; color: var(--cp-muted); font-size: 13px; line-height: 1.85; } /* 04. INSIGHT */ #cp-article .cp-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 27px; } #cp-article .cp-insight-card { min-width: 0; padding: 24px; border: 1px solid var(--cp-border); border-radius: 12px; background: #fff; } #cp-article .cp-insight-number { display: block; margin-bottom: 17px; color: #c3cbd6; font-size: 26px; line-height: 1; font-weight: 850; } #cp-article .cp-insight-card strong { display: block; margin-bottom: 8px; font-size: 17px; } #cp-article .cp-insight-card p { margin: 0; color: var(--cp-muted); font-size: 14px; line-height: 1.85; } #cp-article .cp-statement { display: flex; gap: 15px; align-items: flex-start; margin-top: 29px; padding: 25px 27px; border-left: 3px solid var(--cp-red); background: #f7f8fb; } #cp-article .cp-statement-mark { color: var(--cp-red); font-size: 42px; line-height: 1; font-weight: 800; } #cp-article .cp-statement p { margin: 0; font-size: 18px; line-height: 1.8; font-weight: 700; } /* 05. BEFORE / AFTER */ #cp-article .cp-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 30px 0; } #cp-article .cp-compare-card { min-width: 0; padding: 27px; border: 1px solid var(--cp-border); border-radius: 14px; } #cp-article .cp-compare-old { background: #f7f8fa; } #cp-article .cp-compare-new { border-color: #cad7ea; background: #f1f5fc; } #cp-article .cp-compare-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } #cp-article .cp-compare-head span { color: var(--cp-muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; } #cp-article .cp-compare-head strong { font-size: 15px; } #cp-article .cp-compare-question { min-height: 68px; margin: 23px 0; font-size: 22px; line-height: 1.5; font-weight: 800; letter-spacing: -.04em; } #cp-article .cp-compare-list { display: grid; gap: 8px; } #cp-article .cp-compare-list span { display: block; padding: 12px 14px; border: 1px solid #e1e6ed; border-radius: 7px; background: white; color: #3e4b60; font-size: 14px; line-height: 1.55; } #cp-article .cp-compare-new .cp-compare-list span { border-color: #d8e3f4; } #cp-article .cp-compare-caption { margin: 19px 0 0; color: var(--cp-muted); font-size: 13px; } /* 06. TABLE */ #cp-article .cp-table-wrap { max-width: 100%; margin: 25px 0; overflow-x: auto; border: 1px solid var(--cp-border); border-radius: 10px; } #cp-article table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.7; } #cp-article table caption { padding: 14px 17px; border-bottom: 1px solid var(--cp-border); color: var(--cp-muted); font-size: 12px; text-align: left; caption-side: top; background: #fafbfd; } #cp-article th, #cp-article td { padding: 14px 17px; border-bottom: 1px solid var(--cp-border); text-align: left; vertical-align: top; } #cp-article thead th { background: #f0f3f8; color: var(--cp-ink); font-weight: 800; } #cp-article tbody th { color: var(--cp-ink); font-weight: 750; } #cp-article tbody td { color: #4c5b70; } #cp-article tbody tr:last-child th, #cp-article tbody tr:last-child td { border-bottom: 0; } /* 07. CUSTOMER LANGUAGE */ #cp-article .cp-language-panel { margin: 27px 0 35px; padding: 25px; border: 1px solid var(--cp-border); border-radius: 14px; background: #fafbfc; } #cp-article .cp-language-heading span { display: block; color: var(--cp-red); font-size: 11px; font-weight: 800; letter-spacing: .1em; } #cp-article .cp-language-heading strong { display: block; margin-top: 6px; font-size: 19px; line-height: 1.55; } #cp-article .cp-language-panel .cp-table-wrap { margin-bottom: 0; background: white; } #cp-article .cp-purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 23px; } #cp-article .cp-purpose-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 25px; border: 1px solid var(--cp-border); border-radius: 12px; } #cp-article .cp-purpose-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 17px; border-radius: 11px; background: #eef2f8; color: #405b7d; font-size: 15px; font-weight: 850; } #cp-article .cp-purpose-card strong { font-size: 18px; line-height: 1.5; } #cp-article .cp-purpose-card p { margin: 10px 0 14px; color: var(--cp-muted); font-size: 14px; line-height: 1.8; } #cp-article .cp-purpose-type { margin-top: auto; color: var(--cp-red); font-size: 12px; font-weight: 700; } /* 08. INTERACTIVE DEMO */ #cp-article .cp-demo { margin: 30px 0 40px; border: 1px solid #dce3ed; border-radius: 18px; background: #f7f9fc; } #cp-article .cp-demo-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; padding: 27px 30px; border-bottom: 1px solid var(--cp-border); } #cp-article .cp-demo-kicker { display: block; margin-bottom: 6px; color: var(--cp-red); font-size: 11px; font-weight: 800; letter-spacing: .12em; } #cp-article .cp-demo-header strong { display: block; font-size: 23px; line-height: 1.5; letter-spacing: -.04em; } #cp-article .cp-demo-header p { margin: 5px 0 0; color: var(--cp-muted); font-size: 14px; } #cp-article .cp-demo-status { padding: 7px 10px; border: 1px solid #d9dfe8; border-radius: 5px; color: #52637b; background: white; font-size: 11px; font-weight: 800; } #cp-article .cp-demo-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 22px; align-items: start; padding: 27px; } #cp-article .cp-demo-form { min-width: 0; } #cp-article .cp-quiz-group { margin-bottom: 29px; } #cp-article .cp-question-label { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 15px; line-height: 1.6; font-weight: 800; } #cp-article .cp-question-label span { flex-shrink: 0; color: var(--cp-red); font-size: 12px; font-weight: 850; } #cp-article .cp-choice-row { display: flex; flex-wrap: wrap; gap: 8px; } #cp-article .cp-choice { min-height: 42px; padding: 10px 13px; border: 1px solid #d9e0e9; border-radius: 7px; background: white; color: #435168; font-size: 13px; line-height: 1.5; font-weight: 650; transition: border-color .15s, background .15s, color .15s; } #cp-article .cp-choice:hover { border-color: #8ba0bc; } #cp-article .cp-choice.is-selected { border-color: var(--cp-red); background: #fff0f3; color: #a60f2c; font-weight: 800; } #cp-article .cp-demo-reset { padding: 0; border: 0; background: transparent; color: #536883; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } /* RECOMMENDATION OUTPUT */ #cp-article .cp-demo-result { min-width: 0; padding: 26px; border: 1px solid #d8e1ec; border-radius: 13px; background: white; } #cp-article .cp-result-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } #cp-article .cp-result-top > span:first-child { color: var(--cp-red); font-size: 10px; font-weight: 850; letter-spacing: .1em; } #cp-article .cp-result-state { color: #69798e; font-size: 11px; } #cp-article .cp-result-symbol { display: flex; justify-content: center; align-items: center; height: 146px; margin: 22px 0 24px; border-radius: 9px; background: linear-gradient(135deg, #edf1f7, #dfe7f1); } #cp-article .cp-result-symbol-inner { display: flex; align-items: center; justify-content: center; width: 108px; height: 65px; border-radius: 6px; background: #142842; box-shadow: 7px 9px 0 rgba(20,40,66,.12); color: white; font-size: 25px; font-weight: 850; letter-spacing: .05em; } #cp-article .cp-result-category { margin: 0 0 5px; color: var(--cp-red); font-size: 12px; font-weight: 800; } #cp-article .cp-result-title { margin: 0 0 9px; color: var(--cp-ink); font-size: 24px; line-height: 1.5; letter-spacing: -.045em; font-weight: 850; } #cp-article .cp-result-description { margin: 0; color: #57667c; font-size: 14px; line-height: 1.85; } #cp-article .cp-result-divider { height: 1px; margin: 21px 0; background: var(--cp-border); } #cp-article .cp-result-label { color: var(--cp-muted); font-size: 11px; font-weight: 850; letter-spacing: .06em; } #cp-article .cp-result-reason { margin: 8px 0 18px; color: #35445a; font-size: 14px; line-height: 1.85; } #cp-article .cp-result-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--cp-border); border-bottom: 1px solid var(--cp-border); } #cp-article .cp-result-info span { color: var(--cp-muted); font-size: 12px; } #cp-article .cp-result-info strong { font-size: 12px; text-align: right; } #cp-article .cp-result-next { margin-top: 19px; padding: 16px; border-radius: 8px; background: #edf3fa; } #cp-article .cp-result-next span { display: block; margin-bottom: 4px; color: #3b5b82; font-size: 11px; font-weight: 850; } #cp-article .cp-result-next p { margin: 0; color: #314d6f; font-size: 13px; line-height: 1.8; } #cp-article .cp-demo-footer { display: flex; align-items: flex-start; gap: 10px; padding: 17px 27px; border-top: 1px solid var(--cp-border); } #cp-article .cp-demo-dot { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: #7d8fa6; } #cp-article .cp-demo-footer p { margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.8; } /* 09. DESIGN PRINCIPLES */ #cp-article .cp-principle-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 25px; } #cp-article .cp-principle-row div { min-width: 0; padding: 18px 0; border-top: 2px solid #c8d1df; } #cp-article .cp-principle-row strong, #cp-article .cp-principle-row span { display: block; } #cp-article .cp-principle-row strong { margin-bottom: 7px; font-size: 15px; } #cp-article .cp-principle-row span { color: var(--cp-muted); font-size: 13px; line-height: 1.7; } /* 10. RECOMMENDATION ENGINE */ #cp-article .cp-engine-flow { display: flex; align-items: center; gap: 10px; margin: 27px 0 35px; } #cp-article .cp-engine-node { flex: 1; min-width: 0; padding: 22px 14px; border: 1px solid var(--cp-border); border-radius: 10px; background: #f7f9fc; text-align: center; } #cp-article .cp-engine-node-active { border-color: #b9cde4; background: #eaf1fa; } #cp-article .cp-engine-node span, #cp-article .cp-engine-node strong, #cp-article .cp-engine-node small { display: block; } #cp-article .cp-engine-node span { margin-bottom: 8px; color: var(--cp-red); font-size: 10px; font-weight: 850; letter-spacing: .09em; } #cp-article .cp-engine-node strong { font-size: 16px; line-height: 1.5; } #cp-article .cp-engine-node small { margin-top: 8px; color: var(--cp-muted); font-size: 11px; line-height: 1.6; } #cp-article .cp-engine-connector { flex-shrink: 0; color: #8ea0b8; font-size: 22px; } #cp-article .cp-rule-example { margin: 24px 0 34px; padding: 23px; border: 1px solid #283d5a; border-radius: 12px; background: #14233c; } #cp-article .cp-rule-heading { margin-bottom: 19px; } #cp-article .cp-rule-heading span, #cp-article .cp-rule-heading strong { display: block; } #cp-article .cp-rule-heading span { color: #f2a4b2; font-size: 10px; letter-spacing: .1em; } #cp-article .cp-rule-heading strong { margin-top: 4px; color: white; font-size: 17px; } #cp-article .cp-rule-line { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.11); color: #dce5f0; font-family: Consolas, "Cascadia Code", monospace; font-size: 12px; line-height: 1.8; } #cp-article .cp-rule-line span { display: inline-block; min-width: 52px; color: #ff8da2; font-weight: 800; } #cp-article .cp-rule-final { border-bottom: 0; color: white; font-weight: 700; } /* 11. CURATED TIERS */ #cp-article .cp-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 28px 0 16px; } #cp-article .cp-tier-card { display: flex; flex-direction: column; min-width: 0; padding: 25px 22px; border: 1px solid var(--cp-border); border-radius: 13px; background: white; } #cp-article .cp-tier-featured { border: 2px solid var(--cp-ink); background: #f6f8fb; } #cp-article .cp-tier-kicker { color: var(--cp-red); font-size: 11px; font-weight: 850; letter-spacing: .11em; } #cp-article .cp-tier-name { margin: 13px 0 8px; font-size: 23px; font-weight: 850; line-height: 1.45; } #cp-article .cp-tier-desc { min-height: 76px; margin: 0; color: var(--cp-muted); font-size: 14px; line-height: 1.8; } #cp-article .cp-tier-card ul { margin: 20px 0 25px; padding-left: 19px; color: #44536a; font-size: 13px; line-height: 2; } #cp-article .cp-tier-card li { padding-left: 2px; } #cp-article .cp-tier-button { width: 100%; min-height: 44px; margin-top: auto; padding: 10px; border: 1px solid #ccd5e1; border-radius: 7px; background: white; color: #34465f; font-size: 13px; font-weight: 800; } #cp-article .cp-tier-button:hover { border-color: #7d91ac; } #cp-article .cp-tier-button.is-selected { border-color: var(--cp-ink); background: var(--cp-ink); color: white; } #cp-article .cp-tier-feedback { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 15px; align-items: start; padding: 19px 22px; border: 1px solid var(--cp-border); border-radius: 9px; background: #f7f9fb; } #cp-article .cp-tier-feedback > span { color: var(--cp-muted); font-size: 12px; font-weight: 750; } #cp-article .cp-tier-feedback p { margin: 0; color: #3c4c61; font-size: 14px; line-height: 1.8; } /* 12. AI WORKFLOW */ #cp-article .cp-workflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 28px 0 38px; } #cp-article .cp-workflow-item { min-width: 0; padding: 20px 15px; border: 1px solid var(--cp-border); border-radius: 10px; background: #f9fafc; } #cp-article .cp-workflow-num { display: block; margin-bottom: 15px; color: var(--cp-red); font-size: 12px; font-weight: 850; } #cp-article .cp-workflow-item strong { display: block; margin-bottom: 9px; font-size: 15px; line-height: 1.5; } #cp-article .cp-workflow-item p { margin: 0; color: var(--cp-muted); font-size: 12px; line-height: 1.8; } #cp-article .cp-notice { margin-top: 27px; padding: 22px 24px; border: 1px solid #d9e0e8; border-left: 3px solid #8393a8; border-radius: 8px; background: #f8f9fb; } #cp-article .cp-notice strong { display: block; margin-bottom: 8px; font-size: 15px; } #cp-article .cp-notice p { margin: 0; color: #56657a; font-size: 14px; line-height: 1.85; } /* 13. JOURNEY INTERACTION */ #cp-article .cp-journey { margin: 27px 0 37px; border: 1px solid var(--cp-border); border-radius: 15px; background: #fff; } #cp-article .cp-journey-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--cp-border); } #cp-article .cp-journey-step { min-width: 0; min-height: 77px; padding: 15px 8px; border: 0; border-right: 1px solid var(--cp-border); background: #f7f9fc; color: #596a80; font-size: 12px; line-height: 1.5; font-weight: 750; text-align: center; } #cp-article .cp-journey-step:last-child { border-right: 0; } #cp-article .cp-journey-step span { display: block; margin-bottom: 5px; color: #8494a9; font-size: 11px; font-weight: 850; } #cp-article .cp-journey-step.is-selected { background: var(--cp-navy); color: white; } #cp-article .cp-journey-step.is-selected span { color: #ff9aab; } #cp-article .cp-journey-progress { width: 100%; height: 5px; background: #edf1f6; } #cp-article .cp-journey-progress-fill { display: block; width: 20%; height: 100%; background: var(--cp-red); transition: width .25s ease; } #cp-article .cp-journey-content { padding: 37px; } #cp-article .cp-journey-kicker { color: var(--cp-red); font-size: 11px; font-weight: 850; letter-spacing: .1em; } #cp-article .cp-journey-title { margin: 12px 0 13px; font-size: 23px; line-height: 1.5; font-weight: 850; } #cp-article .cp-journey-description { max-width: 690px; margin-bottom: 27px; color: #4a5b71; font-size: 15px; line-height: 1.9; } #cp-article .cp-journey-output { padding: 19px; border-radius: 9px; background: #f1f5fa; } #cp-article .cp-journey-output span { display: block; margin-bottom: 6px; color: #5c718e; font-size: 11px; font-weight: 850; } #cp-article .cp-journey-output strong { display: block; color: #2d486a; font-size: 14px; line-height: 1.8; } /* 14. METRICS */ #cp-article .cp-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 25px; } #cp-article .cp-metric-grid div { min-width: 0; padding: 20px 17px; border: 1px solid var(--cp-border); border-radius: 10px; } #cp-article .cp-metric-grid span { display: block; margin-bottom: 12px; color: var(--cp-red); font-size: 12px; font-weight: 850; } #cp-article .cp-metric-grid strong { display: block; margin-bottom: 8px; font-size: 15px; line-height: 1.5; } #cp-article .cp-metric-grid small { display: block; color: var(--cp-muted); font-size: 12px; line-height: 1.8; } /* 15. SYSTEM INTEGRATION */ #cp-article .cp-integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 25px 0; } #cp-article .cp-integration-grid div { min-width: 0; padding: 23px; border: 1px solid var(--cp-border); border-radius: 11px; } #cp-article .cp-integration-grid span { display: block; margin-bottom: 10px; color: var(--cp-red); font-size: 11px; font-weight: 850; letter-spacing: .07em; } #cp-article .cp-integration-grid strong { display: block; font-size: 17px; } #cp-article .cp-integration-grid p { margin: 8px 0 0; color: var(--cp-muted); font-size: 13px; line-height: 1.85; } #cp-article .cp-resource-links { margin-top: 25px; padding: 24px; border-radius: 12px; background: #f3f6fa; } #cp-article .cp-resource-heading { margin-bottom: 15px; font-size: 15px; font-weight: 800; } #cp-article .cp-resource-links a { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 0; border-top: 1px solid #dce3ed; color: #263d5e; font-size: 14px; font-weight: 800; } #cp-article .cp-resource-links a span { color: #647790; font-size: 12px; font-weight: 500; } #cp-article .cp-resource-links a:hover { color: var(--cp-red); } /* 16. ROADMAP */ #cp-article .cp-roadmap { margin: 30px 0 40px; } #cp-article .cp-roadmap-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--cp-border); } #cp-article .cp-roadmap-item:last-child { border-bottom: 1px solid var(--cp-border); } #cp-article .cp-roadmap-phase { color: var(--cp-red); font-size: 12px; font-weight: 850; } #cp-article .cp-roadmap-item strong { display: block; margin-bottom: 10px; font-size: 19px; line-height: 1.5; } #cp-article .cp-roadmap-item p { margin-bottom: 10px; color: #4d5d72; font-size: 15px; } #cp-article .cp-roadmap-check { color: #64788f; font-size: 12px; font-weight: 750; } /* 17. FAQ */ #cp-article .cp-faq { margin-top: 22px; border-top: 1px solid var(--cp-border); } #cp-article .cp-faq-item { padding: 22px 0; border-bottom: 1px solid var(--cp-border); } #cp-article .cp-faq-item strong { display: block; margin-bottom: 9px; color: var(--cp-ink); font-size: 17px; line-height: 1.65; } #cp-article .cp-faq-item p { margin: 0; color: #526177; font-size: 15px; line-height: 1.9; } /* 18. CONCLUSION */ #cp-article .cp-conclusion { margin: 40px 0 20px; padding: clamp(30px, 5vw, 55px); border-radius: 18px; background: #10203a; color: white; } #cp-article .cp-conclusion-kicker { color: #f0a1b0; font-size: 11px; font-weight: 850; letter-spacing: .12em; } #cp-article .cp-conclusion-title { margin: 18px 0 23px; color: white; font-size: clamp(26px, 4vw, 37px); line-height: 1.45; font-weight: 850; letter-spacing: -.05em; } #cp-article .cp-conclusion-title span { color: #ff91a5; } #cp-article .cp-conclusion > p:not(.cp-conclusion-title) { max-width: 700px; color: #d9e2f0; font-size: 16px; line-height: 1.95; } #cp-article .cp-conclusion-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; } #cp-article .cp-conclusion-tags span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: #dce6f3; font-size: 11px; } /* ========================================== 19. TABLET ========================================== */ @media (max-width: 900px) { #cp-article .cp-hero { grid-template-columns: minmax(0, 1fr); } #cp-article .cp-hero-visual { max-width: 420px; } #cp-article .cp-workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); } #cp-article .cp-tier-grid { gap: 10px; } #cp-article .cp-tier-card { padding: 22px 17px; } } /* ========================================== 20. MOBILE ========================================== */ @media (max-width: 700px) { #cp-article { padding: 0 15px; } #cp-article .cp-hero { gap: 26px; padding: 32px 23px; border-radius: 15px; } #cp-article .cp-hero-title { font-size: clamp(29px, 7vw, 37px); } #cp-article .cp-hero-lead { font-size: 15px; } #cp-article .cp-hero-visual { max-width: none; } #cp-article .cp-intro-strip { grid-template-columns: minmax(0, 1fr); gap: 6px; } #cp-article .cp-intro-strip p { font-size: 15px; } #cp-article .cp-section { padding: 47px 0; } #cp-article .cp-insight-grid, #cp-article .cp-compare-grid, #cp-article .cp-purpose-grid, #cp-article .cp-demo-layout, #cp-article .cp-tier-grid, #cp-article .cp-integration-grid { grid-template-columns: minmax(0, 1fr); } #cp-article .cp-insight-card { padding: 20px; } #cp-article .cp-compare-question { min-height: 0; } #cp-article .cp-language-panel { padding: 15px; } #cp-article .cp-demo-header { padding: 22px; } #cp-article .cp-demo-layout { padding: 18px; gap: 18px; } #cp-article .cp-demo-result { padding: 21px; } #cp-article .cp-demo-footer { padding: 15px 19px; } #cp-article .cp-choice { font-size: 13px; } #cp-article .cp-principle-row { grid-template-columns: minmax(0, 1fr); gap: 5px; } #cp-article .cp-engine-flow { flex-direction: column; } #cp-article .cp-engine-node { width: 100%; } #cp-article .cp-engine-connector { transform: rotate(90deg); } #cp-article .cp-tier-card { padding: 24px; } #cp-article .cp-tier-desc { min-height: 0; } #cp-article .cp-tier-feedback { grid-template-columns: minmax(0, 1fr); gap: 5px; } #cp-article .cp-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } #cp-article .cp-journey-content { padding: 25px 20px; } #cp-article .cp-journey-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } #cp-article .cp-journey-step { padding: 12px 3px; font-size: 11px; overflow-wrap: anywhere; } #cp-article .cp-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #cp-article .cp-roadmap-item { grid-template-columns: minmax(0, 1fr); gap: 7px; } #cp-article .cp-conclusion { margin-top: 25px; padding: 30px 23px; } } @media (max-width: 420px) { #cp-article { padding: 0 12px; } #cp-article .cp-hero { padding: 29px 19px; } #cp-article .cp-hero-title { font-size: 29px; } #cp-article .cp-workflow { grid-template-columns: minmax(0, 1fr); } #cp-article .cp-journey-step { font-size: 10px; } #cp-article .cp-journey-step span { font-size: 10px; } #cp-article .cp-metric-grid { grid-template-columns: minmax(0, 1fr); } #cp-article .cp-statement { padding: 20px; } #cp-article .cp-statement p { font-size: 16px; } } /* 21. REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { #cp-article .cp-choice, #cp-article .cp-journey-progress-fill { transition: none; } } /* 콘텐츠 내부 세로 스크롤 방지 */ #cp-article { height: auto; min-height: 0; max-height: none; overflow: visible; } #cp-article .cp-section, #cp-article .cp-hero, #cp-article .cp-demo, #cp-article .cp-demo-layout, #cp-article .cp-demo-result, #cp-article .cp-journey, #cp-article .cp-journey-detail { height: auto; max-height: none; overflow: visible; } /* 표의 가로 스크롤만 허용 */ #cp-article .cp-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; } 24:T3b47, /* ========================================== CONNECTED PRINT KR PURPOSE-BASED CURATION UX Scoped JavaScript v1.0 ========================================== */ (function () { "use strict"; const root = document.getElementById("cp-article"); if (!root) return; /* ------------------------------------------ 01. PRODUCT RECOMMENDATION DATA 가상의 목적별 추천 데이터 ------------------------------------------ */ const catalog = [ { category: "명함 교환과 첫인사", symbol: "BC", products: [ { title: "합리형 명함", description: "기본적인 연락처 전달과 일상적인 명함 교환에 집중한 구성입니다.", reason: "가격 우선 조건에 따라 불필요한 장식 요소를 줄이고 기본적인 사용 목적을 우선했습니다." }, { title: "브랜드 명함 패키지", description: "기본적인 정보 전달과 브랜드 표현을 균형 있게 고려한 구성입니다.", reason: "균형 우선 조건에 따라 실용성과 브랜드 인상을 함께 고려했습니다." }, { title: "프리미엄 명함 패키지", description: "첫인상을 중요하게 생각하는 고객을 위한 소재와 표현 중심의 구성입니다.", reason: "브랜드 인상 우선 조건에 따라 촉감과 시각적 차별화를 검토하는 방향입니다." } ] }, { category: "행사 및 이벤트 홍보", symbol: "EV", products: [ { title: "대량 배포형 홍보물", description: "많은 사람에게 핵심 메시지를 전달하는 데 집중한 경제적인 홍보물 구성입니다.", reason: "가격 우선 조건에 따라 배포 효율과 기본적인 정보 전달을 우선했습니다." }, { title: "브랜드 행사 안내 카드", description: "행사 정보의 가독성과 브랜드 이미지를 함께 고려한 구성입니다.", reason: "균형 우선 조건에 따라 정보 전달과 브랜드 표현의 균형을 고려했습니다." }, { title: "프리미엄 이벤트 초대장", description: "행사의 특별한 분위기와 초대 경험을 강조하는 구성입니다.", reason: "브랜드 인상 우선 조건에 따라 소재와 마감 차별화를 검토합니다." } ] }, { category: "제품 포장과 브랜드 라벨", symbol: "PK", products: [ { title: "기본 제품 라벨", description: "제품 구분과 필수 정보 전달에 집중한 실용적인 라벨 구성입니다.", reason: "가격 우선 조건에 따라 필요한 정보를 효과적으로 전달하는 기본 구성을 제안합니다." }, { title: "브랜드 패키징 스티커", description: "제품 식별과 브랜드 표현을 함께 고려하는 스티커 구성입니다.", reason: "균형 우선 조건에 따라 브랜드 표현과 실용성을 함께 고려했습니다." }, { title: "프리미엄 패키징 라벨", description: "제품의 고급스러운 인상과 시각적 차별화를 강조하는 구성입니다.", reason: "브랜드 인상 우선 조건에 따라 소재와 시각 효과를 검토합니다." } ] }, { category: "고객 감사와 메시지 전달", symbol: "TY", products: [ { title: "기본 감사 카드", description: "감사 메시지를 명확하게 전달하는 단정한 카드 구성입니다.", reason: "가격 우선 조건에 따라 필요한 메시지와 기본적인 표현을 우선했습니다." }, { title: "브랜드 감사 카드", description: "정중한 메시지 전달과 브랜드 정체성을 함께 표현하는 구성입니다.", reason: "균형 우선 조건에 따라 메시지 전달력과 브랜드 표현을 함께 고려했습니다." }, { title: "프리미엄 감사 카드", description: "특별한 고객이나 중요한 관계에 적합한 고급 표현 중심의 구성입니다.", reason: "브랜드 인상 우선 조건에 따라 고급 소재와 마감 표현을 검토합니다." } ] } ]; /* ------------------------------------------ 02. RECOMMENDATION STATE 0: Purpose 1: Priority 2: Quantity 3: Design readiness ------------------------------------------ */ const defaultSelection = [0, 1, 1, 1]; const selection = defaultSelection.slice(); const quizGroups = Array.from( root.querySelectorAll(".cp-quiz-group") ); const result = { category: root.querySelector(".cp-result-category"), title: root.querySelector(".cp-result-title"), description: root.querySelector(".cp-result-description"), reason: root.querySelector(".cp-result-reason"), meta: root.querySelector(".cp-result-meta"), next: root.querySelector(".cp-result-next-text"), symbol: root.querySelector(".cp-result-symbol-inner"), status: root.querySelector(".cp-result-state") }; const priorityNames = [ "가격 우선", "균형 우선", "브랜드 인상" ]; const quantityNames = [ "소량", "일반 수량", "대량" ]; const quantityMessages = [ "소량 제작 가능 여부와 최소 주문 수량을 확인해야 합니다.", "선택한 수량에 맞춰 제작 사양과 견적을 확인해야 합니다.", "대량 제작 시 수량별 단가와 제작 일정을 비교해야 합니다." ]; /* ------------------------------------------ 03. RENDER SELECTED BUTTONS ------------------------------------------ */ function updateQuizButtons() { quizGroups.forEach(function (group, groupIndex) { const buttons = group.querySelectorAll(".cp-choice"); buttons.forEach(function (button, optionIndex) { const active = selection[groupIndex] === optionIndex; button.classList.toggle("is-selected", active); button.setAttribute( "aria-pressed", active ? "true" : "false" ); }); }); } /* ------------------------------------------ 04. UPDATE RECOMMENDATION ------------------------------------------ */ function updateRecommendation() { const purpose = catalog[selection[0]]; if (!purpose) return; const product = purpose.products[selection[1]]; if (!product) return; const quantityIndex = selection[2]; const needsDesign = selection[3] === 1; if (result.category) { result.category.textContent = purpose.category; } if (result.title) { result.title.textContent = product.title; } if (result.description) { result.description.textContent = product.description; } if (result.reason) { result.reason.textContent = product.reason + " " + quantityMessages[quantityIndex] + (selection[0] === 2 ? " 실제 포장에 사용할 경우 부착 표면과 사용 환경을 추가로 확인해야 합니다." : ""); } if (result.meta) { result.meta.textContent = priorityNames[selection[1]] + " · " + quantityNames[quantityIndex]; } if (result.symbol) { result.symbol.textContent = purpose.symbol; } if (result.next) { result.next.textContent = needsDesign ? "디자인 생성 또는 템플릿 편집 단계로 연결할 수 있습니다." : "준비한 파일을 업로드하고 제작 적합성을 검증하는 단계로 연결할 수 있습니다."; } if (result.status) { result.status.textContent = "선택 조건 반영됨"; } } /* ------------------------------------------ 05. TIER COMPARISON ------------------------------------------ */ const tierButtons = Array.from( root.querySelectorAll(".cp-tier-button") ); const tierMessage = root.querySelector( ".cp-tier-feedback-text" ); const tierExplanations = [ "경제형은 필요한 기능을 먼저 충족하면서 비용 부담을 줄이는 비교 기준입니다. 실제 선택 시 최소 주문 수량과 제작 가능 여부를 확인해야 합니다.", "균형형은 실용성과 브랜드 표현을 함께 고려하는 기본 비교 기준입니다.", "프리미엄형은 소재, 촉감, 시각적 표현을 더 중요하게 평가합니다. 선택한 효과에 따른 추가 비용과 제작 일정도 확인해야 합니다." ]; const tierLabels = [ "경제형 기준 보기", "균형형 기준 보기", "프리미엄형 기준 보기" ]; function updateTierUI() { tierButtons.forEach(function (button, index) { const active = selection[1] === index; button.classList.toggle("is-selected", active); button.setAttribute( "aria-pressed", active ? "true" : "false" ); button.textContent = active ? "선택된 기준" : tierLabels[index]; }); if (tierMessage) { tierMessage.textContent = tierExplanations[selection[1]]; } } /* ------------------------------------------ 06. CENTRAL RENDER ------------------------------------------ */ function renderRecommendation() { updateQuizButtons(); updateRecommendation(); updateTierUI(); } /* ------------------------------------------ 07. QUIZ EVENTS ------------------------------------------ */ quizGroups.forEach(function (group, groupIndex) { const buttons = Array.from( group.querySelectorAll(".cp-choice") ); buttons.forEach(function (button, optionIndex) { button.addEventListener("click", function () { selection[groupIndex] = optionIndex; renderRecommendation(); }); }); }); /* ------------------------------------------ 08. TIER BUTTON EVENTS ------------------------------------------ */ tierButtons.forEach(function (button, index) { button.addEventListener("click", function () { selection[1] = index; renderRecommendation(); }); }); /* ------------------------------------------ 09. RESET ------------------------------------------ */ const resetButton = root.querySelector( ".cp-demo-reset" ); if (resetButton) { resetButton.addEventListener("click", function () { defaultSelection.forEach(function (value, index) { selection[index] = value; }); renderRecommendation(); if (result.status) { result.status.textContent = "초기 조건 복원됨"; } }); } /* ------------------------------------------ 10. CUSTOMER JOURNEY DATA ------------------------------------------ */ const journeyStages = [ { kicker: "STEP 01 / UNDERSTAND", title: "고객의 목적을 파악합니다", description: "무엇을 제작하려는지, 누구에게 전달하는지 등 쉽게 답할 수 있는 질문부터 시작합니다.", feedback: "선택한 목적을 간단히 요약하고 다음 질문을 제시합니다." }, { kicker: "STEP 02 / RECOMMEND", title: "적합한 상품을 추천합니다", description: "사용 목적과 우선순위를 바탕으로 제작 가능한 상품을 비교하고 추천 이유를 설명합니다.", feedback: "추천안별 차이, 주요 사양, 선택 이유를 명확하게 보여줍니다." }, { kicker: "STEP 03 / DESIGN", title: "디자인 작업을 연결합니다", description: "파일이 준비된 고객은 업로드로, 디자인이 필요한 고객은 템플릿 또는 웹 편집기로 안내합니다.", feedback: "현재 디자인 상태와 수정할 수 있는 항목, 다음 단계를 보여줍니다." }, { kicker: "STEP 04 / VALIDATE", title: "제작용 파일을 검증합니다", description: "규격, 재단 여유, 이미지 품질 등 제작에 필요한 조건을 확인하고 발견된 문제를 안내합니다.", feedback: "오류 발생 위치와 수정 방법, 재검증 결과를 이해하기 쉽게 표시합니다." }, { kicker: "STEP 05 / CONFIRM", title: "최종 주문 내용을 확인합니다", description: "상품, 수량, 디자인, 실제 가격, 배송 조건 등을 확인한 뒤 주문을 확정하도록 안내합니다.", feedback: "최종 사양과 총결제금액, 예상 일정 및 고객의 확인이 필요한 사항을 표시합니다." } ]; const journeyButtons = Array.from( root.querySelectorAll(".cp-journey-step") ); const journeyElements = { kicker: root.querySelector(".cp-journey-kicker"), title: root.querySelector(".cp-journey-title"), description: root.querySelector( ".cp-journey-description" ), feedback: root.querySelector( ".cp-journey-feedback" ), progress: root.querySelector( ".cp-journey-progress-fill" ) }; /* ------------------------------------------ 11. UPDATE CUSTOMER JOURNEY ------------------------------------------ */ function renderJourney(index) { const stage = journeyStages[index]; if (!stage) return; journeyButtons.forEach(function (button, buttonIndex) { const active = buttonIndex === index; button.classList.toggle("is-selected", active); button.setAttribute( "aria-pressed", active ? "true" : "false" ); }); if (journeyElements.kicker) { journeyElements.kicker.textContent = stage.kicker; } if (journeyElements.title) { journeyElements.title.textContent = stage.title; } if (journeyElements.description) { journeyElements.description.textContent = stage.description; } if (journeyElements.feedback) { journeyElements.feedback.textContent = stage.feedback; } if (journeyElements.progress) { journeyElements.progress.style.width = ((index + 1) / journeyStages.length * 100) + "%"; } } /* ------------------------------------------ 12. CUSTOMER JOURNEY EVENTS ------------------------------------------ */ journeyButtons.forEach(function (button, index) { button.addEventListener("click", function () { renderJourney(index); }); }); /* ------------------------------------------ 13. INITIAL RENDER ------------------------------------------ */ renderRecommendation(); renderJourney(0); })(); 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-fe94eccb-9c18-4de0-9d2d-b17b027208f9",{"id":"b-fe94eccb-9c18-4de0-9d2d-b17b027208f9","children":["$","$L21",null,{"block":{"id":"b-fe94eccb-9c18-4de0-9d2d-b17b027208f9","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."]}]]}]]}]]}]}]