강디너의 개발 일지

유튜브 이용해서 Music Player 기획 본문

Javascript/기획

유튜브 이용해서 Music Player 기획

강디너 2020. 3. 9. 11:44
728x90

기획 어려워어어어

목적

  • 회사 라운지 노래 컨트롤
  • 내가 듣고 싶은 노래들 저장
  • 다른 분들이 저장한 노래 듣기
  • 내 공부

 

총 5개의 페이지

  • 홈 화면
  • 마이 페이지 화면
  • 검색 결과 화면
  • 플레이 리스트 화면
  • 앱 전용 플레이 리스트 화면

 

홈 화면

 

1. 로고

2. 검색창

  • 검색 결과 페이지로 이동

3. 로그인

  • 로그인할 경우 마이페이지, 로그아웃 버튼 공개
  • 로그아웃 버튼 클릭 시 홈 화면으로 이동

4. 마이 플레이 리스트

  • 로그인하지 않을 경우 숨김 처리
  • 해당 그룹 목록의 첫 번째 유튜브 썸네일
  • 클릭 시 플레이 리스트 화면으로 이동

5. 공개 플레이 그룹

  • 등록된 그룹 썸네일 표시
  • Like 기능
  • 클릭 시 플레이 리스트 화면으로 이동

6. 앱 재생 플레이어

  • 앱에 틀어져있는 유튜브 컨트롤할 수 있는 컨트롤러
  • 딜리셔스 이메일을 쓰는 사람만 보임
  • 유튜브 재생, 정지, 다음곡, 이전곡, 볼륨 컨트롤 기능
  • 재생 목록 볼 수 있는 메뉴 기능
  • 재생 목록 메뉴에서 영상 삭제 기능

 

마이페이지 화면

1. 내 그룹

  • 내 그룹 리스트
  • 그룹 추가, 수정, 삭제 기능
  • 그룹 추가, 수정 버튼 클릭 시 팝업 표시
  • 수정, 삭제 기능은 썸네일에 Icon으로 표시
  • 썸네일 클릭 시 플레이 리스트 화면으로 이동

 

2. 내가 좋아하는 그룹

  • 내가 Like를 누른 그룹 리스트
  • 썸네일 클릭 시 플레이 리스트 화면으로 이동
  • Like를 다시 누르면 삭제

1. 검색 결과 리스트

  • Youtube 검색을 통해서 긁어온 리스트
  • 그룹을 선택 후 youtube 영상을 추가하는 기능

 

플레이 리스트 화면

1. 유튜브 재생 화면
2. 유튜브 재생 목록

  • 삭제 기능 -> 자신이 등록한 그룹일 경우에만 버튼 노출
  • 순서 바꾸기 ? (미정)

3. 공개된 플레이 그룹 리스트

  • 클릭 시 해당 플레이 리스트 화면으로 이동

 

앱 전용 플레이 리스트 화면

1. 유튜브 재생 화면

  • 앱은 특정 페이지 하나만 바라보고 있으면 됨
  • 앱은 충전기 꽂고 스피커 연결하면 끝
  • 홀드 해도 백그라운드에서 실행될 수 있도록 앱 개발
반응형
Comments