코딩 - 유튜브 다운로더 (Vue3 + Spring)

유튜브 동영상에서 음원 추출하는 Vue3 와 Spring 을 사용하여  웹 프로그램(유튜브 다운로더)을 만들어 보았다. 주의할 것은 공식적으로 (YouTube Premium 멤버십을 제외하고) 유튜브는 다운로드 기능을 제공하지 않고 있고 이는 서비스 약관에 위배된다.

유튜브 다운로더는 Vue3 를 기반으로 간단한 웹을 만들어 보는 교육적인 목적으로 진행한 것이기 때문에 실 서비스에 적용해서 법을 위반하지 않기를 바란다.

◼︎ 개발환경

• Model : MacBook Pro (14-inch, 2021)
• CPU : Apple M1 Pro 
• MENORY : 16GB
• DISK : 512 GB SSD
• OS : macOS 13.0.1(22A400)

◼︎ 서버환경

• HW : Oracle Cloud VM (Free)
• OS : CentOS Linux release 7.9.2009 (Core) 

◼︎ 오픈소스

• Vue Material Kit 2
• Vue 3
• Spring 5.3.2
• java-youtube-downloader 
• Java 1.8

개발과정

유튜브 다운로더는 크게 Front-End 와 Back-End 로 구성된다. Front-End 는 Vue Material Kit 2 을 기반으로 불필요한 것들은 제거하고 구현(의존성은 최신 버전으로 업데이트 )하였으며 Back-End 는 Spring 프레임워크를 기반으로 구현하였다. 

유튜브 다운로더 동작은 아주 간단하다. ① 동영상 아이디 (Video ID) 를 입력하고 ② 다운로드 버튼을 클릭하면 ③ 동영상의 정보를 보여주고 ④ 오디오 파일 다운로드를 클릭하면 지원하는 가장 좋은 포맷의 오디오 파일을 다운로드하는 기능을 제공하도록 했다. 

소스 : https://github.com/andang72/vue-youtube-downloader

 ① 동영상 ID 는 유튜브 동영상 URL 에 값을 의미한다.

 

②  다운로드를 클릭하면 유튜브 아이디 값을 아래 형태로 호출하면 Back-End 서비스는 JSON 형식으로 정보를 응답한다.  ③ 응답 값을 이용하여 화면에 어떤 동영상 인가를 보여 준다.

/data/youtube/${videoId.value}`

④ 다운로드를 클릭하면 유튜브 아이디와 파일 형식 "AUDIO" 을 사용 아래와 같이  Back-End 서비스를 하면 응답으로 음악 파일을 리턴하게 된다.

/data/youtube/${videoInfo.videoId}/format:${format}`

Youtube 관련 기능은 오픈소스 java-youtube-downloader 를 사용하였다. 의존성 이슈가 있어 일부 코드를 수정하여 사용하였다. java-youtube-downloader 는 YouTube API 를 사용하고 있다. YouTube API을(를) 사용하려면 애플리케이션에 인증 자격증명 정보가 포함되어 있어야 하는데 java-youtube-downloader 는 OAuth 2.0 토큰을 사용하지 않고 API 키를 사용하여 통신하고 있다.  FrontEnd 와 JSON 형식을 데이터 전송을 위하여 일부 모델 객체 소스에 @JsonGetter 어노테이션을 추가하였다. 아래는 Back-End 자바 소스이다. 

참고자료

Install Node and NPM natively on Apple Silicon Mac (M1)