ㄱㄱㄱㄱㄱㄱㄱㄱ님이 새로운 글을 공유했습니다.

개인 프로젝트를 진행하면서 쓴 개발관련 경험 글.

트위치 영상을 분석해 하이라이트를 추출하는 앱을 만들었습니다.

안녕하세요, 평소에 트위치 방송을 즐겨보는 트수 중 한명입니다.   약 3개월 정도의 시간을 들여 트위치 텐션이라는 앱을 만들었는데요,  이제 막 개발에 입문했지만 사용한 플랫폼이나 기술 등의 정보가 다른 개발자 분들께 도움이 되지 않을까 싶어 글을 남깁니다.   트위치 텐션 앱이 작동하는 방식은 다음과 같습니다.   Back-end 트위치에서는 생방송이 끝나면 다시보기와 채팅기록, 썸네일 등의 데이터가 생성됩니다. 이 데이터를 활용해 하이라이트를 추출합니다. 이를 위해 방송이 끝났는지 확인하고 끝났다면 데이터를 활용해 하이라이트를 추출해주는 서버가 필요합니다. 제가 사용한 플랫폼은 Google Cloud Platform(GCP)입니다. GCP는 다양한 제품을 제공합니다. 저는 이 중에서 DB로서 Firestore, 작업이 정상적으로 이루어지는 지 확인하는 로그 기록, 크론작업을 돌리기 위한 App Engine, html 및 이미지 등을 활용하기 위한 CDN(in Storage)을 사용했습니다.  1. Firebase (Firestore, Analytics, Cloud Messaging, Admob ..)   Firebase의 Firestore를 사용하면서 많은 장점을 느꼈습니다. 우선 쿼리문을 작성할 필요가 없이 JS코드에서 바로 사용할 수 있어서 너무 편했습니다. 예를 들어 위의 코드는 mysql로 따지면 하이라이트 정보를 insert해주는 건데, vid나 temp의 자료형에 따라 알아서 insert합니다. temp가 문자면 문자, 숫자면 숫자, 배열이면 배열 알아서 들어갑니다. 이러한 유연함이 정말 좋았습니다. 그리고 별 생각 없이 Firestore를 사용했는데 Firebase의 개발 환경을 구축하면서 Firebase의 분석기능, Cloud Messaging 기능, Admob 광고 등을 함께 사용할 수 있었고 개발 시간 단축에 많은 도움이 되었습니다.  2. App engine - 크론 작업   서버 코드는 Nodejs를 활용했습니다. 일정 빈도로 특정 코드가 실행되도록 하려면 cron.yaml 이라는 파일을 작성해주면 됩니다. 예시 코드는 아래와 같습니다. GCP는 처음 사용할 때 무료 평가판으로 300$의 크레딧을 제공받을 수 있습니다. 비용은 매달 18$ 정도 소요되는 걸로 나옵니다. Minimum Service Charge 라고 써있는데 서버를 돌리는 최소 비용인것 같습니다. Front-end react-native를 사용해서 앱을 만들었습니다. firebase를 사용했기에 firebase와 연동되는 react-native start code를 활용해서 시작했습니다.( https://github.com/invertase/react-native-firebase-starter ) react-native는 워낙 유명하고 저는 초보 입장이라서 많이 할 얘기는 없는 것 같습니다. 느낀점만 얘기하자면 자바스크립트만 할 줄 알아도 안드로이드, IOS 모바일 앱을 만들 수 있다는 게 정말 최고의 가성비라는 것입니다. --- 현재는 구글앱스토어(https://play.google.com/store/apps/details?id=com.lee.twh )에 올려두고 지인들에게 사용해보도록 한 후 피드백을 받는 중입니다. 하이라이트 품질은 꽤 괜찮다고 생각합니다. 하이라이트로 잡은 부분들이 항상 클립이나 유투브 편집영상으로 나오기 때문입니다. 다음 단계로는 추가 기능 및 편의성을 확보할 예정입니다. 아래 링크는 예시 영상입니다. (풍월량, 과로사 님) https://twitch-highlight.appspot.com/singlePlayPage?vid=501587212  https://twitch-highlight.appspot.com/singlePlayPage?vid=503321311  긴 글 읽어 주셔서 감사합니다!

tgd.kr