단순한 쇼핑몰 기능을 넘어, AI를 통해 사용자 경험을 향상시키고 운영을 자동화하는 것을 목표로 합니다.
Docker를 활용한 컨테이너 기반으로 설계되어, 일관성 있는 개발 및 실행 환경을 제공합니다.
- 주요 기능 (Features)
- AI 기반 특화 기능 (AI Features)
- 인프라 및 배포 (Infrastructure & Deployment)
- 기술 스택 (Tech Stack)
- 주요 문제 해결 및 학습 경험 (Troubleshooting & Learnings)
- 사용자 인증: JWT(Access/Refresh Token) 기반 회원가입, 로그인/로그아웃
- 상품 관리: 상품 목록 조회, 상세 조회, 등록 기능
- 리뷰 시스템: 상품별 리뷰 등록/조회 기능
- 토큰 자동 갱신: Axios Interceptor를 활용해 사용자 경험 향상
- 페이지네이션: 상품 목록에 대한 효율적인 페이지 처리
- 데이터 시각화: Recharts를 활용한 구매/조회 패턴의 카테고리별, 가격대별 소비 트렌드 차트 제공
- 상품 정보 자동 생성 (LangGraph): 상품명과 이미지 분석을 통해 브랜드, 카테고리, 마케팅 문구를 자동 생성하는 고급 AI 워크플로우
- 실시간 RAG 챗봇 (LangChain + ChromaDB): Markdown 문서 기반 벡터 검색으로 환불, 배송, 결제 등 고객 문의에 정확하고 일관된 자동 응답 제공
- 개인 맞춤형 상품 추천 (LLM 기반): 구매/조회/리뷰 데이터를 분석하여 개인 취향 프로필을 생성하고, LangGraph + OpenAI LLM을 통해 추천 이유까지 제공하는 설득력 있는 추천 시스템
- AI 리뷰 감성 분석 (Hugging Face): 리뷰 텍스트의 긍정/부정/중립 감정 자동 분류 및 키워드 추출을 통한 핵심 포인트 시각화, 대시보드 형태의 감성 분석 결과 제공
- Docker 컨테이너화: Backend(Django), Frontend(React), Proxy(Nginx) 환경 분리 및
Docker Compose를 통한 통합 관리 - Nginx 리버스 프록시: API 요청(
/api/*)과 정적 파일 요청(/)을 효율적으로 분배하여 서버 부하 감소
| 구분 | 기술 | 설명 |
|---|---|---|
| Frontend | React |
UI 구축을 위한 핵심 라이브러리 |
Redux (Redux Thunk) |
전역 상태 관리 및 비동기 로직 처리 | |
React Router DOM |
클라이언트 사이드 라우팅 관리 | |
Axios |
서버와의 비동기 HTTP 통신 | |
React-Bootstrap & Tailwind CSS |
컴포넌트 기반 UI 구현 및 세부 스타일링 | |
| Backend | Python, Django, Django REST Framework |
RESTful API 서버 구축 |
Simple JWT |
JWT 기반의 안전한 사용자 인증 구현 | |
| AI | OpenAI GPT-4o, LangChain, LangGraph |
AI 워크플로우 및 RAG 챗봇, 추천 시스템 구현 |
Hugging Face Transformers |
텍스트 감성 분석 | |
ChromaDB |
RAG 챗봇을 위한 벡터 데이터베이스 | |
| DevOps | Docker, Docker Compose, Nginx |
컨테이너화, 배포 및 운영 |
-
AI 워크플로우 설계: 단일 LLM 호출의 '블랙박스' 문제를 해소하기 위해, LangGraph로 추론 과정을 단계별로 분해하고 각 단계의 신뢰도를 추적할 수 있는 파이프라인을 구축했습니다. 이를 통해 제어 가능하고 안정적인 AI 서비스를 설계하는 경험을 쌓았습니다.
-
프론트엔드 안정성 강화: 고급 AI 기능이 실패할 경우 자동으로 기본 API를 재호출하는 스마트 폴백(Fallback) 로직을 적용했습니다. 특정 기능 장애가 전체 서비스 중단으로 이어지지 않도록 방어적인 코드를 작성하며 안정적인 UX를 구축했습니다.
-
데이터 시각화 및 사용자 경험 개선: 단순 리스트 형태의 구매/조회 기록을 넘어서, Recharts를 활용한 카테고리·가격대별 소비 패턴 시각화를 구현했습니다. React의 ResponsiveContainer, BarChart, Tooltip 등을 활용하며 반응형 UI 설계와 데이터 구조 최적화를 학습했습니다.
-
문서 기반 AI 응답 시스템 구축: 고객 상담 챗봇에서 단순 규칙형 응답이 아닌, Markdown 문서를 벡터화 → ChromaDB에 저장 → LangChain 검색 구조로 확장했습니다. 이를 통해 정확하고 일관된 답변 제공이 가능해졌으며, 문서 관리와 AI 검색 결합의 실제 적용 사례를 경험했습니다.
-
멀티컨테이너 환경 구성: Django 백엔드와 React+Nginx 프론트엔드를 독립적인 컨테이너로 분리하면서도 미디어 파일 공유와 서비스 간 통신이 원활하도록 Docker Compose 네트워킹을 설계했습니다. 컨테이너 간 의존성 관리와 볼륨 공유 방식을 학습하며 확장 가능한 아키텍처 구성 경험을 쌓았습니다.