On-Device AI 기술을 활용한 프라이빗하고 강력한 프론트엔드 면접 튜터입니다. 브라우저 내에서 직접 구동되는 AI 모델(Llama-3.2)을 통해, 실제 면접관과 대화하듯 실시간 피드백과 심층 질문을 받아보세요.
- WebLLM을 활용하여 서버 통신 없이 브라우저 내에서 직접 AI 모델을 구동합니다.
- 데이터가 외부로 전송되지 않아 완벽한 프라이버시를 보장합니다.
- Web Worker 기반의 비동기 처리로 UI 끊김 없는 쾌적한 대화 경험을 제공합니다.
- Zustand를 이용한 가볍고 빠른 전역 상태 관리.
- **IndexedDB (Dexie.js)**를 활용하여, 대화 내용과 면접 세션이 브라우저에 영구 저장됩니다.
- 언제든 이전 면접 기록을 열람하거나 이어서 진행할 수 있습니다.
- Tailwind CSS v4 기반의 모던하고 세련된 디자인.
- 다크 모드 지원 및 부드러운 애니메이션 효과.
- 사이드바를 통한 직관적인 세션 관리 (생성/이동/삭제).
| 분류 | 기술 | 비고 |
|---|---|---|
| Framework | Next.js 15 (App Router) | 최신 React 기능 활용 |
| Language | TypeScript | 정적 타입 안정성 확보 |
| Styling | Tailwind CSS v4 | 유틸리티 퍼스트 스타일링 |
| State Mgmt | Zustand | 직관적인 전역 상태 관리 |
| Database | Dexie.js (IndexedDB) | 클라이언트 사이드 데이터 영속성 |
| AI Engine | @mlc-ai/web-llm | WebGPU 기반 브라우저 LLM 추론 |
| Icons | Lucide React | 깔끔한 벡터 아이콘 |
- Node.js v18 이상
- WebGPU를 지원하는 최신 브라우저 (Chrome 113+, Edge 등)
- Apple Silicon (M1/M2/M3) Mac 환경에서 최상의 성능을 발휘합니다.
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev브라우저에서 http://localhost:3000으로 접속하세요.
- 모델 로딩: 최초 접속 시 AI 모델을 다운로드합니다. (네트워크 환경에 따라 수 분 소요될 수 있습니다.)
- 면접 시작: 준비가 완료되면 AI 면접관이 첫 질문을 던집니다.
- 대화 진행: 질문에 답변하면, AI가 점수(0~100)와 피드백, 그리고 꼬리 질문을 제공합니다.
- 세션 관리:
- 초기화: 상단 헤더의
삭제버튼을 눌러 현재 대화를 지우고 새로 시작할 수 있습니다. - 목록: 왼쪽 사이드바에서 지난 면접 기록을 확인하거나,
휴지통아이콘을 눌러 삭제할 수 있습니다.
- 초기화: 상단 헤더의
src/
├── app/ # Next.js App Router 페이지
├── components/ # UI 컴포넌트
│ ├── chat/ # 채팅 관련 (입력창, 메시지 리스트 등)
│ ├── layout/ # 레이아웃 (사이드바, 헤더)
│ └── model-loader.tsx # AI 모델 로딩 UI
├── hooks/ # 커스텀 훅 (useWebLLM 등)
├── lib/ # 라이브러리 설정 (Dexie DB 등)
├── store/ # Zustand 스토어 (interview-store.ts)
└── workers/ # Web Worker (ai-worker.ts)
This project is MIT licensed.