AI 이미지 검색, 생성/편집 에디터

이미지에서 객체의 윤곽선을 정밀하게 감지하여 자동으로 칼선을 생성하고, AI 기반 이미지 생성 기능을 제공하는 웹 에디터입니다.

제작 배경

굿즈 제작 과정에서 이미지 편집과 관련된 작업은 시간과 노력을 필요로 하는 번거로운 과정입니다. 특히, 칼선을 생성하는 작업의 경우, 클라이언트 디자이너가 직접 수작업으로 작업을 진행하고 있는 상황이었습니다. 더하여 저작권에서 자유로운 고해상도 이미지 소스를 구하기 어려운 구매자들의 이미지 제공 문의도 많아지고 있었습니다.
구매자가 원하는 고해상도 이미지를 제공하고, 디자인 작업 시간을 단축하며, 구매자가 요청한 디자인과 실제 제품 사이의 차이를 최소화하기 위해, 구매자가 직접 디자인을 완료할 수 있는 생성형 AI를 활용한 에디터가 필요했습니다.
디자이너 뿐만 아니라 일반 사용자도 쉽게 사용할 수 있는 직관적인 인터페이스가 필요하였고, AI 기술을 활용하여 이미지를 자동으로 생성 및 처리하고, 사용자의 작업 부담을 줄이는 것이 주요 목표였습니다.
본 프로젝트는 단순한 이미지 편집 도구를 넘어, 사용자와 생성형 AI 간의 상호작용을 극대화하여 창의적인 작업을 지원하는 것을 목표로 하였습니다.

윤곽선 감지 알고리즘: 이미지에서 객체의 윤곽선을 정밀하게 감지하여 자동으로 칼선을 생성하는 알고리즘을 개발하였습니다. 더하여 2개 이상으로 분리된 이미지, 점으로 되어있는 이미지 등 복잡한 형태의 이미지에서도 모든 이미지를 포함하도록 최적화하였습니다.
AI 기반 이미지 생성: 사용자가 원하는 이미지의 키워드를 입력하면 AI가 이를 바탕으로 고해상도 이미지 후보군을 3개 생성하여 선택할 수 있는 기능을 제공하였습니다.
이미지 편집 도구: 직관적인 다양한 편집 도구를 제공하여 포토샵 등 디자인 Tool에 익숙하지 않은 일반 사용자도 이미지를 자유롭게 수정하고 조정할 수 있도록 설계하였습니다. 주요 기능으로는 색상 조정, 텍스트 추가, 배경 제거 합성, 크기 조정 등이 있습니다.
제품 별 옵션 생성: 관리자는 굿즈 품목에 따른 다양한 옵션(ex. 키링 구멍 크기와 위치, 받침대 길이와 위치)을 에디터에 등록할 수 있고, 이에 따라 사용자는 직접 옵션을 에디터에서 편집할 수 있도록 설계하였습니다.
협업 및 워크플로우 통합: 쇼핑몰을 개발하는 외부 개발사와 협업이 용이하도록 API를 설계하였습니다.

구매자가 직접 편집 마무리를 할 수 있어, 내부 디자이너 Resource 투입을 줄일 수 있었습니다
직관적인 에디터를 사용하여 일반 사용자는 Photoshop과 같은 도구에 대한 전문 지식 없이도 전문가 수준의 편집물을 만들 수 있게 되었습니다
생성형 AI의 도움으로 저작권 및 이미지 제공 관련 고객문의가 감소하였습니다
이미지 최종 확인까지 걸리는 절차와 시간이 큰 폭으로 감소하였습니다
실구매자 설문조사 및 리뷰에서는 에디터의 품질 및 속도, AI 이미지 기능의 편의성 측면에 높은 만족도를 보여주었습니다

Step 1: 서비스 요구사항 정립
- 다양한 이미지 편집 Tool 조사
- 클라이언트 고객문의를 토대로 상세 요구사항 정립
Step 2: 사용자 시나리오 확정
- 인쇄소로 넘어가는 실제 디자인 샘플을 조사하여 기능의 우선순위 정립
- 사용자 에디터 사용 시나리오(Flow) 확정
Step 3: User Interface 및 에디터 UX 디자인
- 디자인에 익숙하지 않은 일반 사용자도 쉽게 사용할 수 있도록 직관적인 Interface 설계
- 기존 대중적인 편집 Tool UX에서 크게 벗어나지 않도록 UX 설계
Step 4: 윤곽선 감지 및 칼선 생성 알고리즘 설계
- 이미지가 2개 이상 또는 점으로 되어있는 이미지의 윤곽선도 누락없이 감지할 수 있도록 설계
- 윤곽선과 칼선 사이에 거리 조절이 가능하도록 설계
Step 5: 에디터 기능 개발
- 사진 업로드, 텍스트 삽입 및 편집, 이미지 회전 등 기본적인 에디터 기능 개발
- JavaScript, Vue.js, TypeScript 활용하여 개발
Step 6: 테스트 및 테스터 피드백 수집
- 구매자가 디자인 완성한 파일과 디자이너가 작업한 파일 비교
- 사용자 에디터 이용 행태 파악 및 인터뷰
Step 7: 피드백 반영 업데이트 후 상용화
- 수집된 피드백을 바탕으로 UI/UX 일부 변경
- 칼선 생성 소요 시간 단축
- 칼선 생성 알고리즘 로직 개선