🎀 Silk Music (실크 뮤직)

🚀 Silk Music 바로가기

테스트 계정

• 이메일: test@naver.com
• 비밀번호: test1234

1. 서비스 소개

실크미성 가수 진욱 님을 응원하는 뮤직 플랫폼입니다.

• 뮤직 플레이어를 통해 오디오와 유튜브 영상을 오가며 음악을 감상할 수 있습니다.
• 가수 진욱 님의 노래 재생 시 포인트를 획득할 수 있습니다.
• 좋아하는 음악들로 플레이리스트를 만들어 관리할 수 있습니다.
• 인기 차트, 검색을 통해 원하는 음악을 탐색하고, 유튜브 url을 통해 곡을 등록할 수 있습니다.

2. 기술 스택

• Front-end: HTML, SCSS, JavaScript
• Back-end: Node.js, Pug, MongoDB
• Deploy: Heroku

3. 개발 일정

• 1인 프로젝트
• 기획: 2023-03-31 ~ 2023-04-03
• 개발: 2023-04-04 ~ 2023-04-22
• 업데이트 및 버그수정: 2023-04-30 ~ 2023-05-05

4. 주요 기능

🎀 '실크 미성' 가수 진욱 님 Fan이 만든 특별한 뮤직 플랫폼

• 진욱 님의 노래를 Play 하면 포인트를 받을 수 있어요.
• 스트리밍 랭킹을 확인해 보세요.

🎀 블랙 or 핑크 모드

• 가수 진욱 님 팬덤 색상인 Pink를 활용한 테마 구현
• 상단 왼쪽 아이콘(☀)으로 테마를 바꿀 수 있어요.

🎀 유튜브 iframe API로 구현한 뮤직 플레이어

• 하단의 Mini Player로 음악만 들을 수도 있고,
• 플레이어를 열면 YouTube 영상도 함께 볼 수 있어요.
• 유튜브 영상 보기/ 숨기기 도 가능합니다.

🎀 갖출 건 다 갖춘 뮤직 플레이어

• 랜덤 재생 (ON/OFF)
• 반복 설정 (전체 / 1곡 / 반복X)
• 이전곡, 다음곡, 볼륨 조절, 시간 표시
• 플레이어에 곡 추가 , 삭제

▼ 플레이어에 곡 추가

▼ 플레이어에서 곡 삭제

🎀 유튜브 url 로 손쉽게 노래 등록하기

• 주소 입력 후 유튜브 영상을 미리보기로 확인할 수 있어요.
• 자동 입력된 곡 정보를 확인·업데이트 해주세요.
• 썸네일 이미지도 자동으로 생성됩니다.

🎀 인기 차트 & 검색 기능

• 조회수 기준 TOP 30 차트 + 실크뮤직 DB 검색
• 마음에 드는 곡은 재생, 플레이리스트에 담기, 좋아요를 누를 수 있어요.

🎀 취향 따라 만드는 플레이리스트

• 장르별, 가수별 다양한 플레이리스트를 만들어 보세요.
• 플레이리스트 이름, 커버 이미지를 바꿀 수 있어요.

▼ 내 플레이리스트에 곡 추가

▼ 전체재생, 플레이리스트 편집 및 삭제

🎀 귀여운 프로필 아바타는 덤

• 코코몽 + 진욱님 캐릭터 5종 세트
• 캐릭터 이미지 출처: 인스타(@silky_0721)

▼ 닉네임, 아바타, 비밀번호 변경

🎀 반응형 디자인

• 모바일에서도 (거의) 모든 기능이 지원됩니다!
• 뮤직 플레이어 유튜브 영상 지원 X (음원은 재생)

다크모드	라이트모드