Claude와 Cursor를 활용해 48시간 만에 구축한 Reddit 댓글 분석 크롬 확장 프로그램

실용적 조언

많은 양의 텍스트를 분류할 때는 개별 호출하지 말고 JSON 리스트 형태로 묶어 한 번에 프롬프트를 보내 비용을 아끼라.
프레임워크 없이 바닐라 TS와 esbuild를 사용하면 확장 프로그램의 크기를 줄이고 성능을 높일 수 있다.
DOM 셀렉터가 자주 깨진다면 AI에게 맡기기보다 브라우저 개발자 도구로 직접 구조를 파악해 견고한 셀렉터를 작성하라.

섹션별 상세

댓글별 개별 호출 대신 전체 댓글 트리를 하나의 JSON으로 묶어 Claude Haiku에 전달하는 배치 처리 기법을 도입했다. 150개의 댓글을 한 번의 API 호출로 처리하여 비용을 기존 $0.20 이상에서 $0.004로 약 98% 절감했다. 이 방식은 비용뿐만 아니라 API 속도 제한 문제를 해결하고 전체 분석 시간을 12초 내외로 단축시켰다.

Reddit의 최신 아키텍처인 RSC 도입으로 인해 DOM 구조가 복잡해져 데이터 추출에 어려움을 겪었다. shreddit-comment와 같은 커스텀 엘리먼트와 슬롯 구조로 인해 기존 셀렉터가 자주 무력화되는 현상이 발생했다. Claude가 생성한 셀렉터가 실제 DOM과 일치하지 않아 이 부분은 수동으로 직접 수정하며 안정성을 확보했다.

json

{
  "prompt": "classify each reddit comment as one of: buying_intent, influencer, insight, supporter, question, noise",
  "input": "comments: [{id, text, author}, ...]",
  "output_format": "{ id: label }"
}

Claude Haiku 모델에 전달하여 댓글을 한 번에 분류하기 위한 배치 프롬프트 구조

백엔드 서버나 데이터베이스 없이 브라우저 내 로컬 저장소만 활용하는 순수 클라이언트 사이드 스택을 구성했다. chrome.storage.local을 CRM 레이어로 사용하고 별도의 인증이나 클라우드 연동 없이 작동하도록 설계했다. 바닐라 TypeScript와 esbuild를 조합하여 프레임워크 없이 가벼운 확장 프로그램을 구현했다.

전체 코드의 약 80%를 Claude와 Cursor가 작성했으나 핵심 로직과 스키마 설계는 개발자가 직접 주도했다. 칸반 보드 UI, CSS, 아이콘 등은 AI가 생성했지만 배치 프롬프트 최적화와 스토리지 스키마 정의는 사람이 담당했다. AI와 협업하여 3,500줄의 코드를 48시간이라는 단기간에 완성하며 생산성을 극대화했다.

용어 해설

배치 처리(Batch Processing): — 여러 데이터를 하나로 묶어 한 번에 처리하는 방식이다. 이 글에서는 150개의 댓글을 개별적으로 API 호출하지 않고 하나의 프롬프트에 담아 전송함으로써 비용을 98% 절감하고 속도를 높이는 핵심 전략으로 사용됐다.
크롬 확장 프로그램 MV3(Chrome Extension MV3): — 구글 크롬 확장 프로그램의 최신 매니페스트 버전(Manifest V3)이다. 보안과 성능 강화를 위해 백그라운드 페이지 대신 서비스 워커를 사용하며, 네트워크 요청 및 스크립트 실행에 더 엄격한 제한을 적용한다.
리액트 서버 컴포넌트(RSC): — 서버에서 렌더링되는 React 컴포넌트 아키텍처이다. Reddit이 이를 도입하면서 DOM 구조가 복잡한 커스텀 엘리먼트로 변경되어, 외부 도구가 데이터를 추출하기 위한 셀렉터 지정이 매우 어려워졌다.
DOM 주입(DOM Injection): — 웹 페이지의 문서 객체 모델(DOM)에 외부 스크립트나 스타일을 강제로 삽입하는 기술이다. 확장 프로그램이 기존 웹사이트 UI 위에 새로운 버튼이나 정보를 표시하기 위해 필수적으로 사용된다.

언급된 도구

Claude Haiku추천

저비용 고속 텍스트 분류 및 JSON 데이터 생성

Cursor추천

AI 기반 코드 편집 및 개발 가속화

esbuild추천

TypeScript 코드 번들링 및 빌드