쇼핑몰별로 다른 페이지와 이미지 설명
- 문제
- 상품 페이지의 구조가 다르고 중요한 정보가 상세 이미지에 포함되기도 함
- 해결
- 쿠팡·네이버 전용 파서와 일반 HTML 경로를 나누고 Clova OCR로 이미지 설명을 추출
- 결과
- 서로 다른 페이지에서 비교에 필요한 상품 정보를 준비하는 공통 흐름을 구현
개요
여러 쇼핑몰의 상품 정보를 모아 요약하고 개인의 기준에 맞게 비교하는 크롬 확장 프로그램. 상품 정보 추출, 비교, 대화를 세 그래프로 나눠 같은 페이지에서 추가 질문까지 이어가도록 구현
담당 업무
페이지 요약·제품 비교·챗봇과 확장 프로그램을 개인 프로젝트로 구현. 서버의 분석 상태와 브라우저의 상품·대화 이력을 분리하고, 사용자 입력을 기다리는 비교 흐름을 구성
- 사용자 흐름
- 상품의 사실을 추출하는 단계와 개인의 선택 기준을 반영하는 단계를 나눔
- 전체 사용자 흐름 구현
- 개인 개발
- 요약 · 비교 · 챗봇
- 3개 그래프
- 사용자 기준 입력·재개
- HITL
구조
- 01상품 페이지쇼핑몰별 텍스트·이미지
- 02정보 추출·요약도메인 파서 · OCR
- 03사용자 기준 입력분석 중단 · 조건 반영
- 04비교 보고서기준별 상품 비교
- 05후속 대화상품 맥락 · SSE 응답
문제 및 해결
AI가 정한 비교 기준이 사용자와 다를 수 있음
- 문제
- 분석이 자동으로 끝나면 사용자가 중요하게 생각하는 조건이 빠질 수 있음
- 해결
- 비교 그래프를 사용자 입력 지점에서 멈추고, 기준을 반영해 작업을 재개하도록 설계
- 결과
- 사용자 기준의 비교 보고서와 상품 맥락을 유지하는 후속 대화를 구현
구현 내용
- 파싱 경로
- 도메인별 파서와 일반 HTML 파싱을 나누고, 이미지 설명은 Clova OCR로 추출
- HITL 상태
- 비교 API가 작업 ID와 대기 상태를 반환. 사용자 기준을 전송하면 그래프를 이어 실행
- SSE 스트리밍
- 토큰·완료·오류를 이벤트로 전달. 상품 정보와 최근 대화 20개를 문맥으로 활용
- 로컬 데이터
- Dexie·IndexedDB에 상품 분석, 보고서, 채팅을 저장. 서버 상태와 브라우저 기록을 분리
- 복구 경계
- LangGraph 체크포인트는 메모리 기반. 입력 대기·재개와 서버 재시작 후 복구는 구분