금융/핀테크 직무 면접을 준비하는 개발자를 위한 AI 코파일럿.
국내 주요 기술 블로그(토스·네이버 D2·카카오)의 실전 아티클을 수집·벡터화하여
RAG 기반으로 JD 분석, 역량 갭 진단, 기술 면접 시뮬레이션을 제공합니다.
For English documentation, see README.en.md.
GitHub README는 GIF를 정적 이미지가 아니라 애니메이션으로 렌더링합니다.
크롤링 파이프라인 (로컬) 벡터 DB 구축 (Colab T4 GPU)
┌─────────────────────┐ ┌───────────────────────────┐
│ crawler.py │ │ build_vectorstore_colab │
│ · 토스 (정적/JS) │──────────────▶│ · BAAI/bge-m3 임베딩 │
│ · 네이버 D2 API │ │ · ChromaDB 저장 │
│ · 카카오 API │ │ · chroma_db.zip 다운로드 │
└────────┬────────────┘ └──────────────────────────-┘
│ all_tech_urls.txt │ chroma_db/
▼ ▼
┌─────────────────────┐ ┌───────────────────────────┐
│ run_filter_crawl.py │ │ React + Vite 프론트엔드 │
│ · 금융 키워드 필터 │ │ · JD 입력 / 이력서 업로드 │
│ · finance_tech_ │ │ · 역량 갭 리포트 │
│ content.json │ │ · 면접 채팅 시뮬레이션 │
└─────────────────────┘ │ · 페르소나 선택 면접관 │
└───────────────────────────┘
↕ REST API
┌───────────────────────────┐
│ FastAPI 백엔드 │
│ · RAG 검색 │
│ · 페르소나 면접 생성 │
│ · 답변 평가 + 피드백 │
│ · LLM Failover (Gemini→ │
│ OpenAI→Upstage) │
└───────────────────────────┘
- Node.js 18+
- Python 3.11+ (Anaconda 환경 권장)
git clone https://github.com/<your-id>/Tech-Prep-Copilot.git
cd Tech-Prep-Copilot
# 프론트엔드
npm install
# Python 백엔드 환경
pip install -r requirements.txtcp .env.example .env| 변수 | 필수 | 설명 |
|---|---|---|
VITE_GOOGLE_API_KEY |
Gemini 사용 시 | Google AI Studio 키 — 프론트엔드 갭분석용 |
GOOGLE_API_KEY |
Gemini 사용 시 | 백엔드 전용 Gemini 키 (위와 동일 값) |
OPENAI_API_KEY |
OpenAI 사용 시 | 2순위 LLM 및 프론트 갭분석 |
UPSTAGE_API_KEY |
선택 | 3순위 LLM (Upstage Solar, OpenAI 호환 API) |
UPSTAGE_MODEL |
선택 | 기본 solar-pro |
LLM_PROVIDER_ORDER |
선택 | 쉼표 구분 시도 순서, 기본 gemini,openai,upstage |
LLM_TIMEOUT_SEC |
선택 | 프로바이더당 HTTP 타임아웃(초), 기본 60 |
VITE_BACKEND_URL |
선택 | FastAPI 주소 (기본: http://localhost:8000) |
TAVILY_API_KEY |
선택 | 실시간 검색 보강용 |
백엔드 LLM:
LLM_PROVIDER_ORDER순으로 호출하고, 장애·빈 응답 시 다음 프로바이더로 넘어갑니다.
최소 Gemini(GOOGLE_API_KEY) · OpenAI · Upstage 중 하나만 설정돼 있어도 면접·RAG 쿼리 확장이 동작합니다.
프론트 갭분석은 여전히VITE_GOOGLE_API_KEY또는OPENAI_API_KEY(브라우저)를 사용합니다.
프로젝트에 포함된 사전 빌드 벡터 DB를 사용합니다:
# 자동 설정: 백엔드 시작 시 data/chroma_db1.zip 이 있으면 chroma_db/ 에 자동 압축 해제됩니다.
# 수동 설정이 필요한 경우:
unzip data/chroma_db1.zip -d chroma_db참고:
chroma_db/디렉토리는 약 150MB로 git에서 제외됩니다.
직접 벡터 DB를 구축하려면 아래 "데이터 파이프라인" 섹션을 참조하세요.
python -m uvicorn backend.main:app --reload --port 8000백엔드가 없으면 역량 갭 리포트만 동작하고 면접 시뮬레이션은 비활성화됩니다.
백엔드 LLM은GET /api/health의llm_*_configured필드로 키 설정 여부를 확인할 수 있습니다.
npm run dev
# → http://localhost:30004가지 면접관 유형 중 선택 가능. 각 페르소나의 두 면접관이 질문·피드백을 랜덤으로 번갈아 진행합니다.
| 페르소나 | 면접관 A | 면접관 B | 특징 |
|---|---|---|---|
| 🧊 나엄격 / 나친절 | 나엄격 (42세, 테크 리드) | 나친절 (32세, 시니어 개발자) | 압박 기술 검증 + 성장 코칭 |
| 📈 마계산 / 오네트 | 마계산 (45세, 사업전략 본부장) | 오네트 (35세, 창업가 출신 PM) | ROI 임팩트 + 비즈니스 확장 |
| 🏗️ 권스케일 / 이안정 | 권스케일 (45세, 인프라 아키텍트) | 이안정 (38세, 시니어 SRE) | 대규모 확장성 + SRE 실무 |
| 💻 박알고 / 최코치 | 박알고 (38세, FAANG 인터뷰어) | 최코치 (33세, 코딩 코치) | 알고리즘 압박 + CS 기초 |
python utils/crawler.py
# → all_tech_urls.txt 생성| 소스 | 방식 | 수집량 |
|---|---|---|
| toss.tech | 정적 HTML / Playwright | ~300개 |
| d2.naver.com | REST API | ~3,200개 |
| tech.kakao.com | REST API | ~450개 |
python utils/run_filter_crawl.py
# → finance_tech_content.json 생성utils/build_vectorstore_colab.ipynb를 Colab에 업로드- Runtime > Change runtime type > T4 GPU 설정
- 셀 순서대로 실행 후
chroma_db.zip다운로드 - 프로젝트 루트에 압축 해제
Tech-Prep-Copilot/
└── chroma_db/
├── chroma.sqlite3
└── ...
Tech-Prep-Copilot/
├── src/
│ ├── components/
│ │ ├── InterviewChat.tsx # 면접 시뮬레이션 (페르소나 랜덤 교체)
│ │ ├── PersonaSelector.tsx # 면접관 페르소나 선택 UI
│ │ ├── GapReport.tsx # 역량 갭 리포트
│ │ ├── JDInput.tsx # JD 입력
│ │ └── ResumeUploader.tsx # 이력서 업로드
│ ├── services/aiService.ts # LLM 호출 (Gemini/OpenAI 자동 선택)
│ └── lib/store.ts # Zustand 전역 상태
│
├── backend/
│ └── main.py # FastAPI (페르소나 면접, RAG, Gemini/OpenAI)
│
├── utils/ # 데이터 파이프라인
├── test_gemini.py # Gemini API 키 확인 스크립트
├── chroma_db/ # 벡터 DB (git 제외)
├── requirements.txt
├── package.json
└── .env.example
| 영역 | 기술 |
|---|---|
| 프론트엔드 | React 19, TypeScript, Vite, Tailwind CSS v4, Zustand |
| AI / LLM | Gemini 2.5 Flash Lite (기본) / OpenAI GPT-4o-mini (fallback) |
| RAG | LangChain 0.3, BAAI/bge-m3, ChromaDB |
| 백엔드 | FastAPI, Uvicorn |
| 실시간 검색 | Tavily API (선택) |
| 크롤링 | requests, BeautifulSoup4, Playwright |
