2. 기술 스택 및 시스템 아키텍처 - JobTube-Career-coaching/JobTube GitHub Wiki

🛠️ 기술 스택 및 시스템 아키텍처

🔧 전체 시스템 구조

[사용자]
│
▼
[React 프론트엔드] ──▶ [FastAPI 백엔드] ──▶ [MongoDB / Redis / 외부 API (YouTube, 공공데이터)]

+-------------+         +-----------------+        +----------------+
| 👤 사용자   | ────▶  | 🌐 React(front) | ────▶ |🚀FastAPI(back)|
+-------------+         +-----------------+        +----------------+
                                                             │
                      ┌──────────────────────────────────────┼───────────────────────────────────────┐
                      ▼                                      ▼                                       ▼
           📦 MongoDB (데이터 저장)            🧠 외부 API(Youtube, 공공데이터)            ⚡ Redis (요약 캐싱)

💡 사용 기술 목록

영역 기술명
Frontend React, Tailwind CSS, Axios
Backend FastAPI, Pydantic, Uvicorn
Database MongoDB (콘텐츠 저장), Redis (요약 캐싱)
Infrastructure Docker, Docker Compose, NGINX, Oracle Cloud
외부 연동 YouTube Data API, 공공채용정보 오픈API
AI/모델 Transformers (KoBART, KoGPT 등), HuggingFace

🔁 데이터 흐름 요약

  1. 사용자 입력 (키워드 입력)
  2. 백엔드에서 관련 YouTube 영상 / 채용공고 데이터 수집
    • YouTube: 검색 키워드 기반 영상 검색
    • 채용공고: 공공API 또는 크롤링을 통한 데이터 수집
  3. 텍스트 요약 모델을 이용해 콘텐츠 요약
  4. 결과를 MongoDB에 저장
  5. 프론트엔드로 요약 결과 응답

📈 기술 선택 이유 및 고려 사항

  • React + FastAPI 조합: 빠른 개발 속도와 명확한 구조 제공
  • MongoDB: 비정형 텍스트 기반 데이터(요약문) 저장에 적합
  • Redis: 반복 요청에 대한 빠른 응답을 위한 캐싱 처리
  • Docker / Oracle Cloud: 가상환경을 통한 안정적인 배포와 유지보수
  • HuggingFace 모델들: 사전 학습된 KoBART, KoGPT 등 고성능 한국어 요약 모델 활용 가능

🧩 시스템 구성 예시 (디렉토리 기반)

📦 project-root/
├── 📁 Back-end-main/                # ⚙️ FastAPI 백엔드
│   ├── 📁 __pycache__/              # 파이썬 캐시
│   ├── 📁 static/                   # 정적 파일 저장
│   ├── 🧩 d_job_service.py          # 장애인 채용 공고 크롤러
│   ├── 🧩 d_sup.py                  # 교육 훈련 정보 크롤러
│   ├── 🧩 job_service.py            # 일반 채용 공고 크롤러 
│   ├── 🧩 main.py                   # FastAPI 엔트리포인트
│   ├── 🧩 o_job_service.py          # 노년층 채용 공고 크롤러(1)
│   ├── 🧩 o_sup.py                  # 노년층 채용 공고 크롤러(2)
│   ├── 🧩 PDFProcessing/            # PDF 요약 관련 처리
│   ├── 📘 README.md                 # 백엔드 설명서
│   ├── 🧠 summary_service.py        # 요약 모델 처리 서비스
│   ├── 🎥 youtube_service.py        # 유튜브 API 연동
│   └── 🧾 YouTubeTranscriber.py     # 유튜브 자막 추출

