Update README.md

신지원
Commit 7a4ccc5f161afc74ad10c4a7ce67156c76f9b1da 7a4ccc5f 1 parent a5c7287b
Showing 1 changed file with 184 additions and 71 deletions
README.md
--- a/README.md
View file @7a4ccc5
+++ b/README.md
View file @7a4ccc5
@@ -22,7 +22,7 @@
 -->
 
 <!-- PROJECT LOGO -->
- <br />
+ <br /><br />
 <p align="center">
 
   <h3 align="center">LineMusicChatbot</h3>
@@ -36,7 +36,7 @@
 </p>
 
 
- 
+ <br />
 <!-- TABLE OF CONTENTS -->
 <details open="open">
   <summary><h2 style="display: inline-block">Table of Contents</h2></summary>
@@ -72,45 +72,72 @@
 </details>
 
 
- 
+ <br />
 <!-- ABOUT THE PROJECT -->
 ## About The Project
+ <br />
+ <table>
+   <tr>
+   <td align="center" ><img src = "/uploads/1c6264269582965aa952f1e62887ff33/KakaoTalk_20210609_015744276_01.jpg" width = "250"/></td>
+     <td valign="top"> <br><br><br><br>
 
- <img src = "/uploads/47cfc2d5e0a2cfdf45cf0bfc1c63e39c/KakaoTalk_20210609_015744276.jpg" width = "400" />
- 위 기능은 유료 스트리밍 서비스인 유튜브 뮤직에서 제공하는 플레이리스트로 유튜브에서는 이 기능을 이용할 수 없습니다.
+     이 프로젝트를 선정한 이유는 평소 음악을 들을 때 불편했던 점을 해소하고 싶었기 때문입니다.<br><br>
     
- <img src = "/uploads/1c6264269582965aa952f1e62887ff33/KakaoTalk_20210609_015744276_01.jpg" width = "400"/>
- 게다가, 유튜브 검색만으로는 공식 음원을 찾기 힘들다는 것을 알 수 있습니다.
- <br />
- <br />
- <br />
- <br /><br />
- 음악과 관련한 프로젝트를 선정한 이유는 먼저 우리가 음악을 들을 때 느낄 수 있는 불편한 상황을 생각해 보았고 음악이 듣고는 싶은데 어떤 음악을 들어야할지 망설여지는 상황에서 가수와, 혹은 장르와 관련된 음악을 제공해주는 시스템을 구현하고자 했습니다.
+     왼쪽의 사진은 유튜브에서 특정 음악을 검색한 사진입니다. <br><br>
 
+     '유튜브'는 영상 공유를 주 목적으로 하기 때문에, 유튜브에서 노래 관련 검색만으로 온전히 노래를 즐기기는 어렵습니다. <br><br>
 
- 유튜브로부터 공식적으로 재생목록 뿐만 아니라 음악에 관해 지원받기 위해서는 유튜브의 유료 음악 스트리밍 서비스 유튜브 뮤직을 이용해야 하고, 이 때문에 유튜브에서 검색만으로 공식 음원을 찾기 쉽지 않습니다.
+     예를 들면, 뮤직비디오나 저작권자가 아닌 사람이 올린 영상의 경우 공식 음원에 비해 음질도 떨어집니다.<br><br>
 
+     또한 인트로와 아웃트로 때문에 듣기 불편할 수도 있습니다. <br><br>
 
- 뮤직비디오나 저작권자가 아닌 사람이 올린 영상의 경우 공식 음원에 비해 음질도 떨어지고, 인트로와 아웃트로 때문에 듣기 불편할 수도 있습니다.
+     따라서 제대로 된 음악 서비스를 즐기기 위해서는 '유튜브 뮤직' 유료 서비스를 이용해야합니다.<br><br>
       
     
- 이러한 문제점을 보완하고자 LineMusicChatbot 프로젝트를 시작하게 되었습니다.
     
+   </tr>
+ </table>
+ <br />
+ <table>
+   <tr>
+     
+     <td align="center" ><img src = "/uploads/47cfc2d5e0a2cfdf45cf0bfc1c63e39c/KakaoTalk_20210609_015744276.jpg" width = "250" /></td>
+     <td valign="top"> 
+     <br>
+     <br>
+     <br>
+     <br>
+     왼쪽의 첨부 파일은 유튜브 뮤직에서 제공하는 플레이리스트입니다. <br><br>
+ 
+     유튜브에서는 이 기능을 이용할 수 없습니다.<br><br>
 
