Django와 Spotify로 노래 추천 웹 개발 - 2

5일간 Spotify apI를 사용하여 노래추천 웹 사이트를 만드는 프로젝트 완료후 정리

2023.04.24 ~ 2023.04.28 동안 진행한 Django Web구현 프로젝트입니다. Playdata Encore에서 약 1달간 자바 및 웹에 대해 배우고, 1주정도 Django에 대해 배운 후 진행한 프로젝트입니다.

원래 목적은 웹 개발을 진행하는 5일간 매일 일기처럼 기록하는 것이었으나 시간이 부족하여 첫날과 마지막 정리된 결과창만 보여드리며 전체 코드는 아래 깃 주소에 모아두었음을 알립니다.

Git : https://github.com/byeong-chang/Spotify_Django_Webproject/tree/main/.idea

GitHub - byeong-chang/Spotify_Django_Webproject

시작 페이지

• 첫날 올렸던 블로그에서 크게 달라지지 않은 모습을 보입니다.
• layout에 그림을 추가하여 사이트 홈버튼을 조금 더 세련되게 바꿔봤습니다.
• 시작화면에서의 주요 기능은 회원가입과 로그인으로 Django 내에서는 account app으로 분할하여 코드를 작성했습니다.
• 시작하기 버튼을 누를 경우 로그인 화면으로 이동하며, 혹시나 오류로 로그인한 유저가 시작페이지로 이동할 경우에는 시작하기 버튼을 누를 경우 추후에 설명할 홈화면으로 이동하게 됩니다.

홈 페이지

• 회원가입을 마치고 로그인을 진행하면 이동하게 되는 홈페이지입니다.
• 홈페이지의 주요 기능은 트랙(노래)과 아티스트를 검색할 수 있는 검색창과 최근 사용자들이 댓글을 남긴 트랙을 홈페이지에 보여줍니다.
• 최근 댓글을 기준으로 보이는 Trend Track은 총 7개를 보여주며 Swiper이라는 캐러셀 라이브러리를 사용하여 슬라이드를 구현했습니다.

검색 결과 페이지

• 검색 결과의 경우 Spotify API를 사용하여 저희 DB에 저장한 음악에 대한 검색 결과를 가져옵니다. 아직까지 데이터를 약 2000개만 넣어두었기에 모든 트랙과 아티스트에 대해 보여주지는 못합니다.
• 검색 결과 저희의 DB에 저장되어 있는 트랙과 아티스트 중에서 값이 일치하는 노래가 없다면 아래와 같이 검색 결과가 없다는 출력이 발생합니다.

• 정상적으로 일치하는 트랙과 아티스트가 존재하는 경우 아래와 같이 검색화면에 보이며 아티스트의 이름 혹은 트랙의 제목을 클릭하면 해당 페이지로 이동합니다.

Artist 페이지

• 아티스트 페이지의 경우 Spotify에 저장되어 있는 데이터인 Artist Popularity와 Spotify Followers 데이터를 보여줍니다.

• Rotten Mellon Follow의 경우 저희가 자체적으로 구현한 follow 기능으로 사진 아래 follow 하기 버튼을 할 경우 증가하며 해당 아티스트를 follow 한 모든 유저의 수를 보여줍니다. 아래 사진은 follow 하기 기능을 수행한 후의 사진으로 follow 추가 시와 삭제시에 다른 메시지 출력을 보이도록 JavaScript로 구현하였습니다.

• 아래 사진을 보시면 Rotten Mellon Follower가 1로 증가됨을 볼 수 있으며 follow 삭제하기 버튼을 누르면 follow 추가 시와 다른 메시지를 출력함을 볼 수 있습니다.

댓글 기능

• Artist Page에는 댓글 기능이 있습니다. 해당 기능은 댓글이 없는 경우에는 아직 평가가 없는 가수라고 표시되지만 댓글을 남길 경우에는 아래 사진과 같이 표기됩니다.
• 댓글의 경우 아래로 쭉 이어질 경우 너무 페이지가 길어지기 때문에 페이징 기능을 구현하여 5개의 댓글만 보이도록 제한한 후 페이지로 넘겨 볼 수 있도록 만들었습니다.
• 추가적으로 댓글에 대해 좋아요를 누를 수 있도록 구현하였으며 추후에 이 좋아요 수로 댓글을 정렬할 수 있는 기능을 추가하고자 합니다.

링크 기능

• Alok이라는 아티스트에 대해 토론을 할 수 있도록 구현해 보았으니 해당 아티스트의 노래를 직접 찾아갈 수 있다면 좋을 것이라 생각하여 해당 아티스트의 노래들을 오른쪽에 스크롤을 통해 모두 볼 수 있도록 만들었습니다.
• DB에 데이터가 많이 저장되어 있는 Taylor Swift를 예시로 보자면 많은 Track을 보유 중인 아티스트는 오른쪽의 추가적인 스크롤기능으로 모든 노래를 보고 링크를 통해 타고 갈 수 있도록 만들었습니다.

Track 페이지

