[소개]
키워드를 등록하면 AI가 자동으로 웹 검색 → 크롤링 → 요약 리포트를 만들어주는 "오토서치서머리(Auto Search Summary)" 앱을 바이브코딩으로 만들고 있습니다.
MVP는 이미 만들어진 상태였는데, 실제로 써보니 결과물 퀄리티가 너무 안 좋았습니다.
구체적으로 두 가지 문제가 있었어요:
문제 1) 리포트가 JSON 그대로 출력됨
AI가 요약한 결과가 깔끔한 문서가 아니라, {"title":"...", "content":"## 핵심 개요\n\nAI 기술은..."} 이런 식으로 JSON 코드가 그대로 화면에 나왔습니다. \n이 줄바꿈이 아니라 글자 그대로 보이고, 마크다운도 렌더링이 안 되고요.
문제 2) 구글 검색 결과만 나옴
분명 네이버, 유튜브도 검색하도록 설정했는데, 실제 결과는 구글 출처 7건만 나왔습니다. 네이버 블로그나 유튜 브 영상은 하나도 없었어요.
이 앱은 제가 평소에 AI 기술 트렌드를 따라잡기 위해 만든 건데, AI 분야는 몇 개월만 지나도 옛날 기술이 되어버리잖아요. 그래서 최신 자료를 다양한 소스에서 가져오는 게 핵심인데, 정작 그게 안 되고 있었던 겁니다.
[진행 방법]
사용 도구: Claude Code (터미널 기반 AI 코딩 도구)
Claude Code에게 문제 상황을 스크린샷과 함께 보여주고, 자연어로 대화하며 하나씩 고쳐나갔습니다. 코드를 직접 작성한 건 거의 없고, 대부분 "이게 문제야, 고쳐줘" 식으로 진행했어요.
Step 1: 문제 인식 — 스크린샷으로 "이게 뭐야?" 하기
앱에서 검색을 실행한 후 나온 결과 화면을 캡처해서 Claude Code에게 보여줬습니다.
💬 나의 프롬프트:
"내용이 이게 뭐니? 그리고, 구글 자료만 왜 있니, 네이버나 유튜브도 균형있게 있어야지?"
한국어 페이지 스크린샷
한국어 웹사이트의 스크린샷
Claude Code가 바로 원인을 분석해줬습니다:
AI 응답을
generateText로 받아서 JSON 문자열이 그대로 노출되는 구조였음네이버/유튜브는 API 키가 미설정이면 조용히 빈 결과를 반환하는 코드였음
Step 2: 검색 품질 개선 요청 — "최신 자료 + 유명 플랫폼" 주문하기
단순히 버그 수정만 한 게 아니라, 검색 품질 자체를 업그레이드하고 싶었습니다.
💬 나의 프롬프트:
"웹 서치를 적극적으로 하게 세팅하고, 서칭할때 최신 자료를 기반으로 검색이 되면 좋겠어. 주로 ai 기술 등에 대한 정보를 찾는데, ai 기술은 몇개월만 지나도 옛날 기술이 되어 버리잖아"
Claude Code가 처음에 "최근 1개월 이내 자료만 검색"하는 방식으로 구현하려 했는데, 제가 피드백을 줬습니다.
💬 나의 피드백:
"최근 1개월 이내 자료만이면, 너무 한정적인데.
최근 자료의 가산점이 높도록
조금 기간 지난 자료라도, 인기있는(조회수 높은, 평판있는 사이트) 곳이면 노출 가능성 있게
유명 온라인 플랫폼 사이트(브런치, 깃허브 등) 참고할 수 있게
등 퀄리티(품질) 좋은 유명 플랫폼의 최신 자료가 가산점을 받는 구조로 해야 할듯"
이 한 마디로 Claude Code가 스코어링 시스템을 설계하고 구현했습니다.
Step 3: Claude Code가 만든 스코어링 시스템
Claude Code가 자동으로 만든 핵심 로직입니다:
최신성 가산점 (최대 20점):
1주 이내: +20점
1개월 이내: +15점
3개월 이내: +10점
6개월 이내: +5점
1년 이내: +2점
1년 이상: -5점 (감점)
도메인 평판 점수 (35개 사이트 등록, 최대 15점):
// Claude Code가 자동으로 만든 도메인 평판 테이블
const DOMAIN_SCORES = {
// 글로벌 테크 (14~15점)
"github.com": 15,
"arxiv.org": 15,
"huggingface.co": 14,
"openai.com": 14,
// 한국 테크 블로그 (10~14점)
"d2.naver.com": 14,
"brunch.co.kr": 12,
"tech.kakao.com": 12,
"velog.io": 10,
// 뉴스/미디어 (8~10점)
"aitimes.com": 10,
"zdnet.co.kr": 8,
// ... 총 35개 도메인
};
총점 계산:
총점 = 기본(10) + 최신성(최대 20) + 도메인 평판(최대 15)
예를 들어:
d2.naver.com의 2주 전 글 → 10 + 15 + 14 = 39점 (상위 노출)
무명 블로그의 2년 전 글 → 10 + (-5) + 0 = 5점 (하위로 밀림)
GitHub의 6개월 전 프로젝트 → 10 + 5 + 15 = 30점 (여전히 노출)
Step 4: 유명 플랫폼 추가 검색
네이버/유튜브 API 키가 없어도, Serper API(구글 검색 API)를 통해 site:naver.com, site:youtube.com으로 해당 플랫폼 결과를 가져오도록 폴백 로직을 추가했습니다.
추가로, 매 검색마다 아래 6개 플랫폼 중 3개를 랜덤 선택해서 추가 검색합니다:
브런치(brunch.co.kr), GitHub, Medium,
velog, 네이버 D2, 요즘IT(yozm)
이것도 제가 코드를 짠 게 아니라, "브런치, 깃허브 등 유명 플랫폼도 참고할 수 있게"라고 말했더니 Claude Code가 알아서 구현했습니다.
Step 5: 기존의 날짜 하드필터 제거
기존에는 각 검색 API에 "최근 1개월만" 이라는 하드 필터가 걸려 있었습니다:
Before:
- Serper API: tbs: "qdr:m" (1개월 제한)
- Google API: dateRestrict=m1 (1개월 제한)
- YouTube API: publishedAfter=1개월전 (1개월 제한)
After:
- 날짜 제한 없음 → 스코어링으로 자연스럽게 최신 자료 우선[결과와 배운 점]
배운 점
1. 바이브코딩의 핵심은 "좋은 피드백"이다
처음에 Claude Code가 "1개월 하드필터"로 구현하려 했을 때, 제가 "그건 너무 한정적"이라고 피드백을 줬더니 훨씬 정교한 스코어링 시스템으로 발전했습니다. AI에게 코드를 시키는 게 아니라, 기획자처럼 방향을 잡아주는 게 바이브코딩의 본질인 것 같습니다.
2. 스크린샷 한 장이 프롬프트 열 줄보다 낫다
"결과가 이상해"라고 텍스트로 설명하는 것보다, 실제 화면 캡처를 보여주니 Claude Code가 바로 \n 리터럴 출력 문제, JSON 파싱 문제를 정확히 짚어냈습니다. 문제 상황은 스크린샷으로 보여주세요.
3. "왜 이래?"라고 물어보는 것도 실력이다
코드를 몰라도, 결과물을 보고 "이게 뭐야?", "왜 구글만 있어?"라고 질문하는 것만으로 Claude Code가 원인 분석 → 해결책 제시 → 구현까지 해줍니다. 비개발자도 결과물에 대한 감각만 있으면 충분합니다.
나만의 꿀팁
🍯 AI에게 "~하면 안 돼?"보다 "~한 구조로 해야 할 듯"이라고 말하기
"최근 자료만 보여줘"(지시) vs "최신성에 가산점 + 유명 플랫폼도 노출되는 구조"(구조 제안)
후자가 훨씬 좋은 결과를 만듭니다. AI에게 "어떤 구조가 좋겠다"고 제안하면, AI가 그 구조를 코드로 번역해줍니다.
시행착오
처음엔 문제를 텍스트로만 설명했다가 → Claude Code가 엉뚱한 곳을 고치려 함 → 스크린샷 보여주니 바로 해결
"최신 자료만 보여줘"라고 했더니 → 1개월 하드 필터라는 극단적 해결책이 나옴 → "가산점 구조"로 피드백하니 정교한 스코어링 완성
네이버/유튜브 API 키가 없는 상태를 몰랐음 → Claude Code가 Serper API로
site:naver.com우회 검색하는 폴백을 알아서 만들어줌
앞으로의 계획
리포트 출력 가독성 개선 (마크다운 렌더링 정상화)
실제 검색 결과의 플랫폼 다양성 모니터링
이메일 자동 발송 기능 안정화
크론 스케줄러로 매일 자동 검색 → 이메일 수신 파이프라인 완성
