DASHI - 치지직 도네이션 연동 룰렛 업데이트

 

이번에 DASHI에서 업데이트한건 룰렛 기능이다.

예전에 트위치 시절, 투네이션에서 룰렛 기능을 제공했었다. 최소금액이상 후원하면 룰렛 후원에 참여할 수 있고, 방송에 변수를 줄 수 있다. 

 

룰렛 기능을 개발하기 위해서는 생각보다 많은 것이 필요하다.

단순히 채팅 메세지를 받아 룰렛을 처리하는 작업 이외에도 OBS용 오버레이, 스트리머만 접근 가능한 룰렛 관리 화면을 준비해야한다. 예전같았다면 최소 일주일은 잡고 들어갔을테지만, 오늘 나는 10시간만에 모든 작업을 끝내버렸다. 바로, AI의 서포트 덕분이다. 

 

이번 업데이트 회고를 작성하면서 AI와 함께 어떤식으로 개발했는지 공유해보려한다.

 

장애물 치우기

AI와 개발할때 가장 중요한 점은 일을 단계별로 쪼개야한다는 것이다.

어떤 목표지점에 도착하는게 일이라면 먼저 신발을 점검하고, 장애물을 확인하고, 장애물을 제거하고, 방향을 설정하고 달려야한다.

 

DASHI는 치지직 API를 통해 폴링하여 방송이 시작되었는지 지속적으로 체크한다. 방송이 시작되면 그때 채팅 서버에 붙어서 채팅 기록, 챗봇 서비스등을 가동시킨다. 방송이 끝나면 채팅 서비스도 마찬가지로 종료하고는 했는데, 이 부분은 방송을 녹화하는 프로세스에 이상이 생겼을때 챗봇의 작동까지도 영향을 주었고, 테스트도 어렵게 만들었다. (챗봇 수정도 직접 방송을 켜서해야했다.) 룰렛 기능이 붙는다면 채팅 메세지에 의해 작동하는 또 하나의 서비스가 생기는거니, 이번에 완전히 방송을 녹화하는 프로세스와 채팅 프로세스를 분리하는 작업이 필요했다. 그래서 룰렛 작업 전 AI를 이용해 dashi_bot이라는 챗봇용 컨테이너를 따로 파서 별도의 프로세스에서 동작하도록 변경해두었다.

 

 

기본 구조 만들기

새로 추가할 기능은 "룰렛"이야.
이 기획에 대해 충분히 이해하고, 개발 계획을 짜줘. 내가 빠뜨린 부분은 없는지도 점검해.

1. 룰렛 참여 메세지처리
도네이션할때, 메세지가 "!룰렛"으로 시작할 경우에 룰렛에 참여할 수 있어.
도네이션이 몰릴때 룰렛이 씹히지않도록 큐잉이 필요해.
도네이션에는 고유의 donationId가 있는데, 이를 이용해서 구분하면 될 것 같아. (
donations.json
 참고)
활성화된 룰렛이 없다면 무시하면돼.

2. 룰렛 UI 처리
룰렛은 OBS나 기타 방송프로그램에서 브라우저로 띄울 수 있도록 별도의 페이지에서 돌아가고(배경없이), 슬롯머신 같은 애니메이션이 보여. 누가 룰렛을 돌렸는지도 nickname이 떠야해.

3. 룰렛관리 페이지 처리
- 룰렛에 들어갈 아이템과 확률(%)를 설정
- 룰렛 활성화/비활성화
- InputField로도 설정할 수 있지만, 행간을 구분한 텍스트로도 조정가능한 인터페이스 제공 ex) 잠자기 10\n독서 90
- 룰렛 당첨 히스토리 제공

 

허접하지만 룰렛 기능을 위한 첫 프롬프트는 이랬다. 
처음에는 기본 구조를 잡는게 중요하다. 처음 프롬프트에서 세부적인 디테일(e. g. 룰렛이 비활성화 되었을때 유저가 !룰렛 을 외치면 오류 메세지를 보내)을 요구할 필요는 없다. 

 

