Bumang Route53

목록으로 돌아가기

Sea Pearl

텔레그램 미니앱 탭게임

프로젝트 요약

담당 시작일

24.12.15.

포지션

프론트엔드 (텔레그램 웹뷰 미니앱 개발)

테크스택

React

Vite

Zustand

Telegram API

Tailwind

React-Virtuoso

Suspensive

팀 구성

프론트

백엔드

디자인

초기제품 전담

프론트엔드 개발환경 세팅부터 배포까지

• 텔레그램 챗봇에 배포링크 및 테스트 서버링크 연동
- ngrok을 사용하여 로컬호스트 개발 환경을 텔레그램 챗봇에 연동 구축
- iframe 기반 미니 앱 환경 내에서 웹뷰로 프론트엔드 배포
• 텔레그램 API으로 유저 인증 처리
- 텔레그램 미니 앱 글로벌 브라우저 API를 사용하여 사용자 인증 데이터를 가져오는 초기화 로직 구현
- 텔레그램 유저 인증 기반으로 API 서버와 유저 고유값 식별하는 프로세스 구축

인앱 광고 플랫폼 연동

Adsgram SDK 연동

• 인앱 광고를 위한 Adsgram SDK 설치
- Adsgram 서버로부터 성공/실패 결과를 받아 백엔드 API 서버로 전달하는 로직 구현
- 사용자가 광고를 건너뛰거나, 앱을 백그라운드로 보내거나, 앱 관리자 화면에 머물러 있을 경우 광고 시청을 실패로 처리

가상 리스트 최적화

리스트 가상 렌더

• react-virtuoso를 사용하여 긴 목록도 최적화
- 끝없이 추가될 수 있는 친구 리스트를 처리할 수 있도록 가상화된 리스트 구성
- 뷰포트 이내에 올라와야지만 렌더될 수 있도록 처리하여 성능 개선

탭게임 API호출 최적화

디바운스로 호출 횟수 최소화

• 어뷰징을 최대한 차단하며 동시에 호출비용을 줄이기 위한 방안 고안
- 연속 탭핑 횟수를 디바운스로 집계하여 마지막 탭 후 3초 뒤 서버로 전송하도록 최적화
- 사용자가 3초 이내에 화면을 나갈 경우, useEffect cleanup 함수를 사용하여 언마운트 전 서버 업데이트 보장
• 서버 비용과 보안의 트레이드 오프 논의
- 디바운스 패턴으로 호출을 줄였지만, 탭핑 API를 좀 더 덜 호출할 수 있도록 캐싱을 활용하자는 비즈니스 요구가 들어옴.
- 상태를 오래 유지하지 않고 바로 초기화시키는 것이 어뷰징을 막을 수 있는 방법이라 생각했지만 비즈니스 결정 요구에 따르기로 결정.
- 탭 카운트를 persist되는 전역상태로 만들어 긴 텀으로 서버에 전송하도록 설정
- 예상치 못한 종료 후에도 앱 재시작 시 캐싱되어있는 전역상태를 비우도록 설정
- 서버에서 불러온 유저 재화와 캐싱된 재화를 합산하여 앱에 표출
- 실제로 인앱 재화를 소비할 때는 캐싱된 재화를 먼저 서버에 반영하여 유저 입장에서 잔고가 충분해보이는데 결제되지않는 상황을 방어

인터랙티브 애니메이션

미니앱 iframe 성능 한계 최적화

• 수달이 탭핑할 때 동적인 재화 획득 이펙트가 나오도록 설정
- 재화 획득 시 스코어 이펙트에 기본 부스트 + 업그레이드 상황 + 부스트 여부를 반영하여 색상과 크기가 바뀌도록 설정
- 랜덤을 반영한 점수 표출 애니메이션으로 탭핑 시 재미요소 추가
- 탭할 때마다 문자열이 담길 수 있는 배열 안에 스코어 문자열을 마운트시킴. 이를 애니메이션으로 구현.
- 오래 탭할 시 배열의 인자 갯수가 너무 많아져서 텔레그램 내 성능 한계 도달. 여러 테스트 후 배열 인자가 80개에 도달했을 시 빈 배열로 초기화하기로 결정.
- 80번 연속 탭핑 후 81번 째의 이펙트가 잠시 빠르게 나오는 부정확함이 존재하지만, 그 후 또 80번은 자연스러운 연속적인 탭핑 애니메이션이 표출됨
• 동적인 룰렛 애니메이션
- 룰렛판 구성은 서버에서 가져오는 정보. 룰렛판 구성이 동적으로 설정되게 만듦
- 룰렛 애니메이션 시 translate3D, will-change 등 GPU 사용을 유도하는 속성들을 이용하여 부족한 성능을 보완.
- 룰렛 실행 시 먼저 어떤 아이템이 당첨됐는지 서버에서 패칭해온 다음 애니메이션 시작.
- 배열의 구성을 4배로 늘리고 4번째 배열에서 당첨 아이템이 룰렛판의 가운데에 오도록 설정. 트랜지션 애니메이션 속도를 마지막에 딜레이 되도록 유도.
- 유저는 룰렛이 네바퀴 쯤 돌다가 내가 당첨된 아이템 앞에서 감속하여 멈추는 것으로 느끼게 됨.
- 당첨 애니메이션으로 팡파레와 squisy한 모션의 모달이 표출되며 배열 상태 정상화

Thanks for Reading목록으로 돌아가기