joyfuI의 잡동사니 블로그

우연히 숲 시청자 역스코프 프로그램을 누군가 만들었다는 클립을 보았다. 특정 시청자가 어느 방을 보고 있는지 찾는 프로그램이었는데 비공개 프로그램이라 구조를 알 수는 없지만 작동 영상을 보니 직접 방을 돌아다니면서 해당 시청자가 있는지 찾는 원리인 듯했다.

‘오! 재미있겠다!’라는 생각이 들어서 한번 만들어보기로 했다.

일단 특정 방의 시청자 목록을 가져와야 하는데 방송을 열고 개발자 도구를 들여다봐도 관련 api를 찾을 수 없었다. 더 찾아보니 시청자 목록은 채팅 웹소켓으로 주고받고 있었다. 웹소켓은 내가 잘 모르기도 하고 데이터를 까보니까 알아보기 어려운 바이너리 데이터로 주고받고 있어서 포기하려는 찰나!에 어느 분이 숲의 채팅 프로토콜을 분석해서 npm 패키지로 만들어 놓은 블로그 글을 발견했다!

https://maro5397.tistory.com/126

이분도 예전에 다른 분이 파이썬 라이브러리로 만들어 놓은 걸(현재 개발 중단) 참고해서 타입스크립트로 만들었다고 한다. 예제 파일을 참고하니 채팅을 받아볼 수도 있고 숲 로그인도 가능해서 직접 채팅을 보내는 것도 구현되어 있었다. 하지만 내가 필요로 하는 숲 시청자 목록을 가져오는 부분은 구현되어 있지 않았다ㅠㅠ

아무래도 직접 패킷 구조를 분석해야 할 것 같다. 파이썬 라이브러리를 만드신 분의 블로그에 자세한 패킷 분석 글이 있다고 하는데 아쉽게도 현시점에서는 접속할 수 없었다. 쩝.. 그러면 타입스크립트 소스를 파봐야겠는데 다행히도 row 데이터를 그대로 보여주는 기능이 있어서 생 데이터를 구경하는 데 어려움이 없었다. 그리고 소스코드 자체도 잘 만들어져 있어서 대충 어떤 구조인지 파악이 되었다.

일단 방송에서 시청자 새로고침 버튼을 눌렀을 때 보내는 소켓 데이터를 까보니 16진수 데이터로 1b093030303430303030303130300c 였다. 라이브러리에 특정 소켓 데이터를 보내는 기능이 없어서 대충 채팅 메시지를 보내는 메소드를 수정해서 해당 데이터를 보내게 하고 실행해 봤더니 1b093030303430303135303830300c 로 시작하는 데이터가 왔다. 이 데이터를 라이브러리가 어떻게 처리하고 있는지 따라가 보니까 Exit info 데이터로 처리하고 있었다. 데이터를 가만 보니까 채팅방에 접속했을 때 이미 같은 데이터가 오는 걸 발견했다. 채팅방에 접속하자마자 소켓으로 전체 시청자 목록을 보내주는데 라이브러리에서는 Exit info 데이터로 처리하면서 전체 데이터 중 첫 번째 유저가 방을 나간 걸로 처리하고 있었다. row를 이리저리 둘러보니 시청자 목록 데이터와 시청자가 나갔을 때 데이터가 같은 타입으로 오고 있었다.

row 데이터를 처음부터 쭉 관찰하니 처음에 0001 타입이 오고, 0002 타입이 온 뒤, 0004 타입으로 전체 시청자 목록이 왔고 바로 0127 타입이 왔다. 시청자가 많다면 0004, 0127 타입이 여러 번 왔다. 그리고 0110, 0054, 0090, 0094 타입이 이어서 쫙 왔는데 이 타입들은 라이브러리에서도 UNKNOWN으로 처리하고 있었다. 뭐 나는 전체 시청자 목록만 필요하니까 굳이 구분하려 하지 말고 0004 타입 데이터를 모으고 0110을 받으면 끝난 걸로 처리하면 될 것 같다.

이렇게 되면 시청자 새로고침 데이터를 보낼 필요도 없고, Exit info 데이터 처리 문제도 그냥 row 데이터 받아다가 직접 처리하면 되니까 더 이상 라이브러리를 분석할 필요 없이 그냥 저 라이브러리가 가져다 쓰면 된다! 야호! 일이 줄었다! 다만 저 라이브러리가 브라우저 환경에서는 동작하지 않기 때문에(웹소켓 부분만 브라우저 환경으로 변환해도 잘 동작하는데 웹소켓 url을 구하는 api에서 cors 오류가 발생한다.) 어떻게 할까 하다가 이참에 일렉트론을 공부해 보고자 했다.

일단 공식 문서의 튜토리얼을 따라 하면서 기본 일렉트론 프로젝트를 만들었고 여기서 리액트를 어떻게 적용해야 하는지 몰라서 GPT에 물어보니 개발할 때는 vite로 개발 서버를 띄워서 일렉트론에서 보여주고, 빌드할 때는 vite로 빌드한 뒤 그 결과물을 일렉트론에서 보여주는 구조를 잡아줘서 그대로 따라 하고 시작했다.

디자인은 익숙한 MUI를 사용했고, 일렉트론의 IPC 구조가 처음이라 약간 헤매긴 했지만 막 복잡한 로직을 요구하는 프로그램이 아니라서 금방 만들었다. 특히, 방에 접속할 때 하나씩 하지 않고 몇 개씩 끊어서 동시에 하는 코드는 코덱스에 물어보면서 작성했다.

다 만들고 exe 파일로 만드려고 찾아보니까 공식에서는 Electron Forge를 추천하길래 알아봤는데 아쉽게도 포터블 exe를 지원하지 않아서 electron-builder를 사용했다. 일렉트론 빌더 쪽이 더 오래되기도하고 자료가 많은듯?

여기까지 다 완성했는데 electron-vite라는 vite를 사용하는 일렉트론 프로젝트를 만들 수 있는 도구가 있다는 걸 알았다. 내가 만든 건 개발을 위해서 dev server와 electron을 따로 실행했어야 했는데(빌드도 vite와 electron-builder를 따로 실행해야 했다.) electron-vite를 사용하면 그냥 리액트 프로젝트 개발을 하듯이 하나만 실행하면 되고, 프로젝트 구조와 몇몇 환경변수도 잡아줘서 편리하게 시작할 수 있었다. GPT야.. 처음에 물어봤을 때 알려줬으면 얼마나 좋았겠니…

아무튼 바로 도입! 리포지토리는 아래와 같다.

https://github.com/joyfuI/soop-scope

사용하는 모습