CASE STUDY
다잇다
전단지·인쇄물 온라인 주문 쇼핑몰
Overview
프로젝트 개요
전단지, 종이자석, 명함, 배너 등 인쇄물을 온라인으로 주문·제작하는 이커머스 쇼핑몰 및 관리자 시스템.
Background
제작 워크플로우를 온라인 커머스로
다잇다는 전단지·종이자석·명함·봉투·배너/현수막까지, 종류마다 규격과 인쇄 옵션이 제각각인 인쇄물을 하나의 온라인 스토어에서 주문 제작하는 커머스 플랫폼입니다. 인쇄물은 일반 공산품과 달리 '규격 선택 → 시안 제작 → 확인 → 인쇄 → 배송'이라는 제작 워크플로우를 반드시 거칩니다.
다잇다는 이 복잡한 주문 제작 과정을 오프라인 상담 없이 온라인에서 완결하는 것을 목표로 삼았고, 여러 체인점·지사가 각자의 판매 채널을 운영하는 구조까지 담아야 했습니다. 따라서 단순 장바구니 쇼핑몰이 아니라 다품종 옵션 관리·시안 커뮤니케이션·다단계 주문 상태 관리를 모두 소화하는 설계가 요구되었습니다. O2O Mate는 고객이 마주하는 쇼핑몰 프론트엔드와 운영을 지탱하는 백오피스를 함께 구축했습니다.
Approach
다품종 SKU와 제작형 주문을 감당하는 설계
제작형 커머스를 위한 네 가지 축
다품종 SKU · 3단 계층 카테고리
품목마다 규격·옵션 조합이 폭발적으로 늘어나는 인쇄물을 다루기 위해 1·2·3차 계층 카테고리와 관계형 스키마(MySQL)를 채택했습니다.
OAuth 소셜 로그인
회원 진입 장벽을 낮추기 위해 이메일 로그인 외에 구글·카카오·네이버·애플 소셜 로그인을 붙였습니다.
다단계 주문 워크플로우
결제 완료로 끝나지 않고 시안·인쇄·배송까지 이어지는 제작형 주문을 상태 머신으로 구현했습니다.
멀티 채널 (분양몰 전환)
여러 체인점을 하나의 관리자에서 전환하며 운영하는 멀티 채널 구조를 지원합니다.
System 01
소비자 쇼핑몰 — 소셜 로그인 한 번으로 주문에서 시안 확인까지
소비자 쇼핑몰은 상단 카테고리(전단지·종이자석·명함쿠폰·자석쿠폰·봉투/명함·배너/현수막·손편지·기타)와 아이콘 바로가기, 히어로 슬라이더, 베스트 콘텐츠, 카테고리별 상품 리스트로 구성됩니다. 상품 상세에서는 규격·수량·자석·추가내용·건수를 선택해 총 금액을 산정하고, 주문하기·장바구니·견적서 출력으로 연결됩니다. 회원은 이메일 로그인 외에 구글·카카오·네이버·애플 소셜 로그인으로 간편하게 가입할 수 있습니다.
상단 카테고리 내비게이션, 히어로 슬라이더, 카테고리 아이콘 바로가기, 베스트 콘텐츠로 구성된 쇼핑몰 메인
카테고리(종이자석)별 상품 리스트 — 대표 이미지와 함께 상품을 나열
규격·수량·자석·추가내용·건수를 선택해 총 금액을 산정하고 주문하기·장바구니·견적서출력으로 연결되는 상품 상세
장바구니 — 상품금액·할인금액·배송비를 합산해 총결제 금액을 산정 (제품금액 110,000원 예시)
이메일 로그인/회원가입과 구글·카카오·네이버·애플 소셜 로그인을 제공하는 로그인 모달
모바일 반응형
System 02
관리자 백오피스 — 주문 처리 파이프라인
백오피스의 핵심은 주문 처리 파이프라인입니다. 대시보드는 신규주문접수·주문확인·시안진행·시안결정·작업진행·신규작업댓글·배송진행을 실시간 카드로 집계합니다. 주문관리 화면(전체 212건 규모)은 지사·지점·카테고리(대/중/소)·결제방법·입금확인·기간 필터와, 미결제→작업진행→배송진행→배송완료로 이어지는 상태 변경, 시안 확인 문자 발송(앞면·뒷면 시안 첨부), 택배사·송장번호 입력, 엑셀 다운로드를 제공합니다. 주문 상세에서는 주문자·배송지·결제 정보(총 상품 금액·배송비·사용 포인트·미수금·현금영수증/세금계산서)를 한 화면에서 다룹니다.
대시보드 · 주문관리 · 시안 커뮤니케이션
제품 관리에서는 1·2·3차 카테고리를 계층으로 구성하고 노출순위·메뉴바 노출·노출 여부·옵션을 세밀하게 제어합니다. 예컨대 '종이자석'은 별사이즈·네네피자·양면·단면 등 하위 규격으로 갈라지며, 카테고리별 대표 이미지와 배너까지 관리자가 직접 편집합니다. 브랜드(체인점) 관리에서는 여러 체인점을 등록·전환하며 운영하는 멀티 채널 구조를 지원합니다.
SKU 카테고리 · 이미지 · 체인점 관리
Design System
관찰된 컬러 팔레트
쇼핑몰의 브랜드 레드와 주문·결제 액션의 오렌지, 관리자 백오피스의 블루가 소비자 프론트와 운영 시스템을 구분하면서도 하나의 서비스로 묶습니다. 아래 스와치는 실제 구축된 화면에서 관찰한 대표 색상입니다.
브랜드 컬러 (화면 관찰 기준)
Result
전화·대면 상담에서 온라인 셀프 주문으로
O2O Mate는 소비자 쇼핑몰과 관리자 백오피스를 통합 구축했습니다. HTML·CSS·JavaScript 기반의 서버 렌더링 프론트엔드에 PHP·MySQL 백엔드를 조합했고, 상품·카테고리 설계, 소셜 로그인 연동, 시안 확인 문자 발송을 포함한 주문 파이프라인, 배송·정산(세금계산서·미수금) 관리, 체인점 단위 운영 도구까지 커머스 운영의 처음과 끝을 하나의 시스템으로 엮었습니다.
그 결과 다잇다는 전화·대면 상담에 의존하던 인쇄물 주문 제작을 온라인 셀프 주문으로 전환하고, 흩어져 있던 주문·시안·배송 정보를 단일 관리 화면에 집약했습니다. 관리자는 대시보드만으로 진행 병목을 파악하고, 소비자는 소셜 로그인 한 번으로 주문에서 시안 확인까지 완결합니다. 복잡한 옵션 구조와 제작 공정을 가진 업종에도 표준화된 온라인 커머스가 충분히 작동함을 보여준 사례입니다.