├── 📁 Front-end-main/               # 🎨 프론트엔드 (React)
│   ├── 📁 node_modules/             # 의존 패키지
│   ├── 📁 public/                   # 정적 리소스
│   │   ├── 🌐 favicon.ico
│   │   ├── 🏠 index.html
│   │   ├── 🖼️ logo192.png
│   │   ├── 🖼️ logo512.png
│   │   ├── 🧾 manifest.json
│   │   └── 🤖 robots.txt
│   └── 📁 src/                         # 소스 코드
│       ├── 📁 components/              # 🧩 페이지별 컴포넌트
│       │   ├── 🧾 .env                 #  DB 접속 링크
│       │   ├── 📜 bookmark.js          #  북마크
│       │   ├── 📜 Career.js            #  직업 공고
│       │   ├── 📜 DataSummary.js       #  데이터 요약
│       │   ├── 📜 dbserver.js          #  DB서버
│       │   ├── 📜 DisabledPage.js      #  크롤링 페이지 출력
│       │   ├── 📜 JobSlider.js         #  직업공고 페이지네이션
│       │   ├── 📜 mypage.js            #  마이페이지
│       │   ├── 📜 PdfSummary.js        #  PDF 요약
│       │   ├── 📜 ResultsPage.js       #  최종출력 페이지
│       │   ├── 📜 SearchResultPage.js  #  결과 페이지 검색  
│       │   ├── 📜 SeniorPage.js        #  시니어 페이지
│       │   ├── 📜 SeniorResultsPage.js #  시니어 결과 페이지
│       │   └── 📜 YouTubeSearch.js     #  유튜브 검색
│       ├── 📁 styles/                  # 🎨 스타일시트 모음
│       │   ├── 🎨 bookmark.css
│       │   ├── 🎨 Career.css
│       │   ├── 🎨 _d_serch.css
│       │   ├── 🎨 DataSummary.css
│       │   ├── 🎨 JobSlider.css
│       │   ├── 🎨 mypage.css
│       │   ├── 🎨 PdfSummary.css
│       │   ├── 🎨 senior.css
│       │   ├── 🎨 SeniorResultsPage.css
│       │   ├── 🖼️ worknet.png
│       │   └── 🎨 YouTubeSearch.css
│       ├── 🧾 App.css
│       ├── 🧾 App.js
│       └── 🧪 App.test.js 
└──     ...

🧭 Use Case Diagram

JobTube 플랫폼의 주요 사용자 유형과 기능 간 상호작용을 시각적으로 나타낸 다이어그램입니다. 각 사용자 역할에 따라 접근 가능한 기능이 구분되어 있으며, 시스템이 제공하는 핵심 서비스 흐름을 한눈에 파악할 수 있습니다.

usecase-diagram

사용자 유형 주요 기능
구직자 (Job Seeker) 유튜브 영상 검색, 영상 요약, 채용 정보 검색, 카테고리 필터, 채용 공고 저장, 시각화 열람
시니어 / 장애인 모드 추천 공고 확인, 보호모드 기반 맞춤 채용 검색, 공고 지원 등
관리자 (Administrator) 사용자 및 권한 관리, 데이터 및 영상 정보 관리, 고용 통계 보고서 생성 등

실선은 직접적인 기능 호출, 점선은 간접적 혹은 자동화된 기능 흐름을 의미합니다.

🧱 ERD (Entity Relationship Diagram)

전체 데이터베이스 구조를 시각적으로 표현한 ERD는 다음과 같습니다. 주요 테이블(또는 컬렉션) 간의 관계를 명확히 하여, 데이터 흐름과 저장 방식을 한눈에 파악할 수 있습니다.

wbs-diagram

엔티티 설명
User 사용자 정보 (이름, 이메일, 타입 등)를 저장
Mode 일반모드 / 보호모드 선택
JobPosting 채용공고 정보 (회사명, 직무, 조건 등)
VisualizationData 채용공고 정보 시각화
YouTubeVideo 유튜브 영상 소개
VideoCategory 유튜브 영상 '장단점', '준비방법', '후기' 카테고리 분류
JobAnnouncement 유튜브 영상 관련 채용공고 내용
JobAnalysisResult 유튜브 영상 관련 종합분석 보고서

관계형 구조를 통해 사용자 → 영상 요약 및 채용공고 안내 등 다양한 데이터 흐름이 가능하도록 설계되었습니다.

🚀 배포 아키텍처

[로컬 개발] → Docker로 컨테이너화 → Oracle Cloud로 배포
                       │
             [Nginx Reverse Proxy]
                       │
      [FastAPI 서버] ←→ [MongoDB / Redis]

모든 요소는 Docker Compose를 통해 통합 실행되며, 포트 및 경로 설정은 .env 및 nginx.conf에서 관리됩니다.