5. 개발 프로세스 및 기여 내역 - JobTube-Career-coaching/JobTube GitHub Wiki

🧑‍💻 개발 프로세스 및 팀원 기여 내역

🗓️ 개발 일정

주차 주요 내용
2024/11 팀 Github 개설 및 프로젝트 기초 설정
- 팀 Github 리포지토리 개설 및 브랜치 전략 수립
- 팀원들 개발 환경 설정 및 코드 버전 관리 방법 논의
- 프로젝트 전체 방향성 정리 및 필요한 리소스 수집
- Github Issues로 주요 작업 항목 관리 및 배포 전략 수립
2024/12 Youtube API 연동 및 기능 구현
- Youtube API를 통해 동영상 데이터(제목, 설명, 조회수 등) 가져오기 및 파싱 작업 수행
- 유튜브 동영상 정보를 효율적으로 표시할 수 있는 사용자 인터페이스(UI) 설계 및 구현
- API 인증 문제 해결 및 API 응답 속도 최적화
- 프론트엔드 구현: 프론트엔드 디자인, 사용자 인터페이스(UI) 및 기능 구현 시작
2024/13 직업 관련 데이터 수집 및 통합, 시각화
- 다양한 직업 데이터 웹 크롤링 및 API를 통해 수집
- 수집된 데이터 MongoDB에 저장하고, 이를 바탕으로 데이터 시각화 기능 구현
- 직업별 연봉, 일자리 수 등을 차트 및 그래프로 시각화하여 사용자에게 제공
- React 및 Chart.js를 활용하여 직관적인 데이터 시각화 제공
- 프론트엔드 구현: 데이터 시각화를 위한 React 컴포넌트 개발 및 연동
2024/14 핵심 기능 통합 및 최적화
- 여러 기능을 하나의 시스템으로 통합하여 사용자에게 일관된 경험 제공
- 기능 간 충돌 문제 해결 및 성능 개선
- API 호출 횟수 최적화 및 비동기 처리로 응답 속도 개선
- 코드 리뷰 및 TDD(Test Driven Development)를 통해 코드 품질 향상
- 프론트엔드 구현: UI 최적화 및 사용자의 상호작용을 고려한 인터페이스 개선, 버튼 및 네비게이션 구성
2024/15 프로젝트 통합 및 점검, 발표 자료 제작
- 전체 프로젝트 통합 및 점검, 기능 간 충돌 및 버그 수정
- 발표 자료 준비: 프로젝트 목표, 진행 과정, 결과 및 향후 계획 정리
- 발표 자료 및 발표 연습 진행, 팀 내 피드백 수렴
2024/16 1차 최종 발표
- 프로젝트의 전체적인 흐름과 결과 발표
- 발표 후 피드백을 받고, 추가적으로 개선할 부분에 대해 논의
- 발표 자료 및 데모 시연을 통해 실제 작동하는 모습을 보여주기 위한 준비
방학 초 프론트 디자인 변경, 보호 모드 페이지 개발
- 기존 디자인을 개선하고 사용자 경험을 향상시키기 위한 프론트 디자인 변경
- 고령자 및 장애인을 위한 보호 모드 페이지 개발
- 접근성 향상을 위한 UI/UX 설계 및 개발
방학 중~개학 이전 PDF 요약 기능 점검, 유튜브 동영상 요약 AI 연동
- PDF 요약 기능 점검 및 버그 수정, AI 기반의 동영상 요약 기능 구현
- 유튜브 동영상의 핵심 내용 요약 AI와 연동하여 동영상의 중요한 부분을 자동으로 추출
2025/1 유튜브 동영상 요약 방향 변경 및 DB 연동
- 유튜브 동영상 요약 방식 변경 및 DB 연동하여 데이터 관리의 효율성 향상
- 동영상 요약 결과를 DB에 저장하고, 사용자 요청 시 요약된 내용을 제공하도록 시스템 구축
- 고용24는 개인에게 API 제공하지 않음으로 인해, 직접 웹 크롤링 방식을 채택하여 데이터를 수집
- 고용24 사이트에서 제공되지 않는 API 대신 웹 크롤링을 통해 직업 관련 데이터를 안정적으로 확보
2025/2 보호 모드 구현/데이터 시각화
- 고령자 및 장애인을 위한 보호 모드 기능 구현
- 직관적이고 사용하기 쉬운 UI를 제공하기 위해 보호 모드 페이지 디자인 개선
- 데이터 시각화를 통해 사용자가 필요한 정보를 더 쉽게 접근할 수 있도록 함
2025/3 전체 기능 통합
- 여러 기능을 통합하고, 전체 시스템이 일관되게 동작하도록 테스트 및 디버깅
- 기능 간의 충돌 문제 해결 및 모든 기능이 유기적으로 동작하도록 최종 통합
2025/4 보호 모드 페이지 추가 개발
- 보호 모드 기능을 강화하고, 페이지 디자인을 최적화하여 사용자가 쉽게 접근할 수 있도록 함
- 페이지 추가 개발 및 최종 테스트 후 배포 준비

👥 팀원 역할 분담

이름 역할 및 기여
이혜영 창업 플랜 계획서 작성
박하은 기능 통합,장애인 페이지 개발
정서진 고령자 페이지/검색 카테고리 개발
장은성 데이터 시각화 및 기능 통합
김선주 분석/설계 산출물 보고서 작성

🛠️ 문제 해결 사례

문제 1:

  • 내용: UI 디자인 통합되지 않음
    여러 페이지에서 UI 디자인이 통합되지 않아 사용자 경험이 일관되지 않음. 일부 페이지에서 스타일링이 누락되거나 다르게 적용됨.
  • 스크린샷:
  • 해결 방식: 기존 CSS를 참고하여 전체 페이지에서 공통적으로 사용할 수 있는 디자인 스타일을 적용. 디자인 요소들을 일관되게 설정하고, 필요시 공통 클래스나 스타일 시트를 재정리하여 UI 통합 작업을 진행.

문제 2:

  • 내용: 검색 기능이 제각각 달라야 하는데 같음
    사용자가 원하는 기능을 선택할 때마다 검색 결과가 동일하게 나오고, 각 기능별로 다르게 동작해야 하는데, 동일한 결과만 반환됨.
  • 해결 방식: from_mode 파라미터를 사용하여 각 기능별로 검색 로직을 구분하고, 파라미터 값에 따라 검색 필터를 다르게 적용하도록 수정. 이를 통해 각 검색 기능이 개별적으로 동작하도록 개선.

문제 3:

  • 내용: 고용24와 크롤링 결과가 다르게 나옴
    동일한 크롤링을 진행했음에도 고용24 사이트와 다른 웹사이트에서의 결과가 일치하지 않음. 필터링이나 데이터 가공 과정에서 차이가 발생함.

  • 스크린샷:

  • 해결 방식: 크롤링 시 URL을 명시적으로 지정하여, 해당 URL에 맞는 크롤링 필터를 적용. 이를 통해 크롤링 결과가 동일하게 나오도록 필터를 세밀하게 조정하고, 필요한 데이터만 정확하게 수집되도록 개선.

📚 사용한 기술/오픈소스 목록

  • React, FastAPI, MongoDB, Python,OpenAI API,Youtube API,Selenium