TWIP 왕도네

소개

• 10만 캐시 이상 후원 시 특별한 화면 효과와 함께 방송 화면에 표시되는 기능
• 후원 일시 정지 상태에서도 후원을 표시할 수 있으며, 기존 후원 대기열을 무시하고 나의 후원을 가장 먼저 방송에 표시

프로젝트 환경

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

개발 배경

• 트윕의 기존 후원 시스템에서는 후원 금액이 높아져도 사운드 변경이 전부였음.
• 고액 후원자에게 충분한 보상을 제공하지 못하는 문제를 해결하기 위해 왕도네 후원 기능을 개발

왕도네 후원 장면

해결한 문제

1. 후원 이펙트 개인화

• "왕도네" 프로젝트는 스트리머의 방송 화면을 가득 채우는 후원 이펙트와 상응하는 사운드 재생을 목표로 함
• 일반적인 GIF나 비디오 형식의 이펙트는 스트리머별로 차별화된 후원 경험을 제공하는 데 한계가 있었음
• iOS의 iMessage 이펙트에서 아이디어를 얻어, 스트리머 및 시청자가 직접 지정할 수 있는 커스텀 이미지를 실시간 3D 렌더링하여 개인화된 후원 효과를 제공하도록 기술 기반 아이디어를 제시하고 개발

2. 렌더링 성능 이슈

• 개발 과정에서 3D 렌더링 성능 문제 발견; 다양한 기술적 방법을 모색하고 적용하여 문제 해결
  • 최적화 전에는 LG Gram 노트북의 내장 그래픽으로 초당 1~2프레임 정도밖에 렌더링할 수 없어 사용이 불가능할 정도로 저성능
  • 최적화 후에는 같은 기기에서 초당 60프레임으로 렌더링
  • 최적화 관련 기술 문서 (opens in a new tab)

성과

• 왕도네 기능 출시 이후 3개월간 고액후원(10만 원 이상)의 월 매출 평균액이 20% 상승