개요

최근 음악 플레이리스트는 단순히 음악 모음집의 개념을 넘어서고 있습니다. 많은 음악 스트리밍 서비스들에서는 자체적으로 상황이나 분위기에 따른 다양한 플레이리스트를 제작하고있으며 심지어는 음악과 관련이 없는 여러 기업들에서 마저 마케팅의 일환으로 플레이리스트를 제작하고있습니다. 플리마케팅 이러한 플레이리스트 전성시대에 발 맞춰 플레이리스트를 기반으로 한 음악 재생 웹을 만들어보고자 생각하게됩니다.

유튜브에서도 볼 수 있는 다양한 플레이리스트 영상들

작동방식

간단합니다. 유저가 원하는 플레이리스트를 검색하면 그 에 맞는 플레이리스트를 스포티파이 api를 통해 불러와줍니다. 그중 유저가 고르는 플레이리스트의 곡들을 불러와준후 그 곡들을 유튜브를 통해서 재생해줄 것입니다. 스포티파이 api
다 년간 스포티파이를 직접 사용하며 스포티파이에서 제공하는 여러 플레이리스트, 유저들이 만들어 놓은 여러 플레이리스트들은 강력하다는 것을 몸소 느낀바 있어 스포티파이를 통해 플레이리스트를 불러오도록 하였습니다.
또한 유튜브 영상 재생시에는 react-player 라는 모듈을 이용하였는데, 리액트 전용 모듈로써 비교적 리액트에서 쉽고 빠르게 적용가능하다는 점이 해당 모듈을 선택하게 된 이유입니다. react-player npm
유튜브에서 영상을 가지고 올때는 흔히 유튜브 data api를 많이 사용하는데, 구글에서 제공하는 유튜브api의 경우 할당량 문제로 인해 하루에 검색의 경우 100회 밖에 사용을 하지 못하기때문에 axios를 통해 유튜브의 검색결과를 불러온 후 필요한 정보만을 추출하는 방향으로 진행했습니다. axios npm / Youtube Data Api
이 외에 프론트엔드 프레임워크 react, react-router, 상태관리 recoil, 스타일 tailwindcss, 백엔드 express.js를 사용하여 개발하였습니다.

디자인

간단히 디자인 컴포넌트와 사용 할 아이콘을 만들어줬습니다.

이를 기반으로 간단히 레이아웃을 잡아줬습니다. 디자인이 익숙치 않아 와이어프레임 수준까지만 제작을 해준 후 개발을 시작했습니다.
개발 과정에서 디자인은 많은 변화를 가지게됩니다.

작동

홈 화면

정말 단순하게도 검색창만 존재합니다. 스트리밍 서비스와 같이 재생기록이 남는다거나 곡등을 저장하는 기능을 전혀 넣지 않았기 때문에 플레이리스트를 검색 할 수 있는 검색창만 만들어뒀습니다.개발 과정에서 간단히 로고를 제작해줬습니다.

검색 결과 화면

검색결과로 플레이리스트의 커버 이미지, 이름 그리고 플레이리스트 제작자 이름을 카드형식으로 표시해줬습니다. 카드들은 grid 를 통해 정렬 됐으며, width 값에 따라 카드의 개수가 변하는 반응형으로 작동합니다. 카드에 hover시 색이 변해 하이라이트가 되고 제목 텍스트에 hover시 텍스트에 underline이 생기도록 디자인 했습니다.

한번에 50개의 플레이리스트를 불러오게 되며, 이후 무한스크롤 방식을 통해 추가로 플레이리스트를 불러오게됩니다.
카드를 눌러주면 곡 재생 페이지로 이동하게됩니다.

곡 재생페이지

앨범커버 확대, 블러, 오퍼시티 값을 조정한 이미지를 통해 배경을 설정해줬습니다.

우측 상단의 햄버거 아이콘을 누르면 재생 대기 곡들이 표시되는 메뉴가 나옵니다. 당연히도 원하는 곡을 누르게 되면 그 곡으로 넘어갑니다.

재생바는 input태그의 range 속성을 통해 제작했으며 버튼들의 경우 react-player 의 기능들을 통해 작동하도록 만들었습니다.

미니플레이어

곡이 재생되고 있는 상태에서 재생페이지를 벗어나게 되면 하단에 위치한 귀여운 미니플레이어를 통해 곡의 재생현황을 볼 수 있습니다.

미니플레이어는 버튼을 통해 숨기거나 보이게 할 수 있습니다.

글을 마치며

장시간 개발을 쉰 후 제작한 첫 웹이기도 하고, 리액트를 사용하여 제작한 첫 웹이기도 하여 여러모로 의미가 깊은 것 같습니다.
완벽한 완성도를 가지진 못하였지만, 머릿속으로만 생각했던 웹페이지를 디자인 부터 제작까지 해냈다는것에 의미를 두고싶습니다.
길고 지루한 글 봐주셔서 감사합니다!

직접사용해보기