BGMs 개발기 (YouTube 플레이리스트 공유 및 원격 음악 재생 서비스)

회사 초창기부터 5년가량 내부에서만 사용하던 쥬크박스 시스템을 오픈하였습니다. 쥬크박스 개발기를 적어보려고 합니다. 이번 글에서는 어떻게 쥬크박스가 나오게 됐는지, 어떻게 개발했는지 등에 대해서 이야기해보겠습니다.

---

창업 초기 노동요가 없으면 견딜 수 없는 CTO가 노래가 없는 사무실은 너무나 쓸쓸하다며 유투브를 이용하여 뚝딱뚝딱 쥬크박스를 만들었었습니다. (네. 제가 만들었습니다. ㅎㅎ) 

노래를 추가할 수 있는 권한은 동등해야하기 때문에 직원들 모두 노래를 추가할 수 있어야 했습니다. 그래서 플레이어를 하나 두고 각자의 자리에서 노래를 추가할 수 있는 쥬크박스 시스템을 구상했습니다. 

 

이런 쥬크박스...

창업초기기도 했고 내부에서 사용하기 때문에 무료, 무료무료무료가 매우 중요했습니다. 그래서 우리의 CTO는 Youtube Iframe을 주목하였습니다. 유투브영상을 내 사이트에서 재생할 수 있게끔 해주는 API입니다. 게시판등에서 많이 사용되지요. 이 API를 이용해서 리서치를 하던 중 놀라운 사실을 알게 되었습니다. 

영상 사이사이에 광고가 나오지 않아!!

 

홀뤼 영상 사이사이에 광고가 나오지 않다니 이건 유투브 프리미엄을 구독할 필요가 없다는 것이었습니다.(너무 갔나..) 어쨋던 놀랍게도 영상 사이사이 광고가 나오지 않아서 노래를 듣는데 방해가 없다는 점, 무료라는 점에서 유투브를 이용하여 쥬크박스를 만들기로 결정하였습니다. 

당시 사내에는 안쓰던 오래된 아이맥이 하나 존재하였습니다. 회사중앙에 아이맥을 놓고 웹을 이용하여 플레이어를 제작했습니다. 단순한 공용 플레이어였지요. (디자이너 중 아이돌을 사랑하는 분이 뮤직비디오를 계속 추가해주셔서 종종 넋놓고 보기도 했지요) 

플레이어를 만들고 놓고 이제 리모컨을 만들 차례였습니다. 당시에는 생소했던 기술인 electron을 이용해서 데스크탑 앱을 만들기로 정했습니다. 사실 이 당시에는 개발자가 CTO 혼자였던 때라서 누구랑 상의할 필요가 없었습니다. 단순히 데스크탑 앱으로 만들면 기술력 있어 보이고 멋있어 보일 것 같았습니다. (항시 켜져있어야 하는 프로그램이므로 웹보다는 데스크탑 앱으로 만드는 것이 접근성이 편하다. 라는 그럴듯한 이유도 있습니다.)

그래서 Electron을 이용하여 리모컨 개발에 착수하게 됩니다. 리모컨을 만들던 중 한가지 기능에 꽂히게 됩니다. 바로 실시간입니다. 플레이어는 하나고 여러 직원이 리모컨으로 제어하기 때문에 실시간으로 노래 제어, 대기열 추가, 볼륨 조절 등이 필요했습니다. 그래서 우리의 CTO는 자료조사를 하던 차! Firebase realtime database 를 발견하게 됩니다. (이 당시에는 firestore가 나오지 않았습니다.) 데이터베이스의 정보가 변경되면 클라이언트가 변경된 데이터를 실시간으로 받아오는 기능이 존재하였습니다. (이벤트 수신대기 기능이지요!) 

그리하여 Electron, Firebase를 이용하여 만든 JJ-Jukebox 가 탄생하게 됩니다. (왜 이름이 JJ였는지는 기억이 나지 않습니다...ㅠ) 초기 버젼의 리모컨은 이런 모습이었습니다. 

 

초기 리모컨의 모습 (직원 이메일은 보호차원)

 

현재 재생 중인 노래, 노래 검색, 리스트 등의 기능이 존재하였습니다. 대기열 추가, 리스트에서 삭제 등의 기능도 존재합니다. 이렇게 올드 JJ-Jukebox를 회사에서는 5년간 사용하게 됩니다. 덕분에 사무실에서 노래소리가 끊겨본적이 없습니다. 

이렇게 5년이 지난 2021년 1월 쥬크박스를 자사서비스로 내보자 라는 이야기와 함께 상용서비스를 위한 쥬크박스 개발에 시작하였습니다. 2021년 3월 드디어 JJ-Jukebox는 BGMs라는 이름으로 오픈하였습니다.