경희대학교 미래인재센터에서 제공하는 AI 기반 3D 역량 분석 서비스 (누적 이용자 700+ · 조회수 1.7천)
자기소개서를 AI로 분석하여 학습 수준(X) · 직무적합성(Y) · 수행역량(Z) 3개 축으로 역량을 입체적으로 평가합니다.
- 배포 URL: https://pertineo.khu.ac.kr/
- 원본 저장소: https://github.com/khu-return-19/client
| 팀 구성 | 프론트엔드 3인 중 담당 (기여도 40%) |
|---|---|
| 메인 Landing Page | Hero 섹션, 서비스 소개 영상 섹션 |
| Auth Page | 이메일 인증 플로우, 인증 코드 타이머 |
| Self-Intro Page | 자기소개서 입력, 일괄 입력 모달 |
| Analysis Page | 분석 요약(1탭), 개선 전략(3탭) |
| API 연동 | 이메일 인증 API, 세션 시작/연장 API, 자소서 AI 파싱 API |
| 상태 관리 | sessionStorage 기반 인증 상태 · 세션 · 입력 데이터 영속화 |
1. sessionStorage 기반 인증 상태 복원
세션 시작 시 sessionStartTime과 verifiedEmail을 sessionStorage에 저장하고, 재진입 시 이를 확인해 인증 상태를 자동 복원하도록 구현했습니다. 기존 분석 리포트가 존재하는 경우 analysis-report 키로 저장하여 사용자가 이어서 진행할 수 있도록 분기 처리했습니다.
인증 페이지 방문 → 인증 완료 전환율 61.7% 으로 기능개선 (Google Analytics)
2. 세션 상태 기반 라우팅 분기
랜딩 페이지 CTA에서 세션·리포트 존재 여부에 따라 3가지 경로로 분기하도록 구현했습니다. 세션과 리포트가 모두 있으면 sessionStorage에 플래그를 저장해 인증 페이지에서 감지 후 리포트 모달을 표시하고, 세션만 있으면 입력 페이지로, 둘 다 없으면 인증 페이지로 이동합니다. 사용자가 어느 단계에서 이탈했든 불필요한 재인증 없이 적절한 화면으로 안내하여 UX를 개선했습니다.
3. 세션 만료 타이머 + 보안 처리
useRef로 1초 단위 interval을 관리하고 sessionStartTime 기준 30분 카운트다운을 구현했습니다. 타이머 만료 시 sessionStorage.clear()로 모든 클라이언트 데이터를 일괄 삭제하고 랜딩 페이지로 이동시키며, 만료 전 연장 버튼을 통해 서버 API를 호출하고 타이머를 리셋할 수 있도록 했습니다.
실사용자 700+를 보유한 공식 서비스로, 실제 사용 환경에서 발견된 문제를 직접 개선했습니다.
| 문제 | 개선 | 결과 |
|---|---|---|
| 인증 후 창을 닫고 재접속 시 세션 충돌로 서비스 이용 불가 | sessionStorage 기반 인증 상태 복원으로 세션 동기화 | 인증 완료 전환율 61.7% (Google Analytics) |
| 일괄 입력 후 AI 파싱 대기 중 처리 확인 불가 | 파싱 중 스피너 표시 및 모달 이탈 방지 처리 | 처리 중 여부를 명확히 인지할 수 있도록 개선 |
1. 서버-클라이언트 세션 상태 불일치
이메일 인증 후 세션이 활성화된 상태에서 창을 닫고 재접속하면, 서버에는 세션이 살아있지만 클라이언트는 상태를 잃어 재인증을 시도합니다. 이미 활성화된 세션과 충돌하여 서비스 이용이 불가능한 상황이 발생했습니다.
세션 시작 시점을 sessionStorage에 저장하고 재진입 시 복원하는 방식으로 클라이언트-서버 상태를 동기화했습니다. 분석 리포트가 존재하는 경우에도 이어서 진행할 수 있도록 분기 처리하여 세션 충돌을 방지했습니다.
인증 페이지 방문 → 인증 완료 전환율 61.7% 기록 (Google Analytics)
2. 공식 서비스 보안 요구사항 — 클라이언트 데이터 노출
경희대학교 공식 서비스 특성상 개인정보 및 인증 데이터 보안 요구사항이 엄격했습니다. 학생 개인정보 보호를 위해 클라이언트에 잔류하는 인증 정보와 분석 데이터에 대한 명확한 만료 기준과 처리 방식이 필요했습니다.
30분 카운트다운 타이머를 구현하고 만료 시 sessionStorage.clear()로 모든 클라이언트 데이터를 일괄 삭제하도록 했습니다. 세션 연장이 필요한 경우 연장 버튼으로 서버 API를 호출하고 타이머를 리셋하여 보안과 사용성을 함께 확보했습니다.