netflix, wavve, udemy, youtube, 아프리카TV, twitch등 웹 동영상 관리하는 크롬 확장앱 만들기

쿠키스트림은 스크린샷과 동영상 북마크기능을 이용한 서비스를 만들어 '유튜브', '아프리카TV', '트위치', '동영상강좌' 등 웹동영상 서비스들을 통합적으로 기록 관리하는 크롬 확장앱입니다.

내가 좋아하는 수 많은 웹영상을 관리하고 기록하려면???

우리는 넷플릭스부터 유튜브, 트위치, 아프리카TV등 수많은 웹스트리밍 서비스를 이용하고 있습니다.
다양한 웹동영상 서비스는 많지만 이를 사용자가 모두 기록하기 어렵죠.
특히 영상을 보다가 시간이 없어 나중에 보려고 해도, 각 영상이 어디에 있는지 그리고 어디까지 봤는지 알기 어렵습니다. 
또한 영상을 이용하여 학습을 할때도 영상을 보며 기록하는게 쉽지 않고 통합적으로 관리하기도 어렵죠
이를 보완하기 위해 쿠키스트림이라는 크롬 확장앱을 만들어봤습니다.

---

쿠키스트림 주요기능 

https://chromewebstore.google.com/detail/cookystream-manager/ffgaiddifghkcdkhjmgmmlgmdplnemfo?hl=ko

cookyStream Manager

스트리밍 영상에 대해 단축키 또는 아이콘을 통해 다양한 컨트롤 기능을 제공할 수 있는 크롬 확장앱으로 
쿠키스트림 매니저를 이용하여 다음과 같은 기능들을  사용하여 netflix, appleTV, disney plus, amazon prime 등 OTT서비스와 youtube, vimeo, twitch, africaTV 등의 웹비디오 영상을 보다 편하게 이용할 수 있습니다.

• 특정화면을 기록하고 메모하기 위한 "스크린샷(screenshot)"
• 방문하여 북마크를 남긴 영상에서 기록을 확인하고 북마크한 곳으로 이동 플레이
• 짤방을 만들기 위한 "머지 스크린샷"(merge screenshot)
• 저장 로그기록 기능.
• 노션(notion) 앱연동을 통한 스크린샷 저장 기능
• 스크린샷 & 영상북마크 기능
• 단축키로 영상제어하기 
• 단축키로 (0.01단위의 속도로) 빨리 보기 
• 단축키로 (0.01단위의 속도로) 천천히 보기 
• 단축키로 영상속도 점프기능 
• 단축키로 음소거 기능
• 단축키로 스크린샷 찍기 
• 단축키로 스크린샷으로 한번에 모아서 출력하기 등.
• 컨트롤 + 스크롤 영상 탐색 기능 (0.2초)

 

 

---

 

기본 기능 및 이용방법
https://drive.google.com/file/d/123e3vYibW4jrSd_ZYDlTYy27DaxOS5rf/view?usp=sharing

1. video controller 기능

아래 그림과 같이 cookystream 크롬확장앱 아이콘을 클릭하여 setting 페이지에 진입하여 Control 키를 설정해줍니다.

설정이 완료되면 그림과 같이 

• D 또는 S를 눌러 재생속도를 컨트롤 할 수 있습니다.
• Y키를 눌러 스크린샷을 찍을 수 있습니다. 
• U를 눌러 머지할 영상을 찍어둘 수 있으며, 찍어둔 영상을 L 키를 눌러 다운로드 받을 수 있습니다.
• 영상 탐색은 0.2초 단위로 (ctrl + 마우스 휠)으로 탐색할 수 있도록 해줍니다.

2. screenshot 기본 사용법

(1) 스크린 샷 저장.

• 설정된 Y키를 해당 영상의 스크린샷을 저장할 수 있습니다.
• 또는 아래 그림처럼 아이콘을 눌러 저장할 수 있습니다.

• 스크린샷을 실행하게 되면 아래와 같이 팝업(모달)창이 뜨게되고 메모할 수 있게 됩니다.

• 카테고리를 직접입력하여 추가할수있으며, 
• 해당 스샷에 메모를 할 수 있습니다.
• 물론 꼭 작성하지 않아도 됩니다.
• 저장버튼을 누르게되면 스크린샷이 저장됩니다.
  • 저장은 원격 저장방식과 로컬 저장방식 두가지가 제공됩니다.
  • 원격저장은 구글드라이브에 저장되어 notion 메모앱과 연동하여 관리됩니다. (notion 연동방식 참조)
  • 로컬저장은 자신의 데스크탑에 저장하게 됩니다.

 

(2) 스크린샷 저장 기록 확인 방법

• cookystream의 setting페이지에서 다음과 같이 확인 가능합니다.카테고리, 파일저장형식

