← 포트폴리오 목록
AI 패키지디자인 커머스 플랫폼
GEN AI · WebGL 실시간 3D 디자인 에디터 기반 F&B 패키지 디자인-제작 One-Stop 플랫폼
B2C 커스텀 주문수 약 100% 증가주당 30~40건 규모의 커스텀 주문수가 도입 이후 60건 이상으로 약 100% 이상 증가했습니다.
제작 소요기간 50% 단축제품 1개 제작당 발주까지 최소 7일 걸리던 과정을 도입 이후 3~4일 이내로 약 50% 단축했습니다.
멀티모달 AI · WebGL · 벡터 출력 통합 구현멀티모달 AI 이미지 생성, WebGL 실시간 3D 목업, 인쇄용 벡터(SVG/PDF) export를 한 플랫폼에서 유기적으로 연동했습니다.
Overview
프로젝트 개요
GEN AI와 WebGL을 활용한 실시간 3D 디자인 에디터 기반의 F&B 특화 패키지디자인 커머스 플랫폼입니다. 일러스트 파일을 주고받고 웹하드에 아카이빙하던 기존 방식의 검색·관리 한계를 해소하고, 도면·템플릿·디자인 소스 제공과 실시간 3D 목업으로 실제 제작될 제품을 예측하며 작업하도록 설계했습니다. 디자인부터 장바구니·결제·제작·배송·재구매까지 One-Stop으로 연결되는 구매 프로세스를 구축하고, 초보자도 손쉽게 패키지디자인을 완성해 실물 제작으로 이어지는 쉬운 디자인 솔루션을 화면설계·UI/UX·프론트엔드·서버·관리자까지 일체 턴키로 구현했습니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
AI 생성·디자인 에디터·실시간 3D 목업이 한 화면에서 유기적으로 작동해야 하는 복합 구조
잘 사용하지 않는 WebGL 기술과 각 기능 간 데이터 연동 로직을 직접 정의해, 도면 데이터와 3D 목업이 실시간으로 연동되고 레이어·배경제거·AI 기능이 단일 에디터에서 함께 동작하도록 구현했습니다.
웹에디터 디자인을 인쇄용 벡터 파일로 정확히 출력하고 주문건과 연동하는 과제
에디터에서 제작된 디자인을 인쇄용 벡터(SVG·PDF)로 export하고, 주문건·디자인 데이터를 연동해 관리자·인쇄소가 도면·목업·출력 데이터를 공동 관리하도록 설계했습니다.
한글 사용자 입력을 고품질 이미지 생성으로 연결하는 멀티모달 AI 파이프라인
한글 프롬프트를 영어로 자동 최적화한 뒤 멀티모달 모델로 이미지를 생성하고, 로고 생성·디자인 추천·부분 Remix·이미지 유사도 검사까지 디자인 생성 파이프라인을 구축했습니다.
핵심 기능 1
WebGL 실시간 3D 목업 웹에디터
도면 데이터와 3D 목업을 실시간 연동하고, 도면에 맞는 템플릿·디자인 소스, 레이어 관리·배경제거·내 디자인·AI 기능까지 다양한 에디터 기능을 한 화면에 구현했습니다.
핵심 기능 2
멀티모달 AI 디자인 요소 생성
한글 프롬프트를 영어로 자동 최적화한 뒤 멀티모달 모델로 이미지를 생성하고, 로고 생성·디자인 추천·부분 Remix·이미지 유사도 검사 기능을 개발했습니다.
핵심 기능 3
간편가입·결제·알림톡 구매 UX
네이버·카카오 간편가입과 토스페이먼츠 간편결제를 구현하고, 구매·배송 시점별 카카오 알림톡 연동으로 가입부터 제작·결제·배송·재구매까지 최적 UX 프로세스를 완성했습니다.
핵심 기능 4
관리자 CMS·발주·인쇄 협업
회원·상품·발주 데이터를 한눈에 파악하는 통합 관리 화면을 제공하고, 발주건을 협력사와 공유하며 출력용 PDF를 다운로드할 수 있도록 개발했습니다.
프로젝트 성과
B2C 커스텀 주문수 약 100% 증가주당 30~40건 규모의 커스텀 주문수가 도입 이후 60건 이상으로 약 100% 이상 증가했습니다.
제작 소요기간 50% 단축제품 1개 제작당 발주까지 최소 7일 걸리던 과정을 도입 이후 3~4일 이내로 약 50% 단축했습니다.
멀티모달 AI · WebGL · 벡터 출력 통합 구현멀티모달 AI 이미지 생성, WebGL 실시간 3D 목업, 인쇄용 벡터(SVG/PDF) export를 한 플랫폼에서 유기적으로 연동했습니다.
Review
기술적 주안점
- 멀티모달 AI·WebGL·인쇄용 벡터(PDF) 출력 등 난이도 높은 기술을 단일 플랫폼에 통합한 프로젝트입니다
- 도면 데이터와 3D 목업을 실시간 연동하고 AI 생성·디자인 에디터를 한 화면에서 유기적으로 작동시키는 데이터 연동 로직을 직접 정의했습니다
- 웹에디터 디자인을 인쇄용 벡터(SVG/PDF)로 정확히 출력하고 주문건·관리자·인쇄소가 데이터를 공동 관리하도록 설계했습니다
- F&B에 특화되어 초보자도 손쉽게 디자인하고 실물 제작까지 One-Stop으로 연결되는 쉬운 디자인 솔루션을 구현했습니다
