지금 당장 나만의 서비스 런칭! 13가지 초!고퀄리티 웹 서비스로 Cursor AI 마스터-Part 3. [Project 2] 크롬 확장프로그램으로 쿠* 리뷰 챗봇 만들기 // 지금 당장, 쿠팡 리뷰를 내 AI 챗봇에게 맡기기

FastCampus 2025. 12. 28. 13:07
728x90


지금 당장 나만의 서비스 런칭! 13가지 초!고퀄리티 웹 서비스로 Cursor AI 마스터-Part 3. [Project 2] 크롬 확장프로그램으로 쿠* 리뷰 챗봇 만들기를 들은 내용중 쿠* 상품 리뷰를 자동으로 모으고 AI한테 “한 줄 요약 + 핵심만 정리”를 맡기는 크롬 확장 프로그램을 직접 만들어 본 기록입니다.

“리뷰 1,000개를 사람이 다 읽지 말고
AI가 먼저 1차 정리해 주면 어떨까?”
라는 질문에서 시작된 사이드 프로젝트이기도 하다.


 

지금 당장, 쿠팡 리뷰를 내 AI 챗봇에게 맡기기

“리뷰 1,000개를 사람이 다 읽지 말고
AI가 먼저 1차 정리해 주면 어떨까?”
라는 질문에서 시작된 사이드 프로젝트이기도 하다.

 

 

 

1. 프로젝트 개요

프로젝트 이름

  • Coupang Review Helper 1.0.2

목표

  • 쿠팡 상품 상세 페이지에서 리뷰 자동 수집
  • 리뷰 통계 자동 계산
  • Excel(XLSX), JSON 파일로 한 번에 내보내기
  • Perplexity AI로 리뷰 요약·분석 지원

형태

  • Chrome 확장 프로그램 (Manifest V3)
  • Vanilla JavaScript + CSS3
  • SheetJS(xlsx)로 엑셀 생성
  • Perplexity AI API 연동
  • Web Crypto API로 API Key 안전하게 암호화ppl-ai-file-upload.s3.amazonaws​

2. 전체 기능 흐름

사용 플로우는 단순하다.

  • 사용자가 쿠팡 상품 페이지에 들어간다.
  • 브라우저 상단의 확장 아이콘을 클릭한다.
  • 팝업에서 “리뷰 수집” 버튼을 누른다.
  • content.js가 페이지 안의 리뷰 DOM을 찾아서 모은다.
  • 스크롤·페이지 이동을 자동으로 반복하며 모든 리뷰를 수집한다.
  • 수집된 리뷰에서 중복을 제거하고 정제한다.
  • 총 리뷰 수, 평균 평점, 평점 분포, 이미지 포함 리뷰 수 등 통계를 만든다.
  • 결과를 JSON 또는 XLSX로 다운로드한다.
  • 옵션으로 “AI 분석”을 누르면 Perplexity API에 리뷰 요약을 요청한다.
  • 응답을 팝업의 작은 채팅창 형태로 보여준다.ppl-ai-file-upload.s3.amazonaws+1​

개발자 입장에서 보면
“DOM 크롤링 → 데이터 가공 → 파일 Export → AI 연동”
까지 한 번에 연습하는 실습 프로젝트다.

3. 주요 기술 스택과 폴더 구조

기술 스택

  • Chrome Extension Manifest V3
  • Vanilla JavaScript (ES6)
  • CSS3
  • SheetJS(xlsx.full.min.js)
  • Perplexity AI /chat/completions API
  • Web Crypto API (AES‑GCM, PBKDF2)ppl-ai-file-upload.s3.amazonaws​

코드 구조

  • manifest.json: 확장 프로그램 설정
  • content.js: 쿠팡 페이지에서 실행되는 크롤러 + AI 호출
  • content.css: 페이지에 삽입되는 스타일
  • popup.html / popup.css / popup.js: 팝업 UI와 이벤트 처리
  • crypto-utils.js: API Key 암호화·복호화
  • xlsx.full.min.js: Excel 생성용 라이브러리

강의에서는
“manifest → content script → popup → 유틸리티(JS)” 순서로
하나씩 기능을 붙여 나가며
Chrome Extension 개발 흐름을 체득하도록 설계되어 있다.ppl-ai-file-upload.s3.amazonaws​

4. 리뷰 수집과 통계 계산

리뷰 수집 핵심 포인트

  • 쿠팡 리뷰 DOM 셀렉터 정의
    • .sdp-review article
    • article.sdp-reviewarticlelist
    • article.twc-pt-16px 등
  • 별점 추출
    • i.twc‑bg‑full‑star, i.twc‑bg‑half‑star 아이콘 개수
    • 또는 data-rating 속성 값 활용
  • MutationObserver로 “리뷰가 다 로딩될 때까지” 기다리기
  • 페이지 버튼을 찾아가며 다음 페이지 자동 클릭
  • 스크롤이 필요한 경우 scrollAndCollect로 하단까지 내리기ppl-ai-file-upload.s3.amazonaws​

