14. 웹사이트 레퍼런스 수집을 5분만에 - skills

문제 상황

2025년 10월, HFK에서 AI 교육 강의 의뢰가 들어왔다.

준비 작업:

1. 커리큘럼 작성
2. 강의 소개 페이지 작성
3. 레퍼런스 필요
   → 다른 AI 교육 사이트들 참고
   → 텍스트 + 이미지 내용 전부 필요

문제:

레퍼런스 사이트 1곳당:
1. 웹사이트 열기
2. 커리큘럼 텍스트 복사
3. 강의 소개 스크린샷 10장
4. 이미지 속 텍스트 수기 입력
5. 노션에 정리

→ 한 곳에 1시간
→ 3곳 보면 3시간

더 큰 문제:
- 이미지 속 텍스트 (커리큘럼, 강의 설명)
- 고화질 이미지 10-20MB
- Claude 5MB 제한으로 업로드 불가
- Photoshop 리사이즈 → 화질 저하 → OCR 부정확

"이거 자동화할 수 없나?"

해결: web-crawler-ocr Skill

2025년 10월 29일, web-crawler-ocr Skill을 만들었다.

기능:
1. 웹사이트 텍스트 추출 (Firecrawl)
2. 이미지 OCR 분석 (Gemini Vision)
3. Markdown 파일로 저장

사용법:

나: "https://ai-education-site.com 분석해줘"

Claude: [web-crawler-ocr Skill 자동 실행]
       [5분 후]
       "분석 완료. 4,200자 + 이미지 7개 OCR 추출"

결과: 3시간 → 5분

실전 사례: HFK 강의 레퍼런스 수집

Before (Skill 없을 때)

10월 25일, AI 교육 사이트 3곳 분석:

사이트 A:
1. 웹사이트 열기
2. 커리큘럼 텍스트 복사
3. 강의 소개 이미지 8장 스크린샷
4. 이미지 속 텍스트 수기 입력
5. 노션에 정리
→ 소요: 1시간 15분

사이트 B:
1. 웹사이트 열기
2. 커리큘럼 페이지 3개
3. 고화질 이미지 12MB (Claude 업로드 불가)
4. Photoshop 리사이즈 → 화질 저하
5. OCR 부정확 → 수정 작업
→ 소요: 1시간 40분

사이트 C:
1. 웹사이트 열기
2. PDF 자료 다운로드
3. 텍스트 추출 (별도 앱)
4. 이미지 OCR
5. 정리
→ 소요: 1시간 10분

총 소요: 4시간 5분

문제:
- 앱 전환 (브라우저 → 스크린샷 → Photoshop → OCR 앱 → 노션)
- Claude 5MB 제한으로 고화질 이미지 처리 불가
- 화질 저하 → OCR 부정확 → 수정 작업
- 피로도 높음

After (web-crawler-ocr Skill)

10월 26일, AI 교육 사이트 3곳 추가 분석:

na: "이 3개 AI 교육 사이트 분석해서
    10-projects/12-education/12.06-hfk-winter-ai/references/ 에 저장해줘"

    https://ai-course-a.com
    https://ai-course-b.com
    https://ai-course-c.com

Claude: [web-crawler-ocr Skill 자동 실행]
       [사이트 A 완료 - 4분]
       [사이트 B 완료 - 6분] (20MB 이미지 완벽 OCR)
       [사이트 C 완료 - 5분]

결과:
- references/ai-course-a-20251026.md
- references/ai-course-b-20251026.md
- references/ai-course-c-20251026.md

총 소요: 15분

차이:
- 4시간 → 15분 (16배 빠름)
- 완벽한 추출 (텍스트 + 20MB 이미지 OCR)
- 구조화된 Markdown

추출된 내용 예시

ai-course-a-20251026.md:

# AI Course A 웹사이트 분석

## URL
https://ai-course-a.com

## 강의 콘셉트
"비개발자를 위한 실전 AI 활용"

## 커리큘럼 (OCR 추출)

**1주차: AI 기초**
- ChatGPT 활용법
- 프롬프트 엔지니어링
- 실습: 업무 자동화

**2주차: GPTs 만들기**
- GPTs 개념
- Instructions 작성
- Knowledge 파일 활용

**3주차: 자동화**
- Zapier 연동
- n8n 워크플로우
- 실전 프로젝트

## 이미지 분석 (Gemini OCR)

### 이미지 1: 메인 비주얼 (18MB - Claude 불가)
- "AI를 업무 파트너로"
- 타겟: 직장인, 프리랜서
- 6주 커리큘럼 강조

### 이미지 2: 커리큘럼 상세
- 주차별 학습 목표
- 실습 프로젝트 포함
- 1:1 피드백 제공

## 핵심 인사이트
1. 비개발자 타겟팅 명확
2. 실습 중심 커리큘럼
3. 6주 완성 구조

