간단 소개꼬치꼬치는 개발자의 기술 면접 대비를 돕는 AI 면접 준비 통합 플랫폼입니다. Google Gemini AI가 실제 면접관처럼 동작하여 CS, 프론트엔드, 백엔드, AI, 네이티브, 인프라 등 다양한 트랙별 주제로 질문을 던지고, 사용자의 답변을 분석하여 보완 설명과 꼬리질문을 제공합니다. 면접 챗봇 외에도 핵심 기술 용어를 정리한 '용어 쏙쏙 노트'와 자주 출제되는 면접 질문을 모은 '족집게 질문 노트' 기능을 제공합니다. 마크다운과 코드 하이라이팅을 지원하여 기술적인 설명을 이해하기 쉽게 표시하며, 비로그인 사용자도 체험할 수 있고 로그인 시 Supabase에 채팅 기록이 저장되어 언제든 복습할 수 있습니다.
작업 기간2025.11. - 진행 중
프로젝트 유형개인 프로젝트
기술 스택
구현한 기능
AI 면접관 시스템 구현 (Gemini API)
- • Gemini AI 기반 면접 시스템
Google Gemini 2.5 Flash API를 OpenAI SDK 호환 방식으로 연동하여, 실제 면접관처럼 동작하는 AI 챗봇 시스템 구축
- • 트랙·카테고리별 맞춤 질문 제공
CS, 프론트엔드, 백엔드, AI, 네이티브, 인프라 등 6개 카테고리와 하위 카테고리 기반 동적 시스템 프롬프트를 적용해 맞춤형 면접 질문 생성
- • 컨텍스트 기반 꼬리질문
이전 대화 맥락을 유지하며 사용자 답변을 분석하여 보완 설명과 1~2개의 꼬리질문을 자연스럽게 제시
- • 비로그인 체험 및 에러 핸들링
비로그인 사용자도 제한된 횟수 내 면접 체험 가능, 429/403 에러 등 API 제한 상황에 대한 사용자 친화적 에러 메시지 및 체험 초과 모달 제공
- • Gemini AI 기반 면접 시스템
실시간 채팅 인터페이스 구현 (Chat UI)
- • 타이핑 애니메이션 구현
AI 응답을 실시간으로 한 글자씩 타이핑하듯 표시하여 실제 대화하는 듯한 몰입감 제공, 메시지 생성 시간 기반으로 새 메시지와 기존 메시지를 구분 처리
- • 마크다운 & 코드 하이라이팅
React Markdown + remark-gfm + react-syntax-highlighter를 활용해 기술 설명과 코드 블록을 가독성 높게 렌더링
- • 모바일 키보드 최적화
visualViewport API를 활용한 키보드 높이 감지 및 safe-area 처리로 모바일 환경에서도 최적화된 입력 경험 제공
- • 자동 스크롤 및 UX 개선
requestAnimationFrame을 활용한 부드러운 자동 스크롤과 로딩 인디케이터로 사용자 경험 향상
- • 타이핑 애니메이션 구현
인증 및 학습 콘텐츠 시스템 구축
- • 소셜 로그인 및 하이브리드 저장 전략
Supabase Auth 기반 Google/Kakao OAuth 로그인 구현, 로그인 사용자는 Supabase DB에, 비로그인 사용자는 sessionStorage에 채팅 기록을 저장하는 이원화 전략 적용
- • 용어 사전 & 질문 노트 기능
Supabase DB 기반 카테고리·하위 카테고리별 기술 용어 사전과 예상 질문 노트 기능 구현, Tanstack Query 캐싱 및 URL searchParams 동기화로 빠른 탐색 지원
- • 채팅 세션 CRUD 및 반응형 사이드바
채팅 세션 생성·조회·수정·삭제 기능과 화면 크기에 따른 사이드바 자동 축소/확장, 모바일 오버레이 처리로 체계적인 면접 기록 관리 및 직관적인 네비게이션 제공
- • SEO 및 구조화된 데이터
FAQPage·DefinedTermSet JSON-LD 스키마, sitemap.ts, robots.ts 적용으로 검색 엔진 최적화 및 개인 채팅 세션 크롤링 차단을 통한 프라이버시 보호
- • 소셜 로그인 및 하이브리드 저장 전략