티스토리 뷰

💻 프로젝트

Mood Player - 기분 맞춤 노래 제공 서비스 | 모바일앱제작 개인 프로젝트

yeonDev 2021. 12. 30. 12:46

학교에서 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

프로토타입

  1. 시작화면을 클릭하면 키워드를 선택하는 화면이 나옵니다.
  2. 사용자가 자기 기분에 맞는 키워드를 선택하면
  3. 관련 플레이리스트와 이미지를 함께 보여줍니다.

원래는 결과 화면 전에 로딩 화면을 넣으려고 했는데 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

 

저작자표시 동일조건

'💻 프로젝트' 카테고리의 다른 글

[토킹 AI 책 친구] 초등학교 저학년 대상 동화 재창작 서비스  (0) 2023.06.25
[메멘토] 판례 암기 애플리케이션 - 프론트엔드 구현  (0) 2023.05.12
[메멘토] 판례 암기 어플 만들기 - 기술 검증  (1) 2022.11.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함