- LineMusicChatbot은 라인 챗봇 서비스와 YouTube API를 이용하여 만든 음악 추천 및 검색 챗봇입니다.
+     1) 어떤 음악을 들어야할지 망설여지는 상황<br>
+     2) 유튜브 뮤직 유료결제 없이 플레이리스트를 즐기고 싶은 상황<br><br>
+ 
+     위와 같은 상황에서 가수나 장르와 관련된 음악을 제공해주는 시스템을 구현하고자 했습니다.<br><br>
+   </tr>
+ </table>
+ 
+ <br />
 
+ ###### 이러한 문제점을 보완하고자 LineMusicChatbot 프로젝트를 시작하게 되었습니다.
 
- 유튜브 API를 통해 재생목록의 정보와 재생목록 내 동영상의 제목, 썸네일, URL을 제공하도록 하여 특정 메시지를 사용자가 챗봇에서 입력하면 이를 분석하여 노래를 추천해주거나, 재생목록을 출력하는 방식으로 구현한 프로젝트입니다.
+ * LineMusicChatbot은 라인 챗봇 서비스와 YouTube API를 이용하여 만든 음악 추천 및 검색 챗봇입니다.
 
+ * 유튜브 API를 통해 재생목록의 정보와 내 동영상의 제목, 썸네일, URL을 제공합니다.
 
