코드가 유실됐고 완벽한 것도 아니었지만 작년 이맘때쯤 너무 재밌게 개발했던 경험이라 기록으로 남겨두고 싶어서 포스팅을 해본다.
지금은 보지 않지만 작년 이맘때쯤 인터넷 방송에 빠졌었다. 국내 인터넷 방송 플랫폼이라고 하면 크게 두 가지로 나뉘는데 하나가 국내 플랫폼인 아프리카, 다른 하나가 글로벌 플랫폼인 트위치였다. 나는 그 중에서 트위치에 빠졌었는데 이 트위치는 글로벌 플랫폼이다 보니 서드파티 프로그램에 대해 관대해서 많은 스트리머들이 후원을 트위치 자체 시스템이지만 기능도 적고 수수료도 쎈 '비트'보다 서드파티 프로그램인 투네이션 혹은 twip으로 받았다. 이 후원이라는 시스템이 굉장히 중독적으로 설계된게 단순히 내가 보는 방송인에게 돈을 주는 시스템인 것 뿐만 아니라 tts를 통해 방송에 돈과 함께 보낸 텍스트를 송출 시킬 수 있다는게 큰 매력이자 중독적인 요소였다. 그래서 인터넷 방송은 그야말로 시청자와 방송인이 함께 만들어간다는 느낌을 크게 받았다.
그러다 문득 내가 보는 방송인의 수익이 궁금해졌다. 아프리카의 경우는 트위치의 비트처럼 자체 후원 기능인 별풍선이라는 기능이 있고 서드파티 후원보다 훨씬 높은 점유율을 가지고 있다. 그리고 api를 제공해주는지 별풍 계산기라고 불리우는 사이트가 있다. 근데 트위치는 주력 후원 시스템인 twip, 투네이션 모두 api를 제공해주지 않는지 관련 사이트가 없다. 그래서 순수히 이 궁금증을 해결해보고자 계산기 제작을 결심했다.
이유는 모르겠지만 당시 굉장히 열정적이었던 것 같다.
내가 처음 생각했던 방법은 이거였다.
- 후원을 하면 짤랑 하는 돈소리와 함께 tts가 출력되는데 이 후원사운드를 추적한다.
- 그 후원사운드가 들릴때마다 스트리머 방송화면을 캡처해 특정 폴더에 모아둔다.
- 보통 송출 화면에서 후원창의 위치는 픽스일 것이라 생각해 그 부분을 따서 텍스트를 추출해 액수를 합산한다.
지금과 그때 당시의 생각은 동일하다. "내가 이걸 어떻게 해 ?"
굉장히 즉흥적으로 계획했던 만큼 빠르게 식었다. 그리고 무념무상으로 투네이션의 페이지를 보던 나에게 이런 창이 눈에 띄었다.
투네이션의 웹 자체 기능중에 이렇게 최근 후원 받은 내역 10개를 공유해주는 페이지가 있었고 이거를 활용해보자라고 생각했고 곧바로 방법을 모색했다.
이유는 모르겠지만 당시 굉장히 열정적이었던 것 같다.2
당시 숙련도가 높았던 언어가 javascript 였는데 이 javascript는 굉장히 메이저한 언어라다양한 기능의 라이브러리가 존재했다는 것을 기억했고 당장 크롤링에 도움을 받을 수 있는 라이브러리를 찾아봤다. 그렇게 찾게된 라이브러리가 puppeteer와 cheerio라는 라이브러리였다.
간단히 두 라이브러리를 설명하자면 puppeteer는 테스트 크롬창을 조작하여 해당 html의 정보를 크롤링 해올 수 있는 라이브러리고 cheerio는 클래스 이름으로 요소를 지정하여 그 요소에 접근할 수 있게 해주는 라이브러리 였다.
내가 구상했던 작동 방식은 이랬다.
- puppeteer로 궁금한 스트리머의 최근 후원 내역 페이지로 접근한다.
- cheerio를 이용해 그 페이지에 있는 후원 금액 요소에 접근하여 크롤링 한다.
- 이것을 일정 주기마다 반복한다
간단해 보이지만 큰 문제들에 봉착했다.
1번은 굉장히 쉬워보였는데 puppeteer의 구조상 코드가 실행 될 때 마다 새로운 크롬창을 켜서 내가 원하는 url로 접근을 하는 방식이었다. 근데 이게 문제가 뭐엿냐면 저 투네이션 창을 켤 때마다 로그인을 해야하는 문제가 생겼다.
투네이션의 로그인 창을 보면 자체 아이디 패스워드를 넣을 수 있는 칸 그리고 밑에 소셜로그인을 할 수 있는 기능들이 있다. 그래서 그동안의 사용자 경험으로 소셜로그인은 한 번 로그인을 하면 클릭만 해도 바로 로그인이 되니 내가 원하는 소셜로그인을 클릭하는 코드를 짰는데 puppeteer의 크롬창은 개발버전(?) 크롬인지 이게 되질 않았다. 그래서 소셜로그인을 누르고 그 소셜로그인을 하는 창에서 아이디 비밀번호를 입력하는 것 까지 조작을 하여 로그인을 해야했다.
그래서 그냥 투네이션 자체 아이디를 하나 만들어서 저 로그인창에 직접 접근해야겠다 라고 생각하고 아이디를 만들고 코드를 짰는데 접근 자체가 안됐었다. 이유는 지금까지도 모르겠지만 아무튼 저 아이디와 비밀번호를 입력하는 창에 아무리 접근하여 내용을 넣어보려 해도 넣어지지가 않아서 다른 소셜로그인 기능들은 좀 다를까 하고 카카오 유튜브 등 계속 시도해봤는데 안됐고 마지막 칸에 있는 네이버 소셜로그인으로 도전해보고 안되면 능력 부족을 인정하고 깔끔하게 포기하기로 했었다. 근데 안됐으면 이 글 자체를 안썼겠죠 ? 국내포털사이트goat인 대황네이버는 아이디 비밀번호 칸에 접근이 가능했고 네이버 소셜로그인을 통해 목표였던 최근 후원페이지까지 도달해냈다. 그리고 클래스명으로 접근하여 후원액을 크롤링하여 구글 스프레드시트로 추출하는데 까지 성공했다.
그때의 흔적이다. 약간 매운 방송이었어서 욕설이 많아 부득이하게 블러처리를 해봤다. 1열이 도네이션 액수고 2열이 후원 메세지이다. 후원 메세지를 크롤링 해 온 이유는 일정 주기마다 최근 후원 내역 페이지를 크롤링 해 온 것이기 때문에 중복처리를 위해서 메세지까지 크롤링해 중복을 제거했다.
지금도 내 스프레드 시트에 남아있는 처음 추출한 날 도네이션 총 합이다. 뭐 그만큼 매력이 있다는 것도 알고 개인 방송이라는 시스템의 리스크와 성장하기까지의 어려움은 매우 잘 알고 있지만 그래도 배가 아픈건 어쩔 수 없나보다.
그렇게 매 방송마다 후원액을 계산하면서 복통을 앓고있었는데 어느날 부터 크롤링이 안되는 것을 발견하고 혹시 들킨건가 ? 어떻게 들킨거지 ? 로그인 횟수가 너무 많았나 ? 라는 생각을 안고 백그라운드에서 돌아가고 있는 puppeteer 크롬창을 확인했는데 로그인도 정상적으로 됐고 타겟 url로도 잘 접근한 것을 확인했다. 또 몇시간을 끙끙댄 결과 의외의 사실을 알아냈다. 나는 클래스 이름으로 요소에 접근하고 있었는데 그 클래스이름이 변경된것이었다.
투네이션의 클래스 명은 대충 이런식이었는데 저 RecentHistoryColumn_ 뒤의 알파벳과 숫자 조합이 바뀐것을 확인했고 또 그에 맞춰서 코드를 수정해주었더니 다시 정상적으로 작동됐다. 그리고 별로 알고싶진 않았지만 투네이션은 저 클래스명 뒤의 알파벳과 숫자 조합을 매 주 목요일마다 수정한다는 사실도 알게되었다. 웹 개발을 해본적은 있지만 저런 웹 서비스를 운영해본적은 없어서 저렇게 클래스명을 주기적으로 바꾼다는 사실도 굉장히 신선하게 다가왔고 왜 그런가도 궁금했지만 당시엔 개발자는 커녕 개발지망생 조차 아니었기 때문에 흐지부지 돼버렸다.
자체 api를 제공해주지 않는다는것은 하지말라는 뜻이라는 것과 비슷한 말 이라는 것에 동의하긴 해서 포스트 제목을 저렇게 지어봤다. 그리고 제공이 되지 않아서인지 당시 트위치 관련 커뮤니티들도 뭔가 스트리머의 총 수익은 볼드모트처럼 취급돼 언급이 별로 되지 않았던 것으로 기억해서 더욱 해내고 싶고 나만의 정보로 가지고 싶었던 즐거운? 개발 경험이었어서 그때의 기억과 개인 디스코드에 기록해놨던 개발일지등을 참고하여 글을 작성해봤다.
최근에 다시 개발자가 되기 위한 취업 준비를 시작했다. 1년전 정말 순수하게 타올랐었던 개발 열정을 등불삼아 어둡고 힘든 개발자 취업이라는 길의 목적지에 무사히 도착했으면 좋겠다.
Ghost