🔍 Claude Code로 만든 GPTers 사례글 검색기

소개

시도하고자 했던 것과 그 이유

GPTers 커뮤니티에는 자동화 등 다양한 실무 활용 사례들이 풍부하게 공유되고 있습니다. 하지만 기존 검색 방식으로는 다음과 같은 아쉬움이 있었습니다:

• 정보 파편화: 각 게시글을 개별적으로 클릭해야 내용 파악 가능

• 비교의 어려움: 여러 사례를 한눈에 비교하기 어려움

• 메타데이터 부족: 작성자, 카테고리, 작성일 등 정보가 분산되어 있음

• 트렌드 파악 한계: 특정 주제의 전체적인 동향 분석이 어려움

그래서 "GPTers 사례글을 표 형태로 정리해서 한눈에 비교하고 분석할 수 있는 검색 도구"를 만들고자 했습니다.

ALT

한국어와 중국어가있는 웹 사이트의 스크린 샷

진행 방법

사용한 도구와 활용 방법

주요 도구: Claude Code (VS Code 확장 프로그램)
개발 스택: Streamlit + Python (requests, beautifulsoup4, plotly 등)
개발 환경: VS Code + 터미널

단계별 진행 과정

1단계: 초기 앱 생성

# Claude Code 실행 (Ctrl+Shift+P → "Claude Code")
"GPTers 사례글 검색기를 만들어주세요.

기능:
1. 검색어 입력창 (예: "claude code", "streamlit")  
2. GPTers 사이트에서 해당 키워드 관련 게시글 검색
3. 결과를 표로 정리: 제목, 작성자, URL, 간단 요약
4. 검색된 게시글들의 트렌드 분석 (빈도, 주요 키워드 등)
5. 관련 학습 리소스나 다음 단계 제안

사용 라이브러리: streamlit, requests, beautifulsoup4"

2단계: 파일명 및 구조 개선

"gpters_profile_analyzer.py 파일명을 gpters_case_finder.py로 변경하고, 
앱 제목도 'GPTers 사례글 검색기'로 수정해주세요."

3단계: 실제 GPTers 사이트 분석 기반 개선

"GPTers 사이트의 실제 검색 기능을 확인했습니다.
검색창에 'CLAUDE' 입력 시 다음 결과들이 나타납니다:

- 'Claude Code로 바이브 코딩해보기-복잡한 요구사항 다루기'
- 'Claude 를 통해 사용자별 맞춤 뉴스레터 서칭 페이지 만들기'  
- '모루가 Claude 3 를 사용해야 하는 이유 5가지'

gpters_case_finder.py를 수정해서 실제 GPTers 검색 결과를 가져오도록 해주세요.
검색 URL이나 API 엔드포인트를 올바르게 연결하고,
실제 게시글 제목, 작성자, 카테고리 정보를 추출해주세요."

4단계: UI/UX 대폭 개선

"GPTers 검색기 UI를 표 형태로 변경해주세요.

표 구조:
- 컬럼: [번호] [제목] [작성자] [카테고리] [작성일] [내용요약] [URL]
- 검색 결과 20개까지 표시  
- 제목과 URL은 클릭 가능한 링크
- 내용요약: 각 게시글 핵심 내용 2-3줄 요약
- 현재 카드 형태보다 정보 밀도 높은 표 형태로 개선

한 화면에서 더 많은 정보를 비교할 수 있도록 해주세요."

5단계: 세부 기능 개선

"GPTers 검색기를 다음과 같이 개선해주세요:

1. 검색 결과 정렬: 날짜 기준 최신순으로 정렬 (가장 최근 게시글이 먼저 나오도록)
2. URL 클릭 가능: 검색 결과 테이블의 URL 컬럼을 클릭 가능한 링크로 변경  
3. 디버그 정보 제거: '디버그' 섹션의 모든 로그 정보를 화면에서 숨기기 (깔끔한 UI)
4. 작성자 정보 추가: 검색 결과 테이블에 '작성자' 컬럼 추가 (예: '깜장호랭' 같은 사용자명)
5. 한글 키워드 검색 개선: '클로드코드', '클로드 코드' 등 한글 검색어도 정확히 매칭되도록 검색 로직 강화

현재 'CLAUDE CODE' 영문 검색은 잘 작동하지만, 한글 검색 결과가 부족합니다. 
GPTers 사이트에서 한글로 된 Claude Code 관련 게시글들도 많으니 이들도 잘 찾아지도록 해주세요."

6단계: 기술적 문제 해결

# Import 오류 해결
"gpters_case_finder.py 파일에 import 오류가 발생하고 있습니다.
파일을 수정해서 정상적으로 실행되도록 해주세요.

현재 오류:
- import 'import' 오류 (중복 import 문제)  
- 기타 라이브러리 import 문제

목표: streamlit run gpters_case_finder.py 명령어로 앱이 정상 실행되도록 수정"

# 라이브러리 의존성 해결
"다음 라이브러리들을 설치하고 올바르게 import하도록 수정해주세요:
- plotly (데이터 시각화)
- python-dateutil (날짜 처리)  
- pytz (시간대 처리)"

Claude Code, VS Code 활용 팁

