설명서
🎯 AI 면접 감정 분석 시스템 - 완전 초보자 가이드
"프로그래밍을 처음 접하는 사람도 이해할 수 있는 친절한 설명서"
📌 목차
- 이 프로젝트가 뭔가요?
- 어떻게 작동하나요?
- 무엇을 할 수 있나요?
- 필요한 것들
- 설치하기 (처음부터 끝까지)
- 사용하기
- 프로젝트 구조 이해하기
- 자주 묻는 질문 (FAQ)
- 문제 해결
- 더 알아보기
1. 이 프로젝트가 뭔가요?
🎭 간단하게 설명하면...
"AI가 당신의 면접 연습을 도와주는 똑똑한 코치 프로그램"입니다!
취업 면접을 준비할 때, 혼자서 연습하면 내가 어떻게 보이는지 알기 어렵죠?
이 프로그램은:
- 📹 카메라로 당신의 표정을 보고
- 🎤 마이크로 당신의 목소리를 듣고
- 🤖 AI가 실시간으로 분석해서
- 📊 "긴장도가 높아요", "자신감이 넘치네요!" 같은 피드백을 줍니다
마치 옆에서 전문 면접 코치가 지켜보는 것처럼요!
🌟 왜 특별한가요?
- 실시간 분석: 면접 연습 중에 실시간으로 감정을 분석해요
- 과학적 근거: Hume AI라는 전문 감정 분석 기술을 사용해요
- 맞춤형 질문: AI가 지원하는 회사와 직무에 딱 맞는 면접 질문을 만들어줘요
- 학습 기능: 사용할수록 더 정확해지는 똑똑한 AI예요
2. 어떻게 작동하나요?
📖 전체 흐름 (쉽게 설명)
┌─────────────────────────────────────────────────────────┐
│ 1️⃣ 질문 생성 │
│ │
│ 당신: "저는 카카오 백엔드 개발자에 지원해요" │
│ AI: "알겠습니다! 맞춤 질문 10개를 만들어드릴게요" │
│ │
└─────────────────┬───────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 2️⃣ 실전 연습 │
│ │
│ 화면에 질문이 하나씩 나타나요 │
│ 타이머를 보면서 답변 연습을 해요 │
│ 답변 팁도 함께 보여줘요 │
│ │
└─────────────────┬───────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 3️⃣ 감정 분석 │
│ │
│ 카메라 ON → 면접 시작! │
│ AI가 실시간으로 당신의 표정과 목소리를 분석해요 │
│ "자신감 80% / 긴장도 30%" 같은 결과를 보여줘요 │
│ │
└─────────────────┬───────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 4️⃣ AI 보고서 │
│ │
│ 면접 종료 후 AI가 전문적인 보고서를 만들어줘요 │
│ "이 부분이 좋았어요" / "이렇게 개선해보세요" │
│ 보고서를 다운로드할 수도 있어요! │
│ │
└─────────────────────────────────────────────────────────┘🔍 기술적으로는... (조금 더 자세히)
프론트엔드 (사용자가 보는 화면)
- React라는 웹 프레임워크로 만들어져요
- 웹 브라우저에서 실행돼요 (크롬, 엣지 등)
- 카메라와 마이크를 사용해요
백엔드 (뒤에서 일하는 서버)
- Node.js로 만들어진 서버예요
- 여러 AI 서비스들과 연결돼 있어요:
- Hume AI: 표정과 목소리 분석
- OpenAI GPT: 질문 생성과 보고서 작성
ML 서버 (선택사항 - 고급 기능)
- Python으로 만든 머신러닝 서버예요
- 4가지 다른 AI 모델을 비교할 수 있어요
- 연구나 논문을 위한 고급 기능이에요
3. 무엇을 할 수 있나요?
✨ 주요 기능 3가지
💡 기능 1: AI 면접 질문 생성
이런 거예요:
입력: "삼성전자, 소프트웨어 엔지니어"
출력:
✅ 질문 1: "당신의 가장 큰 강점은 무엇인가요?"
목적: 자기 이해도 확인
팁: STAR 기법을 사용하세요 (상황-과제-행동-결과)
✅ 질문 2: "C++과 Java 중 어떤 것이 더 익숙한가요?"
목적: 기술 역량 확인
팁: 실제 프로젝트 경험을 언급하세요
... (총 10개)장점:
- ✅ 지원하는 회사에 딱 맞는 질문
- ✅ AI가 회사를 분석해서 만들어줌
- ✅ 각 질문마다 답변 팁 제공
🎤 기능 2: 실전 면접 모드
이런 거예요:
- 실제 면접처럼 전체 화면으로 질문이 나타나요
- 타이머가 작동해서 시간 관리 연습을 할 수 있어요
- 질문이 하나씩 순서대로 나타나요
- "다음 질문" 버튼을 누르면 다음으로 넘어가요
화면 예시:
┌───────────────────────────────────────┐
│ 질문 3/10 [30%] ███░░░ │
│ │
│ "당신의 강점은 무엇인가요?" │
│ │
│ ⏰ 02:34 │
│ │
│ 💡 답변 팁: STAR 기법을 사용하세요 │
└───────────────────────────────────────┘🎭 기능 3: 실시간 감정 분석
이런 거예요:
- 카메라와 마이크를 켜면 AI가 당신을 관찰해요
- 실시간으로 6가지 면접 지표를 측정해요:
| 지표 | 의미 | 높으면 좋은가? |
|---|---|---|
| 자신감 | 얼마나 자신있게 말하는가 | ✅ 높을수록 좋음 |
| 긴장도 | 얼마나 긴장하고 있는가 | ❌ 낮을수록 좋음 |
| 집중도 | 질문에 집중하고 있는가 | ✅ 높을수록 좋음 |
| 열정 | 이 직무에 열정이 있는가 | ✅ 높을수록 좋음 |
| 안정감 | 침착하게 대응하는가 | ✅ 높을수록 좋음 |
| 부정적 태도 | 지루하거나 혼란스러운가 | ❌ 낮을수록 좋음 |
결과 화면 예시:
자신감: ████████░░ 80% ✅ 좋아요!
긴장도: ███░░░░░░░ 30% ✅ 적당해요!
집중도: █████████░ 90% ✅ 훌륭해요!
열정: ███████░░░ 70% ✅ 좋아요!
안정감: ████████░░ 80% ✅ 좋아요!
부정적 태도: ██░░░░░░░░ 20% ✅ 낮아요!🆕 특별 기능: 학습 시스템
이 프로그램의 가장 특별한 점!
일반적인 AI:
면접 분석 → 결과 보여줌 → 끝이 프로그램의 AI:
면접 분석 → 결과 보여줌 → 당신이 평가 → AI가 학습 → 다음에 더 정확해짐!예시:
1회차 면접:
- AI: "긴장도가 70%예요"
- 당신: "아니에요, 별로 안 긴장했는데... (피드백: 2점)"
[AI가 학습]
2회차 면접:
- AI: "긴장도가 40%예요" (조정됨!)
- 당신: "이제 맞네요! (피드백: 5점)"이렇게 사용할수록 당신에게 맞춤화돼요!
4. 필요한 것들
💻 소프트웨어 (프로그램)
필수 (꼭 설치해야 해요)
-
Node.js (버전 18 이상)
- 설명: JavaScript를 실행하는 프로그램
- 다운로드: https://nodejs.org/
- 설치 확인: 명령 프롬프트에서
node --version입력
-
웹 브라우저 (크롬, 엣지, 파이어폭스)
- 이미 있을 거예요!
선택사항 (고급 기능 사용 시)
- Python (버전 3.9 이상)
- 설명: ML 서버를 실행하려면 필요해요
- 다운로드: https://www.python.org/
- 설치 확인:
python --version입력
🔑 API 키 (중요!)
이 프로그램은 외부 AI 서비스를 사용해요. 무료로 받을 수 있어요!
1. Hume AI API 키
- 용도: 감정 분석
- 발급: https://hume.ai/ 가입 후 발급
- 무료 체험: 가입 시 무료 크레딧 제공
2. OpenAI API 키
- 용도: 질문 생성, 보고서 작성
- 발급: https://platform.openai.com/ 가입 후 발급
- 가격: 사용한 만큼 과금 (보통 몇 백원~몇 천원)
💡 팁:
- 테스트용으로는 충분히 무료 크레딧으로 가능해요
- API 키는 절대 다른 사람에게 공유하면 안 돼요!
🎥 하드웨어
- 웹캠 (노트북 내장 카메라 OK)
- 마이크 (노트북 내장 마이크 OK)
- 인터넷 연결
5. 설치하기 (처음부터 끝까지)
🚀 스텝 바이 스텝
1단계: 프로젝트 다운로드
방법 1: Git 사용 (권장)
# Git이 설치되어 있다면
git clone [프로젝트 URL]
cd ai-interview방법 2: ZIP 파일 다운로드
1. GitHub에서 "Code" → "Download ZIP" 클릭
2. 압축 풀기
3. 폴더로 이동
2단계: 백엔드 설정
# 1. 백엔드 폴더로 이동
cd hume-realtime-backend
# 2. 필요한 패키지 설치 (시간이 좀 걸려요)
npm install
# 3. 환경 변수 파일 만들기
# Windows 명령 프롬프트:
echo HUME_API_KEY=여기에_발급받은_키_입력 > .env
echo OPENAI_API_KEY=여기에_발급받은_키_입력 >> .env
echo PORT=8000 >> .env
# 또는 직접 .env 파일을 만들어서 아래 내용 입력:.env 파일 내용:
HUME_API_KEY=여기에_실제_키를_입력하세요
OPENAI_API_KEY=여기에_실제_키를_입력하세요
PORT=80003단계: 프론트엔드 설정
# 1. 프론트엔드 폴더로 이동 (백엔드 폴더에서 나가기)
cd ..
cd hume-realtime-frontend
# 2. 패키지 설치
npm install4단계: (선택) ML 서버 설정
ML 서버는 선택사항이에요. 없어도 프로그램은 잘 작동해요!
# 1. ML 서버 폴더로 이동
cd ..
cd ml-weight-optimizer
# 2. Python 가상환경 만들기
python -m venv venv
# 3. 가상환경 활성화
# Windows:
venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
# 4. Python 패키지 설치
pip install -r requirements.txt✅ 설치 완료 확인
모든 설치가 끝났으면, 폴더 구조가 이렇게 보여야 해요:
ai-interview/
├── hume-realtime-backend/
│ ├── node_modules/ ✅ (설치됨)
│ ├── .env ✅ (만들었음)
│ └── server.js
├── hume-realtime-frontend/
│ ├── node_modules/ ✅ (설치됨)
│ └── src/
└── ml-weight-optimizer/ (선택사항)
├── venv/ ✅ (만들었음)
└── app.py6. 사용하기
🎬 실행하기
기본 모드 (백엔드 + 프론트엔드만)
터미널 1 (백엔드 서버 실행):
cd hume-realtime-backend
npm start
# 이런 메시지가 나오면 성공!
# [BOOT] Hume proxy listening on http://0.0.0.0:8000터미널 2 (프론트엔드 실행):
cd hume-realtime-frontend
npm start
# 브라우저가 자동으로 열려요!
# 안 열리면: http://localhost:3000 접속고급 모드 (ML 서버 포함)
터미널 1 (ML 서버):
cd ml-weight-optimizer
venv\Scripts\activate # Windows
python app.py
# 성공 메시지:
# ML Weight Optimizer running on http://localhost:5000터미널 2 (백엔드):
cd hume-realtime-backend
npm start
# ML 서버를 자동으로 감지해요!
# [LEARNING_AUTO] ✅ ML 서버 감지됨!터미널 3 (프론트엔드):
cd hume-realtime-frontend
npm start📖 사용 가이드
시나리오 1: 첫 면접 연습 (질문 생성 → 연습 → 분석)
Step 1: 질문 생성
1. 브라우저에서 http://localhost:3000 접속
2. 화면 위쪽에 "💡 AI 면접 예상 질문 생성기" 찾기
3. 정보 입력:
- 회사명: 예) "네이버"
- 직무: 예) "프론트엔드 개발자"
- 추가 정보 (선택): 예) "React 전문, 3년차"
- "✨ AI 면접 질문 생성하기" 버튼 클릭
- 30초~1분 기다리기 (AI가 분석 중)
- 질문 10개가 생성됨! 📋
Step 2: 실전 연습
1. "🎤 실전 면접 시작" 버튼 클릭
2. 전체 화면으로 질문이 나타나요
3. 질문을 소리 내어 읽고, "🎤 답변 시작" 클릭
4. 타이머를 보면서 답변 연습
5. "➡️ 다음 질문" 클릭
6. 10개 질문 모두 연습!
Step 3: 감정 분석
1. "📹 카메라 시작하기" 버튼 클릭
2. 브라우저가 권한을 요청하면 "허용" 클릭
3. 얼굴이 화면 중앙에 보이도록 조정
4. "🎬 면접 시작" 클릭
5. 실시간으로 감정 분석 결과가 나타나요!
6. 면접 질문에 대답하는 연습을 해요
7. "⏹️ 면접 종료" 클릭
Step 4: AI 보고서
1. "📝 AI 보고서 생성" 버튼 클릭
2. AI가 분석 중... (20초 정도)
3. 전문적인 면접 피드백 보고서가 나타나요!
4. "💾 보고서 다운로드" 버튼으로 저장 가능
Step 5: 피드백 (선택사항)
1. 보고서 아래쪽에 "피드백 남기기" 버튼
2. 각 지표가 정확했는지 평가 (1-5점)
3. AI가 학습해서 다음에 더 정확해져요!
시나리오 2: 빠르게 감정 분석만 하기
1. 카메라 시작 → 2. 면접 시작 → 3. 연습 → 4. 면접 종료 → 5. 보고서질문 생성은 건너뛰고 바로 감정 분석만 할 수도 있어요!
🎯 팁과 모범 사례
좋은 환경 만들기
- ✅ 조명: 얼굴이 밝게 보이도록
- ✅ 배경: 깔끔하고 조용한 곳
- ✅ 카메라 위치: 눈높이에 맞추기
- ✅ 마이크: 입에서 30cm 이내
효과적인 연습 방법
- 1주일 전: 질문 생성 → 답변 준비
- 3일 전: 실전 모드로 반복 연습 (3-5회)
- 1일 전: 감정 분석으로 체크
- 당일: 최종 점검
피드백 활용하기
- 매번 면접 후 피드백을 남기면 AI가 학습해요
- 3-5번 정도 사용하면 정확도가 눈에 띄게 높아져요
7. 프로젝트 구조 이해하기
📂 폴더별 역할
ai-interview/
│
├── 📁 hume-realtime-backend/ (백엔드 서버)
│ │
│ ├── 📄 server.js 핵심! 서버의 메인 파일
│ │ - Express 웹 서버 실행
│ │ - WebSocket 연결 관리
│ │ - API 엔드포인트 정의
│ │
│ ├── 📄 emotionAnalyzer.js 감정 분석 핵심 로직
│ │ - Hume AI의 48개 감정을 6개 지표로 변환
│ │ - 가중치 적용해서 점수 계산
│ │
│ ├── 📄 interviewQuestionGenerator.js 질문 생성 (LangGraph)
│ │ - OpenAI GPT로 맞춤 질문 생성
│ │ - 3단계 워크플로우
│ │
│ ├── 📄 feedbackLearning.js 규칙 기반 학습
│ ├── 📄 feedbackLearning_ml.js ML 서버 연동
│ ├── 📄 feedbackLearning_auto.js 자동 모드 전환
│ │
│ ├── 📄 weights.json 학습된 가중치 저장 (자동 생성)
│ ├── 📄 feedback_history.json 피드백 히스토리 (자동 생성)
│ └── 📄 .env 비밀 키들 (API 키)
│
├── 📁 hume-realtime-frontend/ (프론트엔드 - 화면)
│ │
│ └── 📁 src/
│ ├── 📄 App.js 메인 애플리케이션
│ │ 모든 컴포넌트를 조합
│ │
│ └── 📁 components/ 화면 구성 요소들
│ │
│ ├── 📄 WebcamRecorder.js 카메라 녹화
│ │ - 웹캠 권한 요청
│ │ - MediaRecorder 사용
│ │
│ ├── 📄 LiveFeedback.js 실시간 감정 표시
│ │ - WebSocket 연결
│ │ - 실시간 데이터 수신
│ │
│ ├── 📄 EmotionGauge.js 감정 차트
│ │ - 6가지 지표를 막대 그래프로
│ │
│ ├── 📄 ReportModal.js AI 보고서 모달
│ │ - 면접 분석 결과 표시
│ │
│ ├── 📄 FeedbackForm.js 사용자 피드백 폼
│ │ - 각 지표 평가 (1-5점)
│ │
│ ├── 📄 QuestionGeneratorModal.js 질문 생성 UI
│ ├── 📄 InterviewMode.js 실전 면접 모드
│ └── 📄 QuestionNavigator.js 질문 네비게이션
│
└── 📁 ml-weight-optimizer/ (ML 서버 - 선택사항)
│
├── 📄 app.py Flask API 서버
│ - HTTP 엔드포인트 제공
│ - 모델 관리
│
├── 📁 models/ 4가지 ML 모델
│ ├── 📄 linear_regression_model.py 빠르고 간단
│ ├── 📄 random_forest_model.py 앙상블 방식
│ ├── 📄 xgboost_model.py 최고 성능 ⭐
│ └── 📄 neural_network_model.py 딥러닝
│
└── 📄 requirements.txt Python 패키지 목록🔄 데이터 흐름
감정 분석 흐름
[프론트엔드] [백엔드] [Hume AI]
웹캠/마이크
↓
MediaRecorder
↓
오디오/비디오
↓
WebSocket →→→→→→→ server.js →→→→→→→ Hume API
↓
감정 데이터 수신
(48개 감정)
↓
emotionAnalyzer.js
(6개 지표로 변환)
↓
←←←←←←←←←←←←← 가공된 데이터 전송
↓
LiveFeedback.js
(화면에 표시)보고서 생성 흐름
[프론트엔드] [백엔드] [OpenAI]
"보고서 생성" 클릭
↓
감정 히스토리 전송 →→→ server.js
↓
통계 계산
↓
→→→→→→→→→→→→→→→ GPT-4o-mini
↓
분석 및 작성
↓
←←←←←←←←←←←←←←←←←←←←←←←←← 보고서 반환
↓
ReportModal.js
(화면에 표시)8. 자주 묻는 질문 (FAQ)
❓ 기본 사용 관련
Q: 인터넷이 꼭 필요한가요?
A: 네! Hume AI와 OpenAI 서비스를 사용하기 때문에 인터넷 연결이 필수예요.
Q: 무료인가요?
A: 프로그램 자체는 무료지만, API 사용료가 있어요:
- Hume AI: 가입 시 무료 크레딧 제공
- OpenAI: 사용한 만큼 과금 (보통 면접 1회당 100-500원)
Q: 카메라가 없어도 되나요?
A: 질문 생성과 실전 연습은 가능하지만, 감정 분석 기능은 사용할 수 없어요.
Q: 여러 명이 동시에 사용할 수 있나요?
A: 한 번에 한 명만 사용할 수 있어요. 각자 자기 컴퓨터에 설치해야 해요.
❓ 기술 관련
Q: Node.js가 뭔가요?
A: JavaScript를 웹 브라우저 밖에서도 실행할 수 있게 해주는 프로그램이에요. 백엔드 서버를 만드는 데 사용돼요.
Q: WebSocket이 뭔가요?
A: 실시간 양방향 통신을 가능하게 해주는 기술이에요. 카카오톡처럼 메시지를 주고받을 수 있어요.
Q: API 키는 왜 필요한가요?
A: 외부 AI 서비스(Hume AI, OpenAI)를 사용하려면 인증이 필요해요. API 키가 바로 그 열쇠예요!
Q: ML 서버는 꼭 켜야 하나요?
A: 아니요! 선택사항이에요. ML 서버 없이도 규칙 기반 알고리즘으로 잘 작동해요.
❓ 기능 관련
Q: 질문 생성이 느려요 (30-60초)
A: 정상이에요! AI가 3단계로 분석하기 때문이에요:
1. 회사 분석 (10-20초)
2. 직무 분석 (10-20초)
3. 질문 생성 (10-20초)
Q: 감정 분석이 정확한가요?
A: Hume AI는 전문 감정 분석 기술이지만, 100% 정확하지는 않아요.
피드백을 남기면 점점 정확해져요!
Q: 여러 회사/직무로 질문을 만들 수 있나요?
A: 네! 원하는 만큼 만들 수 있어요. 매번 새로 생성하면 돼요.
Q: 질문을 저장할 수 있나요?
A: 네! 질문 생성 후 "💾 질문 다운로드" 버튼을 누르면 텍스트 파일로 저장할 수 있어요.
❓ 문제 해결
Q: "EADDRINUSE" 에러가 나요
A: 포트가 이미 사용 중이라는 뜻이에요. 다른 프로그램이 8000번 포트를 쓰고 있을 거예요.
해결: 다른 프로그램 종료하거나 .env 파일에서 PORT를 다른 번호로 변경
Q: 카메라 권한이 안 나와요
A: 브라우저 설정에서 카메라 권한을 확인해보세요.
- 크롬: 주소창 왼쪽 자물쇠 아이콘 → 사이트 설정 → 카메라
Q: "API key invalid" 에러
A: .env 파일의 API 키를 다시 확인해보세요.
- 공백이 있으면 안 돼요
- 따옴표("")가 있으면 안 돼요
Q: "Module not found" 에러
A: 패키지 설치가 안 된 거예요.
해결: npm install 다시 실행
9. 문제 해결
🔧 설치 단계 문제
npm install 실패
# 해결 방법 1: npm 캐시 삭제
npm cache clean --force
npm install
# 해결 방법 2: node_modules 삭제 후 재설치
rm -rf node_modules
npm installPython 패키지 설치 실패
# 해결 방법: pip 업그레이드
python -m pip install --upgrade pip
pip install -r requirements.txt🔧 실행 단계 문제
포트 충돌 (EADDRINUSE)
# Windows에서 포트 8000 사용 중인 프로세스 찾기
netstat -ano | findstr :8000
# 프로세스 종료
taskkill /PID [프로세스ID] /F
# 또는 .env에서 다른 포트 사용
PORT=8001API 키 에러
# .env 파일 확인 포인트:
✅ 파일명이 정확히 ".env"인가? (.env.txt 아님!)
✅ 키 주변에 따옴표가 없나?
✅ 키 뒤에 공백이 없나?
✅ 키가 만료되지 않았나?
# 올바른 예시:
HUME_API_KEY=hume_abc123xyz
OPENAI_API_KEY=sk-abc123xyz
# 잘못된 예시:
HUME_API_KEY="hume_abc123xyz" ❌ 따옴표
HUME_API_KEY=hume_abc123xyz ❌ 뒤에 공백🔧 사용 중 문제
카메라/마이크가 안 켜져요
1. 브라우저 설정 확인
- 크롬: chrome://settings/content/camera
- 사이트 권한에서 localhost 허용
2. 다른 앱에서 사용 중인지 확인
- 줌, 스카이프 등 종료
3. HTTPS가 아니면 localhost에서만 작동
- http://localhost:3000 ✅
- http://192.168.x.x:3000 ❌WebSocket 연결 실패
1. 백엔드 서버가 실행 중인지 확인
- 터미널에 [BOOT] 메시지가 있어야 함
2. 방화벽 확인
- Windows Defender가 차단하는지 확인
3. 브라우저 콘솔 확인
- F12 → Console 탭
- 에러 메시지 확인보고서 생성이 안 돼요
1. OPENAI_API_KEY 확인
- .env 파일에 올바르게 입력됐는지
2. API 크레딧 확인
- https://platform.openai.com/usage
- 잔액이 있는지 확인
3. 감정 데이터가 충분한지 확인
- 최소 10초 이상 면접해야 함🔧 성능 문제
질문 생성이 너무 느려요 (2분 이상)
원인: OpenAI API 응답 지연 또는 네트워크 문제
해결:
1. 인터넷 연결 확인
2. OpenAI 상태 확인: https://status.openai.com/
3. 다른 시간대에 다시 시도 (트래픽이 적을 때)실시간 분석이 끊겨요
원인: Hume AI 연결 불안정 또는 WebSocket 문제
해결:
1. 백엔드 콘솔에서 에러 확인
2. Hume AI API 크레딧 확인
3. 브라우저 새로고침 후 다시 시도10. 더 알아보기
📚 추가 문서
프로젝트에는 더 자세한 가이드들이 있어요:
COMPLETE_GUIDE.md- 전체 시스템 종합 가이드QUICK_START.md- 빠른 시작 가이드FEEDBACK_API_GUIDE.md- 피드백 API 상세 설명LANGGRAPH_GUIDE.md- LangGraph 질문 생성 설명INTERVIEW_MODE_GUIDE.md- 실전 면접 모드 가이드ml-weight-optimizer/README.md- ML 서버 완전 가이드
🎓 학습 자료
기술 스택 배우기
React (프론트엔드)
- 공식 문서: https://react.dev/
- 한국어 튜토리얼: https://ko.react.dev/
Node.js (백엔드)
- 공식 문서: https://nodejs.org/
- 생활코딩: https://opentutorials.org/course/3332
Express (웹 프레임워크)
- 공식 문서: https://expressjs.com/
- 한글 가이드: https://expressjs.com/ko/
WebSocket
🛠️ 커스터마이징
감정 지표 수정하기
hume-realtime-backend/emotionAnalyzer.js 파일 수정:
// 예: 자신감 지표 조정
confidence: {
label: "자신감",
emotions: {
Determination: 1.0, // 가중치 수정
Calmness: 0.8,
Satisfaction: 0.7
}
}질문 개수 변경하기
hume-realtime-backend/interviewQuestionGenerator.js:
// 질문 개수를 15개로 변경
const QUESTION_COUNT = 15;
// 카테고리 비율 조정
- 경험/역량: 5개 (was 3)
- 기술/전문성: 5개 (was 3)
- 문화 적합성: 3개 (was 2)
- 상황 대처: 2개 (was 2)UI 색상 변경하기
hume-realtime-frontend/src/App.css:
/* 메인 색상 변경 */
:root {
--primary-color: #4f46e5; /* 보라색 → 원하는 색으로 */
--success-color: #10b981; /* 초록색 → 원하는 색으로 */
}🚀 고급 기능
1. ML 모델 벤치마크 (논문 작성용)
cd ml-weight-optimizer
# 4가지 모델 성능 비교
python simulate_offline_benchmark.py --samples 200
# 결과 확인
# offline_benchmark_results/learning_curves.png
# offline_benchmark_results/learning_history.json2. 커스텀 ML 모델 추가
ml-weight-optimizer/models/custom_model.py 생성:
from models.base_model import WeightOptimizer
class CustomOptimizer(WeightOptimizer):
def __init__(self):
super().__init__("custom", "My Custom Model")
def train(self, X, y):
# 학습 로직
pass
def predict(self, X):
# 예측 로직
pass💡 프로젝트 확장 아이디어
1. 면접 녹화 기능
- MediaRecorder로 전체 면접 녹화
- 다운로드 기능 추가
- 나중에 다시 보기
2. 음성 텍스트 변환
- Web Speech API 사용
- 답변을 자동으로 텍스트로 변환
- 답변 내용 분석
3. 면접 이력 관리
- 데이터베이스 추가 (MongoDB, PostgreSQL)
- 과거 면접 기록 저장
- 진행도 그래프
4. 멀티플레이어 모드
- 친구와 함께 모의 면접
- 서로 피드백 주고받기
5. 모바일 앱
- React Native로 포팅
- 스마트폰에서도 사용
🌟 기여하기
이 프로젝트를 개선하고 싶다면:
- 버그 리포트: 문제를 발견하면 이슈 등록
- 기능 제안: 새로운 아이디어 공유
- 코드 기여: Pull Request 보내기
- 문서 개선: 오타 수정, 설명 보완
기여 절차:
1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request📞 도움이 더 필요하다면
문제 해결 순서:
1. 이 가이드의 "문제 해결" 섹션 확인
2. GitHub Issues 검색 (비슷한 문제가 있는지)
3. 새로운 Issue 등록 (문제 상세 설명)
4. 관련 문서 읽기 (COMPLETE_GUIDE.md 등)
Issue 등록 시 포함할 정보:
- 운영체제 (Windows 10, Mac OS 등)
- Node.js 버전 (
node --version) - 에러 메시지 (전체 복사)
- 스크린샷
- 시도한 해결 방법
🎉 마치며
✨ 이 프로젝트의 핵심 가치
- 실전 연습: 실제 면접처럼 연습할 수 있어요
- 과학적 분석: AI가 객관적으로 분석해줘요
- 맞춤형 학습: 사용할수록 정확해져요
- 완전 자동화: 질문 생성부터 보고서까지 자동
- 오픈소스: 누구나 무료로 사용하고 개선할 수 있어요
🎯 효과적인 활용법
면접 3주 전:
1. 프로그램 설치 및 테스트
2. 지원 회사별 질문 생성 (5-10개 회사)
3. 각 질문에 대한 답변 작성면접 1주 전:
1. 실전 면접 모드로 매일 연습 (1시간)
2. 답변을 다듬고 개선
3. 타이머 보며 시간 관리 연습면접 3일 전:
1. 감정 분석 모드로 실전 연습
2. 긴장도, 자신감 체크
3. 표정과 목소리 개선면접 전날:
1. 최종 점검 (1-2회)
2. 보고서 확인 및 조언 숙지
3. 충분한 휴식!💪 당신은 할 수 있습니다!
이 프로그램은 도구일 뿐이에요.
진짜 중요한 건 당신의 열정과 노력이에요! 🌟
면접 성공의 3가지 비결:
1. 📚 준비: 회사와 직무에 대해 충분히 공부하기
2. 🎭 연습: 이 프로그램으로 반복해서 연습하기
3. 😊 자신감: 준비한 만큼 자신감을 갖기
🙏 감사 인사
이 프로젝트를 가능하게 해준:
- Hume AI - 최첨단 감정 분석 기술
- OpenAI - GPT 기반 AI 보고서
- React 커뮤니티 - 훌륭한 UI 프레임워크
- Node.js 커뮤니티 - 강력한 백엔드 플랫폼
- 당신 - 이 프로그램을 사용해주셔서 감사합니다!
📢 마지막으로...
이 가이드가 도움이 되었나요?
- ⭐ GitHub에서 Star 눌러주세요
- 🔄 친구들과 공유해주세요
- 💬 피드백을 남겨주세요
면접 합격하시면 꼭 알려주세요! 🎊
여러분의 성공을 진심으로 응원합니다! 💙
화이팅! 🚀
📄 부록
A. 용어 사전
| 용어 | 설명 |
|---|---|
| API | Application Programming Interface. 프로그램끼리 소통하는 방법 |
| WebSocket | 실시간 양방향 통신 기술 |
| React | 사용자 인터페이스를 만드는 JavaScript 라이브러리 |
| Node.js | JavaScript를 서버에서 실행할 수 있게 해주는 런타임 |
| Express | Node.js 웹 프레임워크 |
| ML | Machine Learning (머신러닝, 기계학습) |
| GPT | Generative Pre-trained Transformer. OpenAI의 AI 모델 |
| LangGraph | AI 워크플로우를 만드는 도구 |
| Flask | Python 웹 프레임워크 |
B. 단축키 모음
| 위치 | 단축키 | 기능 |
|---|---|---|
| 브라우저 | Ctrl + Shift + I | 개발자 도구 열기 (디버깅) |
| 브라우저 | F12 | 개발자 도구 열기 |
| 브라우저 | Ctrl + R | 새로고침 |
| 터미널 | Ctrl + C | 서버 종료 |
| VSCode | Ctrl + ` | 터미널 열기/닫기 |
C. 체크리스트
설치 완료 체크리스트
- Node.js 설치 완료 (
node --version확인) - Python 설치 완료 (선택사항)
- 프로젝트 다운로드 완료
- 백엔드 패키지 설치 (
npm install) - 프론트엔드 패키지 설치 (
npm install) - .env 파일 생성
- Hume AI API 키 발급 및 입력
- OpenAI API 키 발급 및 입력
첫 실행 체크리스트
- 백엔드 서버 실행 (8000 포트)
- 프론트엔드 실행 (3000 포트)
- 브라우저에서 접속 성공
- 카메라 권한 허용
- 마이크 권한 허용
- 질문 생성 테스트
- 감정 분석 테스트
- 보고서 생성 테스트
버전: 1.0.0
최종 수정: 2024년
작성자: AI Interview System Team
이 가이드를 읽어주셔서 감사합니다! 🙏
행운을 빕니다! 🍀
컴퓨터정보공학부 졸업생입니다. 안녕하세요