• 다음으로 Track Page입니다. 주요 형태는 Artist Page와 동일하고, follow 대신 나의 플레이리스트 추가 삭제가 존재합니다.
• Artist Page와의 차별점으로는 아티스트의 노래들을 보여주던 공간에 Spotify에서 제공하는 유사 노래 추천 알고리즘을 사용하여 현재 들어와 있는 페이지의 노래와 유사한 5곡을 추천해 주는 방식을 구현했습니다.
• 다만 이 방식은 노래에 대한 5개의 데이터를 DB에 저장해 두는 방식이기 때문에 굉장히 빠르게 데이터를 가져올 수 있지만 반대로 생각해 보면 추후에 8000만 개나 되는 Spotify의 각 노래에 대한 5개의 추천곡을 DB에 저장해야 하며, 신곡이 추가될 때마다 업데이트가 필요하다는 큰 문제점이 있습니다.
• 그렇기 때문에 추후 발전사항으로 저희가 자체적으로 추천 모델을 구현하여 사이트에 적용할 수 있도록 하는 방식으로 수정해 나갈 생각입니다.

My Playlist 페이지

• My Playlist 페이지는 위에서 Track Page에서 나의 플레이리스트에 추가한 노래들을 모아두는 곳입니다.
• 아직 디자인적으로 꾸미지는 못했지만 우선적으로 데이터를 보여주도록 구현하였고, 오른쪽에 플레이 기능을 추가하려는 최종목표가 있습니다.
• 또한 My Playlist페이지에서도 playlist에 추가한 Track을 삭제할 수 있도록 추가 기능을 구현하려 합니다.

My FollowList 페이지

• My FollowList 페이지입니다. My Playlist와 구성은 같으며 추후 목표도 동일합니다.

Recent Comments

• 해당 페이지는 최근 아티스트, 트랙에 대한 최근 댓글들을 보여주는 공간입니다. 검색창이 존재하는 홈 페이지에 있는 Trend Track에 대한 정보가 담겨있다고 할 수 있습니다.
• 댓글에 대한 좋아요 기능을 구현해 두었기 때문에 해당 페이지도 좋아요 데이터를 사용하여 좋아요 순 정렬과 같은 기능을 추가해보려 합니다.
• 부족한 시간으로 추가적인 아이디어를 생각해보지 못한 것과 꾸미지 못한 페이지라 아쉬움이 남는 곳입니다.

느낀 점

• Django에 대해 4일 정도 공부한 후 만든 프로젝트였고, 실제로 웹을 만들어 본 것도 처음이었기 때문에 보기에 좋은 웹이 아님을 알고 있습니다.
• 다만 5일 안에 두 명이서 이 정도까지 기능 구현에 성공했다는 점에서 굉장히 뿌듯함을 느끼고 만드는 동안 내내 지나가는 시간이 아까울 만큼 즐겁게 임했습니다.
• 개발 초기에는 Django에서 제공하는 정참조, 역참조 기능을 모르고 시작했기 때문에 기껏 DB설계를 해놓고서 외래키를 통해 데이터를 타고 타고 이동하는 과정에서 SELECT문 코드가 너무 지저분하고 복잡해진다는 이유로 데이터베이스 역정규화를 실시했습니다.
• 4일 차 밤에 되어서야 정참조, 역참조 기능을 알게 되어 이전의 코드들도 최대한 수정하였으나 DB설계 부분을 저희 스스로 무너뜨린 부분이 있어서 현재로서는 수정에 오랜 시간이 걸릴 것이라는 결론을 내렸습니다.
• 정보처리기사를 공부하고, 여러 DB수업들을 들으며 팀원과 함께 적용해 본 첫 DB설계였으나 툴 사용법을 몰라 스스로 망쳤다는 점이 참 아쉽게 느껴집니다.
• 이번 프로젝트에서는 깃을 사용하지 않았는데, 서로 코드를 합치는 과정에서 어려움을 느꼈습니다. 추후 프로젝트를 위해서라도 깃에 코드를 올리고 협업하는 기술을 길러 더 효율적인 팀프로젝트가 되도록 노력해야겠다는 생각이 들었습니다.

추후 목표

• 5월 주말이나 저녁 시간이 남을 때마다 3~4주 추가 프로젝트를 진행하고자 합니다.
• 저희 최종 목표는 데이터 엔지니어링을 담당하는 팀원이 설계를 담당하고, 데이터 분석을 통해 자체적으로 추천 모델을 구현하는 것이기 때문에, Spotify의 28만 개 track 데이터가 모두 필요한 상황입니다.
• 클라우드를 사용하기 위해 비용을 지불하게 될 텐데 Spotify API를 사용하는 경우 상업화를 할 수 없기 때문에 비용적인 걱정이 되는 부분이 있습니다.
• Spotify에서 제공하는 uri를 통해 노래 재생을 하기 위해서는 Spotify 유료회원 계정이 필요하고, 이를 위해서는 사용자가 유료회원임을 강제해야 한다는 문제점이 있습니다.

역할 분담

• 공통 : DB설계 , Swiper slide 기능 구현, Artist 페이지, Track페이지
• 민병창(저입니다) : 계정관리, 로그인, 회원가입, 로그아웃, layout, 플레이리스트-follow 기능, 댓글 기능,
• 우상욱 님 : 검색 기능, 검색 페이지, 검색 결과 페이지, Spotify 추천 알고리즘, cloud 연동, 데이터 전처리 및 수집
  • 우상욱 님 블로그 : https://dataengineerstudy.tistory.com/