00.Intro

✨덕후의 니즈 ✨

✔ 콘서트를 다녀온 덕후는 고화질 근접 직캠으로 콘서트를 다시보고 싶었습니다.
✔ 물론 Youtube 에 직접 접속해서 검색해도 되지만, 덕후의 입장에서는 썸네일들을 배치하는 UI와 알고리즘이 띄워주는 검색결과 자체가 아쉽게 느껴집니다.

✨ 셀프로 도출한 솔루션 ✨

✔ 팬들이 영혼을 갈아넣어 이쁘게 뽑은 썸네일들이 Grid에 맞춰 공백 없이 화면을 채워야 한다.
✔ 조회수가 높은 순으로 맨위에 배치되게 정렬한다.

✨ 개발 결과 미리보기 ✨

01.Youtube API Key 발급받기

• Google Cloud Platform (https://cloud.google.com) 신규 가입자는 $300의 무료 크레딧을 받고 이를 바탕으로 전체적인 API를 3개월 간 무료 체험할 수 있다.
• YouTube Data API v3를 사용신청을 하면 아래와 같은 페이지를 통해 Youtube API Key를 확인할 수 있다.
  
• $300의 무료 크레딧 정책 하에 부여받은 API 사용 할당량 또한 확인할 수 있다. ( 할당량 계산 페이지 )
  

02.Youtube API 로 동영상 리스트 받아오기

youtube.search().list (공식 다큐먼트)

아래와 같이 매개변수 쿼리를 적용하여 키워드에 맞는 동영상 리스트를 받아오고 원하는 기준으로 정렬할 수 있다.

search_response = youtube.search().list(
        q=search_keyword,
        type='video',
        part='id,snippet',
        maxResults=max_results,
        order='viewCount'  # 조회수 높은 순으로 정렬
    ).execute()

03.썸네일 배치 UI

ver 1 )
챗 GPT에 웹 브라우저에 썸네일들을 배치하는 UI 만들어달라 라고 대충 요청해보았다.

ver 2)
챗 GPT에게 UI를 좀더 세련되게 만들어줘 라고 요청했다.
개떡같이 모호하게 '세련되게' 라는 조건을 요구했는데 이걸 또 찰떡같이 알아들어서 UI를 이쁘게 다듬어 줬다.

ver 3)
내가 궁극적으로 원하던 느낌은 넷플릭스 UI 이다. 그래서 냅다 넷플릭스 UI 알지? 그 느낌나게 UI 개선해줘 라고 챗 GPT에게 요청했다. 근데 그걸 또 해냈다.

04. 다음에 추가하고 싶은 기능

• 넷플릭스에서 영화 썸네일을 클릭하면 썸네일 카드가 확대되고 그 옆에 영화 소개 글이 주저리 주저리 뜬다. 이런 느낌으로 썸네일 클릭시 좋아요 수가 가장 많은 댓글 3~5개 정도를 불러와 확대된 썸네일 카드 우측에 배열되게 하고 싶다.
• 덕질의 효율성을 극대로 올리기 위해 '가장 많이 다시 본 구간' 으로 바로가기 할 수 있는 버튼을 만들고 싶다. 될까 싶지만 일단 API는 찾아 보기로.