이 정도면:
- 레퍼런스 완벽 수집
- 커리큘럼 구조 파악
- 차별화 포인트 도출

15분이면 작업 시작 가능.

web-crawler-ocr Skill 사용법

기본 사용

URL 하나:

나: "https://competitor.com 분석해줘"

Claude: [자동 실행]
       "분석 완료: competitor-20251103.md"

여러 URL:

na: "이 3곳 분석해줘"
    https://cafe-a.com
    https://cafe-b.com
    https://cafe-c.com

Claude: [순차 실행]
       [3개 마크다운 파일 생성]

저장 위치 지정

경쟁사 분석:

na: "https://competitor.com 분석해서
    50-resources/competitor-analysis/ 에 저장해줘"

Claude: [저장 경로 지정]
       "저장 완료: 50-resources/competitor-analysis/competitor-20251103.md"

프로젝트 참고 자료:

na: "https://reference-site.com 분석해서
    10-projects/12-education/12.06-hfk-winter-ai/ 에 저장해줘"

Claude: [프로젝트 폴더에 저장]

상세 분석 요청

특정 부분 집중:

na: "https://competitor.com 분석해줘.
    특히 가격대랑 시그니처 메뉴 위주로."

Claude: [분석 후]
       "가격대: 중상
        시그니처: 씨솔트 라떨 7,500원
        차별화: 루프탑 오션뷰"

비교 분석:

na: "방금 분석한 3곳 카페,
    가격대 비교해서 표로 정리해줘"

Claude: [3개 파일 읽고 비교]

| 카페 | 아메리카노 | 라떼 | 시그니처 |
|------|-----------|------|----------|
| 카페 D | 5,500원 | 6,000원 | 씨솔트 라떼 7,500원 |
| 카페 E | 5,000원 | 5,500원 | 흑임자 라떼 6,500원 |
| 카페 F | 6,000원 | 6,500원 | 제주 녹차 라떼 7,000원 |

기술적 배경: Claude 5MB 제한 우회

문제

Claude는 이미지 크기 제한이 있다:
- 최대 5MB per image
- 고화질 메뉴판, 인테리어 사진은 종종 10-20MB

Before:

na: [메뉴판 이미지 업로드]

Claude: "이미지가 너무 큽니다 (12MB).
        5MB 이하로 압축해주세요."

나: [Photoshop 열기]
    [리사이즈]
    [다시 업로드]
    → 2-3분 소요

해결: Gemini Vision

Gemini의 장점:
- 이미지 최대 20MB
- OCR 성능 우수
- 무료 티어 15 requests/min

web-crawler-ocr Skill:

1. Firecrawl: 웹사이트 텍스트 추출
2. 이미지 발견
3. Gemini Vision: 20MB 이미지 OCR
4. Markdown 통합

결과:
- 5MB 제한 우회
- 고화질 이미지 완벽 분석
- 자동 OCR

실제 사례

AI 교육 사이트 커리큘럼 이미지 (18MB):

Before:
- Claude 업로드 실패 (5MB 제한)
- Photoshop 리사이즈
- 화질 저하
- OCR 부정확 → 수정 작업 30분

After (web-crawler-ocr):
- URL만 제공
- Gemini가 18MB 이미지 완벽 OCR
- 커리큘럼 텍스트 100% 추출
- 5분 완료

다른 활용 사례

1. 경쟁사/타 브랜드 분석

시나리오:

경쟁 브랜드 웹사이트 분석 필요
→ 메뉴, 가격, 브랜드 톤 파악
→ 차별화 전략 수립

사용:

na: "이 3개 경쟁 브랜드 분석해줘"
    https://competitor-a.com
    https://competitor-b.com
    https://competitor-c.com

Claude: [3개 분석]
       "공통점: 가격대 중상
        차별점: A는 오션뷰, B는 베이커리, C는 로스팅"

효과:
- 경쟁 분석 15분
- 포지셔닝 파악
- 차별화 전략

2. 블로그/콘텐츠 리서치

시나리오:

IMI WORK 블로그 글 쓰기
→ 경쟁 블로그 분석
→ 인사이트 추출

사용:

na: "이 3개 블로그 글 분석해줘"
    https://blog-a.com/ai-automation
    https://blog-b.com/claude-tips
    https://blog-c.com/productivity

Claude: [3개 분석]
       "공통 키워드: 자동화, 효율성, AI 파트너
        차별화 포인트: 실전 사례 vs 이론"

효과:
- 경쟁 분석 10분
- SEO 키워드 추출
- 차별화 전략 수립

3. 제품 리서치

시나리오:

새로운 카페 장비 검토
→ 제조사 웹사이트 3곳
→ 스펙 비교 필요

사용:

na: "이 3개 커피머신 스펙 비교해줘"
    https://machine-a.com
    https://machine-b.com
    https://machine-c.com

Claude: [비교 분석]

