가챠 시스템은 재미와 보상을 통해 사용자들의 참여를 극대화하는 강력한 기능입니다. 이번 글에서는 가챠권 소모 로직과 공정한 랜덤 확률 시스템을 어떻게 구현했는지, 그리고 이를 통해 사용자 재방문율을 20% 향상시킨 경험을 공유합니다.
가챠권 소모 로직 구현
가챠 시스템을 만들기 위해 가장 먼저 가챠권 소모와 유효성 검사를 처리하는 로직이 필요했습니다.
1. 가챠권 보유 여부 확인
- 사용자가 가챠를 실행하기 전, 현재 보유한 가챠권이 있는지 확인하는 과정이 필요했습니다. 만약 사용자가 가챠권을 보유하지 않았다면, 안내 모달을 띄워 가챠 진행을 막습니다.
//가챠의 갯수가 없으면 안내모달 띄우기
{unusedGachas.length === 0 && !result && (
<NoGachaLeftModal setIsNoGachaOpenModal={setIsNoGachaOpenModal} />
)}
2. 가챠권 차감 처리
- 사용자가 가챠를 진행했을 때, 해당 가챠권을 차감하는 로직이 필요했습니다. 여기서 중요한 점은 가챠권이 사용된 상태를 is_used 필드를 통해 관리하는 것입니다.
- 가챠권을 사용한 경우: is_used가 false.
- 가챠권을 사용하지 않은 경우: is_used가 true.
const { data: notUsedGachas, error } = await supabase.from('gachas').select().match({
post_id: id,
is_used: false,
user_id: user?.id,
})
is_used 필드를 이용해 사용되지 않은 가챠권을 선택하고, 가챠 결과가 업데이트되면 해당 is_used 값을 true로 업데이트하여 사용된 가챠권을 구분합니다. 이는 Supabase 트리거를 통해 자동으로 처리됩니다.
Supabase 트리거가 없다면, 사용자는 API 호출이 성공했는지 확인한 후 연속적으로 요청을 보내야 할 것입니다. 하지만 트리거 덕분에, 가챠권이 사용된 후에는 해당 가챠권의 is_used 값이 자동으로 true로 업데이트되어, 반복적인 확인 없이도 가챠 시스템이 원활하게 작동할 수 있었습니다.
가챠권 사용 가능 여부는 is_used 값에 따라 사용 가능한 가챠권과 사용 불가한 가챠권으로 구분되며, 가챠권은 삭제되지 않고 상태만 변경됩니다.
랜덤 확률 시스템 구현
가챠 시스템의 핵심은 공정한 확률 기반의 랜덤 추출입니다. 특정 아이템이 뽑힐 확률을 설정하고 그에 따라 결과를 반환했습니다.
- 확률 테이블 구성
먼저, 가챠에서 뽑을 수 있는 아이템과 그 확률을 정리했습니다. 확률 합계는 100%가 되도록 설정합니다.아이템확률 (%)레어 아이템 5% 고급 아이템 20% 일반 아이템 75% - 랜덤 확률 함수 작성
아이템을 확률에 따라 랜덤하게 반환하는 함수를 작성했습니다.- Math.random()을 활용해 0부터 100까지의 난수를 생성합니다.
- 각 아이템의 확률을 누적하여, 난수가 누적 확률 범위에 들어오면 해당 아이템을 반환합니다.
- 랜덤 확률 구현 예시
function getRandomGachaResult() {
const random = Math.random() * 100; // 0 ~ 100 사이 난수 생성
let cumulativeChance = 0;
for (const item of items) {
cumulativeChance += item.chance;
if (random <= cumulativeChance) {
return item.name;
}
}
}
결과
위의 로직을 기반으로 가챠 시스템을 구현한 결과:
- 재미와 기대감을 유도하는 가챠 기능이 사용자들에게 긍정적인 반응을 얻었습니다.
- 사용자 재방문율이 20% 증가했으며, 게임화된 요소가 플랫폼 내 참여도를 높이는 데 기여했습니다.
마무리
가챠 시스템은 단순히 보상 제공에 그치지 않고 사용자에게 재미와 몰입감을 주는 강력한 도구입니다. 이번 구현을 통해 공정한 랜덤 확률과 유효한 가챠권 처리를 동시에 제공하며 사용자 경험을 높일 수 있었습니다.
앞으로는 아이템 레벨링, 가챠 애니메이션 개선, 확률 조정 등을 통해 더욱 재미있고 공정한 가챠 시스템을 만들어보고자 합니다.
'TIL' 카테고리의 다른 글
[nuqs 라이브러리] Nuqs 라이브러리 가이드: URL 쿼리 파라미터 관리와 최적화 (0) | 2024.12.24 |
---|---|
[회고] 다사다난 했던 2024년도 회고 (1) | 2024.12.23 |
[테오스프린트] 테오스프린트 18기를 시작하며 (0) | 2024.12.04 |
실시간 알림 구현을 위한 선택: 롱 폴링, 웹 소켓, Server-Sent-Events (7) | 2024.10.31 |
주니어 개발자의 코드 리뷰 문화 도입시키기 (0) | 2024.10.24 |