BANGON

https://bangon.co.kr/

자기소개

안녕하세요! 파주에서 웹/앱 개발자로 일하고 있는 위즈입니다.

앱 개발을 위해 RN 강의로 노마드코더에서 처음 배우고, 지금은 nextjs를 주력으로 사용하는 웹 개발을 메인으로 현업에서 개발하고 있습니다.

서비스 소개

본 서비스는 팬카페를 운영중인 트위치 스트리머 / 유튜버들을 타겟으로 한 유튜브, 트위치 연동 이미지 생성 서비스입니다.

마뫄 팬카페 / 빅헤드 팬카페

위 카페를 들어가시면 카페 대문에서 현재 방송 상태와 최신 유튜브 영상 썸네일을 확인하실 수 있는데요, 이 이미지를 실시간으로 생성해주는 서비스입니다.

이미지 클릭 시 해당 방송이나 영상으로 리다이렉트까지 되도록 만들었습니다.

시작하게 된 계기

본래는 최신 영상을 매일 확인하며 대문 영상을 매일 바꿔주곤 했었는데, 이 과정이 상당히 번거롭고 매일 신경써줘야 하는 작업이다 보니 자동화하면 좋지 않을까 생각해 만들게 되었습니다.

카페 플랫폼은 아무래도 많은 사람들이 사용하는 공간이다 보니, 사용할 수 있는 HTML태그나 자바스크립트의 사용이 상당히 제한적인 편입니다.

때문에 이미지를 별도 서비스에서 가져와 표시하는 식으로 구현해야 합니다.

원래는 단순히 node.js로 구현해서 제가 카페 부매니저로 있는 두 카페에서만 자동 연동되도록 했습니다만, 포트폴리오로 쓰기에도 좋은 과제이고 저 말고도 많은 사람들이 활용하면좋지 않을까 하는 생각에 웹서비스로 만들게 되었습니다.

개발

웹으로는 next.js를 사용해 개발하였고, 백그라운드에서 트위치API와 유튜브 RSS피드를 주기적으로 체크해 변동사항이 있을 경우 이미지로 렌더링하는 node.js 모듈이 하나 돌아가고 있습니다.

본래는 백그라운드 모듈 없이 사용자 요청 시에 상태확인 후 실시간 렌더링되도록 하려고 했으나, 이미지 렌더링에 생각보다 많은 시간이 소요되고 렌더링되는동안 사용자의 화면이 멈춘 상태로 3초 이상 기다려야 하기 때문에 이미지 렌더링은 서비스에 따라 1분 혹은 5분마다 주기적으로 상태 체크 후 돌아가도록 구현했습니다.

트위치는 API 호출 할당량이 따로 없어 그대로 구현할 수 있었지만, 유튜브는 할당량이 존재하고 크레딧으로 구매할 수 있는 형태도 아니어서 API 없이 구현하는 방법에 대해 찾느라 시간이 좀 걸렸습니다.

다행히도 RSS 피드를 통해 API 없이 최신 영상을 조회할 수 있는 방법이 있었고, 이를 이용해 구현하였습니다.

기획과 구현 가능성 검토 등에 1주일, 구현에 1주일정도 걸렸던 것 같습니다.

자주 보시는 유튜버나 트위치 스트리머가 있고, 팬카페를 운영중이시라면 많이 홍보해주시면 감사드리겠습니다 ㅎㅎ..

그리고 buy me a coffee 대신 본 커뮤니티에 게시된 '커피 한잔' 플랫폼을 이용해 후원 링크도 하나 만들었습니다. 좋은 서비스 만들어주셔서 감사합니다!