개요

유튜브의 재생목록을 입력하면 파이썬의 yt_dlp 라이브러리로 만들어진 실행파일을 이용하여 각각의 음원을 다운받을 수 있는 앱이다.

구조

• electron기반의 react 웹앱 프로그램
• 유튜브 재생목록을 다운로드하는 외부 프로그램

• 아래와 같은 데이터를 관리하기 위해 sqlite 저장
  • 앨범인 플레이리스트
  • 음악 정보를 저장하는 track
  • 다운로드 상태를 관리하는 테이블
  • 설정을 저장하는 settings 테이블

기본 기능

• YouTube 플레이리스트 다운로드 및 재생: YouTube URL을 입력하여 플레이리스트를 다운로드하고 MP3 파일로 변환하여 재생할 수 있습니다.
• 로컬 파일 추가: 로컬에 저장된 오디오 파일을 추가하여 재생할 수 있습니다.
• 재생 목록 관리: 플레이리스트를 생성하고 파일을 관리할 수 있습니다.
• 앨범 아트 및 오디오 웨이브폼 시각화: 현재 재생 중인 곡의 썸네일을 표시하며, 오디오 웨이브폼을 시각화합니다.
• 프로그레스 바 및 볼륨 조절: 재생 중인 트랙의 진행 상황과 볼륨을 조절할 수 있습니다.
• 앨범 아트 및 오디오 웨이브폼 시각화: 현재 재생 중인 곡의 썸네일을 표시하며, 오디오 웨이브폼을 시각화합니다.
• 프로그레스 바 및 볼륨 조절: 재생 중인 트랙의 진행 상황과 볼륨을 조절할 수 있습니다.
• ffmpeg 자동 설치: 프로그램 실행 중 ffmpeg가 설치되어 있지 않으면, 자동으로 설치하고 설정 테이블에 기록하여 이후 중복 설치를 방지합니다.
  • 윈도우는 utils에 ffmpeg이 포함되어 있습니다.
  • macos는 brew으로 자동 설치됩니다. (기다리시면 완료됩니다)
• mp3, wav, oog는 음악을 재생하고 관리할 수 있습니다. 그외에 m4a, flac, acc 등은 다운로드후 변환만 가능합니다.
• 유튜브 및 스포티파이 재생목록 관리를 위한 계정연동 (향후 지원 예정)

웹앱 UI/UX

1. 홈 화면

• 목적: 사용자가 YouTube 재생목록을 다운로드하거나 로컬 파일을 추가할 수 있는 기능을 제공하고, 최신 재생목록과 트랙들을 탐색할 수 있도록 함.

• 구성 요소:

  • 검색 바: 상단에 위치하여 사용자가 재생 목록, 앨범 또는 곡을 검색할 수 있도록 함.
  • YouTube 재생목록 다운로드 섹션:
    • YouTube URL 입력 필드: YouTube 재생목록 URL을 입력할 수 있는 입력 필드를 배치합니다.
    • 다운로드 버튼: URL 입력 후 재생목록을 다운로드할 수 있는 버튼을 배치하여, 클릭 시 yt-dlp를 통해 mp3 파일로 다운로드되도록 합니다.
    • 다운로드 상태 표시: 다운로드 진행 상태를 보여주는 로딩 애니메이션이나 프로그레스 바를 배치하여 다운로드 완료까지 시각적으로 알립니다.
  • 로컬 파일 추가 섹션:
    • 파일 추가 버튼: 로컬에 저장된 오디오 파일(mp3, wav, ogg 등)을 추가하는 기능을 제공합니다. 클릭 시 파일 탐색기 창이 열리고, 선택한 파일이 재생 목록에 추가됩니다.
  • 추천 목록 및 최근 재생 항목:
    • 추천 목록: 사용자 활동 기반 추천곡 또는 인기 곡을 표시하는 섹션을 포함합니다.
    • 최근 재생 항목: 최근에 재생된 곡을 리스트 형태로 표시하여 사용자가 이전에 들었던 곡에 빠르게 접근할 수 있도록 합니다.

2. 재생 목록 페이지

• 목적: 사용자가 생성한 재생 목록을 관리하고 각 재생 목록을 재생할 수 있는 메인 페이지.