+ * 사용자가 특정 메시지를 챗봇에 입력하면 이를 분석하여 노래를 추천해주거나, 재생목록을 출력하는 방식으로 구현한 프로젝트입니다.
+ 
+ <br />
 
 ### Built With
 
 * [Line Messaging API](https://developers.line.biz/en/services/messaging-api/)
 * [YouTube Data](https://developers.google.com/youtube/v3/getting-started?hl=ko)
+ <br />
+ <br />
 
- 
- 
+ <br />
 <!-- GETTING STARTED -->
 ## Getting Started
 
@@ -121,9 +148,10 @@ LineMusicChatbot은 라인 챗봇 서비스와 YouTube API를 이용하여 만
   ```
   npm install
   ```
- 
+ <br />
+ <br />
 ### Installation
- 
+ <br />
 1. Clone the repo
    ```
    git clone http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git
@@ -132,92 +160,176 @@ LineMusicChatbot은 라인 챗봇 서비스와 YouTube API를 이용하여 만
    ```
    npm install
    ```
- 
+ <br />
+ <br />
 ### Create Info file
 ![Info_1](/uploads/c242c735636d44925f8e39f7a76708ee/Info_1.PNG)
 
 보안을 위해 토큰 값과 API키를 빼놓았습니다.
 새 파일 Info.js 을 생성하고 
 
+ ``` javascript 
 exports.TOKEN = 'Kb1/rQYz4MUhF8XyKQv7z9x0MxVQ5bX/XO8S/yt/1qQEJVAbsEFAaMvXKEOx9Umr7KhivfyDPfZHRRLFPngR0O4ZGWV2VFses8ufPE7uAdvYr4G6keBNAU69nBz5IC71HfbIrUHxXYqD7GfhVwXzpwdB04t89/1O/w1cDnyilFU='  
 
 exports.YoutubeKey = 'AIzaSyBInggOtXxPFYIRee0Xs3vb5iZ9YE9_518'
 
 exports.domain='2020105631.oss2021.tk'
- 을 붙여넣기 해주시기 바랍니다.
- 
+ ```
+ 을 붙여넣기 해주시기 바랍니다.<br><br>
 
+ <br />
 ### Chatbot QR Code
- ![QR_Code](/uploads/d00b60136d78cb8c790e7d59be1e09e9/QR_Code.png)
+ <br />
+ <table>
+   <tr>
+     <td align="center"><img src = "/uploads/d00b60136d78cb8c790e7d59be1e09e9/QR_Code.png" width = "100" /></td>
+     
+     <td align="center"><img src = "/uploads/95eadcdc3fd8409e9b2a4456c96f2330/KakaoTalk_20210609_025425696.jpg" width = "250"  /></td>
     
- QR 코드를 이용해 챗봇을 등록해주시기 바랍니다.
+   </tr>
+ </table>
+ <br />
+ <table>
+   <tr>
+ 
+       <td align="center"> QR 코드를 이용해 챗봇을 등록해주시기 바랍니다.</td>
       
- <img src = "/uploads/95eadcdc3fd8409e9b2a4456c96f2330/KakaoTalk_20210609_025425696.jpg" width = "500" />
- 올바르게 친구 추가 되었을 때의 화면입니다.
+       <td align="center"> 올바르게 친구 추가 되었을 때의 화면입니다.</td>
       
+   </tr>
+ </table>
+ <br />
+ <br />
 <!-- USAGE EXAMPLES -->
 ## Usage
- 
+ <br />
 ### Help
- <img src = "/uploads/cdebe2630dbca7032a002d30382aa54b/KakaoTalk_20210609_025512419.jpg" width = "400" />
+ <br />
+ <table>
+   <tr>
+     <td align="center"><img src = "/uploads/cdebe2630dbca7032a002d30382aa54b/KakaoTalk_20210609_025512419.jpg" width = "250" /></td>
+     
+       <td align="center">
+     <br><br>      기본적인 구현 예시를 도움말 명령어를 통해 구현해 놓았습니다.<br><br>
 
- 기본적인 구현 예시를 도움말 명령어를 통해 구현해 놓았습니다.
+           "도움말"을 입력하면 구체적인 구현에 대한 설명을 얻을 수 있습니다.<br>
+ </td>
       
- "도움말"을 입력하면 구체적인 구현에 대한 설명을 얻을 수 있습니다.
+   </tr>
+ </table>
 
+ 
+ <br />
 ### PlayList
- <img src = "/uploads/ee9c4bfbc32b5d80f45e7b9316eb0a3d/KakaoTalk_20210609_011429047.jpg" width = "400" /> 
 <br />
- <img src = "/uploads/ac12d4f8d00e9b3ba2ff3fb7368e47ce/KakaoTalk_20210609_011650392.jpg" width="400"/>
 
- 첫번째 기능은 음악을 추천하는 기능입니다. 사용자가 입력한 문자열이 "플레이리스트"일 때, 챗봇이 선택지를 제공해 음악 추천을 준비합니다.
+ <table>
+   <tr>
+     <td align="center"><img src = "/uploads/ee9c4bfbc32b5d80f45e7b9316eb0a3d/KakaoTalk_20210609_011429047.jpg" width = "250" /></td>
+     
+       <td align="left">
+     <br><br><br>  첫번째 기능은 음악을 추천하는 기능입니다. <br><br>
+ 
+       사용자가 입력한 문자열이 "플레이리스트"일 때, 챗봇이 선택지를 제공해 음악 추천을 준비합니다.<br><br>
+ 
+       원하는 분야를 고르고 또 그 안에서 주어지는 선택지를 선택하면 최종 선택지와 관련한 노래를 무작위로 추천합니다.<br><br>
+ 
+       이때, 공식 음원을 찾기 힘들다는 단점을 보완하기 위해 URL을 통해 이동하면 공식 음원으로 이동하는 것을 볼 수 있습니다. <br><br>
+ 
+ </td>
+       
+   </tr>
+ </table>
+ <br />
+ 
+ <br />
 
- 원하는 분야를 고르고 또 그 안에서 주어지는 선택지를 선택하면 최종 선택지와 관련한 노래를 무작위로 추천합니다.
 
- 이때, 공식 음원을 찾기 힘들다는 단점을 보완하기 위해 URL을 통해 이동하면 공식 음원으로 이동하는 것을 볼 수 있습니다.
 
+ <table>
+   <tr>
+     <td align="center"><img src = "/uploads/ac12d4f8d00e9b3ba2ff3fb7368e47ce/KakaoTalk_20210609_011650392.jpg" width="250"/></td>
     
- 지원하는 플레이리스트는 크게 장르, 무드, 가수로 분류하여 제공하는데, 장르의 경우 힙합, 피아노 팝 플레이리스트가 있고, 무드의 경우 슬픈 노래와 신나는 노래에 관한 것이 있으며, 가수의 경우 블랙핑크, 아이유, 트와이스, 레드벨벳의 경우를 지원합니다.
+       <td align="left">
+     <br><br>
+         지원하는 플레이리스트는 아래와 같이 분류하여 제공합니다. <br><br>
+         * 장르 플레이리스트 : 힙합, 피아노, 팝 <br><br>
+         * 무드 플레이리스트 : 슬픈 노래, 신나는 노래<br><br>
+         * 가수 플레이리스트 : 블랙핑크, 아이유, 트와이스, 레드벨벳<br><br>
+ </td>
       
- 장르 - 힙합, 피아노, 팝
+   </tr>
+ </table>
+ <br />
+ <br />
 
- 무드 - 슬픈, 신나는
 
- 가수 - 블랙핑크, 아이유, 트와이스 레드벨벳
 
 ### Search in YouTube
- <img src = "/uploads/099618e7a1bd707cc0727da840cd134c/KakaoTalk_20210609_011938764.jpg" width = "400" /> 
+ <br />
+ <table>
+   <tr>
+     <td align="center"><img src = "/uploads/099618e7a1bd707cc0727da840cd134c/KakaoTalk_20210609_011938764.jpg" width = "250"/></td>
+     
+       <td align="left">
+     <br>
+         두번째 기능은 검색입니다. <br><br>
+ 
+         자신이 검색하고 싶은 노래가 있다면 유튜브로 번거롭게 이동하여 검색하지 않고 <br><br>
+ 
+         바로 검색할 수 있도록 챗봇 자체에 검색 기능을 추가하였습니다.<br><br>
 
- 두번째 기능은 검색입니다. 플레이리스트 이외에 자신이 검색하고 싶은 노래가 있다면 유튜브로 번거롭게 이동하여 검색하지 않고 바로 검색할 수 있도록 챗봇 자체에 검색 기능을 추가하였습니다.
+         챗봇은 사용자가 입력한 문자열의 유튜브 검색 결과 중 최상단의 결과를 출력하고, <br><br>
 
- 챗봇은 사용자가 입력한 문자열의 유튜브 검색 결과중 최상단의 결과를 출력하고, 그 영상의 제목과 URL 그리고 썸네일 정보를 제공합니다.
+         그 영상의 제목과 URL 그리고 썸네일 정보를 제공합니다.<br><br>
 
- 이에 관하여 사용자가 판단하기에 챗봇이 썸네일은 보여주지 않았으면 하거나, 출력 정보가 너무 적다고 판단되는 경우를 고려하여 검색에 대하여 설정할 수 있는 기능을 추가하였습니다.
+         이에 관하여 사용자가 판단하기에 챗봇이 썸네일은 보여주지 않았으면 하거나, <br><br>
 
+         출력 정보가 너무 적다고 판단되는 경우를 고려하여 검색에 대하여 설정할 수 있는 기능을 추가하였습니다.<br><br>
+ 
+ </td>
+       
+   </tr>
+ </table>
+ 
+ 
+ <br />
+ <br />
 ### Search Setting
- <img src = "/uploads/5fa9cae43c22178081140ac54e42c8d1/KakaoTalk_20210609_012250106.jpg" width = "400" /> 
+ 
 <br />
- <img src = "/uploads/a7afaa1278e08adcc2d5717836f84a82/KakaoTalk_20210609_012849616.jpg" width = "400" /> 
+ <table>
+   <tr>
+     <td align="center"><img src = "/uploads/5fa9cae43c22178081140ac54e42c8d1/KakaoTalk_20210609_012250106.jpg" width = "250" /></td>
+     
+     <td align="center"><img src = "/uploads/a7afaa1278e08adcc2d5717836f84a82/KakaoTalk_20210609_012849616.jpg" width = "250" /></td>
     
- 검색 기능에 대한 커스텀 설정 기능입니다.
 
- “설정”을 입력하면 자동으로 챗봇이 설정 기능을 차례로 출력하도록 하였습니다.
+ </td>
       
- 설정할 수 있는 기능은 썸네일의 출력 유무, 출력할 동영상의 개수, 영상 URL의 포함 여부입니다.
+   </tr>
+ </table>
 
- 각각의 경우 Default값은
+ 검색 기능에 대한 커스텀 설정 기능입니다.<br>
 
- 썸네일 출력 – 출력
+ “설정”을 입력하면 자동으로 챗봇이 설정 기능을 차례로 출력하도록 하였습니다.<br>
 
- 출력할 동영상의 개수 – 1개
+ 설정할 수 있는 기능은 썸네일의 출력 유무, 출력할 동영상의 개수, 영상 URL의 포함 여부입니다.<br><br><br>
 
- URL 포함 여부 – 출력
+ 각각의 경우 Default값은<br><br>
 
- 입니다.
+   * 썸네일 출력 – 출력<br><br>
 
+   * 출력할 동영상의 개수 – 1개<br><br>
 
+   * URL 포함 여부 – 출력<br><br>
+ 
+ 입니다.<br><br>
+ 
+ <br />
 <!-- ROADMAP -->
 ## Roadmap
+ <br />
 ![Roadmap_1](/uploads/4bd9416fabb06084c01720da48158591/Roadmap_1.png)
 
 YouTube API를 이용하는 과정에서 문제가 있었습니다.
@@ -227,31 +339,31 @@ YouTube API를 이용하는 과정에서 문제가 있었습니다.
 때문에 재생목록에 대해 사용자가 원하는 곡을 추가하거나 삭제하는 등의 작업이 구현되지 않아 재생목록에 대한 완전한 기능구현을 하지 못했다는 문제점이 있습니다.
 
 이에 대한 앞으로의 로드맵은 추가적으로 다른 API를 이용하여 구현하지 못하는 부분을 구현하거나 사용자에게 재생목록 자체의 URL을 제공하여 사용자가 해당 링크를 방문하여 유튜브 내에서 동영상을 추가, 삭제 하도록 하는 방법을 생각하고 있습니다.
- 
- 
+ <br><br>
+ <br />
 
 <!-- CONTRIBUTING -->
 ## Contributing
- 
+ <br />
 추가하거나 개선할 기능이 있다면 참고 바랍니다.
 
- 1. Project를 Fork 합니다.
- 2. 새로운 브랜치를 생성합니다. (`git checkout -b feature/AmazingFeature`)
- 3. 변경된 사항을 Commit 합니다. (`git commit -m 'Add some AmazingFeature'`)
- 4. 브랜치에 Push 합니다. (`git push origin feature/AmazingFeature`)
- 5. Pull Request 합니다.
- 
- 
+   1. Project를 Fork 합니다.
+   2. 새로운 브랜치를 생성합니다. (`git checkout -b feature/AmazingFeature`)
+   3. 변경된 사항을 Commit 합니다. (`git commit -m 'Add some AmazingFeature'`)
+   4. 브랜치에 Push 합니다. (`git push origin feature/AmazingFeature`)
+   5. Pull Request 합니다.
+ <br><br>
 
+ <br />
 <!-- LICENSE -->
 ## License
- 
+ <br />
 MIT License
- 
+ <br><br>
 
 <!-- CONTACT -->
 ## Contact
- 
+ <br />
 신지원 - Dev.jiwonshin@khu.ac.kr
 
 엄민용 - dono222@khu.ac.kr
@@ -259,13 +371,13 @@ MIT License
 엄성진 - 7497aaaa@khu.ac.kr
 
 Project Link: [http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git](http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git)
+ <br><br>
 
 
 
 
- 
- <!-- MARKDOWN LINKS & IMAGES -->
- <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+ <!— MARKDOWN LINKS & IMAGES —>
+ <!— https://www.markdownguide.org/basic-syntax/#reference-style-links —>
 [contributors-shield]: https://img.shields.io/github/contributors/github_username/repo.svg?style=for-the-badge
 [contributors-url]: https://github.com/github_username/repo/graphs/contributors
 [forks-shield]: https://img.shields.io/github/forks/github_username/repo.svg?style=for-the-badge
@@ -278,3 +390,4 @@ Project Link: [http://khuhub.khu.ac.kr/2016102927/LineMusicChatbot.git](http://k
 [license-url]: https://github.com/github_username/repo/blob/master/LICENSE.txt
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
 [linkedin-url]: https://linkedin.com/in/github_username
+ <br><br>
\ No newline at end of file