[Youtube API] Youtube VOC 만들기

베하~!! 안녕하세요!! 1-Tier팀 입니다.

이번 포스팅에서는 그동안 ToutubeAPI를 활용해서 만들었던 Youtube VOC 제작 결과를 한번 정리해 보려고 합니다.

먼저 소스 트리 입니다.

Code

static 파일

static - font : 고담 폰트를 사용했습니다.

static  - video : 메인 페이지의 배경 영상과 차트, 데이터 리스트 화면의 배경 이미지가 포함되어 있습니다.

static : css파일들이 있으며 공통적으로 반영되는 *, html, ul, li 태그 와 class 들이 포함되어 있는 main 과 페이지 별 css 파일들이 모여있습니다.

html 파일

chart : 차트를 생성하는 파일들이 포함되어 있으며 chart_list ( like 순위 출력 ), chart_list _pi ( view 순위 출력 ), chart_list_gpt ( gpt 점수 순위 출력 ) chart_mng ( 차트 선택 화면 출력 ) 의 역할을 합니다. 

add : 데이터 추가 페이지 

index : 메인 페이지

search_list : 저장되어 있는 데이터를 확인할 수 있는 페이지

search_mng : 저장되어 있는 데이터를 표로 출력하는 부분

python 파일

main : flask 구동 파일

db_select : DB연결 구문 파일

youtube_config : API Key, DB 계정 정보가 포함된 파일

youtube_v3_Insert : 동영상 데이터 입력 파일 *

youtube_v4_Update : 동영상 데이터 업데이트 파일 *

youtube_v5_Comment : 동영상 코멘트 데이터 수집 파일 *

youtube_v6_Grade : Chat GPT 구동 파일

 

* 표시 파일은 main.py 에 작성되어 있어 구동 시 페이지나 시간에 따라 자동 실행 됨

 

다음은 DB 테이블 정보 입니다.

DB

comment_list : 동영상 댓글 저장 테이블

gpt_rank : Chat GPT가 동영상에 점수를 부여한 데이터를 저장하는 테이블

search_text : 사용자의 검색어만 저장하는 테이블

video_list : 동영상 정보 저장 테이블

Web Page

main

배경은 다양한 도형이 움직이는 애니메이션 배경이며 좌측 큰 박스의 메뉴에 마우스를 hover하면 불투명으로 바뀌면서 배경과 폰트 색상이 변경됩니다.

우측에는 현재 DB에 저장되어 있는 동영상의 총 갯수가 출력됩니다.

List Search

DB에 저장되어 있는 동영상의 정보를 볼 수 있고 Pagenation으로 데이터 가독성을 높이고 검색어 기준으로 상단의 검색창을 통해 검색할 수 있습니다.

헤더 부분 우측에 있는 ADD 버튼으로 키워드를 입력하여 새로운 키워드에 대해 동영상을 추가 수집할 수 있습니다.

Rank

특정 키워드에 대한 상위 10개의 동영상을 확인할 수 있는 페이지 입니다.

Like = 특정 키워드에 대한 동영상의 좋아요 순위

View = 특정 키워드에 대한 동영상의 조회수 순위

Grade = 특정 키워드에 대한 동영상에 Chat GPT 가 부여한 점수 순위

예시

아이폰15에 대한 좋아요 수 상위 영상

아이폰15에 대한 조회수 상위 영상

아이폰15에 대한 GPT점수 상위 영상

좋아요와 조회수에 대한 동영상 순위 차이는 크게 다르지 않지만, GPT 점수 순위는 크게 달라지는 것을 볼 수 있습니다.

 

추후 계획

일단, 기능 구현에만 신경을 쓰다보니 디자인, 특히 사용자 편의성을 위해 UI/UX 개편이 필요하다고 계속 느낍니다..

UI/UX 개편과 함께 제목, 키워드 검색 뿐만 아니라 다양한 기준의 검색 기능을 추가하고자 합니다.

그리고 jquery나 Javascript 파일이 딱히 길지 않고 html에서 script태그로 작성했는데 개인적인 불편함은 없지만 따로 분리를 할까 합니다.