Twitch Plays 모여봐요 동물의 숲 개발 일기 ① - 장면 틀 만들기

본 글은 [새로운 목표 - PC로 제어가능한 닌텐도 스위치 컨트롤러 만들기]와 [PC로 제어가능한 닌텐도 스위치 컨트롤러 제작기 - 3. 예제 코드 실행 및 트위치 채팅 연동 테스트]에서 이어지는 글이다.

앞선 트위치 채팅 연동 테스트에서 사용한 파이썬 코드의 아쉬운 점은 컨트롤러 제어와 채팅 수신 등을 모두 하나의 python 프로세스에서 한다는 것이었다. 프로세스, 쓰레드 관리, 에러 발생 시 프로세스가 재시작 하는 것 등을 효과적으로 관리하고, 개발 편의를 높이기 위하여 컨트롤러 부분을 제외한 나머지는 nodejs 를 이용하여 개발하기로 마음먹었다.

이번 주말의 개발 목표

Twitch Plays 에서 시청자에게 보여주어야 하는 것들은 Chatbox, Game Screen, 배경 이미지, 현재 동작 모드, 조작법, 도네이션 창, 그 외 각종 텍스트 등 아주 많다. 이런 것을 일일히 OBS에 붙여넣지 않고, 실시간으로 모든 데이터를 수집하여 화면에 보여주는 웹페이지를 만든 뒤 OBS의 브라우저 인풋을 사용하여 보여주면 깔끔할 것 같았다. 따라서 일단 이번 주말에는 이러한 것을 위한 기본틀을 만들기로 했다.

이번 개발을 위해 선택한 것은 next.js 와 react 이다. 그냥 Express 서버를 쓰지 않고 next.js 를 쓰는 이유는 공부의 의미 이외에는 전혀 없다. 어차피 단일 화면의 웹페이지인데다 혼자 쓰는 웹페이지이므로, 초기 접속 속도나 SEO가 중요하지 않아 next.js로 초기 서버사이드 렌더링을 할 이유는 딱히 없다. 다만 이 둘을 쓰는 이유는 예전부터 다루어보고 싶었던 것이기도 하고, 배워두면 나중에 어딘가에는 써먹을 수 있고 그 때 더욱 편해질 것이라는 것을 알기에 새로운 것도 익힐겸 react 와 next.js 에 대해 배워가며 개발하기로 했다.

진행 상황 1

트위치 채팅창에서 채팅을 입력하면...

Twitchbot 이 채팅 내용을 읽고 socket.io 로 만든 웹소켓 서버로 뿌린다. 또 내용을 필터링하여 python flask 서버(닌텐도 스위치 컨트롤러)로 보낸다.

next.js 로 만든 웹페이지는 socket.io-client 를 이용해 항상 웹소켓 서버에 연결되어 있고, 채팅 내용을 수신하면 화면에 보여준다.

웹페이지의 어두운 부분은 캡쳐보드의 게임 플레이 화면이 들어갈 부분이다.

이제 웹쪽의 남은 개발요소는 아래와 같다.

1. 투네이션에서 Donation 발생 시 이벤트 만들기 (투네이션의 리모콘 페이지를 읽어온다. 실제 페이지에서 알림은 웹소켓을 이용해 받아오는 듯하지만, 그냥 Selenium 등을 이용해 페이지를 직접 파싱하기로 한다.)

2. mongoDB 에 주요 채팅로그 저장, Donation 로그 저장하여 기록하기 (포인트). 채팅 로그의 경우 주요 키워드 또는 명령어에 해당하는 채팅 로그만을 저장한다.

3. !포인트 명령어 입력 시 유저별 도네이션, 채팅 참여 등으로 얻은 포인트 알려주기

4. !제어권한 n 명령어 사용 시 특정 시간 동안 제어 권한을 해당 유저에게 넘기기 (화면에 띄우기)

5. 현재 서버 시간 표시

6. 분당 채팅 입력 수 표시

7. 조작법 표시 (게임 출시 후 수정하더라도)

8. 하단 슬라이딩 팝업 형태의 공지창

9. 컨트롤 패널

진행 상황 2

가장 중요한... 게임 예약 구매도 잊지 않았다.