B2B Professional Project

AI 기반 자동 주문·CS 통합 시스템

AI-powered Order & CS Management System

이미지와 상품 URL에서 주문 정보를 AI로 추출하고, 고객 상담부터 주문서 작성·결제까지의 업무 흐름을 하나의 시스템으로 통합한 B2B 주문·CS 서비스입니다.

실제 B2B 환경에 적용된 프로젝트이며, 보안을 위해 화면과 데이터는 포트폴리오용으로 재구성했습니다.

Overview

B2B 고객사의 실제 주문·CS 업무 환경에 적용한 시스템입니다. 비정형 주문 요청과 분리된 상담 도구로 인한 재입력과 화면 전환을 줄이기 위해 AI 추출·CS·주문·결제를 하나의 업무 흐름으로 설계했습니다.

Background

  • 고객이 전달한 상품 이미지, 상품 URL, 문자 메시지를 상담원이 확인한 뒤 주문서 정보를 다시 입력해야 했습니다.
  • 문자 수신, 고객 상담, 주문서 작성, 결제가 각기 분리되어 상담원이 여러 프로그램과 화면을 오가야 했습니다.
  • 기존 CS 솔루션은 실제 업무 방식에 맞춘 기능 확장과 외부 시스템 연동에 제약이 있었습니다.

Problem

비정형 주문 데이터

고객이 전달하는 주문 정보가 정해진 Form이 아니라 이미지와 다양한 상품 URL 형태로 전달됐습니다.

반복적인 수작업 입력

상담원이 이미지와 URL의 내용을 확인하고 주문서에 다시 직접 입력해야 했습니다.

분리된 업무 시스템

문자 상담과 주문서 작성 시스템이 분리되어 업무 전환과 데이터 재입력이 반복됐습니다.

기존 솔루션의 확장성 한계

기존 문자·CS 솔루션을 실제 업무 프로세스에 맞게 수정하거나 기존 분석 시스템과 연결하기 어려웠습니다.

Architecture

Order Flow

  1. Customer
  2. Image / Product URL
  3. FastAPI
  4. LangChain Extraction Pipeline
  5. Normalized Order Data
  6. React Order Service
  7. Order / Payment

CS Flow

  1. Customer SMS
  2. Kotlin SMS Receiver
  3. Backend
  4. Electron CS Application
  5. Existing Analysis System
  6. Order Service

My Contribution

Full Stack Development

Frontend부터 Backend까지 서비스 전체 개발에 참여했습니다.

AI Extraction Pipeline

이미지 및 상품 URL 기반 주문 정보 추출 Pipeline을 설계하고 구현했습니다.

Responsive UI

주문서 작성과 주문 진행을 위한 반응형 Interface를 개발했습니다.

Payment Integration

주문 서비스와 결제 Flow를 연동했습니다.

Desktop CS Application

Electron 기반 CS 관리 프로그램을 개발했습니다.

SMS Integration

Kotlin 기반 문자 수신과 CS 시스템 연동 기능을 구현했습니다.

System Integration

기존 분석 프로그램과 신규 CS 시스템의 데이터 Flow를 연결했습니다.

Requirement Analysis

실사용 담당자와 직접 소통하며 요구사항을 분석하고 기능을 반복 개선했습니다.

Technical Challenges

다양한 입력 형태를 하나의 주문 데이터로 만드는 문제

쇼핑몰마다 상품 페이지 구조가 다르고 이미지 형태도 일정하지 않아, 입력 방식에 종속되지 않도록 Image / URL → Extraction → Normalization Pipeline으로 책임을 분리했습니다. 상품명·옵션·수량·가격을 공통 데이터 구조로 전달하도록 구성했습니다.

AI 추출 결과의 실사용 가능성

다양한 Image / URL Case를 반복 테스트하며 추출 실패, 잘못된 필드 Mapping, 누락 정보를 확인했습니다. AI 결과를 바로 주문으로 확정하지 않고 AI Extraction → User Verification → Order 구조로 설계했습니다.

웹 서비스와 Desktop CS 시스템 연결

React Web Service, FastAPI Backend, Electron Application, Kotlin SMS Receiver의 데이터 흐름을 설계했습니다. 기능을 하나의 거대한 Application으로 합치지 않고 역할별 Application을 분리한 뒤 Backend를 중심으로 연결했습니다.

Decisions & Solutions

AI 주문 정보 추출 Pipeline

Image / Product URL을 FastAPI와 LangChain으로 분석해 공통 주문 데이터로 정규화하고, 주문서에서 확인할 수 있게 했습니다.

반응형 주문 서비스

React 기반 주문 Interface에서 AI가 추출한 정보를 사용자가 확인·수정한 뒤 주문서 작성과 결제 Flow로 이어지게 했습니다.

CS Desktop Application

Electron 기반 전용 CS Application에서 수신 문자, 상담 내용, 주문 정보, 분석 결과를 한 흐름으로 다루도록 구성했습니다.

문자 수신 연동

Kotlin Application이 수신한 SMS를 Backend를 거쳐 Electron CS Application에서 확인할 수 있도록 연결했습니다.

기존 업무 시스템 연동

상담 과정에서 필요한 분석 결과를 기존 분석 프로그램에서 받아 CS 화면과 주문 처리 과정에 활용할 수 있게 했습니다.

User-Centered Iteration

실제 CS 담당자가 사용하는 시스템이었기 때문에 개발자가 생각한 기능보다 실제 상담 업무에서 얼마나 편하게 사용할 수 있는가를 기준으로 UI와 기능을 개선했습니다.

  1. 요구사항 확인
  2. Prototype / Implementation
  3. 실사용
  4. Feedback
  5. UI / Workflow 수정

프로젝트 초기 요구사항만 구현하고 종료하지 않고, 실제 사용 과정에서 발견되는 버튼 위치·정보 배치·상담 Flow·주문 연결 방식·데이터 표시 방식을 사용자 업무 흐름에 맞게 반복 개선했습니다.

Outcome

  • 문자 상담 → 주문 → 결제 업무 흐름을 하나로 통합했습니다.
  • 상담원이 여러 프로그램을 오가며 주문 정보를 다시 입력하던 과정을 줄였습니다.
  • 이미지 및 URL 기반 주문 정보 추출로 반복적인 주문 정보 입력 작업을 자동화했습니다.
  • 기존 분석 프로그램과 신규 CS 시스템을 연동해 상담 과정에서 필요한 정보를 한 화면에서 활용하게 했습니다.
  • 실제 CS 담당자의 사용 Feedback을 기반으로 UI와 Workflow를 반복 개선했습니다.
  • 실사용자로부터 업무 편의성과 사용성이 높다는 긍정적인 Feedback을 확보했습니다.

Tech Stack

React, Electron, FastAPI, LangChain, Kotlin