[Javascript] 유튜브 뮤직 재생목록 정렬 확장앱 ( A to Z, 앨범순, 아티스트순 등 )

<개발 목적>

유튜브 뮤직으로 음악 앱을 바꾸고 나서 한 가지 불편한 점이 생겼다. 바로 정렬 기능이 최신순, 오래된순 정도밖에 지원되지 않는다는 것이었다. 수백 곡이 담긴 플레이리스트에서 특정 아티스트의 곡만 모아보거나 앨범 순서대로 정리하고 싶을 때, 결국 곡을 하나하나 직접 옮기는 방법밖에 없었다. 이러한 불편함으로 인해 다양한 기준으로 플레이리스트를 정렬할 수 있는 확장 프로그램을 직접 만들어보기로 했다.

 

---

<정렬 종류 및 기능>

- 곡 제목 A→Z / Z→A 정렬
- 아티스트 순 정렬
- 앨범 순 정렬
- 아티스트+앨범 순 정렬 (아티스트로 묶고 그 안에서 앨범순)
- 곡 개별/전체 선택 가능
- 선택한 곡을 다른 재생목록에 추가
- 새 재생목록 생성 (공개 / 비공개 / 링크 공개 설정 가능)

 

---

<설치 방법>

1. Chrome 또는 Firefox에 Tampermonkey 확장앱 설치
2. Tampermonkey 대시보드 → 새 스크립트 만들기
3. 아래 있는 깃허브 링크에서 sort.js 코드 전체 복붙
4. Ctrl+S 로 저장

 

https://github.com/Sagwatteok/YTMusic-Sorter

GitHub - Sagwatteok/YTMusic-Sorter

 

---

<사용 방법>

1. YouTube Music 접속
2. 정렬하고 싶은 플레이리스트 페이지로 이동
3. 우측 상단에 나타나는 버튼으로 정렬
4. 체크박스로 곡 선택 후 ➕ 재생목록에 추가 클릭

 

---

<주의사항>

• 정렬은 화면에만 적용됩니다. 새로고침하면 원래 순서로 돌아갑니다.
• 다른 재생목록에 추가하는 방식으로 정렬된 순서를 저장하는 것을 권장합니다.
• YouTube Music 업데이트에 따라 일부 기능이 동작하지 않을 수 있습니다. 사용하다 막히시면 댓글 주세요.

 

---

<느낀점>

자바스크립트로 웹 페이지를 직접 조작하는 건 이번이 처음이라 콘솔창을 이용한 디버깅이 생각보다 쉽지 않았다. 특히 유튜브 뮤직이 페이지를 동적으로 로드하는 방식이다 보니 DOM 요소를 가져오는 타이밍을 맞추는 부분에서 꽤 애를 먹었다. 그래도 직접 느낀 불편함을 해결하기 위해 만든 프로그램이라 그런지 개발 과정 자체가 즐거웠고, 완성 후 실제로 플레이리스트 정리에 써보니 뿌듯했다.