Youtube transcript 추출 및 번역, 요약 서비스 만들기 (Python, fastapi, React.js)

Intro

유튜브 중독자답게 볼 영상이 너무 많은 관계로, lilys.ai 라는 서비스를 유료 사용 중이다. 그런데 이걸 한번 내가 만들어서 써본다면 어떨까 싶어서 GCP Free tier를 활용해서 간단하게 만들어봤다.

Day 1 요약 

1. 동기
   1. 유튜브 영상 자막, 번역, 요약, 영상 하이라이트 기능을 하나의 서비스로 통합해 제공하는 아이디어에서 시작되었다.
   2. 기존에 lilys.ai 같은 유료 서비스를 사용하던 경험을 바탕으로, GCP Free Tier를 활용하여 직접 구현해보고자 결정하였다.
2. 의사결정 과정
   1. 가장 먼저 고민한 것은 백엔드 기술 스택이었다. 백엔드 개발을 위한 기술 스택으로 Python과 FastAPI를 선택했다. Python과 FastAPI의 조합을 선택한 것은 단순한 기술적 선호도를 넘어서 실용적이라고 판단해서였는데. Python은 내가 이미 해본 언어였고, 특히 자연어 처리와 AI 관련 라이브러리가 풍부해서 요약이나 번역 기능을 구현하는 데 큰 도움이 될 것으로 예상했다.
      
      FastAPI를 선택한 결정적인 이유는 비동기 처리를 기본으로 지원한다는 점이었다. 여러 외부 API를 동시에 호출해야 하는 서비스 특성상, 비동기 처리는 선택이 아닌 필수였다. 게다가 Pydantic을 통한 데이터 검증과 자동 API 문서 생성 기능은 혼자 개발하는 과정에서 발생할 수 있는 실수를 미리 방지하고, API 스펙을 체계적으로 관리할 수 있게 해줄 거라고 판단했다.
      
      
   2. 1인 개발이지만 코드의 구조화와 모듈화는 매우 중요하다고 생각한다. main.py를 중심으로 하고 utils 폴더 아래에 기능별 모듈을 분리하는 게 나중에 다시 봐도 유지보수하기 수월하다. 유튜브 URL 파싱, 번역, 요약, 영상 분석 등 각 기능을 독립적인 모듈로 분리함으로써, 한 기능을 개발하거나 수정할 때 다른 부분에 영향을 주지 않을 수 있었다. 특히 각 기능의 테스트와 디버깅이 훨씬 수월해졌고, 코드를 다시 들여다볼 때마다 어떤 부분이 어떤 역할을 하는지 쉽게 파악할 수 있었다.
      
      
   3. 프론트엔드는 React.js를 선택했는데, 이는 단순히 익숙함 때문만은 아니었다. 내 서비스의 특성상 영상 정보, 자막, 번역, 요약본 등 다양한 상태 데이터를 효율적으로 관리해야 했다. React의 단방향 데이터 흐름과 가상 DOM은 이러한 복잡한 상태 변화를 예측 가능하게 만들어준다. 특히 자막이 번역되고, 그 번역본이 다시 요약되는 등의 연쇄적인 상태 업데이트가 발생할 때, React의 상태 관리 방식이 큰 강점을 발휘할 것으로 예상했다.
      
      반면 Vue.js는 양방향 바인딩이 강점이지만, 오히려 이 특성이 복잡한 데이터 흐름을 추적하기 어렵게 만들 수 있다고 판단했다. Svelte는 뛰어난 성능과 간결한 코드를 제공하지만, 아직 생태계가 충분히 성숙하지 않아 영상 처리나 텍스트 에디터 같은 복잡한 UI 컴포넌트를 찾기 어려울 것으로 예상했다. 결정적으로 내 서비스에서는 사용자의 상호작용에 따라 여러 API를 동시에 호출하고 그 결과를 단계적으로 화면에 표시해야 하는데, React의 선언적 UI 패턴과 훅(Hooks) 시스템이 이러한 비동기 작업 관리에 가장 적합하다고 판단했다.
3. 백엔드 API 개발 시행착오
   
   1. 유튜브 자막 추출 및 video_id 파싱에서는 다양한 URL 형식(표준, 짧은, embed 등)을 지원하도록 구현하였으나, 일부 케이스에 대한 예외 처리가 필요했다.
   2. 번역 기능에서는 Google Cloud Translation API를 연동하여 실제 번역 결과를 반환하도록 구현하려 했으나, API 인증과 키 관리 등에서 초기 설정 오류를 해결하느라 시간을 많이 뺏겼다. 
   3. 요약 기능은 Hugging Face Transformers 모델(“facebook/bart-large-cnn”)을 사용해 구현하였으나, 긴 텍스트의 분할 처리와 최적화 작업이 추가적으로 필요함을 확인했다.
   4. 영상 하이라이트 기능은 현재 더미 데이터를 반환하는 상태로, 실제 Google Cloud Video Intelligence API와의 연동 보완 작업이 앞으로 필요하다.
4. 배운 점
   1. 초기 환경 설정 과정에서 .env 파일이나 셸 설정 파일에 환경 변수를 잘못 지정하여 “~” 기호가 자동으로 확장되지 않아, 인증 키 파일의 경로가 올바르게 인식되지 않는 문제에 많은 시간을 빼앗겼다.
   2. 각 기능별 API 연동 로직을 구현하는 과정에서, 예외 처리와 API 호출 제한, 비용 관리 등의 문제에 집중하면서 단순한 환경 설정 이상의 복잡한 문제들을 해결하는 경험을 쌓게 되었다.
   3. AWS에 익숙했지만 GCP Free Tier를 사용해보면서, 플랫폼별 특징과 제한 사항, 그리고 인증 및 비용 관리 전략이 다르다는 점을 체감했고, 이는 앞으로 클라우드 플랫폼을 선택하는 데 중요한 참고 자료가 되었다.
   4. 자잘한 환경 설정 문제에 집중하느라 핵심 기능 구현(자막 추출, 번역, 요약, 영상 하이라이트 연동)에 투자할 시간이 줄어들었으며, 이로 인해 추후 초기 설정 자동화(예: direnv, .env 파일 활용)의 필요성을 절실히 깨달았다.
5. 다음 단계
   1. 백엔드 API의 외부 API 연동 로직(번역, 요약, 영상 하이라이트)을 최종 보완하고, 단위 및 통합 테스트를 완료한다.
   2. 백엔드가 안정화되면 React.js 기반 프론트엔드를 개발하여 API 호출, 데이터 렌더링, UI 구성을 진행하고 프론트엔드와의 연동을 시작한다.
   3. 어차피 개인적으로 써보고 싶어서 만드는 단계라 배포는 비용 문제로 고민 중이다.