🚀 Express2

해당 프로젝트는 직행과 큐시즘이 협업한 기업 프로젝트입니다.

🏆 프로젝트 소개

KUSITMS × 직행 2팀
“수많은 별들 속에서, 나만의 커리어 별을 찾아가는 여정”

저희 플랫폼은 단순히 채용 공고를 나열하는 구직 사이트가 아니라,
사용자가 마치 우주를 탐험하듯 자신에게 맞는 커리어를 발견하는 여정을 제공합니다.

개인의 성향과 선호를 반영한 맞춤형 추천과
우주 탐험을 모티브로 한 몰입감 있는 UI/UX를 통해,
취업 과정을 더 즐겁고 의미 있는 경험으로 바꾸는 것을 목표로 합니다.

문제 정의 & 해결책

📉 문제 정의

문제	영향
낮은 검색 정확성 & 과도한 공고 노출	사용자 혼란, 이탈 증가
번거로운 회원가입 절차	가입 전환율 저하
플랫폼 재방문율 낮음	장기 사용자 확보 어려움

💡 해결책

• 온보딩 게임 요소 삽입
  → 로켓 발사 / 미션 수행 컨셉으로 자연스러운 가입 유도

• AI 기반 맞춤 추천 시스템
  → 사용자의 경력·성향을 반영한 필터링된 공고 제공

• 우주 테마 UI/UX
  → 탐험 컨셉 시각화, 몰입도 강화

🚀 핵심 기능

기능	설명
🌌 온보딩 기반 가입 유도	우주 미션 요소로 자연스럽게 정보 입력을 유도
🤖 AI 추천 시스템	경력, 직군, 복지, 출퇴근 거리 등을 반영해 맞춤 공고 추천
🔎 공고 검색 & 필터링	조건 및 태그 기반으로 다양한 탐색 가능
📌 관심 공고 저장 / 지원 내역 관리	북마크 및 지원 상태 확인 가능
📢 공유 기능	결과/공고를 SNS에 공유하여 확산 유도

🤝 팀원 소개

Frontend (FE)		Backend (BE)
황유림 Frontend Lead	김지원 Frontend	이민호 Backend Lead	이연호 Backend

🛠 기술 스택

역할	기술 / 도구
Frontend
Backend

---

