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

WEB-TO-PRINT TECHNOLOGY / INTERACTIVE GUIDE

화면 속 디자인을
실제 인쇄물처럼.

고객이 인쇄를 주문하기 전에 명함을 돌려보고, 종이를 바꾸고, 금박과 코팅 효과까지 미리 확인할 수 있다면 어떨까요? 웹 기반 3D 프리뷰는 평면 디자인을 입체적인 제품 경험으로 연결하는 기술입니다.

Three.js / WebGL 실시간 렌더링 인쇄 후가공 약 10분 읽기

QUICK ANSWER

웹 기반 3D 인쇄물 프리뷰는 3D 모델에 인쇄 디자인을 텍스처로 적용하고, 재질과 조명을 계산해 브라우저에서 완성품의 외관을 보여주는 기술입니다.

기본적인 제품 회전은 CSS 3D로도 표현할 수 있지만, 정교한 재질·조명·후가공 표현에는 WebGL과 Three.js 같은 3D 렌더링 기술이 적합합니다.

LIVE INTERACTIVE DEMO

인쇄물의 완성된 모습을 직접 확인해 보세요

명함을 회전하고, 용지와 후가공 옵션을 변경해 보세요.

CSS 3D DEMO

N. DESIGN
STUDIO / 01

NORTH
PRESS. CREATIVE PRINT SYSTEM

DESIGN BEYOND PAPER. 2026 / EDITION

NORTH PRESS ®

DESIGN
MEETS
DIMENSION. PRINT EXPERIENCE
WITH PURPOSE.

DRAG TO ROTATE ◉ FRONT / BACK

CONFIGURATOR / 01

제품 옵션 시뮬레이션 설정을 변경하면 왼쪽 카드에 반영됩니다.

01 종이 컬러

02 표면 코팅

03 후가공 효과

CURRENT PREVIEW 딥 네이비 · 무광 · 금박 · Spot UV

무광 표면과 금박, 부분 광택의 대비를 표현한 시뮬레이션입니다.

※ 위 데모는 외부 라이브러리 없이 CSS 3D와 JavaScript로 만든 교육용 시각 시뮬레이션입니다. 실제 종이의 반사율, 금박 광학 특성, 엠보싱 깊이 또는 정확한 색상을 재현하거나 인쇄 품질을 검증하는 도구는 아닙니다.

01 / FUNDAMENTALS

웹 기반 3D 인쇄물 프리뷰란?

웹 기반 3D 인쇄물 프리뷰는 고객이 업로드하거나 편집한 디자인을 명함, 패키지, 스티커, 브로슈어 등의 입체 모델에 적용하고 완성품의 외관을 브라우저에서 탐색하도록 하는 기능입니다. 실제 제품을 촬영하거나 물리적 샘플을 제작하지 않고도 다양한 방향과 재질에서 디자인을 검토할 수 있습니다.

다만 프리뷰는 어디까지나 예상 외관을 보여주는 시각화이며, 실제 인쇄 색상이나 후가공 품질을 보증하지 않습니다. 화면 특성, 조명, 종이, 생산 공정에 따라 결과는 달라질 수 있습니다.

2D 프리뷰

인쇄 면의 이미지, 위치, 텍스트, 재단선 등을 확인하는 방식입니다. 파일 검수와 디자인 확인에는 적합하지만 물리적 두께와 표면의 반사 특성을 직관적으로 보여주기 어렵습니다.

3D 프리뷰

제품을 돌리거나 확대하면서 앞뒷면, 가장자리, 재질, 조명에 따른 외관 변화를 살펴볼 수 있습니다. 고객이 주문할 제품을 이해하는 데 도움을 줍니다.

BUSINESS INSIGHT

3D 프리뷰의 목적은 단순히 화면을 화려하게 만드는 것이 아닙니다. 고객이 주문 전에 제품을 이해하고 옵션을 선택하도록 돕는 것이 핵심입니다. 이는 인쇄 상담 및 주문 과정의 반복 확인 업무를 줄이는 자동화 설계와 연결됩니다.

02 / RENDERING TECHNOLOGY

웹 기반 3D 프리뷰의 핵심 기술

제품의 3D 프리뷰를 구현하려면 기하구조(Geometry), 텍스처(Texture), 재질(Material), 조명(Lighting), 카메라(Camera)를 구성해야 합니다. 브라우저에서 이들을 조합해 화면에 그리는 과정이 렌더링입니다.

CSS 3D와 WebGL, Three.js의 차이

기술	역할	적합한 작업
CSS 3D	HTML 요소의 입체적 배치와 회전	단순 명함 회전, 경량 목업, 인터페이스
WebGL	GPU 기반 2D·3D 그래픽 렌더링 API	실시간 3D 그래픽, 재질, 조명
Three.js	WebGL 등을 활용하는 고수준 3D 라이브러리	3D 모델, 텍스처, 조명, 카메라, 사용자 조작

단순히 명함의 앞뒷면을 전환하는 정도라면 CSS 3D만으로도 가능합니다. 그러나 제품이 회전할 때 금박의 하이라이트가 바뀌거나, 여러 재질이 복합적으로 반응해야 한다면 Three.js 같은 렌더링 라이브러리를 활용하는 편이 실용적입니다.

3D 렌더링의 기본 구성

01Geometry 제품의 크기와 형태

→

02Texture 인쇄 디자인 이미지

→

03Material 종이·코팅·후가공

→

04Lighting 빛과 반사 표현

→

05Render 브라우저 화면 출력

위 다이어그램은 개념을 설명하기 위한 흐름입니다. 실제 렌더러에서는 카메라와 조명, 기하구조, 재질 등의 데이터가 함께 처리됩니다.

재질과 조명은 왜 중요한가?

동일한 디자인이라도 비코팅지, 무광 라미네이팅, 유광 코팅, 금속박에서는 서로 다른 모습으로 보입니다. 실제 3D 엔진에서는 표면 거칠기(Roughness), 금속성(Metalness), 노멀 맵(Normal Map), 환경 반사 등을 조합해 외관을 표현할 수 있습니다.

예를 들어 Three.js의 MeshStandardMaterial은 거칠기와 금속성 등의 속성을 제공하며, MeshPhysicalMaterial은 추가적인 물리 기반 재질 표현에 활용할 수 있습니다.

03 / ARTWORK TO TEXTURE

인쇄 디자인 파일을 3D 모델에 적용하는 방법

3D 프리뷰에서 가장 중요한 연결 과정은 인쇄 데이터를 화면 표시용 텍스처로 변환하는 것입니다. 인쇄용 원본과 미리보기용 데이터를 분리하면 렌더링 성능을 최적화하면서 생산용 파일을 보존할 수 있습니다.

PDF·SVG·PNG 파일 처리

형식	특징	프리뷰 처리
PDF	인쇄에 필요한 페이지와 다양한 그래픽 포함 가능	페이지를 렌더링한 뒤 텍스처 생성
SVG	벡터 기반 그래픽	안전하게 검증·래스터화 후 텍스처 적용
PNG / JPEG	래스터 이미지	크기·방향·색상 처리 후 텍스처 적용

파일 변환의 실제 처리 단계