• 구성 요소:

  • 좌측 사이드 메뉴:
    • 모든 플레이리스트: 사용자가 생성한 재생 목록들을 모두 나열하여 빠르게 접근할 수 있도록 합니다.
    • 즐겨찾는 노래: 즐겨찾기 목록을 별도로 표시하여 자주 듣는 노래를 쉽게 접근할 수 있도록 합니다.
    • 재생 목록 추가 버튼: 새로운 재생 목록을 생성할 수 있는 버튼을 하단에 배치하여 사용자가 간단히 목록을 추가할 수 있도록 합니다.
  • 우측 콘텐츠 영역:
    • 앨범 아트: 선택된 재생 목록의 첫 번째 곡의 썸네일을 상단에 표시합니다.
    • 웨이브폼 시각화: 현재 재생 중인 곡의 오디오 웨이브폼을 시각화하여 실시간으로 보여줍니다.
    • 재생 목록 테이블:
      • 각 곡의 썸네일, 제목, 아티스트, 재생 시간 등이 포함된 테이블을 구성합니다.
      • 곡의 우측에는 재생, 즐겨찾기 등록, 다운로드 상태 아이콘을 배치하여 관리가 쉽도록 합니다.
    • 재생 버튼과 셔플 버튼: 선택한 재생 목록을 한 번에 재생하거나 셔플 재생할 수 있는 버튼을 배치하여 손쉽게 음악을 즐길 수 있게 합니다.

3. 재생 화면 상단 바 (글로벌 재생 컨트롤러)

• 목적: 사용자가 어느 화면에서든 현재 재생 중인 트랙을 쉽게 제어할 수 있도록 함.

• 구성 요소:

  • 재생/일시 정지 버튼: 상단 바에 항상 표시하여 재생 상태를 쉽게 제어할 수 있도록 합니다.
  • 다음/이전 곡 버튼: 현재 곡을 기준으로 이전 곡 및 다음 곡으로 쉽게 이동할 수 있는 버튼을 배치합니다.
  • 프로그레스 바: 현재 재생 중인 곡의 진행 상황을 표시하는 바를 배치하여, 사용자가 트랙의 어느 지점에서 재생 중인지 시각적으로 확인할 수 있게 합니다.
  • 볼륨 조절 슬라이더: 음량을 조절할 수 있는 슬라이더를 우측에 배치하여 편리하게 볼륨을 조절할 수 있도록 합니다.

4. 앨범 관리 페이지

• 목적: 유튜브 등에서 가져온 앨범을 관리하고 재생 상태를 확인할 수 있는 페이지.

• 구성 요소:

  • 탭 구분:
    • 유튜브, 로컬 파일, 즐겨찾기 탭을 추가하여 각 카테고리별로 앨범을 구분해 표시합니다.
  • 앨범 리스트:
    • 각 앨범의 썸네일, 앨범명, 곡 수, 다운로드 상태를 표시합니다.
    • 앨범 클릭 시 해당 앨범에 포함된 트랙 리스트가 오른쪽에 표시되도록 구성합니다.
    • 앨범 관리 옵션: 다운로드, 삭제, 이동 등의 옵션을 제공하여 사용자가 앨범을 자유롭게 관리할 수 있도록 합니다.

5. 설정 페이지

• 목적: 다운로드 환경, 계정 연동, ffmpeg 설치 등 기본 환경 설정을 관리하는 공간.

• 구성 요소:

  • 다운로드 환경 설정:
    • 코덱 선택: mp3, wav, ogg 등 다양한 코덱을 선택할 수 있도록 드롭다운 메뉴를 배치합니다.
    • 비트레이트 설정: 사용자 선택에 따라 음질을 조정할 수 있도록 비트레이트 설정 옵션을 제공합니다.
    • 다운로드 경로: 로컬 파일의 저장 경로를 설정할 수 있도록 경로 선택 기능을 배치합니다.
  • ffmpeg 자동 설치:
    • 프로그램 실행 시 ffmpeg이 설치되어 있지 않으면 자동 설치되도록 설정하며, 설정 페이지에 설치 여부를 표시합니다.
    • 윈도우 및 macOS 지원: Windows에서는 utils에 ffmpeg이 포함되었고, macOS에서는 brew으로 설치된다는 안내 문구를 추가하여 사용자 혼란을 줄입니다.
  • 계정 연동 관리 (향후 추가 가능성):
    • YouTube, Spotify, Apple Music과의 계정 연동 설정을 추가하여 연동된 계정 상태를 관리할 수 있도록 구성합니다.