joyfuI의 잡동사니 블로그

최근에 직접 만든 최신 기술이라며 채팅 순위, 별풍선 순위를 보여주는 클립을 봤다. 채팅 많이 친 시청자 50명, 후원 많이 한 시청자 5명을 방송에 띄우는 프로그램이었는데 이미 이전에 종겜핀볼 도우미와 투표 도우미를 만들면서 채팅, 별풍선 수집하는 코드를 짜봤기 때문에 만들 수 있을 거 같아서 만들어 봤다.

투표 도우미 때 브라우저 소스를 통해 방송에 오버레이 띄우는 아이디어를 구현해 봤기 때문에 이번에도 똑같이 구현했다. 다만 이번엔 오버레이를 직접 제어할 수 있어야 해서(애니메이션 재생/정지) 좀 고민했는데, 이번에 SSE를 도입했다.(일방통행이기만 해도 충분하고, 구현이 간단해서 선택했다.)

기술적으로는 다 정했고, 데이터를 뽑을 쿼리문도 GPT의 도움으로 만들었는데 디자인 문제가 남았다.. 오버레이로 보여줄 때 좀 그럴싸한 디자인으로 보여줘야 할 텐데 내 예술 감각은 허접하기 때문에.. 그리고 누구나 활용할 수 있도록 커스텀이 자유로워야 하는데 내가 틀을 만들고 커스텀 하도록 하면 자유도도 떨어지고 디자인도 별로일 확률이 농후하기 때문에 아예 디자인하지 않는 방향으로 정했다.

이게 무슨 말이냐면 아예 CSS를 직접 입력받는 선택을 했다. 내가 DOM만 제공하면 이미지부터 애니메이션까지 다 알아서 사용자가 CSS로 만들어 넣으면 된다. exe 파일이 있는 곳을 static으로, 웹서버로 열어둘 테니 이미지는 url()로 알아서 가져오고 애니메이션도 animation으로 알아서 만들어 넣으면 된다. gpt로 css를 짜서 테스트해 보니 잘 작동했다. 이제 사용자의 역량대로 마음껏 꾸밀 수 있다!

구조상 채팅, 별풍선 데이터를 직접 수집하고, 수집한 데이터에서 순위를 뽑아내기 때문에 정확한 순위를 위해서는 방송 시작하자마자 프로그램을 켜 수집을 시작해야 한다. 수집한 김에 csv로 내보내는 기능도 넣었다.

리포지토리: https://github.com/joyfuI/soop-chat-collector

다운로드: https://github.com/joyfuI/soop-chat-collector/releases

사용법

1. 수집 탭을 엽니다.
2. SOOP ID에 채팅을 읽을 스트리머의 SOOP ID를 입력합니다.
3. 수집 시작 버튼을 눌러 채팅 수집을 시작합니다.
   버튼을 누른 순간부터 수집이 시작되니 정확한 순위를 위해서는 방송 시작하자마자 수집을 시작해야 합니다.
4. 채팅 순위 탭에서 오버레이 URL을 복사해 OBS 또는 프릭샷의 브라우저 소스에 추가합니다.
5. 별풍선 순위 탭에서 오버레이 URL을 복사해 OBS 또는 프릭샷의 브라우저 소스에 추가합니다.
6. 순위 화면을 보여주기 전 수집 중지 버튼을 눌러서 중지 후에 보여주기를 권장합니다. (순위가 나오는 도중에 데이터가 바뀌면 화면이 꼬일 가능성이 있습니다.)
7. 수집된 데이터는 앱 재실행 후에도 남아 있으니 새로 시작하고 싶다면 수집 탭에서 수집 데이터 초기화 버튼을 눌러야 합니다.

사용 영상 (채팅 데이터는 미리 임의로 넣었다.)