Spotalike project -01

Spotalike를 활용한 음악 플레이리스트 프로젝트

---

개요

나는 평소에 YouTube로 음악을 즐겨 듣는다. 한 곡에 꽂히면 반복 재생을 하는 편인데, 이번에는 Christopher, CHUNG HA - When I Get Old에 빠졌다. 이 노래를 듣다 보니, 비슷한 분위기의 곡들을 모아 자동으로 추천받고 플레이리스트를 만들고 싶다는 생각이 들었다.

그렇게 발견한 것이 Spotalike라는 서비스다. 처음에는 이 플랫폼을 활용해 추천받은 곡들을 YouTube 재생목록으로 자동 생성하는 프로젝트를 기획했다.

---

프로젝트 아이디어의 확장

처음에는 간단한 방식으로 시작하려고 했다. Spotalike에서 추천받은 곡들을 YouTube 재생목록으로 바로 생성하는 기능을 구현하려고 했지만, 이는 YouTube Music에서 이미 제공하는 기능과 크게 다를 바 없었다. 그래서 차별화를 위해 Obsidian의 Graph View처럼 비슷한 곡들을 시각적으로 연결해 보여주는 인터페이스를 만들어 보기로 했다. 사용자는 드래그 앤 드롭 방식으로 재생목록을 구성하고 수정할 수 있는 기능을 활용할 수 있다.

개발 역량이 부족한 상태지만, 천천히 시도하며 결과물을 만들어보기로 했다.

---

개발 과정

1. Spotalike 크롤링 기능 구현

Spotalike에서 특정 노래를 검색하면 추천 곡 리스트를 가져오는 기능을 먼저 구현했다. 이를 위해 Selenium을 사용해 다음 작업을 수행했다.

• 검색창에 노래 제목 입력
• 드롭다운 리스트에서 첫 번째 항목 클릭
• 추천 곡 리스트를 추출

이 과정에서 어려움도 있었다. 드롭다운 메뉴가 blur 처리되어 요소를 확인하기 어려웠다. 이를 해결하기 위해 focusout 이벤트 리스너를 삭제하여 드롭다운 리스트에 접근할 수 있었다.

---

2. FastAPI로 API 개발

다음으로, 크롤링 데이터를 FastAPI 기반 API로 제공하도록 구현했다. 아래는 API의 주요 기능이다.

• 클라이언트로부터 노래 제목과 가수 이름을 입력받는다.
• Spotalike에서 추천 곡 리스트를 가져온다.
• 가져온 데이터를 JSON 형식으로 반환한다.

project/
├── main.py                    # FastAPI 서버의 진입점
├── spotalike/                 # Spotalike 관련 로직
│   ├── scraper.py             # Selenium 스크래퍼 구현
├── utils/                     # 유틸리티 모듈
│   ├── logger.py              # 로깅 기능 구현
├── requirements.txt           # Python 패키지 의존성 목록
├── .env                       # 환경 변수
└── README.md                  # 프로젝트 설명

from fastapi import FastAPI, HTTPException
from spotalike.scraper import get_spotalike_tracks
 
app = FastAPI()
 
@app.get("/api/spotalike")
def fetch_spotalike_tracks(song_title: str, artist_name: str):
    """
    Spotalike에서 추천 곡을 가져오는 API.
    """
    try:
        tracks = get_spotalike_tracks(song_title, artist_name)
        if not tracks:
            raise HTTPException(status_code=404, detail="No tracks found")
        return {"tracks": tracks}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

---

3. Selenium을 활용한 크롤링 코드

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from webdriver_manager.chrome import ChromeDriverManager # type: ignore
import logging
import json
from dotenv import load_dotenv
import os
 
load_dotenv()
BASE_URL = os.getenv("SPOTALIKE_BASE_URL", "https://spotalike.com/en")
 
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
def get_spotalike_tracks(song_title: str, artist_name: str):
    options = Options()
    options.add_argument("--disable-gpu")
    options.add_argument("--no-sandbox")
    options.add_argument("--disable-dev-shm-usage")
    options.add_argument("--headless")  # Uncomment for performance
 
    driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options)
    tracks = []
 
    try:
        logging.info("Opening Spotalike...")
        driver.get(BASE_URL)
        wait = WebDriverWait(driver, 10)
 
        logging.info(f"Searching for: {song_title}")
        search_field = wait.until(EC.presence_of_element_located((By.ID, "search")))
        search_field.send_keys(song_title)
 
        dropdown_locator = (By.CSS_SELECTOR, "ul[class^='Dropdown_dropdown']")
        wait.until(EC.visibility_of_element_located(dropdown_locator))
        first_item = driver.find_element(By.CSS_SELECTOR, "ul[class^='Dropdown_dropdown'] li button")
        first_item.click()
 
        table_body = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "tbody")))
        tracks = extract_tracks(table_body)
 
    except Exception as e:
        logging.error(f"An error occurred: {e}", exc_info=True)
    finally:
        logging.info("Closing the driver.")
        driver.quit()
 
    return tracks
 
def extract_tracks(table_body):
    tracks = []
    track_rows = table_body.find_elements(By.TAG_NAME, "tr")
    for row in track_rows:
        cells = row.find_elements(By.TAG_NAME, "td")
        if len(cells) >= 3:
            title_cell, artist_cell, duration_cell = cells[:3]
            tracks.append({
                "title": title_cell.text.strip(),
                "artist": artist_cell.text.strip(),
                "duration": duration_cell.text.strip()
            })
    return tracks

---

결론 및 다음 단계

현재 Spotalike 데이터를 가져오는 기능과 FastAPI 서버를 통해 데이터를 제공하는 기능까지 구현했다. 이후 목표는 다음과 같다.

1. Graph View 구현

   • 곡들 간의 관계를 시각적으로 표현.
   • 사용자가 드래그 앤 드롭으로 재생목록을 조정할 수 있도록 UI 개발.

2. 프론트엔드 개발

   • Graph View와 API를 통합하는 웹 애플리케이션 개발.
   • React.js 또는 Vue.js를 활용한 인터페이스 구성.

3. 유저 친화적인 재생목록 관리 기능 추가

   • 저장된 재생목록을 파일로 내보내기/불러오기.
   • YouTube와 연동하여 재생목록 자동 업로드 기능 제공.

---

추가적으로 고민해보면 좋을 질문들

Q1: Selenium을 사용하지 않고 Spotalike 데이터를 더 효율적으로 가져오는 방법은 없을까?

Q2: Graph View를 구현하기 위한 적합한 라이브러리나 프레임워크에는 어떤 것들이 있을까?

Q3: 추천받은 곡들 간의 연관성을 AI 모델로 분석하여 시각화한다면 어떤 방식이 효과적일까?