joyfuI의 잡동사니 블로그

원래 숲 멀티뷰 서비스로 Mul.Live라는 곳을 이용하고 있었다. 그러다가 블루점프 공식 홈페이지의 멀티뷰 기능을 사용해 보니까 디스코드 화면 공유처럼 플레이어 하나만 크게 보는 기능은 마음에 들었지만 몇 가지 버그가 있었다. 그중 치명적인 문제로 채팅 기능을 사용할 수 없다.

해당 문제를 Mul.Live에서는 브라우저 확장을 통해서 해결하고 있었고, 블점 공홈도 같은 방식으로 해결해 보려고 Mul.Live의 소스코드를 공부했다. 공부하다 보니까 숲 플레이어에 자체적으로 채팅창을 띄우는 기능이 있었고, 이 기능을 사용하면 굳이 브라우저 확장으로 쿠키 이슈를 해결할 필요가 없었다. (Mul.Live는 분리 채팅창 UI라 플레이어 내부 채팅창을 활용할 수 없어서 확장을 만든 듯. 공홈 멀티뷰는 크게 띄운 플레이어의 채팅창을 띄우는 UI라 내부 채팅창으로 교체해도 어색함이 없었다.)

이렇게 숲 플레이어를 다루는 법도 알게 되니까 기존에 사용하던 Mul.Live의 불편한 점도 해결해 볼 겸 직접 멀티뷰 서비스를 만들어 봤다.

원래 개인적으로 사용할 용도의 웹툴을 이것저것 만들어놓은 React 프로젝트가 있는데 숲 멀티뷰는 외부에 공개해도 좋을 것 같아서 독립 프로젝트로 생성했다. 이왕 독립 프로젝트인 김에 그동안 공부해 보고 싶었던 Solid를 채택했다. 솔리드는 리액트와 유사하게 JSX를 사용하면서 스벨트처럼 가상 DOM을 사용하지 않는 프론트엔드 라이브러리이다.

솔리드는 리액트만큼 생태계가 크지 않아서 마땅한 UI 라이브러리가 없다. 그래서 컴포넌트 디자인을 직접 해야 하는데 이건 코덱스한테 맡겼다. 처음엔 디자인만 코덱스에 맡기려고 했는데 플레이어 그리드 배치, 확대/축소/숨김에 따른 배치 계산 등 복잡한 로직이 필요해지다 보니까 점점 코덱스한테 맡기게 되었고, 지금은 걍 모든 코드 수정을 코덱스에 맡기게 되었다. 결국 바이브 코딩.. 어쨌든 솔리드 공부도 하고 맛도 봤다.

사이트 주소: https://soop-multi-view.netlify.app/

리포지토리: https://github.com/joyfuI/soop-multi-view

사용법은 Mul.Live처럼 URL 뒤에 SOOP 아이디를 /로 구분하여 넣으면 된다. 단, 숲만 지원한다. 좌측상단 메뉴에서 직접 숲 아이디를 추가할 수도 있다.

Mul.Live의 불편했던 점을 수정하려고 만든 서비스다 보니 Mul.Live와 비교해서 다음과 같은 기능이 있다.

• 새로고침 없이 플레이어 추가/삭제 가능 (Mul.Live는 뷰 바꿀 때마다 페이지를 새로고침해야 함)
• 플레이어마다 확대/축소/숨기기 기능 (Mul.Live는 무조건 격자 배치만 가능해서 플레이어가 많아지면 보기 힘들었음)
• 방송 온/오프라인 여부 표시 기능. '방송 중인 플레이어 모두 확대'/'방송 중이 아닌 플레이어 모두 숨기기' 버튼도 메뉴에 있음
• 플레이어마다 채팅 on/off (별도의 확장 프로그램 없이 채팅을 지원)