ݺߣ

ݺߣShare a Scribd company logo

20170113 역기획_클로바_뮤직탭

•
•
DavidKwon38
DavidKwon38

(페스티벌 탭 오류 관련 사진 링크) https://disco.me/articles/1badb67805 모바일 최적화를 위해 큰 글자를 사용했습니다.

1 of 18
Download to read offline
Reverse Engineering, Producing STAGE 1: 뮤직탭 화면 분석 (20170113 Ver.) 작성자 : 반다비 1 / 18
결과 요약 Summary 1. 플레이리스트에 들어있는 앨범 썸네일 이미지를 랜덤하게 제공해 다양한 음악을 추천한다는 인상을 줌 2. 네이버 뮤직의 태그 플레이리스트를 활용, 플레이리스트를 최신화하고 다양화함 3. 페스티벌 탭의 경우, 음악 재생시 재생 바에 플레이리스트 제목이 가려짐 4. 가사보기 기능의 경우, 가사 트랙킹이 화면까지 자동으로 넘겨주지 않음 5. 음악 재생 중 다른 플레이리스트를 누르면 클로바의 피드백인 “발라드를 재생합니다”가 잘 들리지 않음 2 / 18
결과 요약 Summary 1. 역기획은 쉽지 않다. 2. 왜냐하면 서비스라는 결과물이 나오기까지 수많은 사람의 아이디어가 녹아있기 때문. 3. 그 결과물을 짧은 시간( Time < 24Hours )에 모두 찾아내고 이해하는건 어렵다. 4. 하지만 그만큼 유익하다. 5. 작고 중요하지 않을 수 있지만 UI 개선점들이 눈에 들어온다. 6. 새로운 서비스를 기획할 아이디어를 많이 얻어간다. → 역기획은 공부 잘하는 친구의 정리노트를 베끼는 과정과 같다. 3 / 18
Introduction : 가입하기 (쉽지?) 4 / 18
Home & Music Tab 홈 탭과 뮤직 탭 § 홈 탭 (Left) 앱을 실행하면 보이는 “첫 화면” Greeting Message와 Dialog Recommendation을 제공 § 뮤직 탭 (Right) 뮤직 탭은 하단 고정 탭에서 두 번째 음표 아이콘으로 위치 아이콘을 누르면 뮤직 홈으로 넘어감 5 / 18
Going Deeper … 뮤직 탭 구조 (생각보다 많네 …) 뮤직 탭 구조 § 총 8개의 리스트 세트 § 세트 순서는 스크롤을 내릴 때 등장하는 순서와 동일 하나씩 알아보자! 6 / 18
리스트 셋 1: 추천 명령어 플레이리스트 리스트 셋 1. “지금 바로 들어보세요” A. 기능 : § “겨울 노래 틀어줘”, “최신 음악 틀어줘” 등 음악 재생 관련 명령어를 추천해주고, 관련 플레이리스트 제공 B. 특징 : § 7개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Recommend 추천 명령어 플레이리스트를 받아온다 PlayList_Title 추천 명령어를 제목으로 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 7 / 18
[여기서 잠깐] 음악 재생시 화면 변화 뮤직 바와 플레이리스트 화면 § “리스트”의 썸네일 누르면 (Left) 해당 리스트에서 랜덤으로 곡 재생 하단 고정 탭 위로 재생 바 등장 § 플레이리스트 화면 (Right) 재생 바를 누르면 현재 플레이 중인 곡을 포함한 앨범의 이미지 썸네일과 곡을 포함한 플레이리스트를 제공 현재 재생 중인 곡 우측에는 좋아요 버튼과 정지 버튼을 제공 8 / 18
[여기서 잠깐] 음악 재생시 화면 변화 추가 기능 화면 § “앨범” 썸네일 누르면 (Left) 반복 버튼과 가사 보기 버튼을 제공 § 가사보기 화면 (Right) 가사 보기 버튼을 누르면 가사 화면을 띄어줌 가사는 자동으로 Tracking 하지만 가사가 화면을 넘어간다고 화면도 자동으로 Tracking되지 않음 9 / 18
리스트 셋 2: 내가 만든 재생목록 플레이리스트 리스트 셋 2. “OOO님을 위한 맞춤 음악” A. 기능 : § 내가 만든 재생목록, 관련 장르 등 큰 카테고리 별로 플레이리스트를 추천해줌 B. 특징 : § 13개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_My 내가 만든 재생목록을 플레이리스트로 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 10 / 18
리스트 셋 3: 국내 TOP 100 플레이리스트 리스트 셋 3. “국내 TOP 100” A. 기능 : § 네이버 뮤직 국내 TOP 100 리스트를 그대로 받아와서 제공 B. 특징 : § 5위까지 제공 § 5위 중 한 곡을 누르면 해당 곡부터 플레이 § 100곡 전체를 보고 싶으면 제목을 누르면 리스트 제공 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_TOP100 국내 TOP 100 플레이리스트를 받아온다 PlayList_Link TOP 100 리스트로 넘어가는 링크를 제공한다 11 / 18
리스트 셋 4: 40개 묶음 플레이리스트 리스트 셋 4. “요즘 찾는 음악” A. 기능 : § HOT 40, POP 40, 명곡 40 등 특정 카테고리로 곡을 40개씩 묶어 플레이리스트 제공 B. 특징 : § 8개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_40 40개씩 묶은 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 12 / 18
리스트 셋 5: 감정 태그 플레이리스트 리스트 셋 5. “감정을 알아주는 노래” A. 기능 : § “신나는”, “행복한 느낌의”, “활기찬”, “달달한”, “편안한” 등 감정 엔티티 관련 플레이리스트를 제공한다 B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Emotion 감정 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 13 / 18
리스트 셋 6: 특정 상황 가정 플레이리스트 리스트 셋 6. “지금 어울리는 노래” A. 기능 : § 카페 분위기, 휴식이 필요할 때 등 특정 상황을 가정한 플레이리스트를 제공 B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Situation 특정 상황 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 14 / 18
리스트 셋 7: 장르 플레이리스트 리스트 셋 7. “장르별 노래” A. 기능 : § 발라드, 댄스, 힙합 등 장르 관련 플레이리스트를 제공한다. B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Genre 특정 상황 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 15 / 18
리스트 셋 8: 뮤직 페스티벌 플레이리스트 리스트 셋 8. “페스티벌” A. 기능 : § 그랜드 민트 페스티벌, 자라섬 국제 재즈 페스티벌 등 페스티벌 관련 플레이리스트 제공 B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Festival 페스티벌 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 16 / 18
끝날 때 까지 끝난 것이 아니다, 동요 탭 동요 탭 § 홈 탭 (Left Shot) 홈 탭 화면 우측 상단에 보면 브라운이 귀엽게 손을 흔들고 있음! 동요를 들어보라며 … § 동요 탭(Right Shot) 귀여운 브라운을 가볍게 탑하면 동요 홈이 등장 ! 큰 구성은 뮤직 탭과 유사 즉, 뮤직만큼 크고 수요가 많은 탭 (→ 추후 분석 업데이트 예정) 17 / 18
질문이나 수정 요청은 아래 메일로 보내주세요 ! viendabvy@gmail.com 18 / 18

