Custom product system · 2026

한 장의 시안을 만드는 일이
하나의 제작 시스템이 되기까지.

디자인스트링은 완성된 디자인을 진열하는 쇼핑몰이 아닙니다. 고객이 사원증 목걸이와 카드를 직접 만들고 그 결과를 저장해 실제 제작으로 넘기는 웹 기반 시안 제작 스튜디오입니다.

StrategyUX · UIFrontend · BackendRendering · PDFLive service
디자인스트링 시안 제작 스튜디오 메인 화면

선택 하나가
제작 결과를 바꿉니다.

제품 형태와 폭이 바뀌면 렌더와 부자재 결합도 함께 달라져야 합니다. 화면에서 확정한 앞·뒷면 시안은 저장과 출력까지 같은 상태로 이어져야 합니다.

01 · PRODUCT STATE

제품 선택이 렌더 전체를 바꿉니다

단고리형·양고리형·릴홀더형과 줄 폭에 따라 띠의 길이·접합부·고리·마감 자산이 함께 바뀝니다.

02 · TWO SIDES

앞면과 뒷면을 따로 만들고 같이 봅니다

색상·문구·로고·패턴을 양면에 적용하면서 실제 착용 형태와 인쇄 영역을 동시에 확인합니다.

03 · PRODUCTION DATA

보이는 시안이 제작 정보가 됩니다

완성된 구성을 회원 계정에 저장하고 다시 편집하며 제작 문의와 PDF 출력까지 이어지게 했습니다.

아래 화면은
영상이 아닙니다.

지금 운영 중인 실제 편집기입니다. 제품 형태와 폭을 바꾸고 다음 단계에서 색상·문구·부자재를 선택해 보세요. 체험 중인 선택은 저장되지 않습니다.

DESIGNSTRING · LIVE PRODUCT STUDIO전체 화면 ↗
실제 운영 편집기 · designlanyard.co.kr저장·제작 문의는 로그인 이후 진행됩니다.

시안에서 제작까지
한 흐름으로.

제품 선택·편집·저장·제작 문의를 한 흐름으로 연결했습니다. 기존 회원·주문 구조는 그대로 유지했습니다.

01

제품 선택

사원증 목걸이와 카드 중 필요한 제품에서 시작합니다.

02

실시간 편집

디자인·규격·문구·사진·로고·부자재를 화면에서 조정합니다.

03

저장과 재편집

회원 계정에 시안을 저장하고 나중에 같은 상태로 불러옵니다.

04

제작 전달

확정한 선택을 제작 문의와 출력 문서로 연결합니다.

네 개의 층이
한 제품처럼 움직입니다.

인터페이스·렌더링·계정·출력 중 하나라도 어긋나면 화면과 제작 결과가 달라집니다. 네 층을 같은 제품 규칙으로 묶었습니다.

Interface

하나의 Product Studio

메인·로그인·회원가입·작업공간·두 편집기의 정보 위계와 조작 문법을 통일했습니다.

Rendering

실제 조합을 보여주는 시안 엔진

제품 규격과 양면 디자인을 SVG·이미지 자산에 결합해 선택 직후의 제작 모습을 실시간으로 구성합니다.

Account

작업이 사라지지 않는 계정 흐름

로그인한 사용자가 여러 시안을 저장하고 마이페이지에서 다시 열어 이어서 편집할 수 있게 했습니다.

Output

화면과 제작을 잇는 출력

확정 시안을 PDF로 내보내고 주문·관리 화면이 같은 구성 정보를 읽도록 연결했습니다.

고객이 본 시안이
그대로 제작으로.

계정과 두 편집기를 같은 제품 언어로 정리했습니다. 운영자는 고객이 확정한 정보와 시안을 그대로 받습니다.

시안 왕복은 줄이고
제작 정보는 정확하게.

고객은 완성 모습을 확인한 뒤 결정합니다. 상담은 반복 설명을 줄이고 제작팀은 구조화된 옵션을 받습니다.

고객

디자인 파일이 없어도 완성 모습을 확인한 뒤 제작을 결정할 수 있습니다.

상담

색상·규격·부자재를 말로 다시 확인하는 대화를 구체적인 시안으로 바꿉니다.

제작

고객이 확정한 조합과 양면 디자인을 같은 데이터와 출력물로 전달받습니다.

사업

다른 주문제작 제품을 추가할 수 있는 계정·편집·저장 구조를 확보합니다.

완성된 화면을 보여준 것이 아니라
실제 제작이 시작되는 화면을 만들었습니다.

BUILD THE
REAL THING.

보기 좋은 소개 페이지를 넘어 견적·편집·예약·주문처럼 실제 업무가 움직이는 웹 시스템이 필요하다면 프로젝트를 알려주세요.

프로젝트 문의하기