• SSHOT Log에서 
  • Title은 영상의 제목과 함께 영상링크가 기록되어 집니다. (넷플릭스는 URL으로 대체됩니다.)
  • URL link는 노션저장방식과 로컬저장방식을 알려줍니다.
  • SSHOT count는 해당 영상의 스크린샷 개수를 보여줍니다.
• 이슈 및 주의사항
  • 만약 Notion 연동저장을 할경우, 구글드라이브가 필요하기 때문에 따라서 구글인증이 필수 입니다.
  • 구글인증이 안되어 있다면 로컬에 저장되어 집니다.

(3) 스크린샷을 통한 영상 북마크 & 플레이 방법 

• 그림과 같이 영상을 보면서 북마크 기록을 확인할 수 있습니다.
• 기록된 영상 북마크를 클릭하면 해당 영상의 위치로 이동할 수 있습니다.

(3) 연속스크린샷(merge screenshot) 사용법

• 설정된 U키를 누를 때마다 영상이 깜빡 거립니다.(사진찍는 효과)
• 설정된 개수 만큼 연속스크린샷이 메모리에 저장됩니다.
• 설정된 L키를 누르면 머지된 스크린샷(merged screenshot) 파일이 저장되어 집니다.
• 이슈 및 주의 사항
  • 넷플릭스의 경우, 영상 컨트롤러까지 보이는 현상이 있습니다. (향후 수정 예정)
  • 너무 많은 영상을 한번에 저장하면 문제가 될 수 있습니다. 최대 20개까지만 하나의 머지샷으로 이용하세요.

 

---

3. Notion 메모앱 연동

(1) 이용방법 요약 

1. 본 기능을 이용하기 위해서는 Notion앱과 구글드라이브 사전에 가입 필요합니다.
2. Notion API 키를 발급 받아 쿠키스트림 크롬확장앱에 등록해줘야 합니다.
3. 구글인증을 통해 구글드라이브에 스크린샷을 저장하여 노션앱과 연동해야 하기 때문에 구글인증은 필수 입니다.
4. 만약 구글인증하지 않으면, 노션과 연동되지 않고 단순히 데스크탑PC에 스크린샷 파일이 저장됩니다. 
5. 그리고 스크린샷은 원격과 로컬PC 모두에 저장 기록됩니다. (자신의 PC와 노션에만 저장됩니다. ^^; )

(2) Notion 노트앱  및 구글드라이브 연동 설정 방법
https://drive.google.com/file/d/123e3vYibW4jrSd_ZYDlTYy27DaxOS5rf/view?usp=sharing

• 링크된 ppt 문서를 참고 하세요 ^^

 

4. 기타 사용 및 활용법.

• 쿠키스트림 매니저의 "option" 기능
  • 아래 그림과 같이 크롬확장앱을 설치후 주소줄에 있는 쿠키스트림 매니저의 아이콘을 클릭하여 "setting"을 클릭해주세요. 
    

    

  • 아래와 같은 옵션&설정 페이지가 새창으로 열립니다. 
    

    

    1. 아래 그림의 1번은 스크린샷 최초 생성일 입니다.
    2. category는 해당 웹스트리밍을 분류하여 관리할 수 있는 기능입니다. (노션 연동이 조금 느려서 작동이 느릴수 있습니다.)
    3. play time은 해당 영상의 총 상영시간을 나타냅니다.
    4. SSHOT count는 해당 웹스트리밍를 찍은 스크린샷 갯수 입니다.
• 노션 연동 페이지 기능.
  

  

  
  
  1. 노션에 기록된 웹영상 북마크 정보 입니다.
  2. 노션 데이터베이스에서 특정 항목을 열기하면 볼 수 있는 페이지로 해당 영상의 상세 정보를 볼 수 있습니다. 해당 영상에 찍은 모든 스크린샷이 기록되어 집니다.
  3. 스크린샷은 자신의 구글드라이브에 저장되어 그림과 같이 미리보기 기능을 제공합니다.
  4. [4]번을 통해 원본이미지를 확인하고 내려받을 수 있습니다.
  5. 스크린샷을 찍은 기본 정보 입니다. (향후 바로 가기 기능에 사용될 예정입니다. )
  6. 스크린샷을 찍고 메모한 내용입니다.

---

쿠키스트림 매니저를 활용법(결론)

1. 동영상 강좌를 위한 노트 기능 

• 영상 강의는 이제 기록하며 공부하세요.
• 중요 장면마다 메모&기록
• 나중에 다시 찾아보기.

2. 유튜브, 트위치, 아프리카TV 등 동영상 통합 북마크 기능 

• 쿠키스트림의 스크린샷 기록을 통해 모든 영상에 대한 북마크 활용.
• 자신이 봤던 영상을 검색하여 보고 싶은 부분에서 다시 보기 가능.
• 유튜브 뿐만 아니라 다양한 영상 서비스를 통합 관리 가능.

3. 그 외 기타 등등.