YouTube를 많이 본다. 특히 영어 콘텐츠를 많이 보는데, 자막에 의존하는 습관이 문제라고 느꼈다. 자막 없이 듣다 보면 모르는 단어에서 막혀서 전체 흐름을 놓치고, 그렇다고 매번 사전을 찾자니 귀찮다. 이 문제를 풀어보고 싶었다.
mytube라는 이름으로 웹앱을 하나 만들었다. YouTube 영상으로 영어를 공부하는 도구다.
어떻게 동작하는가
기본 아이디어는 간단하다. YouTube 플레이리스트를 동기화하고, 영상의 음성을 AI로 전사(transcribe)해서, 영상을 보면서 모르는 단어를 바로 찾아볼 수 있게 하는 것이다.
Google 계정으로 로그인하면, 내 YouTube 플레이리스트가 동기화된다. Watch Later, Favorites, 커스텀 플레이리스트 등등. 자동 다운로드를 켜 놓으면 15분마다 새 영상을 체크해서 알아서 처리한다.
플레이리스트에 들어가면 영상 목록이 보이고, 각각의 자막 준비 상태가 표시된다. “자막 준비됨”, “오디오 준비됨” 같은 식으로. 시청 진행률도 표시된다.
핵심: 영상 + 자막 + 단어 학습
영상을 클릭하면 플레이어 화면이 열린다. 영상 아래에 실시간 자막이 동기화되어 표시된다. YouTube 자체 자막이 아니라, 영상 음성을 ElevenLabs의 AI로 직접 전사한 것이다. 단어 단위의 타임스탬프가 있어서 정확하다.
자막에서 모르는 단어를 선택하면, Google Gemini AI가 한국어 뜻과 문맥에 맞는 번역을 알려준다. 사전적 뜻 뿐만 아니라 해당 문장의 직역과 의역도 함께 보여준다. 여러 단어를 한꺼번에 선택해서 일괄 분석도 가능하다.
이렇게 모은 모르는 단어들은 별도의 목록으로 관리된다. 각 단어가 어떤 영상의 어떤 문장에서 나왔는지 컨텍스트가 남아있어서, 나중에 다시 볼 때 기억이 살아난다. 이미 아는 단어로 표시하면 다음부터 자동으로 필터링된다.
기술 스택
프론트엔드는 Next.js 14 + React + Tailwind CSS, 백엔드는 Prisma + SQLite, 작업 큐는 BullMQ + Redis 조합이다. 영상 음성 추출에 yt-dlp + ffmpeg, 음성 전사에 ElevenLabs Scribe API, 단어 분석에 Google Gemini API를 사용한다.
Docker로 패키징해서 사내 서버의 Coolify에서 호스팅하고 있다. 컨테이너 하나에 Next.js 앱, 백그라운드 워커, Redis가 모두 들어있는 구조다.
현재 1,499개 영상, 1.5GB 정도의 오디오가 저장되어 있다. 영상을 재생하면 백그라운드에서 자동으로 오디오를 다운로드하고 전사하는데, 보통 몇 분 이내에 완료된다.
처리 파이프라인
영상을 처음 열면 이런 과정을 거친다:
- yt-dlp로 YouTube 영상의 오디오를 MP3로 다운로드
- ElevenLabs Scribe API로 음성을 텍스트로 전사 (단어 단위 타임스탬프 포함)
- 문장과 단어를 DB에 저장
- 프론트엔드에서 영상 재생과 자막을 실시간 동기화
이 전체 과정이 BullMQ 작업 큐로 관리되고, 실시간으로 처리 로그가 화면에 표시된다. 실패하면 자동 재시도도 한다.
만들면서 느낀 점
솔직히 말하면, 아직 이걸로 영어 실력이 비약적으로 올랐다고 하기는 어렵다. 하지만 예전에는 모르는 단어를 그냥 넘겼다면, 이제는 클릭 한 번으로 뜻을 확인하고 기록이 남는다는 점이 다르다. 단어장이 쌓이는 걸 보면 나름 뿌듯하기도 하다.
기술적으로는, AI 서비스들의 API를 조합해서 뭔가 유용한 걸 만드는 경험이 좋았다. ElevenLabs의 음성 인식 정확도가 꽤 괜찮고, Gemini의 문맥 기반 번역도 생각보다 쓸만하다. 이런 API들이 없었으면 혼자서는 절대 못 만들었을 것이다.
Claude Code로 개발했는데, 이것도 AI 시대의 코딩이 어떤 건지 체감하는 좋은 경험이었다.