파일 수신 및 안전성 검사
형식, 파일 크기, 페이지 수, 파싱 오류 등을 검사합니다. 임의의 SVG 코드를 신뢰하지 않고 안전한 이미지로 변환합니다.
페이지와 인쇄 면 구성
앞면·뒷면을 분리하고 TrimBox, BleedBox 또는 주문 규격에 맞춰 인쇄 면을 정규화합니다.
미리보기 이미지 생성
PDF나 벡터 파일을 화면용 해상도로 래스터화합니다. 투명도와 색상 변환 정책을 일관되게 적용합니다.
UV 좌표에 매핑
제품 모델의 어느 위치에 이미지를 붙일지 정의합니다. 앞면·뒷면의 좌우 방향, 재단 범위, 회전을 검토합니다.
재질과 후가공 레이어 결합
일반 인쇄 영역, 금박 마스크, Spot UV 마스크 등 서로 다른 표현 데이터를 조합합니다.

PRINT PRODUCTION RULE

화면용 프리뷰 텍스처를 인쇄용 PDF로 다시 사용하지 마세요. 프리뷰는 고객 확인에 적합한 별도 데이터이며, 최종 생산 파일은 원본 아트워크와 검증된 출력 규격을 기반으로 관리해야 합니다.

04 / MATERIAL SIMULATION

실제 인쇄물처럼 보이게 만드는 시각 효과

인쇄물의 입체적 외관은 단순한 디자인 이미지 이상의 요소로 결정됩니다. 제품의 두께, 종이 표면, 코팅층, 금속박, 국소 광택, 엠보싱 등의 시각적 특성을 서로 다르게 표현하는 것이 중요합니다.

종이 두께와 표면 질감

명함의 두께는 모델의 실제 기하구조 또는 얇은 박스 형태의 두께로 표현할 수 있습니다. 종이 질감은 표면 색상과 미세한 노멀 맵 등을 통해 시각적으로 표현할 수 있지만, 텍스처가 종이의 물리적 촉감까지 재현하는 것은 아닙니다.

무광·유광·금박·Spot UV 구현

MATTE

무광 코팅

넓고 부드러운 반사, 비교적 높은 표면 거칠기를 활용해 표현합니다.

GLOSS

유광 코팅

낮은 거칠기와 명확한 하이라이트를 사용해 광택을 강조합니다.

GOLD FOIL

금박

별도의 마스크와 금속성 재질·반사 환경을 활용해 표현합니다.

SPOT UV

부분 UV 코팅

지정된 영역의 광택과 코팅 표면의 차이를 강조합니다.

위 샘플은 CSS로 표현한 개념 이미지이며, 실제 후가공 소재를 물리적으로 측정한 결과가 아닙니다.

후가공 마스크를 분리해야 하는 이유

금박과 Spot UV는 디자인 전체에 균일하게 적용되는 일반 이미지 효과가 아닙니다. 후가공 영역만 표시한 별도의 흑백 마스크 또는 지정된 스팟 컬러 데이터를 이용해 적용 범위를 관리해야 합니다.

예를 들어 금박 마스크에 해당하는 부분에만 금속성 재질을 적용하고, Spot UV 영역에는 주변 종이보다 광택이 강한 표면을 부여하는 방식입니다. 실제 생산에서는 이 데이터가 후가공 공정의 위치 정보와도 일치해야 합니다.

05 / INTERACTIVE EXPERIENCE

사용자가 직접 조작하는 3D 프리뷰 UX

3D 프리뷰는 제품을 보여주는 것만으로 충분하지 않습니다. 고객이 원하는 정보를 빠르게 찾고 쉽게 조작할 수 있어야 실제 주문 화면에서 의미가 있습니다.

필수 인터랙션 구성

01회전과 확대

마우스·터치 조작과 명확한 기본 보기 버튼을 함께 제공합니다.

02앞면·뒷면 전환

회전이 어려운 사용자도 한 번의 클릭으로 각 면을 확인할 수 있어야 합니다.

03재질 옵션 변경

종이와 코팅 옵션의 변화가 프리뷰와 일관되게 연결되어야 합니다.

04후가공 확인

금박과 부분 UV 등의 적용 위치를 사용자가 구분할 수 있어야 합니다.

제품별 3D UX의 차이

명함은 앞면·뒷면과 두께 표현이 중요합니다. 접지 브로슈어는 접힌 상태와 펼쳐진 상태를 전환할 수 있어야 하며, 패키지는 접기·조립 형태와 각 면의 디자인 연결이 중요합니다. 스티커의 경우 모양, 재단 영역, 배경 제거 여부와 표면 효과가 핵심이 될 수 있습니다.

실무 권장

모든 제품에 하나의 복잡한 3D 뷰어를 적용하기보다는, 제품 유형별로 필요한 조작만 제공하는 것이 사용자 경험과 개발 유지보수에 유리합니다.

06 / PERFORMANCE

모바일 환경과 렌더링 성능 최적화

3D 프리뷰는 텍스처 해상도, 렌더링 해상도, 조명 계산, 모델의 복잡도에 따라 GPU와 메모리를 사용합니다. 실제 서비스에서는 화면에 충분한 품질을 유지하되 불필요한 리소스 사용을 줄이는 설계가 필요합니다.

인터랙티브 텍스처 메모리 계산기

이미지 해상도가 커지면 메모리 사용량도 증가합니다. 아래 계산기는 무압축 RGBA 이미지의 기본 픽셀 데이터만을 기준으로 이론적인 메모리 크기를 계산합니다.

TEXTURE MEMORY ESTIMATOR 해상도별 텍스처 메모리

텍스처 해상도

텍스처 수

예상 기본 픽셀 메모리 8 MiB

전체 픽셀 수 2,097,152

계산식: 가로 × 세로 × 4 bytes × 텍스처 수. 밉맵, GPU 내부 포맷, 추가 렌더 타깃, 압축, 색상 공간 및 드라이버 오버헤드는 포함하지 않습니다. 실제 GPU 메모리 사용량과 다를 수 있습니다.

모바일 최적화 실무 전략

실제 화면 크기에 필요한 수준으로 텍스처 해상도를 제한합니다.
화면에 표시되지 않는 제품의 렌더링은 중지하거나 빈도를 낮춥니다.
반사와 조명을 과도하게 계산하지 않고 재질을 단순화합니다.
사용자에게 필요한 순간에만 고품질 프리뷰를 불러옵니다.
WebGL 또는 3D 기능이 작동하지 않을 때 2D 이미지를 제공합니다.
모바일 터치 조작이 페이지 스크롤을 불필요하게 방해하지 않도록 설계합니다.

07 / WEB-TO-PRINT INTEGRATION

웹투프린트 주문 시스템과 3D 프리뷰 연동

3D 프리뷰를 단독 시각화 기능으로만 구성하면 실제 인쇄 주문 과정과 단절될 수 있습니다. 디자인 편집, 옵션 선택, 자동견적, 파일 검수, 주문 저장이 일관된 데이터를 사용하도록 연결해야 합니다.

주문 시스템의 데이터 처리 구조

INPUT 디자인 업로드 / 웹 에디터 원본 아트워크 · 제품 사양

↓

VISUALIZATION 3D 프리뷰 화면용 텍스처 + 재질

VALIDATION 프리플라이트 규격 · 도련 · 해상도 검사

COMMERCE 자동견적 엔진 용지 · 인쇄 · 후가공 · 수량

↓

ORDER CONFIRMATION 사양·디자인 확인 및 주문 확정 확정된 디자인 버전과 주문 옵션 저장

↓

PRODUCTION 검증된 인쇄용 파일 전달 출력 파일 · 후가공 데이터 · 작업지시서

