진행 중

SpeakUp (AI 모의 면접 플랫폼)

사용자의 이력서 데이터를 기반으로 맞춤형 AI 면접 시나리오를 제공하고, 객관적인 피드백을 통해 면접 역량 강화를 돕는 Full-Stack 웹 애플리케이션입니다. 비효율적인 기존 면접 준비 방식을 개선하는 것을 목표로 합니다.

Contributions

수행한 역할

1인 개발의 복잡성을 관리하고, 각 컴포넌트(프론트엔드, 백엔드, AI)를 독립적으로 개발할 수 있는 명확한 로드맵과 기술 명세서를 완성했습니다.

AI 모델 연동 및 서버 인프라를 비용 효율성과 확장성을 고려하여 설계했습니다.

AI 모델 선정 및 비용 최적화: 외부 유료 STT API 대신, 오픈소스인 faster-whisper를 직접 서버에서 운영하도록 설계하여 API 비용을 '0'으로 만들었습니다. 이를 통해 MVP 단계의 운영 비용을 획기적으로 절감했습니다.
프롬프트 엔지니어링 전략 수립 (계획): 사용자가 입력한 이력서 정보를 동적으로 조합하여, 단순 정보 확인을 넘어 사용자의 경험과 논리력을 검증할 수 있는 심층 꼬리 질문을 생성하는 프롬프트 체인을 설계할 예정입니다.
개발/배포 환경 분리: .env 파일과 Pydantic Settings를 활용하여 로컬 개발 환경과 프로덕션 환경의 설정(DB 정보, 시크릿 키 등)을 안전하고 효과적으로 분리하는 시스템을 구축했습니다.

Next.js의 App Router를 기반으로 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 활용하여, 성능과 사용자 경험을 모두 고려한 인터랙티브 UI를 개발했습니다.

MVVM 아키텍처 도입: UI 로직(ViewModel)과 뷰(View)를 커스텀 훅과 컴포넌트로 분리하여 테스트 용이성과 코드 재사용성을 극대화했습니다.
전역 상태 관리 시스템 설계: React Context API를 활용하여 인증(AuthProvider), 테마(ThemeProvider), 전역 알림(ToastProvider), Drawer UI 등 여러 컴포넌트가 공유하는 상태를 체계적으로 관리했습니다.
고급 UI 인터랙션 구현: IntersectionObserver API를 활용하여 스크롤 위치에 따라 목차가 활성화되는 'Scrollspy' 기능을 구현하고, Tailwind CSS의 반응형 시스템을 통해 데스크탑과 모바일 환경에 최적화된 레이아웃을 구축했습니다.
안전한 API 클라이언트 설계: ky 라이브러리의 hooks를 이용, Access Token 만료 시 자동으로 Refresh Token을 사용해 토큰을 재발급하고 원래 요청을 재시도하는 인터셉터를 구현하여 사용자 경험을 향상시켰습니다.

Python과 FastAPI를 사용하여 확장 가능하고 안전한 RESTful API 서버를 구축했습니다.

데이터베이스 모델링 및 마이그레이션: SQLAlchemy를 사용하여 사용자, 이력서, 직무 카테고리 등 핵심 데이터를 정규화하고, 1:N 및 N:M 관계를 명확히 정의했습니다. Alembic을 통해 데이터베이스 스키마 버전을 안전하게 관리합니다.
보안 중심의 인증 시스템 구축: Access Token과 HttpOnly Refresh Token 패턴을 도입하여 XSS 공격으로부터 Refresh Token을 보호하고, CSRF 공격은 SameSite 쿠키 속성으로 방어하는 등 웹 보안 표준을 준수했습니다.
계층화된 아키텍처 설계: API 엔드포인트, 비즈니스 로직(CRUD), 데이터 모델을 명확히 분리했습니다. 제네릭 CRUDBase 클래스를 구현하여 반복적인 데이터베이스 작업을 추상화하고 코드의 일관성을 유지했습니다.
타입-세이프 API 설계: Pydantic을 사용하여 API 요청/응답 스키마를 엄격하게 정의하고, 데이터 유효성 검사를 자동화하여 백엔드와 프론트엔드 간의 안정적인 데이터 계약을 보장했습니다.