프로젝트 개요
GEN AI와 WebGL을 활용한 실시간 3D 디자인 에디터 기반의 F&B 특화 패키지디자인 커머스 플랫폼입니다. 일러스트 파일을 주고받고 웹하드에 아카이빙하던 기존 방식의 검색·관리 한계를 해소하고, 도면·템플릿·디자인 소스 제공과 실시간 3D 목업으로 실제 제작될 제품을 예측하며 작업하도록 설계했습니다. 디자인부터 장바구니·결제·제작·배송·재구매까지 One-Stop으로 이어지는 구매 과정을 구축해, 초보자도 아이디어만으로 F&B 패키지를 디자인하고 실물 제작까지 연결할 수 있는 솔루션을 구현했습니다.
작업 범위
- 화면 설계, UI/UX 디자인, 서버 구축, Front-end 개발, 관리자 페이지 개발 등 일체 턴키 방식
- 반응형 웹·모바일 환경 일체
주요 업무
- 웹 디자인 에디터 기능 및 생성 AI 도입 개발
- 간편 가입 및 결제 연동(네이버·카카오 간편가입, 토스페이먼츠)
- 관리자 CMS 및 발주 관리 개발
- 카카오 알림톡 연동 작업
- 인쇄용 PDF(출력용 벡터) Export 개발
프로젝트 핵심 과제
AI 생성·디자인 에디터·실시간 3D 목업이 한 화면에서 유기적으로 작동해야 하는 복합 구조
잘 사용하지 않는 WebGL 기술과 각 기능 간 데이터 연동 로직을 직접 정의해, 도면 데이터와 3D 목업이 실시간으로 연동되고 레이어·배경제거·AI 기능이 단일 에디터에서 함께 동작하도록 구현했습니다.
웹에디터 디자인을 인쇄용 벡터 파일로 정확히 출력하고 주문건과 연동하는 과제
에디터에서 제작된 디자인을 인쇄용 벡터(SVG·PDF)로 export하고, 주문건·디자인 데이터를 연동해 관리자·인쇄소가 도면·목업·출력 데이터를 공동 관리하도록 설계했습니다.
한글 사용자 입력을 고품질 이미지 생성으로 연결하는 멀티모달 AI 파이프라인
한글 프롬프트를 영어로 자동 최적화한 뒤 멀티모달 모델로 이미지를 생성하고, 로고 생성·디자인 추천·부분 Remix·이미지 유사도 검사까지 디자인 생성 파이프라인을 구축했습니다.
핵심 기능 상세
WebGL을 활용한 웹에디터 및 실시간 3D 목업 기능
AI를 활용한 디자인 요소 생성 기능
간편 가입·결제를 통한 구매 UX 최적화, 알림톡 연동
관리자 모드 및 CMS, 발주 관리, 인쇄 협업 기능
프로젝트 진행 단계
기획 (2025.01)
서비스 니즈 및 필요 세부기능 설계 · IA(인포메이션 아키텍처) 설계 및 UX 프로세스 검토 · 최종 기능 확정
디자인 (2025.02)
와이어프레임 제작 · 디자인 스타일 레퍼런스 탐색 및 확정 · 디자인 시스템 제작 · 최종 UI 디자인 확정
개발 (2025.02)
프론트엔드·백엔드 기능 개발 검토 · 세부 기능을 개발 프레임워크에 맞춰 구현 · 2주 스프린트 단위로 개발 일정 공유
QA 및 배포 (2025.06)
AWS 서버 배포 · 클로즈베타·오픈베타 QA · 최종 QA 이슈 개선 개발 · 서비스 개발 완료
개발 결과
기술적 주안점
- 개인 정보에 대한 보안
- 최적의 UX 설계 및 초보자도 활용 가능한 디자인 에디터 개발
- 생성 AI 멀티모달 모델 적용(한글 프롬프트 → 영어 프롬프트 자동 최적화 → 이미지 생성)
- 멀티모달 AI·WebGL·인쇄용 PDF(Vector) 출력 등 높은 수준의 기술을 하나의 플랫폼에 통합
