웹) chzzk-watcher 웹버전을 만들다.

---

목차

 

 

이전에 만들었던 chzzk-watcher는 익스텐션 형태였다. 이번엔 프론트와 백엔드를 조합해서 제대로 된 서비스를 만들었다.

 

https://chzzk-watcher-web.vercel.app

---

왜 만들었나

필자는 인터넷 방송을 꽤 많이 본다. 팔로잉도 많이 해뒀지만, 문제는 팔로잉하지 않은 채널에서 재밌는 방송이 벌어지는 경우가 있다는 거다. 그걸 실시간으로 확인하는 방법이 마땅치 않았다.

치지직에도 인기 순위는 있다. 근데 전체 방송 탭에 들어가야 보이고, 거기엔 라이브와 동영상이 섞여 있다. 방송을 보면서 중간에 인기 탭을 왔다 갔다 하며 순위 변동을 체크해야 오늘의 재밌는 방송을 찾을 수 있다는 구조다. 실시간 감시는 이미 익스텐션으로 해뒀으니, 이번엔 데이터를 쌓아서 시간대별로 순위 흐름을 볼 수 있는 사이트를 만들기로 했다.

---

시간별 순위 차트

https://chzzk-watcher-web.vercel.app/chart

Chzzk Watcher

매 정각마다 인기 순위와 그 시점의 썸네일, 채팅을 기록하는 방식으로 구성했다. 처음엔 Top 10까지만 수집하려 했는데, 10위까지만 하면 뭔가 빈약해 보여서 20위까지 늘렸다. 시각화는 범프 차트를 메인으로 잡았다. 순위가 오르내리는 흐름을 보는 데 범프 차트만한 게 없다고 생각했다.

수집 주기도 여러 번 바꿨다. 30분 간격도 해보고, 5분 간격도 해봤다. 근데 데이터가 많아질수록 보는 피로도가 오히려 올라가더라. 결국 1시간으로 고정했다.

그렇게 며칠을 수집해봤더니 꽤 재밌는 결과가 나왔다. 인기 순위가 생각보다 활발하게 오가고 있었고, 새벽 시간대에 Top 10~20 안에 시청자가 얼마나 있는지도 어느 정도 감이 잡혔다. 데이터를 쌓아두고 보니 그냥 치지직 탭을 열었을 때와는 다른 재미가 있었다.

---

실시간 채팅 감시

https://chzzk-watcher-web.vercel.app/chat-monitor

실시간 채팅감시 | Chzzk Watcher

 

두 번째 기능은 실시간 채팅 감시다. 방송 중인 채팅방에 접속해서 감지하고 싶은 단어를 설정해두면, 감시 모드 상태에서 관련 채팅을 자동으로 쌓아주는 기능이다.

기능 자체는 만들면서 재밌었고 완성도 했다. 근데 감지 단어를 설계하는 게 생각보다 어려웠다. 비속어에 초성 조합, 특수문자 끼워넣기 등 온갖 변형이 많았다. 결국 일반적인 감시 단어 외에, 단어 사이의 특수문자를 제거한 뒤 매칭하는 로직을 추가했다. 예를 들어 바@@@보는 바보로 정규화한 다음 비교하는 식이다. 완벽하진 않지만 어느 정도는 걸러진다.

치지직에 신고를 공식적으로하려면 치지직 로그인이필요한데 로그인을해서 특정값을 가져오면 로그인을 한것으로 간주할수잇어서 우측에 치지직 연동방법을 사이트에 적어두었다.

 

---

채팅 버스트

https://chzzk-watcher-web.vercel.app/moments

채팅 버스트 감지 | 치지직 왓쳐

 

세 번째 기능이 이번 서비스의 핵심이라고 생각한다. 채팅 버스트는 특정 방송에서 어느 시점에 채팅이 폭발적으로 증가했는지를 감지하는 기능이다. 그 시간대에 어떤 포인트가 있었는지를 알 수 있게 되는 거다.

로직 자체는 복잡해서 여기선 따로 설명하지 않는다. 이 기능을 통해 클립을 따는 사람이나 편집자가 어느 구간에 포인트가 있었는지 빠르게 찾을 수 있도록 하는 게 목표였다. 전체 방송을 다 볼 필요 없이 버스트 지점만 찾아가면 된다.

---

지속적인 참여를 어떻게 유도할까

서비스를 만들었으면 사람들이 계속 돌아와야 한다. 지금 생각 중인 방향은 시간별 순위 차트에 채팅 버스트를 함께 보여주는 것이다. 순위 흐름을 보면서 그 시간대에 어떤 버스트가 있었는지까지 한눈에 보인다면, 사이트를 그냥 켜두고 싶은 이유가 생긴다. 지금도 모색 중이다.

---

기능 하나하나 만드는 데 어려움도 있었지만 솔직히 재밌게 만든 서비스다. 단순한 데이터라도 차트로 도식화해서 보면 생각지도 못한 패턴이 보이고, 그걸 찾아보는 재미가 있었다. 앞으로 데이터가 더 쌓이면 또 다른 인사이트가 나올 것 같다.