예시 아키텍처입니다. 프리뷰 생성과 프리플라이트, 견적 계산은 독립적으로 실행하고 주문 확정 전 결과를 일치시키는 형태로 구현할 수 있습니다.

프리뷰와 주문 가격의 실시간 동기화

고객이 종이, 수량, 코팅, 금박을 변경하면 화면에 보이는 외관뿐 아니라 주문 사양과 견적 요청 데이터도 함께 변경되어야 합니다. 그러나 브라우저에서 표시한 금액을 최종 결제 금액으로 신뢰해서는 안 됩니다. 가격과 생산 가능 여부는 서버에서 최종 검증해야 합니다.

예시 · 프리뷰와 견적 엔진이 공유하는 사양 객체

{
  "product": "business-card",
  "size_mm": [90, 50],
  "quantity": 500,
  "paper": "extra-nouveau-350",
  "coating": "matte",
  "finishing": {
    "foil": true,
    "spot_uv": true
  },
  "artwork_version": "v3"
}

위 데이터는 설명을 위한 가상 JSON 예시이며, Connected Print의 실제 API 스키마를 의미하지 않습니다.

프리뷰와 인쇄 생산 데이터 분리

디자인을 3D 화면에 올바르게 표시하는 것과 그 디자인을 실제 인쇄할 수 있는 것은 별개의 문제입니다. 프리플라이트는 도련, 폰트, 해상도, 컬러 데이터, 후가공 요소 등의 생산 가능성을 검토해야 합니다. 화면의 프리뷰는 이 검증을 대체할 수 없습니다.

08 / IMPLEMENTATION STRATEGY

실제 서비스 구축 시 고려해야 할 사항

상용 3D 프리뷰를 개발할 때는 시각적 품질뿐 아니라 제품 사양 데이터, 정보 보안, 모바일 성능, 생산 시스템 연동을 함께 고려해야 합니다. 특히 프리뷰에 적용된 후가공이 실제 공장에서 생산할 수 있는 옵션인지 확인하는 구조가 필요합니다.

단계별 개발 우선순위

PHASE 01 기본 3D 뷰어

표준 명함 크기, 앞뒷면 전환, 회전·확대, 화면용 디자인 적용.

PHASE 02 재질·후가공 표현

종이 프리셋, 코팅 변화, 금박 및 Spot UV 마스크와 조명.

PHASE 03 편집기·견적 연동

디자인 버전 관리, 제품 옵션 동기화, 견적 및 생산 가능 여부 검증.

PHASE 04 제품 유형 확대

스티커, 접지 인쇄물, 패키지 등으로 모델과 인터랙션 확장.

보안과 표현 정확성

업로드 파일은 신뢰하지 않고 형식과 내용, 크기를 검증합니다.
서버의 검증된 변환 파이프라인으로 미리보기용 이미지를 생성합니다.
사용자 간 디자인 파일의 접근 권한을 분리합니다.
금박·Spot UV의 위치와 실제 후가공 파일의 정합성을 검증합니다.
화면상 색상과 실제 인쇄 색상이 다를 수 있음을 명시합니다.
3D 미지원 환경에서도 주문 진행이 가능하도록 설계합니다.

09 / CONCLUSION

3D 프리뷰가 바꾸는 온라인 인쇄 주문 경험

웹 기반 3D 인쇄물 프리뷰는 디자인을 보여주는 기능에서 시작하지만 그 가치는 주문 자동화와 결합될 때 더욱 커집니다. 고객은 주문 전에 제품의 외관을 탐색하고, 인쇄 서비스 제공자는 표준화된 옵션과 데이터를 바탕으로 주문을 받을 수 있습니다.

향후 AI 디자인 생성, 웹 에디터, 자동 프리플라이트, 실시간 견적과 3D 프리뷰가 연결되면 전문 디자인 소프트웨어를 사용하지 않는 고객도 보다 직관적으로 인쇄 주문을 진행할 수 있습니다.

THE NEXT STEP OF WEB-TO-PRINT 디자인에서 주문까지.
확인에서 생산까지.

3D 프리뷰는 인쇄 주문 자동화 경험을 완성하는 중요한 연결 요소입니다.

QUESTIONS & ANSWERS

자주 묻는 질문

3D 프리뷰 구현에 Three.js가 반드시 필요한가요?

아닙니다. 단순한 회전이나 앞뒷면 전환은 CSS 3D로도 구현할 수 있습니다. 다만 복잡한 모델, 물리 기반 재질, 조명, 입체적 후가공 표현이 필요하면 Three.js 같은 3D 라이브러리가 유용합니다.

PDF 파일을 바로 3D 명함에 적용할 수 있나요?

일반적으로 PDF 페이지를 화면 표시용 이미지로 렌더링하고 3D 모델의 텍스처로 적용합니다. 이 과정에서는 규격, 도련, 앞뒷면 방향, 색상 처리 등을 고려해야 합니다.

3D 화면으로 금박이나 Spot UV를 정확히 확인할 수 있나요?

적용 위치와 예상 외관을 시뮬레이션할 수 있지만, 실제 반사와 표면 질감, 소재의 차이를 완벽하게 재현할 수는 없습니다. 생산 데이터 검증과 물리적 샘플 확인은 별도로 필요할 수 있습니다.

모바일에서도 3D 인쇄물 프리뷰가 작동하나요?

호환되는 모바일 브라우저와 GPU 환경에서 가능합니다. 다만 장치별 성능과 브라우저 제약에 차이가 있으므로 텍스처 최적화, 터치 UX, 2D 대체 화면을 준비해야 합니다.

3D 프리뷰 이미지로 바로 인쇄할 수 있나요?

권장하지 않습니다. 3D 프리뷰는 고객의 시각적 확인을 위한 화면용 결과물입니다. 실제 인쇄에는 검증된 원본 파일, 출력 사양, 컬러 데이터, 후가공 정보가 필요합니다.

TECHNICAL REFERENCES

공식 기술 참고 자료

아래 자료는 WebGL 렌더링, Three.js 재질, 텍스처 처리의 구체적인 구현 방법을 확인할 수 있는 공식 기술 문서입니다.

