치지직 시청자 0명 라이브 랜덤 재생!

[ 서비스명: Lucky 0-stream picker ]

• URL: https://l0p.netlify.app/

• 스크린샷

• (1) 자기소개

취미로 이것저것 만들고 있는 June입니다. 코딩은 내 무기로 가지고 있기만 해도 다양한 분야에서 활용 가능한 장점이 있는 것 같습니다. 하나 둘 작은 것들을 만들면서 아이디어가 꼬리를 물어 다른 아이디어가 나오고, 또 그것을 실현시키고 하는 맛에 요즘 코딩에 취미가 들렸습니다.

• (2) 서비스 소개

국내 스트리밍 서비스 치지직 방송 중 현재 시청자 0명인 방송을 랜덤으로 재생해 줍니다.

• (3) 시작하게된 계기

니꼬샘 강의였는지, 다른 유튜브 영상이였는지 기억 안 나지만 해외사이트 중 트위치 기반으로 시청자 0명인 사이트가 있다는 것을 알게 되었습니다. 오늘 쉬는 날이어서 뭔가 만들어볼까 하다가 치지직 기반의 사이트를 한 번 만들어보고자 시작하게 되었습니다.

몇 달 전 gpt와 함께 취미로 만든 로또 번호 랜덤 생성 서비스인 Lucky Number Picker (not a pickle) 를 만들었습니다. 그 서비스의 형제 개념으로 이름을 Lucky 0-stream Picker (not a pickle)로 짓게 되었습니다. 로또 번호 때부터 한 사이트에서 다양한 장르의 랜덤 선택해주는 서비스로 확장하고 싶었는데 이렇게 한 발짝 더 내딛게 되었네요. 조금씩 살을 붙여가며 더 큰 서비스로 확장시켜봐야겠습니다.

(LNP url : https://notapickle.netlify.app/)

• (4) 개발

오늘 쉬는 날 투자해서 개발+배포까지 10시간 정도 걸렸네요. 니꼬샘 강의로 배운 리액트+node.js로 개발 / netlify + render로 배포했습니다.

만드는 과정에서 문제가 하나 있었습니다. 치지직은 라이브방송을 embed 링크로 제공하지 않아, iframe 안에 페이지 로드 후 넓은 화면 버튼 + 채팅창 닫기를 해주어야 원하는 사이즈로 영상이 보여졌습니다. js가 무지하게 길어질 것 같아 작전 상 후퇴하고 iframe 안에 페이지를 불러온 후 transform으로 좌표이동시켜 눈속임을 좀 줬습니다. 그래서 일부 라이브는 화면비율이 안 맞아 아래에 페이지 일부가 노출되는 현상이 있습니다. 이 부분은 앞으로 개선할 부분입니다.

또한 기존의 치지직 사이트 내에서 방송을 탐색하는 일이 제한적이라는 것을 느꼈습니다. API로 받아온 데이터를 보니 필터링 조건을 더 디테일하게 설정할 수 있을 것 같았습니다. 시청자 0명 방송 뿐 아니라 사용자가 원하는 조건으로 검색할 수 있게 발전시키는 것도 고려중입니다.

• (5) 바라는 것은?

광고 없는 서비스를 더 개발해서 사람들이 서비스 자체에 집중할 수 있도록 하고 싶습니다. 사용자 중 한 사람이라도 제 서비스에서 그런 것을 느꼈으면 좋겠습니다.