자체 YouTube 영상 자막 추출 도구 구축: Next.js 14, TypeScript, Node.js 기반의 개발 여정

핵심 기술

이 콘텐츠는 개발자가 유료 YouTube 자막 추출 도구에 대한 불만에서 시작하여, Next.js 14 (App Router), TypeScript, Tailwind CSS, Node.js를 활용하여 자체적으로 빠르고 무료인 자막 추출 서비스를 구축한 경험을 공유합니다. API 연동, 웹 스크래핑, 사용자 경험(UX) 개선 등 풀스택 개발 전반의 실질적인 내용을 다룹니다.

기술적 세부사항

• 프론트엔드: Next.js 14 (App Router), TypeScript, Tailwind CSS, React Hook Form을 사용하여 간결하고 반응적인 사용자 인터페이스를 구축했습니다.
• 백엔드: Next.js API Routes, Node.js를 기반으로 YouTube Transcript API를 활용하여 자막 데이터를 추출합니다.
• 주요 라이브러리: youtube-transcript (자막 추출), get-video-id (YouTube ID 추출), react-youtube (영상 플레이어 연동)를 사용했습니다.
• 자막 추출 로직: YouTube의 다양한 자막 형식(자동 생성, 수동, 다국어)을 처리하며, youtube-transcript 라이브러리를 사용하여 동영상 ID로 자막을 가져옵니다.
• 타임스탬프 처리: 추출된 자막 데이터에 타임스탬프를 보존하고, 이를 사용자 친화적인 형식으로 포맷합니다 (formatTime 함수 활용).
• 인터랙티브 자막: 자막을 클릭하면 해당 시점으로 비디오를 이동시키는 기능 (react-youtube 라이브러리 활용)을 구현했습니다.
• SRT 형식 변환: 자막 데이터를 SRT 자막 파일 형식으로 변환하는 기능 (generateSRT, formatTimeForSRT 함수)을 추가했습니다.
• 오류 처리 및 검증: 유효하지 않은 YouTube URL 검증 (isValidYouTubeUrl 함수) 및 일반적인 오류 처리 메커니즘을 구현했습니다.
• 성능 최적화: API 호출 효율성을 높이기 위한 Rate Limiting (in-memory) 및 캐싱 전략 (cache Map 활용)을 도입했습니다.
• SEO 최적화: next/head (Next.js 13 이전) 또는 metadata 객체(Next.js 13+)를 사용하여 검색 엔진 최적화를 위한 메타데이터 (제목, 설명, 키워드)를 설정했습니다.
• 코드 분할: next/dynamic을 활용하여 컴포넌트의 동적 임포트를 구현하여 초기 로딩 성능을 개선했습니다.

개발 임팩트

• 유료 서비스 대비 무료 대안을 제공하여 사용자 비용 절감 효과를 가져옵니다.
• 간결한 UI와 타임스탬프 클릭 기능으로 사용자 경험을 크게 향상시킵니다.
• SRT 파일 생성 기능으로 다양한 활용성을 제공합니다.
• Rate Limiting 및 캐싱으로 서비스 안정성과 효율성을 높여줍니다.
• SEO 최적화를 통해 서비스 가시성을 확보합니다.

커뮤니티 반응

글에는 특정 커뮤니티 반응이 직접적으로 언급되지 않았으나, '개발자로서 얼마든지 만들 수 있지 않을까?'라는 생각에서 시작하여 실제 사용자 10,000명 이상을 확보하고 500,000개 이상의 자막을 추출하는 등 성공적인 서비스로 성장시킨 경험 자체가 커뮤니티로부터 긍정적인 반응을 얻을 만한 요소입니다.