🖥 Frontend 화면별 사용 기술

	소셜 로그인 /login • 카카오 소셜 로그인 적용 • Axios 인터셉터로 모든 API 요청에 자동으로 액세스 토큰 포함 • 토큰 만료 시 리프레시 토큰으로 자동 재발급 → 끊김 없는 사용자 경험 유지
	프로필(마이페이지) 화면 /profile • Axios로 프로필 조회 → Zustand 전역 상태 관리 • React Router로 온보딩/수정 페이지 이동 • Tailwind 기반 반응형 UI • 성향 카드: SVG 캐릭터 렌더링 • 재온보딩 API 호출 후 Zustand reset 및 localStorage 갱신
	온보딩 시작 화면 /onboarding/start • lottie-react로 애니메이션 렌더링 • Tailwind로 모바일/태블릿 텍스트 분기 • React Router useNavigate()로 테스트 화면 이동
	온보딩 결과 화면 /onboarding/result • useLocation으로 진입 경로 분기 (마이페이지/재테스트/온보딩) • 추천 공고 API(getMyPageAll → RECOMMENDJOBLIST fallback) • Zustand로 온보딩 상태 공유 • 미로그인 시 리스트 blur 처리 + framer-motion(AnimatePresence) CTA 오버레이 • useInView로 CTA 노출 타이밍 제어 • usePngExport로 프로필 카드 PNG 저장
	온보딩 테스트 결과 로딩 /onboarding/test • framer-motion으로 로켓 발사 연출 (조건부 showRocket) • lottie-react JSON 애니메이션 (loop: false, autoplay)
	공고 화면 로켓 애니메이션 /:category • framer-motion useReducedMotion으로 접근성 대응 • 데스크톱: 쿼드 베지어 곡선 경로 + 회전 보간 • lottie-react 로켓/구름 애니메이션 • Tailwind로 텍스트 오버레이 및 배치
	온보딩 회원가입 페이지 /onboarding/sign-up, /sign-up • Zustand로 입력 데이터 저장 • useMemo 훅으로 7단계 진행률 실시간 계산 • Tailwind 반응형 UI + fixed positioning으로 헤더 고정 • backdrop-blur 효과 적용 • useEffect로 진입 시 스크롤 제어 • 조건부 렌더링으로 단계별 컴포넌트 순차 표시
	회원 정보 수정하기 /onboarding/sign-up • Zustand 스토어 2개(signUpStore, editMyInfoStore) 활용 • useEffect로 기존 데이터 동기화 • 신규/수정 모드 분기 로직 • 동적 스타일링 및 토글 기능 제공 • scrollIntoView로 부드러운 단계 전환
	온보딩 성향 테스트 페이지 /onboarding/test • useState로 6단계 테스트 진행 관리 • Zustand로 신규/재테스트 상황 구분 저장 • useEffect로 완료 시 API 호출(post/repost) • API 성공 시 로켓 애니메이션 → 3초 후 결과 페이지 이동 • 단계별 Card 컴포넌트 조건부 렌더링 • framer-motion으로 배경 로켓 애니메이션 구현
	맞춤 공고 /custom • React Query useInfiniteQuery + Intersection Observer API로 무한 스크롤 구현 • localStorage accessToken + 온보딩 데이터 인증 상태 확인 • 조건부 렌더링: 미로그인 시 회원가입 유도, 미완료 시 온보딩 버튼 표시 • 완료 사용자 → 개인화된 공고 리스트 제공 • useCallback + 커스텀 훅으로 무한스크롤 최적화 • getNextPageParam으로 페이징 처리, staleTime/gcTime=0 설정 • 로딩 상태: GIF 표시 / 데이터 없음: NoMatchingJobs 컴포넌트 처리

---

⚙️ Backend 기술 적용 상세

🔐 소셜 로그인 API /oauth/{provider}

• Spring Security + OAuth2 Client 기반 카카오 인증 구현
• JWT(Access/Refresh) 발급 및 Redis 저장 구조 설계
• Refresh Token Rotation + 만료 시 자동 재발급 처리

---

👏 온보딩 API /onboarding

• 사용자의 직군, 복지, 회사 유형, 출퇴근 조건 수집
• 복지/회사 유형별 점수 계산 및 비율 산출 로직 구현
• 결과 데이터 MySQL 저장 및 Redis 캐싱

---

🚀 온보딩 결과 API /onboarding/result

• @Async 기반 비동기 처리로 빠른 응답 제공, 이후 백그라운드에서 데이터 저장 로직 수행
• 추천 결과는 job_recommend 테이블에 저장되어 여러 군데에서 재사용.
• Redis 캐싱으로 재조회 시 즉시 응답

---

🧠 AI 맞춤 추천 API /recommend

• Clova Studio Embedding API로 공고/사용자 데이터 벡터화
• OpenSearch KNN 기반 유사도 검색(Top-N 추천)
• 회사 규모 비율, 복지 점수, 통근거리 관련 필터링 로직 구현

---

🗺️ 통근 거리 계산 API /commute

• Tmap API 연동으로 사용자 주소 ↔ 기업 주소 간 거리 계산
• 대중교통 / 자차 모드별 시간 계산 지원
• 사용자 개인의 희망 최대 통근시간 기반 필터링 적용

---

⚙️ 인프라 및 배포 구조

• NCP(Naver Cloud Platform) 기반 구성
• Nginx Reverse Proxy + Spring Boot JAR 배포
• MySQL (Cloud DB), Redis, OpenSearch(NCP Search Engine Service), Object Storage 활용

---

시스템 아키텍처

데이터 파이프라인

📚 참고

• NCP를 이용한 RAG 추천 시스템
• [Spring Boot] NCP로 서버 생성하기
• Tmap API를 이용한 교통시간 계산 로직 (1)

© 2025 Express2 Team