중요한 부분은 다음과 같다:

- 확률에따라 아이템이 확정된다

- 채팅 메세지를 받아서 룰렛 참여를 한다

- 참여한 룰렛은 큐로 관리한다

- 룰렛 오버레이 페이지가 있다

- 룰렛 관리 페이지가 있다

 

나머지는 기본 구조가 개발 된 후에 하나씩 수정할 수 있다.

 

Claude Code의 Plan Mode를 이용했는데, 실제로 구현하는 입장이라 추가로 몇가지 질문을 했다.

- 룰렛 오버레이 페이지와 서버간 연결을 SSE로 할것인지, WS로 할 것인지?

- 익명의 후원자가 룰렛에 참여할때 어떻게 표시할지?

- 룰렛 참여를 위한 최소 금액 설정이 필요한지?

 

Claude가 뽑아준 계획은 대략 이랬다.

모든 계획을 읽어보고 생각한것이 맞다면 첫번째 개발 사이클을 돌린다. 오류가 나는 것도 있고 여기저기 조금씩 고쳐서 실행해보면 기능이 되기는...된다!!!

 

이것이 첫번째 사이클의 룰렛 상태

 

일단 룰렛 스핀 부분에 표시된 글자와 실제로 당첨된 결과가 다르지만...어쨋든 채팅 메세지를 통해서 룰렛에 참여할 수 있고, 룰렛에 있는 항목에서 확률에 따라 결과를 결정한뒤 오버레이로 전송한다는 기본적인 기능이 된다는 점이 중요하다.

 

나누어서 다듬기

이제 다음 스텝은 각 파트별로 정복해나가는 것이다. 

 

- 핵심 로직 및 데이터 모델

- 관리자 화면

- 룰렛 오버레이 디자인

- 관리자 권한 관리

 

파트별로 정복하면 좋은점은 AI를 병렬로 돌릴 수 있다는 점이있다.

예로 나는 Claude Code로 룰렛 오버레이 디자인을 깎으면서 Antigravity IDE에서는 DB에 룰렛 제목과 룰렛 히스토리에 당시 룰렛 상태 스냅샷을 추가하는 작업을 동시에 했다. 서로 건드리는 파일이 겹칠 일도 없으면서 일을 더 빠르게 처리할 수 있다.

 

 

세부적으로는 AI를 고문한다... 대략 이렇게....

- (치지직 도네이션 사진을 보여주며) 이런 스타일로 바꿔

- (폰트를 가져오며) 이 폰트를 적용해

- (효과음을 가져오며) Spin시에는 이 효과음을, Done때는 이 효과음을 재생해 

- Done이 되면 Bounce하면서 콘페티가 보여지도록 해 

- 아이템의 확률에 따라 디아블로 스타일로 고유 색을 정하고, Done 상태일때 배경색을 그 색으로 바꿔. 그리고 옆에는 확률을 표기해

 

그렇게 해서 룰렛 기능을 무사히 개발하게 되었다.

룰렛 관리자 화면

 

AI 덕분에 개발이 즐겁다. 예전처럼 고통스럽고 오류때문에 며칠을 골머리 앓고하던 일이 사라졌다.

즐겁지만... 동시에 조금은 두려워진다. 그런 고통을 겪으며 성장한 것 같았는데, 이제 그런건 없다. 팔이 떨어질 것 같이 아파도 연필로 꾹꾹 책 내용을 요약하며 공부하던 학생이 이젠 AI가 요약한 요약본만을 보면서 머리로 이해하고있다. 나는 내가 선택한 것이, 내가 만든 것이 남들과는 다르고 그게 훨씬 낫길 바란다. 이제는 그런 센스를 기르기가 점점 어려워지는 환경이 되는 것 같다.