문제
고객사는 인쇄 제품과 소셜 미디어 게시물을 위한 온라인 디자인 서비스를 제공하며, 대형 브라우저 기반 디자인 툴과 경쟁하고 있습니다. 고객사 조사 결과, 사용자들이 하나의 디자인에 대해 여러 버전(예: 포스터 시안 두 가지)을 만드는 경우가 많다는 사실이 확인되었습니다. 기존 툴에서는 각 디자인이 별도 페이지에 존재했기 때문에 버전을 비교하려면 페이지를 앞뒤로 전환해야 했고, 이는 속도가 느리고 실수하기 쉬웠습니다. 고객사는 여러 디자인을 한 페이지에 표시하고 빠르게 전환할 수 있는 방법을 원했습니다.
Netbase가 구축한 기능
-
미리보기
에디터 오른쪽에 위치한 바가 모든 디자인 페이지를 위에서 아래 순서로 썸네일로 표시하며, 목록이 길면 스크롤됩니다.
-
단축 이동
썸네일을 클릭하면 해당 디자인으로 바로 이동합니다.
-
페이지 추가
새 페이지 버튼을 누르면 현재 페이지 바로 아래에 빈 디자인이 추가됩니다.
-
인쇄 페이지 선택
사용자가 만든 디자인 중 인쇄할 디자인만 체크하여 선택할 수 있습니다.
-
다운로드
같은 바에서 디자인을 다운로드할 수 있습니다.
-
바 숨기기
바가 작업 공간을 차지한다는 점을 디자인 팀이 발견한 후 제안한 기능으로, 전체 캔버스가 필요할 때 바를 숨길 수 있습니다.
작업 납품 방식
고객사가 개발팀에 아이디어를 설명하면, 개발팀은 바를 사용자가 버전을 비교하는 방식에 맞춰 오른쪽에 배치하고 관련 액션 세트를 설계했습니다. 개념 구상, 디자인, 개발, 개선까지 약 1주일이 소요되었으며, 테스트 팀이 각 액션을 검수한 후 인도했습니다. 바는 기존 에디터 위에서 동작하므로 사용자는 이미 익숙한 템플릿, 텍스트, 이미지 도구를 그대로 사용할 수 있습니다.
주장하지 않는 사항
공개된 내용은 고객사의 기능에 대한 기대치를 설명한 것으로, 측정된 결과가 아닙니다. 따라서 이 기록에는 매출, 트래픽, 전환율 수치가 포함되지 않습니다. 미리보기 바는 인터페이스 작업이며 AI 기능이 아닙니다.
관련 사례 및 다음 단계
초대장 인쇄업체의 제품 디자이너가 주문 흐름에 맞게 맞춤 개발된 사례와 인쇄 가게의 새 제품 페이지 및 에디터 도구 업그레이드 사례를 확인하세요. 전체 사례 목록은 웹투프린트 고객 사례에서 볼 수 있습니다.
제품 개인화와 웹투프린트 플랫폼 솔루션은 에디터 기능을 다루며, 웹투프린트 플랫폼 가이드에서 기획 방법을 설명합니다. 디자인 에디터 자체 개발 vs. 구매 가이드는 에디터 확장과 신규 개발을 비교하며, 스토어 플랫폼 정보는 커머스 및 엔터프라이즈 기술 페이지에 있습니다. Netbase 작업 사례를 더 보거나 유사 프로젝트 검토를 위해 Netbase에 문의하세요.
출처
- 디자인 미리보기 바에 관한 CMSmart 커뮤니티 사례(2023년 2월), Netbase 케이스 스터디 목록에 기록됨. 고객사 이름이 포함되어 있어 주소는 여기에 반복하지 않습니다.
- David(CEO)가 제공한 Netbase 케이스 스터디 목록; David(CEO)가 2026-09-17에 게재 확인(F142).
- MDN Web Docs, Canvas API, https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API (2026-09-17 접근): 브라우저 기반 디자인 에디터가 페이지와 썸네일을 그리는 방식.
- MDN Web Docs, HTMLCanvasElement toBlob() 메서드, https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob (2026-09-17 접근): 브라우저 에디터가 그려진 디자인을 다운로드 가능한 이미지 파일로 변환하는 방식.
프로젝트 논의
Netbase JSC는 조직이 디지털 제품과 AI 기반 비즈니스 시스템을 설계, 구축, 현대화 및 운영할 수 있도록 지원합니다.+84 937 869 689
91 Nguyen Chi Thanh, Dong Da, Hanoi, Vietnam
연락하기
구축, 현대화 또는 운영하고자 하는 내용을 알려주세요.