23:T82c2, /* ========================================== CONNECTED PRINT KR SCOPED ARTICLE STYLES ========================================== */ #cp-article { --cp-ink: #172033; --cp-muted: #64748b; --cp-line: #e5eaf0; --cp-blue: #2457d6; --cp-navy: #101b31; --cp-soft: #f5f7fb; --cp-white: #ffffff; 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; color: var(--cp-ink); width: 100%; max-width: 100%; min-width: 0; word-break: keep-all; overflow-wrap: break-word; } #cp-article *, #cp-article *::before, #cp-article *::after { box-sizing: border-box; } #cp-article p { margin: 0 0 17px; font-size: 16px; line-height: 1.95; word-break: keep-all; } #cp-article h2 { margin: 0 0 23px; font-size: clamp(25px, 3.2vw, 31px); font-weight: 800; line-height: 1.4; letter-spacing: -0.045em; color: var(--cp-ink); } #cp-article h3 { margin: 34px 0 14px; font-size: 19px; font-weight: 700; line-height: 1.55; letter-spacing: -0.025em; color: var(--cp-ink); } #cp-article strong { font-weight: 750; } #cp-article a { color: #2054c5; text-decoration: none; overflow-wrap: anywhere; } #cp-article a:hover { text-decoration: underline; } #cp-article button, #cp-article select { font: inherit; } #cp-article button:focus-visible, #cp-article select:focus-visible, #cp-article a:focus-visible, #cp-article .cp-viewer:focus-visible { outline: 3px solid #62a2ff; outline-offset: 3px; } #cp-article .cp-small-label { display: block; margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; line-height: 1.5; text-transform: uppercase; } #cp-article .cp-section { padding: 66px 0 0; margin: 0; } #cp-article .cp-section-number { margin: 0 0 11px; color: var(--cp-blue); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; line-height: 1.5; } /* ========================================== HERO ========================================== */ #cp-article .cp-hero { border-radius: 20px; overflow: hidden; background: #101b31; color: #fff; margin: 0 0 30px; } #cp-article .cp-hero-inner { padding: clamp(26px, 5vw, 58px); background: radial-gradient(circle at 95% 12%, rgba(70, 113, 235, 0.28), transparent 43%), linear-gradient(135deg, #111b2e, #17294a); } #cp-article .cp-eyebrow { color: #92b3ff; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; margin-bottom: 22px; } #cp-article .cp-hero-heading { color: #fff; font-size: clamp(29px, 4.6vw, 44px); font-weight: 850; letter-spacing: -0.055em; line-height: 1.35; margin: 0 0 22px; } #cp-article .cp-hero-heading span { color: #94baff; } #cp-article .cp-hero-lead { max-width: 760px; color: #d4deee; font-size: 17px; line-height: 1.95; margin-bottom: 26px; } #cp-article .cp-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; } #cp-article .cp-hero-tags span { display: inline-block; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.19); border-radius: 30px; color: #e6eefa; background: rgba(255,255,255,0.06); font-size: 12px; line-height: 1.4; } #cp-article .cp-hero-summary { padding: 25px clamp(25px, 5vw, 58px) 27px; background: #edf3ff; color: #263b64; } #cp-article .cp-hero-summary .cp-small-label { color: #2755ad; } #cp-article .cp-hero-summary p { color: #263b64; font-size: 15px; line-height: 1.9; margin-bottom: 8px; } #cp-article .cp-hero-summary p:last-child { margin-bottom: 0; } /* ========================================== INTERACTIVE DEMO CONTAINER ========================================== */ #cp-article .cp-demo { margin: 32px 0 0; padding: 24px; border: 1px solid #dce5f2; border-radius: 20px; background: #fafcff; } #cp-article .cp-demo-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin-bottom: 21px; } #cp-article .cp-demo-head .cp-small-label { color: var(--cp-blue); margin-bottom: 7px; } #cp-article .cp-demo-title { font-size: 21px; line-height: 1.5; font-weight: 800; margin-bottom: 6px; } #cp-article .cp-demo-sub { color: var(--cp-muted); font-size: 14px; margin: 0; } #cp-article .cp-live-indicator { background: #e9f8f1; border: 1px solid #b7e6cd; color: #14754d; padding: 7px 11px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; } #cp-article .cp-demo-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr); gap: 18px; align-items: stretch; } #cp-article .cp-viewer-area { min-width: 0; } #cp-article .cp-viewer { position: relative; height: 390px; border-radius: 13px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 48%, #293d66, #0d182c 75%); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } #cp-article .cp-viewer.is-dragging { cursor: grabbing; } #cp-article .cp-viewer-glow { position: absolute; width: 72%; height: 56%; left: 14%; top: 23%; border-radius: 50%; background: rgba(75, 119, 219, 0.16); filter: blur(45px); pointer-events: none; } #cp-article .cp-viewer-grid { position: absolute; inset: 0; opacity: 0.28; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, transparent, black); -webkit-mask-image: linear-gradient(to bottom, transparent, black); pointer-events: none; } #cp-article .cp-scene { position: absolute; inset: 18px 0; display: flex; justify-content: center; align-items: center; perspective: 1000px; pointer-events: none; } /* ========================================== CSS 3D BUSINESS CARD ========================================== */ #cp-article .cp-card-3d { --paper: #10233d; --print: #f7f3e8; --rx: -12deg; --ry: -27deg; --zoom: 1; position: relative; width: min(78%, 450px); aspect-ratio: 1.8; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--zoom)); transition: transform 280ms cubic-bezier(.22,.75,.32,1); will-change: transform; } #cp-article .cp-card-3d.is-ivory { --paper: #efeadc; --print: #263249; } #cp-article .cp-viewer.is-dragging .cp-card-3d { transition: none; } #cp-article .cp-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7.5%; overflow: hidden; border-radius: 7px; color: var(--print); background: var(--paper); border: 1px solid rgba(255,255,255,0.20); box-shadow: 1px 2px 0 rgba(255,255,255,.14), 4px 6px 0 rgba(0,0,0,.22), 16px 25px 40px rgba(0,0,0,.35); backface-visibility: hidden; -webkit-backface-visibility: hidden; } #cp-article .cp-card-front { transform: translateZ(2px); } #cp-article .cp-card-back { transform: rotateY(180deg) translateZ(2px); } #cp-article .cp-card-top, #cp-article .cp-card-bottom, #cp-article .cp-back-top, #cp-article .cp-back-bottom { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; } #cp-article .cp-card-symbol { font-size: clamp(22px, 3.2vw, 35px); font-weight: 900; line-height: 1; letter-spacing: -.06em; } #cp-article .cp-card-edition { text-align: right; font-size: clamp(6px, .8vw, 9px); line-height: 1.5; letter-spacing: .13em; } #cp-article .cp-card-middle { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; position: relative; z-index: 2; } #cp-article .cp-foil-mark { display: block; width: fit-content; font-size: clamp(24px, 4.2vw, 46px); font-weight: 900; line-height: .99; letter-spacing: -.055em; background: linear-gradient( 118deg, #8a5a13 0%, #f2d992 21%, #b77c21 40%, #fff0b5 55%, #986017 75%, #e5bf66 100% ); background-clip: text; -webkit-background-clip: text; color: #dcac56; -webkit-text-fill-color: transparent; } #cp-article .cp-card-3d.no-foil .cp-foil-mark { background: none; color: var(--print); -webkit-text-fill-color: currentColor; } #cp-article .cp-spot-mark { display: inline-block; margin-top: 12px; padding: 4px 7px; font-size: clamp(6px, .8vw, 9px); font-weight: 800; letter-spacing: .19em; line-height: 1.4; color: var(--print); background: linear-gradient( 115deg, rgba(255,255,255,.03), rgba(255,255,255,.42), rgba(255,255,255,.04) ); border: 1px solid rgba(255,255,255,.20); border-radius: 3px; box-shadow: inset 0 1px 3px rgba(255,255,255,.15); } #cp-article .cp-card-3d.no-spot .cp-spot-mark { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } #cp-article .cp-card-bottom, #cp-article .cp-back-bottom { gap: 10px; font-size: clamp(6px, .8vw, 9px); letter-spacing: .07em; line-height: 1.4; } #cp-article .cp-back-top { font-size: clamp(10px, 1.4vw, 17px); font-weight: 800; letter-spacing: -.025em; } #cp-article .cp-back-top span { font-size: 10px; } #cp-article .cp-back-content { display: flex; flex-direction: column; gap: 12px; justify-content: center; flex: 1; position: relative; z-index: 2; } #cp-article .cp-back-content strong { font-size: clamp(21px, 3.4vw, 37px); font-weight: 900; line-height: 1.03; letter-spacing: -.045em; } #cp-article .cp-back-content > span:last-child { font-size: clamp(7px, .9vw, 10px); line-height: 1.6; letter-spacing: .10em; } #cp-article .cp-back-line { display: block; width: 32%; height: 2px; background: currentColor; opacity: .55; } #cp-article .cp-surface-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 125deg, transparent 14%, rgba(255,255,255,.04) 25%, rgba(255,255,255,.56) 44%, rgba(255,255,255,.06) 53%, transparent 70% ); opacity: .11; mix-blend-mode: screen; } #cp-article .cp-card-3d.is-gloss .cp-surface-shine { opacity: .75; } #cp-article .cp-card-3d.is-matte .cp-card-face { background-image: repeating-linear-gradient( 35deg, rgba(255,255,255,.014) 0px, transparent 2px, rgba(0,0,0,.012) 4px ); } #cp-article .cp-viewer-bottom { position: absolute; bottom: 16px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9eafc9; font-size: 10px; letter-spacing: .12em; font-weight: 700; pointer-events: none; } #cp-article .cp-viewer-point { color: #77a4ff; font-size: 14px; } /* ========================================== VIEWER ACTIONS ========================================== */ #cp-article .cp-viewer-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } #cp-article .cp-viewer-actions button { flex: 1 1 auto; padding: 10px 12px; background: #fff; border: 1px solid #dce4ef; border-radius: 7px; color: #3b4c66; font-size: 13px; font-weight: 700; cursor: pointer; } #cp-article .cp-viewer-actions button:hover { background: #eef4ff; } #cp-article .cp-viewer-actions button.is-active { background: #193b82; border-color: #193b82; color: #fff; } /* ========================================== CONFIGURATION PANEL ========================================== */ #cp-article .cp-control-panel { min-width: 0; border: 1px solid #e1e7ef; border-radius: 13px; background: #fff; padding: 19px; } #cp-article .cp-control-intro { padding-bottom: 19px; border-bottom: 1px solid var(--cp-line); } #cp-article .cp-control-intro .cp-small-label { color: #5371ad; margin-bottom: 5px; } #cp-article .cp-control-intro strong, #cp-article .cp-control-intro > span:last-child { display: block; } #cp-article .cp-control-intro strong { font-size: 17px; font-weight: 800; margin-bottom: 4px; } #cp-article .cp-control-intro > span:last-child { color: var(--cp-muted); font-size: 12px; line-height: 1.7; } #cp-article .cp-option { border: 0; padding: 19px 0 17px; margin: 0; min-width: 0; border-bottom: 1px solid var(--cp-line); } #cp-article .cp-option legend { display: block; width: 100%; margin: 0; padding: 0; font-size: 13px; font-weight: 800; color: #29354a; } #cp-article .cp-option legend span { color: #537bc4; margin-right: 8px; } #cp-article .cp-choice-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } #cp-article .cp-choice-row button { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 9px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; color: #40506a; font-size: 12px; font-weight: 750; cursor: pointer; } #cp-article .cp-choice-row button.is-active { border-color: #2756c6; background: #edf3ff; color: #1545ae; } #cp-article .cp-swatch { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } #cp-article .cp-swatch-navy { background: #10233d; } #cp-article .cp-swatch-ivory { background: #efeadc; } #cp-article .cp-effect-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } #cp-article .cp-effect-options button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; color: #34445e; font-size: 13px; font-weight: 750; cursor: pointer; } #cp-article .cp-toggle-mark { display: inline-block; position: relative; flex: 0 0 33px; width: 33px; height: 19px; background: #cbd5e1; border-radius: 14px; transition: background .2s; } #cp-article .cp-toggle-mark::after { content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: transform .2s; } #cp-article .cp-effect-options button.is-active .cp-toggle-mark { background: #2759d5; } #cp-article .cp-effect-options button.is-active .cp-toggle-mark::after { transform: translateX(14px); } #cp-article .cp-control-result { margin-top: 18px; padding: 14px; border-radius: 9px; background: #eff4ff; } #cp-article .cp-control-result .cp-small-label { margin-bottom: 6px; color: #4470b9; } #cp-article .cp-control-result strong { display: block; font-size: 13px; line-height: 1.6; color: #183b82; } #cp-article .cp-control-result p { font-size: 12px; line-height: 1.7; color: #50678a; margin: 7px 0 0; } #cp-article .cp-demo-disclaimer { margin: 14px 0 0; font-size: 12px; color: #64748b; line-height: 1.85; } /* ========================================== FEATURE CARDS ========================================== */ #cp-article .cp-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 27px 0; } #cp-article .cp-feature-card { background: #f2f5fa; border: 1px solid #e1e7f0; border-radius: 12px; padding: 24px; } #cp-article .cp-feature-card-dark { background: #172746; border-color: #172746; color: #fff; } #cp-article .cp-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #dbe7ff; border-radius: 10px; color: #214db5; font-size: 18px; font-weight: 900; } #cp-article .cp-feature-card-dark .cp-feature-icon { background: #31518e; color: #fff; } #cp-article .cp-feature-card h3 { margin: 20px 0 10px; } #cp-article .cp-feature-card-dark h3 { color: #fff; } #cp-article .cp-feature-card p { margin: 0; font-size: 14px; line-height: 1.9; } #cp-article .cp-feature-card-dark p { color: #d5e0f4; } /* ========================================== CALLOUTS ========================================== */ #cp-article .cp-callout { padding: 24px 26px; margin: 28px 0; border-left: 4px solid #315ed0; border-radius: 0 11px 11px 0; background: #edf3ff; } #cp-article .cp-callout-label { display: block; color: #2753b1; font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 10px; } #cp-article .cp-callout p { margin: 0; color: #28416d; font-size: 15px; } #cp-article .cp-callout-amber { background: #fff8eb; border-left-color: #d49b3e; } #cp-article .cp-callout-amber .cp-callout-label { color: #9f6521; } #cp-article .cp-callout-amber p { color: #695033; } #cp-article .cp-inline-insight { margin: 24px 0; padding: 23px 25px; border: 1px solid #dce5f1; border-radius: 11px; background: #f7faff; } #cp-article .cp-inline-insight > strong { display: block; color: #2554b7; font-size: 13px; margin-bottom: 7px; } #cp-article .cp-inline-insight p { margin: 0; font-size: 15px; } /* ========================================== DATA TABLES ========================================== */ #cp-article .cp-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin: 22px 0 26px; border: 1px solid #e0e7ef; border-radius: 10px; } #cp-article .cp-data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.75; } #cp-article .cp-data-table th, #cp-article .cp-data-table td { padding: 14px 17px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e7edf3; } #cp-article .cp-data-table thead th { background: #eff3f9; color: #253c61; font-size: 13px; font-weight: 800; } #cp-article .cp-data-table tbody th { color: #203d77; font-weight: 800; background: #fafcff; } #cp-article .cp-data-table tbody tr:last-child th, #cp-article .cp-data-table tbody tr:last-child td { border-bottom: 0; } /* ========================================== RENDERING PIPELINE ========================================== */ #cp-article .cp-pipeline { display: flex; align-items: stretch; gap: 5px; margin: 28px 0 13px; } #cp-article .cp-pipeline-card { flex: 1 1 0; min-width: 0; padding: 16px 10px; border-radius: 9px; background: #122445; color: #fff; text-align: center; } #cp-article .cp-pipeline-card span, #cp-article .cp-pipeline-card strong, #cp-article .cp-pipeline-card small { display: block; } #cp-article .cp-pipeline-card span { font-size: 11px; color: #8eb5ff; margin-bottom: 9px; } #cp-article .cp-pipeline-card strong { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; } #cp-article .cp-pipeline-card small { margin-top: 7px; font-size: 11px; line-height: 1.6; color: #b9c8e1; } #cp-article .cp-pipeline-arrow { align-self: center; flex: 0 0 15px; color: #4775d3; font-size: 20px; font-weight: 700; text-align: center; } #cp-article .cp-subnote { color: #718096; font-size: 12px; line-height: 1.8; margin: 9px 0 24px; } /* ========================================== NUMBERED STEPS ========================================== */ #cp-article .cp-steps { margin: 23px 0 26px; padding: 0 0 0 27px; } #cp-article .cp-steps li { padding: 0 0 20px 12px; margin: 0 0 18px; border-bottom: 1px solid var(--cp-line); } #cp-article .cp-steps li::marker { color: #2759cd; font-weight: 800; } #cp-article .cp-steps li > strong { display: block; font-size: 16px; margin-bottom: 6px; } #cp-article .cp-steps li p { font-size: 15px; margin-bottom: 0; } /* ========================================== FINISHING SAMPLES ========================================== */ #cp-article .cp-finish-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 27px 0 8px; } #cp-article .cp-finish-card { min-width: 0; padding: 11px; border: 1px solid #e3e8f0; background: #fff; border-radius: 10px; } #cp-article .cp-finish-sample { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.45; width: 100%; border-radius: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 900; letter-spacing: .02em; overflow: hidden; } #cp-article .cp-finish-matte { background: #26354d; color: #eef0f5; } #cp-article .cp-finish-gloss { background: linear-gradient( 128deg, #172946 9%, #526c9b 36%, #c0d4f8 44%, #233c65 51%, #152440 80% ); color: #fff; } #cp-article .cp-finish-foil { color: #503008; background: linear-gradient( 117deg, #8d5c19, #fce69a, #b5822c, #fff4bb, #af711c ); } #cp-article .cp-finish-spot { color: #e7efff; background: linear-gradient(120deg, transparent 24%, rgba(255,255,255,.58) 49%, transparent 61%), #18345b; } #cp-article .cp-finish-card > strong { display: block; font-size: 14px; margin-bottom: 5px; } #cp-article .cp-finish-card p { margin: 0; font-size: 12px; line-height: 1.75; color: #627187; } /* ========================================== INTERACTIVE UX LIST ========================================== */ #cp-article .cp-list-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 23px 0; } #cp-article .cp-list-cards > div { border: 1px solid #e2e9f2; border-radius: 11px; padding: 23px; background: #fafcff; } #cp-article .cp-list-cards span { display: block; color: #3f6bd0; font-size: 12px; font-weight: 900; margin-bottom: 12px; } #cp-article .cp-list-cards strong { display: block; font-size: 17px; margin-bottom: 6px; } #cp-article .cp-list-cards p { font-size: 14px; color: #52647f; line-height: 1.85; margin-bottom: 0; } /* ========================================== MEMORY CALCULATOR ========================================== */ #cp-article .cp-calculator { margin: 24px 0 27px; border: 1px solid #d9e4f2; border-radius: 14px; background: #f8fbff; overflow: hidden; } #cp-article .cp-calc-header { padding: 21px 24px; background: #162849; color: #fff; } #cp-article .cp-calc-header .cp-small-label { color: #9fc1ff; margin-bottom: 4px; } #cp-article .cp-calc-header strong { font-size: 19px; line-height: 1.5; } #cp-article .cp-calc-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; padding: 22px; } #cp-article .cp-calc-field { min-width: 0; } #cp-article .cp-calc-field label { display: block; font-size: 13px; font-weight: 800; color: #3d506e; margin-bottom: 9px; } #cp-article .cp-calc-field select { display: block; width: 100%; min-width: 0; border: 1px solid #cdd9e8; border-radius: 7px; background: #fff; padding: 11px; color: #1d2b43; font-size: 14px; cursor: pointer; } #cp-article .cp-calc-output { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0 22px; background: #d9e4f2; border: 1px solid #d9e4f2; border-radius: 9px; overflow: hidden; } #cp-article .cp-calc-output > div { padding: 20px; background: #fff; min-width: 0; } #cp-article .cp-calc-output span { display: block; font-size: 12px; color: #61718a; margin-bottom: 6px; } #cp-article .cp-calc-output strong { display: block; font-size: clamp(19px,3vw,26px); font-weight: 850; color: #2457c7; line-height: 1.5; overflow-wrap: anywhere; } #cp-article .cp-calc-note { padding: 15px 23px 22px; margin: 0; font-size: 12px; line-height: 1.85; color: #64748b; } /* ========================================== CHECKLIST ========================================== */ #cp-article .cp-check-list { padding: 0; margin: 20px 0 27px; list-style: none; } #cp-article .cp-check-list li { position: relative; padding: 12px 0 12px 29px; border-bottom: 1px solid #edf0f4; font-size: 15px; line-height: 1.85; } #cp-article .cp-check-list li::before { content: "✓"; position: absolute; left: 0; top: 14px; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #e6efff; color: #285dc7; font-size: 12px; font-weight: 900; } /* ========================================== ARCHITECTURE DIAGRAM ========================================== */ #cp-article .cp-architecture { margin: 25px 0 12px; padding: 25px; border: 1px solid #dee6f2; border-radius: 13px; background: #f7f9fd; } #cp-article .cp-arch-block { padding: 18px 14px; text-align: center; background: #fff; border: 1px solid #dbe5f1; border-radius: 9px; min-width: 0; } #cp-article .cp-arch-block span, #cp-article .cp-arch-block strong, #cp-article .cp-arch-block small { display: block; } #cp-article .cp-arch-block span { color: #5480cb; font-size: 10px; font-weight: 900; letter-spacing: .1em; margin-bottom: 7px; } #cp-article .cp-arch-block strong { color: #243854; font-size: 15px; line-height: 1.6; } #cp-article .cp-arch-block small { color: #708198; font-size: 11px; line-height: 1.7; margin-top: 5px; } #cp-article .cp-arch-primary { background: #203e76; border-color: #203e76; } #cp-article .cp-arch-primary span { color: #a8caff; } #cp-article .cp-arch-primary strong { color: #fff; } #cp-article .cp-arch-primary small { color: #c5d7f3; } #cp-article .cp-arch-final { border-color: #9cc9b1; background: #ebf8f0; } #cp-article .cp-arch-down { text-align: center; padding: 5px 0; color: #5278ba; font-size: 23px; font-weight: 800; line-height: 1.5; } #cp-article .cp-arch-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } /* ========================================== CODE PANEL ========================================== */ #cp-article .cp-code-panel { margin: 24px 0 27px; border-radius: 12px; background: #111c2e; color: #fff; overflow: hidden; } #cp-article .cp-code-panel > span { display: block; padding: 12px 18px; background: #1d304e; color: #c5d6f3; font-size: 12px; font-weight: 700; } #cp-article .cp-code-panel pre { margin: 0; padding: 22px; overflow-x: auto; max-width: 100%; background: transparent; color: #bce5ca; font-family: Consolas, "Cascadia Code", monospace; font-size: 13px; line-height: 1.8; tab-size: 2; } #cp-article .cp-code-panel code { font: inherit; color: inherit; } #cp-article .cp-code-panel p { color: #9fb1ce; font-size: 12px; line-height: 1.7; padding: 0 19px 18px; margin: 0; } /* ========================================== RELATED LINKS ========================================== */ #cp-article .cp-related { display: flex; flex-direction: column; gap: 11px; padding: 23px; border: 1px solid #dfe7f3; border-radius: 12px; background: #f7faff; margin: 25px 0; } #cp-article .cp-related .cp-small-label { color: #5276b4; margin-bottom: 0; } #cp-article .cp-related a { display: block; padding: 11px 0; border-bottom: 1px solid #dfe8f6; color: #214caa; font-size: 14px; font-weight: 750; } #cp-article .cp-related a:last-child { border-bottom: 0; } /* ========================================== ROADMAP ========================================== */ #cp-article .cp-roadmap { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin: 25px 0; } #cp-article .cp-roadmap > div { padding: 24px; border: 1px solid #dfe6f0; border-radius: 11px; background: #fafcff; } #cp-article .cp-roadmap-stage { display: block; font-size: 11px; font-weight: 900; color: #3462c7; letter-spacing: .08em; margin-bottom: 12px; } #cp-article .cp-roadmap strong { display: block; font-size: 17px; margin-bottom: 9px; } #cp-article .cp-roadmap p { color: #52657f; font-size: 14px; line-height: 1.85; margin: 0; } /* ========================================== CONCLUSION ========================================== */ #cp-article .cp-conclusion-statement { margin: 30px 0 0; padding: clamp(28px,5vw,50px); border-radius: 14px; background: radial-gradient(circle at right top, rgba(91,136,245,.25),transparent 55%), linear-gradient(135deg,#0f1b32,#1c3765); color: #fff; } #cp-article .cp-conclusion-statement > span { display: block; color: #91b6ff; font-size: 11px; letter-spacing: .12em; font-weight: 900; margin-bottom: 16px; } #cp-article .cp-conclusion-statement strong { display: block; font-size: clamp(25px,4vw,37px); font-weight: 850; letter-spacing: -.045em; line-height: 1.45; margin-bottom: 17px; } #cp-article .cp-conclusion-statement p { color: #c8d7ef; margin: 0; font-size: 15px; } /* ========================================== FAQ ========================================== */ #cp-article .cp-faq h3 { padding-top: 23px; border-top: 1px solid #e7ecf3; margin: 24px 0 10px; } #cp-article .cp-faq h3::before { content: "Q."; color: #3264cc; margin-right: 9px; font-weight: 900; } #cp-article .cp-faq h3 + p { margin: 0 0 10px; padding-left: 28px; color: #4c5c72; } /* ========================================== REFERENCES / FOOTER ========================================== */ #cp-article .cp-references { padding-bottom: 38px; } #cp-article .cp-references ul { padding-left: 21px; margin: 18px 0 0; } #cp-article .cp-references li { margin-bottom: 9px; font-size: 14px; line-height: 1.8; } #cp-article .cp-article-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 22px 0 8px; border-top: 1px solid #e2e8f0; color: #8895a6; font-size: 11px; font-weight: 750; letter-spacing: .08em; } /* ========================================== RESPONSIVE / TABLET ========================================== */ @media (max-width: 900px) { #cp-article .cp-demo-layout { grid-template-columns: minmax(0,1fr); } #cp-article .cp-control-panel { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 20px; align-items: start; } #cp-article .cp-control-intro, #cp-article .cp-control-result { grid-column: 1 / -1; } #cp-article .cp-option { border-bottom: 0; } #cp-article .cp-viewer { height: 375px; } } /* ========================================== RESPONSIVE / MOBILE ========================================== */ @media (max-width: 640px) { #cp-article { font-size: 16px; } #cp-article .cp-section { padding-top: 48px; } #cp-article h2 { font-size: 25px; } #cp-article h3 { font-size: 18px; } #cp-article .cp-hero { border-radius: 13px; } #cp-article .cp-hero-inner { padding: 29px 22px; } #cp-article .cp-hero-heading { font-size: clamp(29px,7vw,38px); } #cp-article .cp-hero-lead { font-size: 16px; } #cp-article .cp-hero-summary { padding: 23px 22px; } #cp-article .cp-hero-tags span { font-size: 11px; } #cp-article .cp-demo { padding: 13px; border-radius: 13px; } #cp-article .cp-demo-title { font-size: 19px; } #cp-article .cp-viewer { height: 280px; } #cp-article .cp-card-3d { width: 80%; } #cp-article .cp-card-3d .cp-foil-mark { font-size: clamp(21px,5.7vw,32px); } #cp-article .cp-card-3d .cp-back-content strong { font-size: clamp(18px,5vw,30px); } #cp-article .cp-viewer-actions button { font-size: 12px; padding: 9px 7px; } #cp-article .cp-control-panel { display: block; padding: 17px; } #cp-article .cp-option { border-bottom: 1px solid #e7edf4; } #cp-article .cp-feature-grid, #cp-article .cp-list-cards, #cp-article .cp-roadmap { grid-template-columns: minmax(0,1fr); } #cp-article .cp-feature-card, #cp-article .cp-list-cards > div, #cp-article .cp-roadmap > div { padding: 20px; } #cp-article .cp-finish-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #cp-article .cp-pipeline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } #cp-article .cp-pipeline-arrow { display: none; } #cp-article .cp-pipeline-card { padding: 16px 8px; } #cp-article .cp-arch-grid { grid-template-columns: minmax(0,1fr); } #cp-article .cp-architecture { padding: 14px; } #cp-article .cp-calc-grid, #cp-article .cp-calc-output { grid-template-columns: minmax(0,1fr); } #cp-article .cp-calc-grid { padding: 17px; } #cp-article .cp-calc-output { margin: 0 17px; } #cp-article .cp-calc-output > div { padding: 16px; } #cp-article .cp-callout { padding: 20px; } #cp-article .cp-conclusion-statement { padding: 30px 23px; } #cp-article .cp-article-end { flex-direction: column; } } /* ========================================== REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { #cp-article .cp-card-3d, #cp-article .cp-toggle-mark, #cp-article .cp-toggle-mark::after { transition: none; } } 24:T2aa5, /* ========================================== CONNECTED PRINT KR INTERACTIVE 3D PREVIEW Scoped HTML Standard v1.0 ========================================== */ (function () { "use strict"; const root = document.getElementById("cp-article"); if (!root) return; // 중복 이벤트 등록 방지 if (root.dataset.cpInitialized === "true") return; root.dataset.cpInitialized = "true"; const card = root.querySelector("[data-cp-card]"); const stage = root.querySelector("[data-cp-stage]"); const summary = root.querySelector("[data-cp-summary]"); const description = root.querySelector("[data-cp-description]"); const resolutionSelect = root.querySelector("[data-cp-resolution]"); const countSelect = root.querySelector("[data-cp-count]"); const memoryOutput = root.querySelector("[data-cp-memory]"); const pixelsOutput = root.querySelector("[data-cp-pixels]"); /* ======================================== 01 / STATE ======================================== */ const defaults = { color: "navy", finish: "matte", foil: true, spot: true, view: "angle", rotateX: -12, rotateY: -27, zoom: 1 }; const state = Object.assign({}, defaults); const cameraPresets = { front: { x: 0, y: 0 }, angle: { x: -12, y: -27 }, back: { x: -8, y: 180 } }; /* ======================================== 02 / HELPERS ======================================== */ function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } function setActiveButton(buttons, currentValue, attribute) { buttons.forEach(function (button) { const active = button.getAttribute(attribute) === currentValue; button.classList.toggle("is-active", active); button.setAttribute("aria-pressed", String(active)); }); } function setEffectButton(effect, enabled) { const button = root.querySelector('[data-cp-effect="' + effect + '"]'); if (!button) return; button.classList.toggle("is-active", enabled); button.setAttribute("aria-pressed", String(enabled)); } /* ======================================== 03 / CARD TRANSFORMATION ======================================== */ function updateTransform() { if (!card) return; card.style.setProperty("--rx", state.rotateX + "deg"); card.style.setProperty("--ry", state.rotateY + "deg"); card.style.setProperty("--zoom", String(state.zoom)); } function setCameraView(view) { const preset = cameraPresets[view]; if (!preset) return; state.view = view; state.rotateX = preset.x; state.rotateY = preset.y; updateTransform(); updateViewButtons(); } function updateViewButtons() { setActiveButton( root.querySelectorAll("[data-cp-view]"), state.view, "data-cp-view" ); } /* ======================================== 04 / MATERIAL UPDATE ======================================== */ function updateMaterial() { if (!card) return; card.classList.toggle("is-ivory", state.color === "ivory"); card.classList.toggle("is-matte", state.finish === "matte"); card.classList.toggle("is-gloss", state.finish === "gloss"); card.classList.toggle("no-foil", !state.foil); card.classList.toggle("no-spot", !state.spot); setActiveButton( root.querySelectorAll("[data-cp-color]"), state.color, "data-cp-color" ); setActiveButton( root.querySelectorAll("[data-cp-finish]"), state.finish, "data-cp-finish" ); setEffectButton("foil", state.foil); setEffectButton("spot", state.spot); updateSummary(); } function updateSummary() { const colorName = state.color === "navy" ? "딥 네이비" : "아이보리"; const finishName = state.finish === "matte" ? "무광" : "유광"; const options = [colorName, finishName]; if (state.foil) options.push("금박"); if (state.spot) options.push("Spot UV"); if (summary) { summary.textContent = options.join(" · "); } if (description) { if (state.foil && state.spot) { description.textContent = "금박과 Spot UV를 함께 적용한 시각 시뮬레이션입니다. " + "실제 반사 특성과 생산 결과는 다를 수 있습니다."; } else if (state.foil) { description.textContent = "금속성 하이라이트를 이용해 금박 외관을 표현합니다."; } else if (state.spot) { description.textContent = "부분 광택을 강조한 Spot UV 시뮬레이션입니다."; } else { description.textContent = "선택한 종이 색상과 코팅을 적용한 기본 디자인 프리뷰입니다."; } } } /* ======================================== 05 / FRONT / ANGLE / BACK ======================================== */ root.querySelectorAll("[data-cp-view]").forEach(function (button) { button.addEventListener("click", function () { const view = button.getAttribute("data-cp-view"); setCameraView(view); }); }); /* ======================================== 06 / PAPER COLOR ======================================== */ root.querySelectorAll("[data-cp-color]").forEach(function (button) { button.addEventListener("click", function () { const value = button.getAttribute("data-cp-color"); if (value !== "navy" && value !== "ivory") return; state.color = value; updateMaterial(); }); }); /* ======================================== 07 / MATTE / GLOSS ======================================== */ root.querySelectorAll("[data-cp-finish]").forEach(function (button) { button.addEventListener("click", function () { const value = button.getAttribute("data-cp-finish"); if (value !== "matte" && value !== "gloss") return; state.finish = value; updateMaterial(); }); }); /* ======================================== 08 / FINISHING TOGGLES ======================================== */ root.querySelectorAll("[data-cp-effect]").forEach(function (button) { button.addEventListener("click", function () { const effect = button.getAttribute("data-cp-effect"); if (effect === "foil") { state.foil = !state.foil; } else if (effect === "spot") { state.spot = !state.spot; } else { return; } updateMaterial(); }); }); /* ======================================== 09 / POINTER ROTATION Mouse and touch interaction ======================================== */ if (stage && card) { let drag = null; stage.addEventListener("pointerdown", function (event) { if (event.pointerType === "mouse" && event.button !== 0) { return; } drag = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, startX: state.rotateX, startY: state.rotateY }; stage.classList.add("is-dragging"); if (typeof stage.setPointerCapture === "function") { try { stage.setPointerCapture(event.pointerId); } catch (error) { // 일부 브라우저의 포인터 캡처 제한을 허용 } } }); stage.addEventListener("pointermove", function (event) { if (!drag || event.pointerId !== drag.pointerId) { return; } const deltaX = event.clientX - drag.x; const deltaY = event.clientY - drag.y; state.rotateY = drag.startY + deltaX * 0.55; state.rotateX = clamp( drag.startX - deltaY * 0.35, -45, 45 ); state.view = "custom"; updateTransform(); updateViewButtons(); }); function endDrag(event) { if (!drag) return; if ( event && typeof event.pointerId === "number" && event.pointerId !== drag.pointerId ) { return; } drag = null; stage.classList.remove("is-dragging"); } stage.addEventListener("pointerup", endDrag); stage.addEventListener("pointercancel", endDrag); stage.addEventListener("lostpointercapture", endDrag); /* ====================================== 10 / KEYBOARD ACCESSIBILITY ====================================== */ stage.addEventListener("keydown", function (event) { let handled = true; switch (event.key) { case "ArrowLeft": state.rotateY -= 12; break; case "ArrowRight": state.rotateY += 12; break; case "ArrowUp": state.rotateX = clamp(state.rotateX - 8, -45, 45); break; case "ArrowDown": state.rotateX = clamp(state.rotateX + 8, -45, 45); break; case "Home": setCameraView("angle"); return; default: handled = false; } if (!handled) return; event.preventDefault(); state.view = "custom"; updateTransform(); updateViewButtons(); }); } /* ======================================== 11 / RESET ======================================== */ const resetButton = root.querySelector("[data-cp-reset]"); if (resetButton) { resetButton.addEventListener("click", function () { Object.assign(state, defaults); updateTransform(); updateViewButtons(); updateMaterial(); }); } /* ======================================== 12 / TEXTURE MEMORY CALCULATOR RGBA8 uncompressed estimate ======================================== */ function calculateMemory() { if (!resolutionSelect || !countSelect) { return; } const resolution = Number(resolutionSelect.value); const count = Number(countSelect.value); if ( !Number.isFinite(resolution) || !Number.isFinite(count) || resolution <= 0 || count <= 0 ) { return; } const totalPixels = resolution * resolution * count; // RGBA8 = 4 bytes per pixel const totalBytes = totalPixels * 4; // MiB = 1024 * 1024 bytes const memoryMiB = totalBytes / (1024 * 1024); if (memoryOutput) { memoryOutput.textContent = memoryMiB.toLocaleString("ko-KR", { maximumFractionDigits: 2 }) + " MiB"; } if (pixelsOutput) { pixelsOutput.textContent = totalPixels.toLocaleString("ko-KR"); } } if (resolutionSelect) { resolutionSelect.addEventListener("change", calculateMemory); } if (countSelect) { countSelect.addEventListener("change", calculateMemory); } /* ======================================== 13 / INITIAL RENDER ======================================== */ updateTransform(); updateViewButtons(); updateMaterial(); calculateMemory(); })(); 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-00851ce4-d956-480f-bcbe-92f4544b3176",{"id":"b-00851ce4-d956-480f-bcbe-92f4544b3176","children":["$","$L21",null,{"block":{"id":"b-00851ce4-d956-480f-bcbe-92f4544b3176","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."]}]]}]]}]]}]}]