• Shift+Tab: plan mode와 edit mode 전환

• accept edits on 클릭: 코드 수정사항 승인

• 구체적인 오류 메시지 포함: 더 정확한 해결책 제시

• 실제 사이트 정보 제공: 스크래핑 대상 사이트의 실제 구조나 검색 결과 예시 제공

• 필수 단축키

  • Ctrl+C: 터미널에서 앱 강제 종료 (가장 많이 사용)

  • Ctrl+Shift+R: 브라우저 강력 새로고침 (캐시 문제 해결)

  • Ctrl+F5: 브라우저 캐시 완전 삭제

  • Ctrl+`: VS Code 터미널 토글

  • Ctrl+Shift+P: 명령 팔레트 (Claude Code 실행 시 필수)

결과와 배운 점

주요 성과

✅ 빠른 프로토타이핑: 약 1-2시간 만에 기본 기능 구현
✅ 실용적 UI: 표 형태로 한눈에 20개 검색 결과 비교 가능
✅ 확장성: 다양한 키워드 조합으로 맞춤형 검색
✅ 학습 효과: Claude Code를 통한 실시간 디버깅과 개선 경험

배운 점과 나만의 꿀팁

Claude Code 활용 꿀팁

1. 구체적인 예시 제공이 핵심: "이런 결과를 원한다"는 구체적 예시를 제공하면 훨씬 정확한 결과

2. 단계별 요청: 한 번에 모든 기능을 요청하기보다는 단계적으로 개선 요청

3. 실제 데이터 기반 요청: 타겟 사이트의 실제 HTML 구조나 검색 결과를 분석해서 제공

4. 오류 메시지 그대로 복사: 오류가 발생하면 터미널의 오류 메시지를 그대로 복사해서 제공

개발 프로세스 꿀팁

1. 포트 관리: 여러 Streamlit 앱 동시 개발 시 포트 충돌 주의 (--server.port 8502 활용)

2. 브라우저 캐시: 변경사항이 반영 안 될 때는 Ctrl+Shift+R 강력 새로고침

3. 라이브러리 사전 확인: 복잡한 기능 구현 전에 필요한 라이브러리들 미리 설치

시행착오와 해결 과정

주요 시행착오들

1. 스크래핑 로직 복잡성

   • 문제: GPTers 사이트 구조가 예상보다 복잡해서 작성자 정보, 정확한 날짜 추출이 어려움

   • 해결: 제목 기반 검색으로 범위를 축소하고, 메타데이터는 추출 가능한 것만 활용

2. 한글 키워드 검색 문제

   • 문제: "claude code"는 잘 검색되지만 "클로드코드"는 결과가 부족

   • 해결: 한글/영문 키워드 매핑 로직 추가 요청

3. 라이브러리 의존성 지옥

   • 문제: plotly, python-dateutil 등 추가 라이브러리 설치 필요

   • 해결: Claude Code가 requirements.txt 자동 생성하고 설치 가이드 제공

4. 실시간성 vs 완성도 트레이드오프

   • 문제: 완벽한 기능 구현을 위해서는 각 게시글 개별 방문 필요 (속도 저하)

   • 해결: 프로토타입 수준에서 타협점 찾기

GPTers 기존 검색과의 차별화 포인트

도움이 필요한 부분

1. 고급 스크래핑 기술: 각 게시글의 상세 정보를 효율적으로 추출하는 방법

2. GPTers API 연동: 공식 API가 있다면 더 안정적인 데이터 접근 가능

3. 실시간 업데이트: 새로운 게시글이 올라올 때마다 자동으로 색인화하는 방법

앞으로의 계획 (선택사항)

단기 계획 (1-2주)

• 크로스 플랫폼 검색: GPTers + GitHub + Stack Overflow 통합 검색

• 학습 경로 추천: 검색 결과를 바탕으로 체계적인 학습 순서 제안

• 북마크 기능: 관심 있는 게시글 저장 및 개인 라이브러리 구축

중장기 계획 (1-3개월)

• AI 요약 기능: 검색된 게시글들의 핵심 내용을 AI가 자동 요약

• 트렌드 대시보드: 주간/월간 인기 키워드 및 기술 트렌드 시각화

• 커뮤니티 기여도 분석: 활발한 기여자들의 전문 분야 분석

기술적 개선 방향

• API 우선 접근: 스크래핑 대신 공식 API 활용으로 안정성 확보

• 캐싱 시스템: 자주 검색되는 키워드의 결과를 캐싱해서 속도 개선

• 개인화: 사용자별 관심 분야에 맞는 맞춤형 검색 결과 제공

이 프로젝트를 통해 Claude Code의 빠른 프로토타이핑 능력과 동시에 실제 서비스 개발의 복잡성을 모두 경험할 수 있었습니다. 완벽한 서비스보다는 "아이디어를 빠르게 검증하고 개선 방향을 찾는 도구"로서 Claude Code가 매우 유용함을 확인했습니다.

도움 받은 글 (옵션)

https://www.gpters.org/nocode/post/introduction-automation-non-developers-Mk6V6rLNIycCmcb

https://www.gpters.org/llm-service/post/useful-url-extract-frequent-TcPVDZVNWvc7F0i