프로젝트 소개

• 멘티와 비슷한 스펙의 멘토를 자동으로 매칭해주는 멘토링 서비스
• Frontend 1명, Backend 1명, PM 2명 총 4명
• 2024 충남대학교 창업동아리 최종 선발 및 최대 300만원 창업 지원금 확보
• 총 18명 멘토링 매칭 성공

링크

• 배포 사이트
• 소스코드
• 회고

기여한 부분

1. MVP 랜딩페이지 제작

• RouteChangeTracker 커스텀 훅 제작
  • AS-IS: CTA 버튼 클릭률 데이터 수집과 페이지별 사용자 이동 데이터를 제대로 추적하지 못함.
  • Challenge: Google Analytics(GA)와 연동하여 페이지 이동을 추적할 수 있는 RouteChangeTracker 커스텀 훅을 제작. 이를 통해 CTA 버튼의 위치 최적화와 페이지별 행동 패턴을 분석함.
  • TO-BE: 방문자 650% 증가(90명 → 674명), 폼 리다이렉트 클릭 이벤트 277% 증가(31번 → 117번)하여 사용자 데이터 폼 수집 이동률의 향상을 이룸.
• useIntersectionObserver 커스텀 훅 제작
  • AS-IS: 페이지 스크롤 시 특정 요소에 애니메이션을 적용하고 싶었으나, 각 요소가 언제 뷰포트에 나타나는지 알 수 없었음.
  • Challenge:
    • IntersectionObserver API를 활용해 특정 요소가 뷰포트에 노출될 때 이를 감지하는 useIntersectionObserver 커스텀 훅을 구현.
    • 선언적으로 사용할 수 있는 InViewAnimation 컴포넌트를 만들어 재사용성을 높임.
  • TO-BE: 선언적 코드 구조를 통해 개발자 경험(DX)을 개선하고, 코드 재사용성 및 유지보수성을 향상시킴.
• 기업 리스트 Marquee 구현
  • AS-IS: 기업 리스트를 무한히 움직이게 하려 했으나, 직접 구현 시 코드가 복잡해지고 애니메이션이 부자연스러웠음.
  • Challenge: react-fast-marquee 라이브러리의 Marquee 컴포넌트를 사용하여 애니메이션을 간단하게 적용. 성능 저하 없이 리스트를 부드럽게 무한히 움직이도록 최적화함.
  • TO-BE: 코드 복잡도를 줄이고 사용자 경험과 서비스 신뢰도를 향상시킴.
• 멘토 프로필 슬라이더 구현
  • AS-IS: 반응형 슬라이더를 구현하려 했으나, 다양한 디바이스에서 일관된 사용자 경험을 제공하기가 어려웠음.
  • Challenge: react-slick의 Slider 컴포넌트와 getSliderSettings 함수를 구현하여 슬라이드 설정을 통합 관리. useMediaQuery를 통해 디바이스별로 반응형 슬라이더를 적용.
  • TO-BE: 유지보수성을 높이고 다양한 화면 크기에서 최적화된 사용자 경험을 제공할 수 있는 슬라이더를 구현함.

2. 가설 도출 및 검증

• AS-IS: 사용자 수요를 제대로 파악하지 못해 초기 기획에 대한 확신이 부족했음.
• Challenge:
  • 인스타그램 퍼포먼스 마케팅을 통해 페이크 도어 A/B 테스트를 진행.
  • 에브리타임과 네이버 취업 카페에서 바이럴 마케팅 실행.
  • GA 연동을 통해 페이지 도달률과 클릭 이벤트 추적.
  • Tally 폼으로 사용자의 스펙과 주요 관심사 수집.
• TO-BE:
  • A/B 테스트를 통해 비슷한 스펙의 선배 멘토링에 대한 수요가 크다는 사실을 파악하고, 초기 서비스 방향성을 설정함.
  • GA를 통한 사용자 행동 데이터 분석을 바탕으로 UI/UX를 개선해, 폼 도달률을 향상시킴.
  • 멘티의 주요 스펙과 관심사를 파악하여 초기 멘토 모집에서 우선순위를 확보함.

회고