리뷰 데이터 구조

  • rating
  • author
  • date
  • title
  • content
  • helpfulCount
  • images (URL 배열)

통계 정보

  • totalReviews: 전체 리뷰 수
  • averageRating: 평균 별점
  • ratingDistribution: 5~1점 분포
  • reviewsWithImages: 이미지 포함 리뷰 수
  • totalHelpfulCount: ‘도움됨’ 합계ppl-ai-file-upload.s3.amazonaws​

강의에서는
JS 객체 배열로 리뷰를 쌓고
generateStatistics 함수로 통계를 만들며
이 과정을 그대로 Excel, JSON으로 내보내는 실습까지 연결한다.

5. Export, AI 연동, 보안 설계

Export 기능

  • exportToJSON
    • reviews + statistics를 JSON으로 직렬화
    • Blob으로 다운로드 링크 생성
    • coupang-reviews.json 파일 저장
  • exportAsXLSX

Perplexity AI 연동

  • callPerplexityAPI(userMessage, reviewContext)
  • systemPrompt에 “리뷰 요약/분석 역할”을 정의
  • 최근 리뷰 일부를 reviewContext로 묶어 전송
  • 응답을 팝업 채팅창에 출력
  • 400, 401, 403, 429 에러에 대한 디버깅 가이드도 포함ppl-ai-file-upload.s3.amazonaws​

API Key 암호화

  • Web Crypto API + AES‑GCM 256-bit
  • PBKDF2(100,000회)로 암호화 키 생성
  • chrome.storage.local에 iv + ciphertext(Base64) 저장
  • UI에서는 API Key 원문을 다시 보여주지 않고
    “저장됨” 상태만 표시하는 형태로 설계ppl-ai-file-upload.s3.amazonaws​

6. 강의에서 얻어가는 것

이 프로젝트를 끝까지 따라가면
단순한 예제 수준을 넘어

  • 실제 쇼핑 플랫폼 페이지를 크롤링해 보고
  • 데이터 정제와 통계 계산을 코드로 구현하고
  • Excel, JSON으로 결과를 배포하고
  • 외부 AI API를 안전하게 연동하고
  • 크롬 확장 프로그램 UX까지 직접 다뤄보게 된다.day1company+1​

결국 “AI 웹서비스”의 전형적인 한 사이클
(크롤링 → 저장 → 분석 → 시각화 → AI 요약)을
작게라도 끝까지 돌려본 경험을 주는 강의다.

필요하다면

깃허브  https://github.com/MyJYP/2025aiworker/tree/main/cursorai0514/ChromeExtension/coop_eviewer1226

#쿠팡리뷰헬퍼
#크롬확장프로그램
#CursorAI강의
#퍼플렉시티API
#리뷰자동수집
#엑셀내보내기
#JSON데이터분석
#웹크롤링프로젝트
#AI리뷰요약
#FastCampus수강후기

쿠팡리뷰헬퍼, 크롬확장프로그램, CursorAI강의, 퍼플렉시티API, 리뷰자동수집, 엑셀내보내기, JSON데이터분석, 웹크롤링프로젝트, AI리뷰요약, FastCampus수강후기



##번외  지마켓 버전 : 상품명 2단계 구조, 추천 등으로 변경

https://github.com/MyJYP/2025aiworker/tree/main/cursorai0514/ChromeExtension/gmkt_reviewer1228

728x90

'FastCampus' 카테고리의 다른 글

직장인 성장의 완성판: "[직:장인(匠人)]" 95개 강의 완벽 분석 및 학습 로드맵  (1) 2026.01.17
The RED : 픽사 라이팅 아티스트에게 배우는 빛과 색의 비주얼 스토리텔링 by 이민형  (1) 2025.12.28
지금 당장 나만의 서비스 런칭! 13가지 초!고퀄리티 웹 서비스로 Cursor AI 마스터-Part 2. [Project 1] 유튜브 요약 서비스 // 크롬 확장 프로그램 만들기 - 유튜브 요약 서비스 퍼플렉시티 API 버전  (0) 2025.12.28
[어쩌다 직장인] 김경일 교수의 직장人사이드  (1) 2025.12.25
외주 개발 바이블 : Cursor AI로 시작하는 프리랜서 실전 패키지-Part 11. Cursor AI로 인터랙티브 반응형 웹 만들기  (3) 2025.12.21
Posted by 댕기사랑
,

티스토리툴바