| 모델 | 가격 | 용량 | 특징 |
|------|------|------|------|
| A | 850만원 | 2그룹 | 자동 온도 조절 |
| B | 920만원 | 2그룹 | 압력 프로파일링 |
| C | 780만원 | 1그룹 | 컴팩트 |

효과:
- 제품 비교 5분
- 구조화된 정보
- 의사결정 빠름

Skill 내부 작동 방식

사용자가 볼 필요는 없지만

궁금할 수 있어서:

web-crawler-ocr Skill 실행 시:

1. URL 감지
   "https://competitor.com" 발견

2. 저장 경로 결정
   - 경쟁사 분석? → 50-resources/competitor-analysis/
   - 프로젝트 자료? → 10-projects/{프로젝트}/
   - 일반 리서치? → 50-resources/web-research/

3. Firecrawl API 호출
   - 웹사이트 크롤링
   - 광고/불필요 요소 제거
   - 깨끗한 텍스트 추출

4. 이미지 발견 시
   - Gemini Vision API 호출
   - 20MB 이미지 OCR
   - 텍스트 추출

5. Markdown 통합
   - 텍스트 + 이미지 OCR
   - 구조화
   - 파일 저장

6. 결과 반환
   "분석 완료: competitor-20251103.md"

당신이 할 일:
- URL 제공
- 끝

Claude가 할 일:
- 나머지 전부

실전 팁

1. URL만 던져도 됨

충분:

na: "https://competitor.com"

Claude: [자동 분석]

명시적:

na: "https://competitor.com 분석해줘"

Claude: [자동 분석]

둘 다 작동.

2. 여러 URL 한 번에

효율적:

na: "이 5개 URL 분석해줘"
    [5개 URL 붙여넣기]

Claude: [순차 실행]
       [5개 파일 생성]

15분이면 5곳 완료.

3. 즉시 비교 요청

분석 직후:

na: "방금 분석한 3곳,
    가격대 순으로 정렬해줘"

Claude: [3개 파일 읽고 정렬]

활용도 높음.

4. 정기적 모니터링

경쟁사 변화 추적:

매월 1일:
na: "지난달 분석한 경쟁사 3곳,
    다시 분석해서 변경사항 확인해줘"

Claude: [재분석]
       [변경사항 diff]
       "카페 D: 가격 인상 (5,500원 → 6,000원)"

트렌드 파악.

한계와 대안

한계 1: 로그인 필요한 사이트

문제:

회원 전용 콘텐츠
→ Firecrawl 접근 불가

대안:

1. 수동으로 스크린샷
2. 이미지 업로드
3. Claude OCR (5MB 이하)
또는
4. Gemini Vision 직접 사용 (20MB)

한계 2: JavaScript 동적 콘텐츠

문제:

무한 스크롤
→ 일부만 추출

대안:

1. 스크롤 후 스크린샷
2. 이미지 OCR
또는
3. 페이지 URL을 섹션별로 나눠서 분석

한계 3: Gemini 무료 티어

문제:

15 requests/min 제한
→ 이미지 많으면 대기

대안:

1. 순차 실행 (자동 대기)
2. 유료 전환 고려
또는
3. 이미지 개수 제한 (10개 max)

비용

Firecrawl

무료 티어:
- 500 credits/month
- 1 URL = 1 credit
- 500개 사이트/월

충분:
- 일 16개 사이트
- 개인 사용 OK

Gemini

무료 티어:
- 15 requests/min
- 1,500 requests/day

충분:
- 하루 1,500개 이미지 OCR
- 개인 사용 OK

총 비용: 0원 (무료 티어 범위)

핵심 정리

web-crawler-ocr Skill = 웹사이트 완벽 추출

텍스트 (Firecrawl) + 이미지 OCR (Gemini)
→ Markdown 파일
→ 5분 완료

사용법

na: "https://competitor.com 분석해줘"

Claude: [자동 실행]
       [Markdown 저장]

효과

Before: 3시간 (수작업)
After: 5분 (자동화)

16배 빠름

핵심 장점

1. Claude 5MB 제한 우회 (Gemini 20MB)
2. 텍스트 + 이미지 OCR 동시 추출
3. 구조화된 Markdown
4. 무료 (티어 범위 내)

활용 범위

- 강의/프로젝트 레퍼런스 수집
- 경쟁사/타 브랜드 분석
- 블로그/콘텐츠 리서치
- 제품 리서치
- 정기 모니터링

다음 편 예고

web-crawler-ocr로 웹사이트를 분석했다.

이제 녹음 파일을 정리하자.

다음 편:
- transcript-organizer Skill 실전
- 강의 녹음 3시간 → 10분 자동 정리
- Whisper 자막 추출
- 타임스탬프 + 핵심 포인트
- 구조화된 노트 생성

3시간 녹음을 10분에 정리한다.

실제 사례를 보자.