모든 프로젝트 보기메인 대시보드 
간트차트 뷰 
AI 커리어 플래너
완료2024-08 ~2025-02
Live DemoGPT 기반 멘토링과 시각화 도구를 결합하여 학생들의 진로 설계를 돕는 웹 플랫폼입니다. 고등학교와 실제 유료 계약을 체결했습니다.
ReactTypeScriptFastAPIGPTMySQLDocker
주요 화면 & 동작
사용자 흐름
성능 & 품질 지표
LCP
1.8s → 1.2s
SSR + 코드 스플리팅
CLS
0.09 → 0.02
<Image>로 레이아웃 시프트 방지
Lighthouse
80 → 92
이미지/스크립트 lazy
아키텍처 한눈에
Jotai 원자 상태로 SSOT를 구성하고, 각 뷰는 필요한 파생 상태만 구독합니다.
수행한 역할 (3개)
Frontend
React와 TypeScript를 기반으로 서비스의 핵심 UI/UX를 설계하고 구현했습니다.
핵심 기여
- AI 멘토 채팅, 마인드맵, 간트차트 등 핵심 UI 모듈 90% 이상 개발
- Jotai를 활용한 전역 상태 관리 아키텍처 설계 및 구현
- react-flow, dnd-kit 등 라이브러리 커스터마이징을 통한 복잡한 인터랙션 구현
- styled-components 기반 반응형 컴포넌트 시스템 구성
Backend
FastAPI를 사용하여 AI 모델 연동 및 데이터 처리를 위한 RESTful API를 개발했습니다.
핵심 기여
- 사용자, 커리어 계획 데이터 모델링 및 MySQL DB 설계
- 대규모 사용자 데이터 처리를 위한 DB 최적화 및 캐싱 전략 적용
- Docker 환경 구성 및 로컬/배포 환경 분리 자동화
AI Mentoring
OpenAI의 GPT 모델을 연동하여 AI 멘토링 기능을 구현했습니다.
핵심 기여
- GPT 응답 구조 설계 및 프롬프트 엔지니어링 협업
- UI 설계 흐름에 맞는 GPT 응답 포맷과 프론트엔드 파싱 로직 통일