꼬치꼬치 | FE 현혜주

꼬치꼬치AI 기반 신입 개발자 면접 준비 챗봇 서비스

간단 소개

꼬치꼬치는 신입 개발자의 기술 면접 대비를 돕는 AI 챗봇 서비스입니다. Google Gemini AI가 실제 면접관처럼 동작하여 JavaScript, React, Next.js, CS 등 다양한 주제로 질문을 던지고, 사용자의 답변을 분석하여 보완 설명과 꼬리질문을 제공합니다. 마크다운과 코드 하이라이팅을 지원하여 기술적인 설명을 이해하기 쉽게 표시하며, 타이핑 애니메이션으로 실제 대화하는 듯한 경험을 제공합니다. 로그인 사용자는 Supabase에 채팅 기록이 저장되어 언제든 복습할 수 있습니다.

작업 기간

2025.11. - 진행 중

프로젝트 유형

개인 프로젝트

프로젝트 관련 링크

• 배포 사이트
• 깃허브 링크

기술 스택

#Next.js v16

#Typescript

#TailwindCSS

#Zustand

#Supabase

#Google Gemini API

#React Markdown

구현한 기능

AI 면접관 시스템 구현 (Gemini API)
- • Gemini AI 기반 면접 시스템
  Google Gemini 2.5 Flash API를 OpenAI SDK와 호환되도록 연동하여, 실제 면접관처럼 동작하는 AI 챗봇 시스템 구축
- • 카테고리별 맞춤 질문 제공
  JavaScript, React, Next.js, CS, Database, Network 등 9개 카테고리별 동적 시스템 프롬프트를 적용해 맞춤형 면접 질문 생성
- • 컨텍스트 기반 꼬리질문
  이전 대화 맥락을 유지하며 사용자 답변을 분석하여 보완 설명과 1~2개의 꼬리질문을 자연스럽게 제시
- • 에러 핸들링 및 Rate Limiting 처리
  429 에러 등 API 제한 상황에 대한 사용자 친화적 에러 메시지 제공으로 서비스 신뢰도 향상
실시간 채팅 인터페이스 구현 (Chat UI)
- • 타이핑 애니메이션 구현
  AI 응답을 실시간으로 한 글자씩 타이핑하듯 표시하여 실제 대화하는 듯한 몰입감 제공, 새 메시지와 기존 메시지 구분 처리
- • 마크다운 & 코드 하이라이팅
  React Markdown + remark-gfm + react-syntax-highlighter를 활용해 기술 설명과 코드 블록을 가독성 높게 렌더링
- • 모바일 키보드 최적화
  visualViewport API를 활용한 키보드 높이 감지 및 safe-area 처리로 모바일 환경에서도 최적화된 입력 경험 제공
- • 자동 스크롤 및 UX 개선
  requestAnimationFrame을 활용한 부드러운 자동 스크롤과 로딩 인디케이터로 사용자 경험 향상
사용자 인증 및 데이터 관리 시스템 구축
- • 소셜 로그인 구현
  Supabase Auth를 활용한 Google/Kakao OAuth 로그인 구현, PKCE 플로우로 안전한 인증 방식 적용
- • 하이브리드 데이터 저장 전략
  로그인 사용자는 Supabase DB에, 비로그인 사용자는 sessionStorage에 채팅 기록 저장하여 유연한 사용자 경험 제공
- • 채팅 세션 CRUD 기능
  채팅 세션 생성·조회·수정·삭제 기능 구현, 제목 변경 및 세션별 메시지 관리로 체계적인 면접 기록 관리
- • 반응형 사이드바
  화면 크기에 따른 사이드바 자동 축소/확장, 모바일 오버레이 처리 및 외부 클릭 감지로 직관적인 네비게이션 제공

트러블 슈팅

SVG 아이콘 Sprite 적용을 통한 네트워크·번들 최적화

카테고리 아이콘을 개별 SVG 파일로 관리하면서 다수의 HTTP 요청이 발생했고, 아이콘 수가 늘어날수록 초기 로딩 성능과 캐싱 효율이 저하되는 문제가 있었습니다.

