고객이 상품에 직접 로고를 얹어 주문하는 커스텀 상품 쇼핑몰을 구축했습니다. 웹 로고 편집기를 직접 개발하고, 기존 쇼핑몰 솔루션과 주문 흐름을 연결했습니다. 1) 서비스 구성 - 로고 에디터: 상품 이미지 위에 로고ㆍ문구를 올리고 위치ㆍ크기ㆍ색을 조정 - 커스텀 주문: 편집 결과를 주문에 담아 제작 요청으로 전달 - 제작 가이드: 인쇄 가능 영역과 권장 사양을 편집 중에 안내 - 솔루션 연계: 기존 쇼핑몰 솔루션의 상품ㆍ주문ㆍ관리 기능과 연결 2) 담당 범위 - Vue 기반 로고 편집기 개발 - PHP 기반 서버와 주문 커스텀 처리 - 쇼핑몰 솔루션 관리도구와의 연계 - 편집 결과 저장과 제작용 파일 생성 3) 기술적 이슈와 해결 - 화면에서 본 모습과 실제 인쇄 결과가 달라지지 않도록, 편집 좌표를 비율로 저장하고 제작용 파일은 인쇄 해상도로 다시 만들었습니다. - 기존 솔루션의 주문 구조를 바꾸기 어려워, 커스텀 정보를 주문에 덧붙이는 방식으로 연결해 기존 관리 기능을 그대로 쓸 수 있게 했습니다. - 편집 중 이탈이 잦아, 작업 내용을 자동 저장해 다시 들어와도 이어서 편집할 수 있게 했습니다. [배경과 목표] 1) 문제점 - 커스텀 주문을 받으려면 고객이 시안 파일을 따로 보내야 해 절차가 번거로움 - 화면에서 본 시안과 실제 인쇄 결과가 달라 재작업이 발생 - 기존 쇼핑몰 솔루션에는 커스텀 주문을 담을 방법이 없음 2) 프로젝트 목표 - 고객이 웹에서 직접 로고를 얹어 바로 주문 - 화면 시안과 인쇄 결과의 차이 최소화 - 기존 솔루션의 상품ㆍ주문ㆍ관리 기능은 그대로 활용 3) 주안점 - 편집 좌표를 비율로 저장해 해상도에 맞춰 재생성 - 기존 주문 구조를 건드리지 않는 연계 방식 - 편집 중 작업 내용 자동 저장 [주요 기능] - 웹 로고 에디터: 상품 이미지 위에 로고와 문구를 올리고 위치ㆍ크기ㆍ색을 조정합니다. 작업 내용은 자동 저장돼 이어서 편집할 수 있습니다. - 인쇄 해상도 제작 파일 생성: 편집 좌표를 비율로 저장하고 제작용 파일은 인쇄 해상도로 다시 만들어, 화면 시안과 인쇄 결과의 차이를 줄였습니다. - 기존 쇼핑몰 솔루션 연계: 커스텀 정보를 주문에 덧붙이는 방식으로 연결해, 기존 솔루션의 상품ㆍ주문ㆍ관리 기능을 그대로 사용합니다. [성과] - 시안 파일 주고받는 단계 제거: 고객이 웹에서 직접 로고를 얹어 주문하면서, 시안 파일을 따로 주고받던 과정 없이 주문 접수부터 제작 요청까지 이어집니다. - 화면 시안과 인쇄물 차이 최소화: 편집 좌표를 비율로 저장하고 제작 파일은 인쇄 해상도로 다시 만들어, 시안과 결과물이 달라 재작업하던 문제를 줄였습니다. [진행 과정] - 2021.01. 요구사항 정의: 커스텀 가능한 상품과 인쇄 영역, 주문 처리 방식을 확정했습니다. - 2021.03. 에디터ㆍ연계 설계: 편집 데이터 저장 형식과 제작용 파일 생성, 솔루션 연계 방식을 설계했습니다. - 2021.05. 에디터 개발과 솔루션 연계: Vue 로고 에디터를 개발하고 PHP 서버ㆍ쇼핑몰 솔루션과 연결했습니다. - 2021.10. 제작 검증 및 오픈: 화면 시안과 실제 인쇄물을 대조해 차이를 줄인 뒤 오픈했습니다. [프로젝트 정보] - 기간: 2021.01 ~ 2021.12 - 역할: 풀스택 개발 - 기술: MySQL, PHP, Vue.js * 표시 금액은 비슷한 규모 작업의 시작 견적(참고용)이며, 실제 금액은 범위 확인 후 안내드립니다.

커스텀 상품 쇼핑몰 구축 (웹 로고 에디터) 대표 이미지

구매자용 메인 - 로고 커스텀ㆍ패턴 커스텀 진입과 제작 가이드

패턴 커스텀 상품 상세 - 가격ㆍ최소 수량ㆍ배송 조건 확인 후 커스텀 진입

상품 상세 (동일 화면) - 커스텀하기ㆍ찜하기 동작 영역