TWIP 빙빙도네

소개

• 빙빙도네는 시청자가 일정 금액의 캐시를 걸어 돌림판을 제작해 보내면, 스트리머가 돌림판을 돌려 당첨된 만큼의 캐시를 후원금으로 받을 수 있는 기능

프로젝트 환경

• 소속: EJN
• 작업 기간: 2023년 4월 ~ 2023년 5월
• 인력 구성: Frontend Engineer 1, Backend Engineer 1, Product Manager 1, Product Designer 1
• 개발 스택: Next.js, Typescript, HTML Canvas, zod, tailwind, SWR, pnpm monorepo

개발 배경

• 2021년 10월 파티후원을 마지막으로 2023년 4월까지 약 1년 6개월 동안 신규 후원 기능이 추가되지 않아 새로운 기능 개발의 필요성이 대두됨
• 기존 슬롯머신 후원을 변형하여, 시청자가 받아갈 캐시와 확률이 포함된 메뉴판을 설정하고 스트리머가 확률에 따라 캐시를 받아갈 수 있는 기능을 기획

빙빙도네 후원 장면

해결한 문제

1. 렌더링 성능 이슈

• 빙빙도네는 HTML 캔버스를 이용해 렌더링하여, React Fiber의 변경이 있는 개별 오브젝트를 렌더링하는 방식으로는 최적화할 수 없었음
  • 화면의 요소 하나를 바꾸려면 필요 없는 부분까지 캔버스를 새로 그려야 하는 문제로 인해 렌더링 성능이 저하됨
• 각 오브젝트를 별개의 캔버스로 분리하고, 새롭게 렌더링이 필요한 캔버스 레이어만 렌더링하도록 설계