해결 과정

• 개선 전: 개별 SVG 파일을 각각 import하여 사용 → 아이콘 수만큼 HTTP 요청 발생

• 개선 후: 모든 SVG 아이콘을 <symbol> 기반 sprite 파일로 통합

• public/icons-sprite.svg 파일로 관리하고, <use> 기반 SvgIcon 헬퍼 컴포넌트 구현

• 기존 Image 컴포넌트 사용 코드를 SvgIcon 컴포넌트로 전면 교체

결과

• HTTP 요청 수 9개 → 1개로 감소 (약 89% 감소)

• SVG 총 파일 크기 약 51% 감소 (3.7MB → 1.8MB)

• Gzip 압축 기준 약 578KB 절감으로 네트워크 부하 감소

• 아이콘 캐싱 단순화 및 초기 렌더링 성능 개선

배운 점

• SVG Sprite 구조와 <symbol>, <use> 기반 렌더링 방식 이해

• 네트워크 요청 수와 초기 로딩 성능의 직접적인 상관관계 체감

• 공통 UI 리소스를 추상화하여 관리하는 컴포넌트 설계 경험

Next.js App Router 기반 SEO 최적화

검색 엔진 노출 부족과 개인정보 노출 위험을 해결하기 위해 Next.js App Router의 네이티브 SEO 기능을 활용해 사이트 전반의 SEO를 개선했습니다.

해결 과정

• metadataBase, sitemap.ts, robots.ts 적용 → 검색 엔진 크롤링 제어 및 노출 개선

• JSON-LD 구조화된 데이터 추가 → 리치 스니펫 지원

• generateMetadata 적용 → 동적 페이지 메타데이터 설정 및 개인 채팅 세션 index 차단

결과

• 검색 엔진 크롤링 효율 및 검색 노출 품질 개선

• 개인 채팅 세션 검색 노출 차단으로 사용자 프라이버시 보호

• 페이지별 메타데이터 최적화로 SEO 유지보수성 향상

• SEO 점수(Lighthouse 기준) 개선: 약 70점대 → 90점대

배운 점

• Next.js App Router 기반 SEO 설정 패턴 이해

• 구조화된 데이터와 메타데이터의 역할에 대한 실무 경험

• SEO와 사용자 프라이버시를 함께 고려한 설계의 중요성

하이브리드 데이터 저장 전략 구현

비로그인 사용자도 서비스를 이용할 수 있어야 하면서, 로그인 사용자는 여러 기기에서 채팅 기록을 동기화할 수 있어야 했습니다. 두 가지 저장 방식을 일관된 인터페이스로 관리하면서 사용자 경험을 해치지 않는 것이 과제였습니다.

해결 과정

• 개선 전: 단일 저장 방식만 지원 → 비로그인 사용자 사용 불가 또는 로그인 사용자 동기화 불가

• 개선 후: Zustand persist middleware로 로컬 저장 + Supabase로 DB 저장 이원화

• useAuthStore의 인증 상태에 따라 자동으로 저장소 분기 처리

• chatDb 유틸리티로 Supabase CRUD 작업 추상화하여 일관된 API 제공

결과

• 비로그인 사용자도 sessionStorage 기반으로 즉시 서비스 이용 가능

• 로그인 사용자는 Supabase에 채팅 기록 저장으로 여러 기기에서 접근 가능

• 저장 방식 변경 시에도 컴포넌트 수정 최소화

배운 점

• Zustand persist middleware를 활용한 클라이언트 상태 지속성 관리 경험

• 인증 상태 기반 조건부 데이터 저장 전략 설계

• Supabase를 활용한 서버리스 백엔드 구축 경험

AI 면접관 시스템 구현 (Gemini API)

실시간 채팅 인터페이스 구현 (Chat UI)

사용자 인증 및 데이터 관리 시스템 구축

SVG 아이콘 Sprite 적용을 통한 네트워크·번들 최적화

해결 과정

결과

배운 점

Next.js App Router 기반 SEO 최적화

해결 과정

결과

배운 점

하이브리드 데이터 저장 전략 구현

해결 과정

결과

배운 점