More Related Content

20170113 역기획_클로바_뮤직탭

  • 1. Reverse Engineering, Producing STAGE 1: 뮤직탭 화면 분석 (20170113 Ver.) 작성자 : 반다비 1 / 18
  • 2. 결과 요약 Summary 1. 플레이리스트에 들어있는 앨범 썸네일 이미지를 랜덤하게 제공해 다양한 음악을 추천한다는 인상을 줌 2. 네이버 뮤직의 태그 플레이리스트를 활용, 플레이리스트를 최신화하고 다양화함 3. 페스티벌 탭의 경우, 음악 재생시 재생 바에 플레이리스트 제목이 가려짐 4. 가사보기 기능의 경우, 가사 트랙킹이 화면까지 자동으로 넘겨주지 않음 5. 음악 재생 중 다른 플레이리스트를 누르면 클로바의 피드백인 “발라드를 재생합니다”가 잘 들리지 않음 2 / 18
  • 3. 결과 요약 Summary 1. 역기획은 쉽지 않다. 2. 왜냐하면 서비스라는 결과물이 나오기까지 수많은 사람의 아이디어가 녹아있기 때문. 3. 그 결과물을 짧은 시간( Time < 24Hours )에 모두 찾아내고 이해하는건 어렵다. 4. 하지만 그만큼 유익하다. 5. 작고 중요하지 않을 수 있지만 UI 개선점들이 눈에 들어온다. 6. 새로운 서비스를 기획할 아이디어를 많이 얻어간다. → 역기획은 공부 잘하는 친구의 정리노트를 베끼는 과정과 같다. 3 / 18
  • 4. Introduction : 가입하기 (쉽지?) 4 / 18
  • 5. Home & Music Tab 홈 탭과 뮤직 탭 § 홈 탭 (Left) 앱을 실행하면 보이는 “첫 화면” Greeting Message와 Dialog Recommendation을 제공 § 뮤직 탭 (Right) 뮤직 탭은 하단 고정 탭에서 두 번째 음표 아이콘으로 위치 아이콘을 누르면 뮤직 홈으로 넘어감 5 / 18
  • 6. Going Deeper … 뮤직 탭 구조 (생각보다 많네 …) 뮤직 탭 구조 § 총 8개의 리스트 세트 § 세트 순서는 스크롤을 내릴 때 등장하는 순서와 동일 하나씩 알아보자! 6 / 18
  • 7. 리스트 셋 1: 추천 명령어 플레이리스트 리스트 셋 1. “지금 바로 들어보세요” A. 기능 : § “겨울 노래 틀어줘”, “최신 음악 틀어줘” 등 음악 재생 관련 명령어를 추천해주고, 관련 플레이리스트 제공 B. 특징 : § 7개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Recommend 추천 명령어 플레이리스트를 받아온다 PlayList_Title 추천 명령어를 제목으로 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 7 / 18
  • 8. [여기서 잠깐] 음악 재생시 화면 변화 뮤직 바와 플레이리스트 화면 § “리스트”의 썸네일 누르면 (Left) 해당 리스트에서 랜덤으로 곡 재생 하단 고정 탭 위로 재생 바 등장 § 플레이리스트 화면 (Right) 재생 바를 누르면 현재 플레이 중인 곡을 포함한 앨범의 이미지 썸네일과 곡을 포함한 플레이리스트를 제공 현재 재생 중인 곡 우측에는 좋아요 버튼과 정지 버튼을 제공 8 / 18
  • 9. [여기서 잠깐] 음악 재생시 화면 변화 추가 기능 화면 § “앨범” 썸네일 누르면 (Left) 반복 버튼과 가사 보기 버튼을 제공 § 가사보기 화면 (Right) 가사 보기 버튼을 누르면 가사 화면을 띄어줌 가사는 자동으로 Tracking 하지만 가사가 화면을 넘어간다고 화면도 자동으로 Tracking되지 않음 9 / 18
  • 10. 리스트 셋 2: 내가 만든 재생목록 플레이리스트 리스트 셋 2. “OOO님을 위한 맞춤 음악” A. 기능 : § 내가 만든 재생목록, 관련 장르 등 큰 카테고리 별로 플레이리스트를 추천해줌 B. 특징 : § 13개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_My 내가 만든 재생목록을 플레이리스트로 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 10 / 18
  • 11. 리스트 셋 3: 국내 TOP 100 플레이리스트 리스트 셋 3. “국내 TOP 100” A. 기능 : § 네이버 뮤직 국내 TOP 100 리스트를 그대로 받아와서 제공 B. 특징 : § 5위까지 제공 § 5위 중 한 곡을 누르면 해당 곡부터 플레이 § 100곡 전체를 보고 싶으면 제목을 누르면 리스트 제공 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_TOP100 국내 TOP 100 플레이리스트를 받아온다 PlayList_Link TOP 100 리스트로 넘어가는 링크를 제공한다 11 / 18
  • 12. 리스트 셋 4: 40개 묶음 플레이리스트 리스트 셋 4. “요즘 찾는 음악” A. 기능 : § HOT 40, POP 40, 명곡 40 등 특정 카테고리로 곡을 40개씩 묶어 플레이리스트 제공 B. 특징 : § 8개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_40 40개씩 묶은 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 12 / 18
  • 13. 리스트 셋 5: 감정 태그 플레이리스트 리스트 셋 5. “감정을 알아주는 노래” A. 기능 : § “신나는”, “행복한 느낌의”, “활기찬”, “달달한”, “편안한” 등 감정 엔티티 관련 플레이리스트를 제공한다 B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Emotion 감정 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 13 / 18
  • 14. 리스트 셋 6: 특정 상황 가정 플레이리스트 리스트 셋 6. “지금 어울리는 노래” A. 기능 : § 카페 분위기, 휴식이 필요할 때 등 특정 상황을 가정한 플레이리스트를 제공 B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Situation 특정 상황 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 14 / 18
  • 15. 리스트 셋 7: 장르 플레이리스트 리스트 셋 7. “장르별 노래” A. 기능 : § 발라드, 댄스, 힙합 등 장르 관련 플레이리스트를 제공한다. B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Genre 특정 상황 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 15 / 18
  • 16. 리스트 셋 8: 뮤직 페스티벌 플레이리스트 리스트 셋 8. “페스티벌” A. 기능 : § 그랜드 민트 페스티벌, 자라섬 국제 재즈 페스티벌 등 페스티벌 관련 플레이리스트 제공 B. 특징 : § 12개의 리스트를 썸네일 이미지와 제시 § 썸네일 이미지는 계속 바뀜 C. 오브젝트 : 오브젝트 이름 오브젝트 기능 PlayList_Festival 페스티벌 관련 플레이리스트를 받아온다 PlayList_Title 플레이리스트 제목을 출력한다 PlayList_Image 플레이리스트 내 앨범 썸네일을 받아온다 16 / 18
  • 17. 끝날 때 까지 끝난 것이 아니다, 동요 탭 동요 탭 § 홈 탭 (Left Shot) 홈 탭 화면 우측 상단에 보면 브라운이 귀엽게 손을 흔들고 있음! 동요를 들어보라며 … § 동요 탭(Right Shot) 귀여운 브라운을 가볍게 탑하면 동요 홈이 등장 ! 큰 구성은 뮤직 탭과 유사 즉, 뮤직만큼 크고 수요가 많은 탭 (→ 추후 분석 업데이트 예정) 17 / 18
  • 18. 질문이나 수정 요청은 아래 메일로 보내주세요 ! viendabvy@gmail.com 18 / 18