복붙 한 번이면 끝, 채용공고 자동 비서 만들기

🚀 산출물

🌐 개발계기

채용공고를 여러 사이트에서 찾아보다 보면, 매번 공고를 열어서 마감일·자격요건·우대사항 등을 하나하나 확인하는 게 번거로웠습니다. 특히 마감일을 놓치는 경우가 잦아서, URL만 붙여넣으면 공고 내용을 자동으로 정리해주고, 마감일 알람까지 이메일로 받을 수 있는 웹사이트를 만들고 싶었습니다.

📌 핵심 요구사항

채용공고 URL → 회사명, 포지션, 자격요건, 우대사항, 주요업무, 복리후생 자동 추출
마감일 기준 정렬 + 색상 강조 (긴급/임박/여유)
D-7, D-3, D-1 이메일 알람
Google 로그인으로 개인화 (여러 기기에서 동일한 데이터 접근)
이미지로 된 채용공고도 AI가 읽어서 자동 분류

🌱 진행방법

사용 도구

Claude Code (CLI) — 전체 개발 진행 (HTML/CSS/JS 작성, 디버깅, 배포까지)
Firebase — Authentication (Google 로그인), Firestore (데이터 저장), Hosting (배포)
Gemini 2.5 Flash API — 이미지 속 텍스트 인식 및 구조화
EmailJS — 서버 없이 클라이언트에서 알람 이메일 발송

🎁 개발과정

1단계: 기본 구조 — "URL 붙여넣으면 정리해줘"

첫 프롬프트:

채용공고 링크를 붙여넣으면 해당 공고를 자동으로 정리해주는 웹사이트 만들어줘.

Claude Code가 단일 HTML 파일로 SPA(Single Page Application)를 생성했습니다. CORS 프록시(allorigins.win)를 통해 외부 채용 사이트의 HTML을 가져오고, 정규식으로 텍스트를 파싱하는 구조입니다.

2단계: 기능 확장 — "알람이 필요해"

지원기간 강조표시 및 지원기간순으로 정렬기능 추가. 
지원 일주일 전, 지원 3일 전 등 알람설정 기능. 알람은 이메일 송부.

마감일 기준 색상 배지(빨강/주황/노랑/초록/회색), 정렬 기능, EmailJS 연동까지 한 번에 구현되었습니다.

3단계: 한국 채용 사이트 대응 — "인크루트가 안 돼"

인크루트(incruit.com)는 EUC-KR 인코딩 + iframe 구조라서 일반 파서로는 추출이 안 됐습니다. Claude Code에게 실제 HTML 구조를 확인시킨 후 사이트별 전용 파서를 만들었습니다.

인크루트 공고가 추출이 안 돼. HTML 구조를 확인해서 파서를 수정해줘.

4단계: 로그인 + 배포 — "개인화하고 싶어"

프론트에만 Firebase 붙여서 로그인 되게 해줘.

Firebase Auth(Google 로그인) + Firestore(데이터 저장) + Hosting(배포)까지 Claude Code가 설정 파일 생성부터 firebase deploy까지 처리했습니다.

배포 URL: https://job-seeking-32bc5.web.app

5단계: 이미지 공고 대응 — "CJ제일제당 공고는 이미지야"

CJ, 삼성 등 대기업 공고는 내용이 이미지로 되어있어 텍스트 추출이 불가능했습니다. 처음에 Tesseract.js(브라우저 OCR)를 시도했지만 한국어 인식률이 낮아서, Gemini Vision API로 교체했습니다.

Gemini에서는 사진에서 텍스트 인식 잘하던데 얘는 왜 힘들어해?
→ Gemini API로 바꿔줘.

Gemini 2.5 Flash에 이미지를 보내면서 JSON 형식으로 구조화된 응답을 요청하는 방식으로 구현했습니다.

핵심 프롬프트 (Gemini에 보내는 지시):

이 채용공고 이미지에서 다음 정보를 JSON으로 추출해주세요.
{
  "company": "회사명",
  "position": "포지션/직무명",
  "conditions": { "career": "", "education": "", "employment": "", "location": "", "salary": "", "deadline": "" },
  "requirements": ["자격요건1", "자격요건2"],
  "preferred": ["우대사항1"],
  "duties": ["주요업무1"],
  "benefits": ["복리후생1"]
}
JSON만 반환하세요.

⭐ 최종 아키텍쳐

[사용자] → URL 입력
    ↓
[CORS 프록시] → HTML 가져오기
    ↓
[사이트별 파서] → 텍스트 추출 시도
    ↓ (실패 시)
[weserv.nl 이미지 프록시] → 이미지 가져오기
    ↓
[Gemini 2.5 Flash API] → 이미지 → 구조화된 JSON
    ↓
[Firebase Firestore] → 저장 (Google 로그인 연동)
    ↓
[EmailJS] → 마감일 알람 이메일

🎯 결과와 배운 점

배운 점

프론트엔드만으로도 로그인/DB/배포가 가능하다 — Firebase가 서버 역할을 대신해주기 때문에, HTML/JS 파일 하나로 풀스택 서비스를 만들 수 있었습니다.
AI 비전 모델은 OCR과 차원이 다르다 — Tesseract.js(전통 OCR)는 디자인된 한국어 이미지에서 거의 인식을 못 했지만, Gemini는 이미지를 "이해"해서 구조화된 정보까지 분류해줍니다. 처음부터 Gemini를 쓸 걸 하는 아쉬움이 있습니다.
CORS 프록시는 만능이 아니다 — allorigins.win, corsproxy.io 모두 특정 사이트(CJ 등)에서 차단됩니다. 이미지 전용으로는 images.weserv.nl이 가장 안정적이었습니다.

시행착오

인크루트 인코딩 문제 — EUC-KR 사이트를 UTF-8로 읽어서 한글이 깨졌습니다. TextDecoder('euc-kr') + ArrayBuffer로 해결.
Gemini API 404 — 모델명을 gemini-2.0-flash로 썼는데 실제로는 gemini-2.5-flash만 사용 가능했습니다. models API로 사용 가능한 모델 목록을 먼저 확인하는 게 중요합니다.
이미지 CORS 차단 — 이미지는 <img> 태그로는 표시되지만, JavaScript로 읽으려면 CORS 허용이 필요합니다. weserv.nl이 이 문제를 깔끔하게 해결해줬습니다.

꿀팁

Claude Code에게 스크린샷 + 콘솔 로그를 함께 보여주면 디버깅 속도가 훨씬 빠릅니다.
Gemini API 키 발급 후 https://generativelanguage.googleapis.com/v1beta/models?key=YOUR_KEY로 사용 가능한 모델을 먼저 확인하세요.
Firebase Hosting 배포는 firebase deploy --only hosting 한 줄이면 끝입니다.

앞으로의 계획

용어사전 기능 — 자주 나오는 채용 용어 자동 해설
공고 추천 기능 — 채용공고 자동 탐지 및 추천
이메일 수신자 관리 — 여러 이메일 주소로 알람 분배
Google AdSense — 하단 광고 게재로 운영비 충당

✒️ 도움 받은 글

Firebase 공식 문서: Web에서 Firebase 시작하기
Gemini API 공식 문서: Vision 기능 활용
weserv.nl: 이미지 캐시 및 CORS 프록시 서비스

🔥<24기 AI 스터디> 얼리버드 신청하기 🔥

복붙 한 번이면 끝, 채용공고 자동 비서 만들기

사용 도구

온·오프라인 AI 스터디