Mood Player - 기분 맞춤 노래 제공 서비스 | 모바일앱제작 개인 프로젝트
학교에서 React Native를 사용하여 앱을 만드는 프로젝트를 진행했습니다! 그래서 사용자 기분에 따라 어울리는 플레이리스트를 제공하는 어플을 만들어봤습니다. 아래 글에 정리한 Spotify와 Unsplash를 사용했습니다.
Spotify에서 플레이리스트 위젯 + Unsplash에서 랜덤 이미지 가져오기
Spotify에서 플레이리스트 위젯 가져오기 (1분 미리 듣기) Embed | Spotify for Developers Music, meet code. Powerful APIs, SDKs and widgets for simple and advanced applications. developer.spotify.com 우..
seyeon.tistory.com
프로토타입
- 시작화면을 클릭하면 키워드를 선택하는 화면이 나옵니다.
- 사용자가 자기 기분에 맞는 키워드를 선택하면
- 관련 플레이리스트와 이미지를 함께 보여줍니다.
원래는 결과 화면 전에 로딩 화면을 넣으려고 했는데 API가 딱히 필요없어서 시작화면을 넣는 걸로 수정했습니다.
Demo
키워드는 총 10가지로 했고, 2개를 선택하도록 했습니다. 새벽에 만들면서 깨달았지만, 그래서 총 45가지의 플레이리스트를 만들어야했고 Spotify에 하나하나 만들어줬습니다😅 진짜 추천 서비스가 아니여서 키워드 마다 어울리는 음악 5개를 정해놓고, 둘 씩 묶어 총 10개의 노래를 제공했습니다.
Object
각 키워드와 플레이리스트를 객체로 만들었습니다.
// mood.js
// 키워드 객체 예시
{
id: "1",
text: "설레요", // 사용자에게 보여지는 단어
color: "#fd79a8", // 키워드 클릭 시 나타나는 색
selected: false, // 사용자가 선택하면 true
keyword: "love", // 검색어로 사용
}여기서 keyword는 아래처럼 unsplash 랜덤 이미지 주소에서 키워드로 넣어줬습니다.
https://source.unsplash.com/random/?{ keyword1,keyword2}
// playlist.js
// 플레이리스트 객체 예시
"love-excited": {
id: "2bq1xvQnYRZBP2OoOVsFHb", // playlist ID
comment: "설렘과 흥 둘 다 놓칠 수 없지", // 노래와 함께 보여줄 문구
}키워드를 두 개씩 묶어 플레이리스트의 key 값으로 주었습니다. Spotify에서 제공하는 iframe에서 ID 부분만 바꿔가며 리스트를 보여줍니다.
<iframe
src=https://open.spotify.com/embed/playlist/{playlist_ID}?utm_source=generator
width="100%“ height="380" frameBorder="0" allowfullscreen="“
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>안타깝게도 iframe을 React Native에서 사용할 수 없어서 WebView를 함께 사용했습니다.
GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
github.com
<WebView
scalesPageToFit={true}
bounces={false}
javaScriptEnabled
source={{
html: `
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
.player {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<iframe class="player" src="https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator&theme=0" width="100%" height="100%" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
</body>
</html>
`,
}}
automaticallyAdjustContentInsets={false}
/>말 그대로 모바일에서 웹 콘텐츠를 보여줄 수 있는 View 입니다. 여기에 iframe을 넣어 사용할 수 있습니다. 다만, 웹에서 보이는 것처럼 모바일에는 최적화되지 못한 플레이리스트가 보입니다. Demo를 보면 플레이리스트 혼자 크기가 매우 작게 나옵니다 😐 아쉽지만, 매우 짧은 기간 동안 급하게 만들어서 그대로 제출했습니다.
정말 AI가 추천해주는 멋있는 서비스면 좋았겠지만 직접 노가다로 만드는 DB도 나름 재밌었습니다. 이런 걸 구현하기 위해 필요한 정보는 무엇인지 써가는 맛이 있달까요? 아래 github 주소로 들어가면 전체 코드를 볼 수 있습니다. 더 발전시켜서 readme도 당당히 적을 수 있기를.
GitHub - yyeonkim/mood-player: 키워드 맞춤 노래 제공
키워드 맞춤 노래 제공. Contribute to yyeonkim/mood-player development by creating an account on GitHub.
github.com