🐤 베팅덕

승자만이 오리를 갖는다, 베팅덕

Site	Figma	Wiki

서비스 소개

즐기고, 베팅하고, 꾸며보세요! 우리 서비스는 실시간 베팅의 짜릿함과 채팅의 소통 재미를 결합한 새로운 경험을 제공합니다!

• 코인으로 베팅하며 예측의 재미를 느껴보세요.
• 채팅으로 자유롭게 소통하며 다른 유저들과 수다를 즐겨보세요.
• 베팅으로 얻은 코인으로 귀여운 오리를 구매해 나만의 마이페이지를 꾸며보세요.

재미있는 베팅과 나만의 공간 꾸미기로 특별한 경험을 선사합니다. 지금 바로 함께하세요, 소통과 즐거움이 가득한 새로운 세계로!

프로젝트를 시작하게 된 계기

저희 프로젝트는 치지직 서비스를 이용하면서 느낀 아쉬움을 해소하기 위해 시작되었습니다.

트위치(Twitch)는 전 세계적으로 인기 있는 실시간 스트리밍 플랫폼으로, 한국에서도 많은 사람들이 포인트 예측 시스템을 즐겨 사용했지만 트위치가 한국에서 철수하면서 더 이상 해당 기능을 사용할 수 없게 되었습니다. 대안으로 많은 사람들이 치지직이라는 스트리밍 플랫폼을 이용하기 시작했지만, 치지직에는 베팅 서비스가 없는 점이 아쉽다는 의견이 많았습니다.

이러한 피드백을 바탕으로 "우리가 직접 베팅 시스템을 만들어보자!" 하는 생각을 계기로 프로젝트를 진행하게 되었습니다.

🎯 사용자들의 아쉬움을 채워줄 특별한 베팅 시스템을 만나보세요!

베팅덕에서의 베팅?

베팅덕에서의 베팅은 방장이 정한 두 가지 옵션 중 승산이 더 높아보이는 것에 덕(duck)코인을 거는 것을 의미합니다. 베팅이 끝나면 코인을 잃거나, 배율만큼의 코인을 획득할 수 있습니다.

‘한일전에서 한국이 이길 것인가 일본이 이길 것인가와 같은 일반적인 베팅’에서부터, ‘오늘 내가 저녁 식사 후에 간식을 먹었는지 먹지 않았는지’와 같은 아주 사소한 것까지. 어떤 주제로 베팅을 할지는 전적으로 여러분에게 달려있습니다.

작은 웹 사이트의 베팅 시스템

“베팅 시스템”을 만들자는 목적에 따라 처음에는 베팅 기능만을 생각했습니다. 유튜브, 치지직, 생방송 스포츠 경기 등의 다양한 컨텐츠 중 사용자가 원하는 컨텐츠를 시청하며 베팅을 할 수 있다면 좋겠다는 생각에, 별도의 컨텐츠를 제공하지 않고 작은 창으로 띄워두고 베팅만을 즐길 수 있도록 구현했습니다.

서비스 둘러보기

코인으로 오리를 구매해 마이페이지 꾸미기

@react-three/fiber를 사용하여 React 환경에서 Three.js를 효과적으로 통합, 생동감 넘치는 3D 오리 모델을 추가했습니다.
사용자는 코인으로 오리를 구매해 마이페이지를 꾸밀 수 있습니다.

베팅과 함께 어떠한 즐거움을 줄 수 있는 방법이 없을까? 베팅해서 현금을 벌 수 있는 게 아닌데, 사용자가 어떤 재미를 얻어갈 수 있을까? 하는 생각을 했습니다. 베팅으로 번 돈을 어디에 쓰는 것이 좋을까?

사람들이 힘들게 돈을 버는 이유는 필요한 어떤 것을 구매하기 위함이라고 생각합니다. 그렇다면 열심히 베팅을 해서 뭔가를 살 수 있으면 좋지 않을까? 마침 부스트캠프의 마스코트는 부덕이(오리)니까 오리를 살 수 있게 컨텐츠를 만들어 보자!

그래서 저희는 마이페이지를 추가했고, 오리를 구매하고, 오리를 모을 수 있도록 구상했습니다.

체험용 비회원 로그인 시스템

비회원 로그인을 통해 사용자가 더 쉽게 서비스를 체험할 수 있도록 설계하였으며 IP 기반 제한을 통해 비회원 로그인 시스템 남용을 제한합니다.

• 비회원이 로그인할 경우, 일반 회원과 구분하기 위해 "익명의"라는 이름이 자동 추가되며, 간단한 닉네임만으로 서비스를 이용할 수 있습니다.
• 한 사람이 여러 아이디를 생성해 부당하게 베팅에 참여하는 것을 방지하기 위해, IP 기반 제한을 구현하여 동일 IP에서는 이전에 생성된 닉네임으로만 접근이 가능합니다.

Caution

비회원 로그인은 체험에 초점을 맞춘 기능입니다. 따라서 공용 IP 환경에서는 로그인 제한이 불편할 수 있습니다.
이런 경우, 간단한 회원가입을 통해 서비스의 모든 기능을 온전히 경험할 수 있습니다.

베팅 생성 페이지

베팅 생성 페이지는 사용자가 직접 제목, 케이스1, 케이스2, 타이머, 최소 금액을 설정할 수 있도록 구성되었습니다.
또한, 유효한 입력 값이 입력된 경우에만 방을 생성할 수 있습니다.

베팅 대기 페이지의 실시간 사용자 명단 표시

실시간으로 방에 입장한 사용자 명단을 확인할 수 있습니다.
이를 통해 관리자는 참여자를 효율적으로 모니터링할 수 있으며 사용자 간의 소통을 지원합니다.

관리자 및 사용자 권한 기반 베팅 관리

관리자는 진행 중인 베팅을 취소하거나 종료할 수 있으며 참여자는 자신의 코인을 활용하여 원하는 옵션에 베팅할 수 있습니다.

실시간 베팅 시스템

참여자는 소유한 코인의 일부를 원하는 옵션에 실시간으로 베팅할 수 있습니다.
서버와 클라이언트 간의 빠르고 안정적인 양방향 통신을 통해 실시간 데이터 업데이트와 사용자 간의 동기화를 제공합니다.

실시간 채팅 기능

방에 참여한 모든 사용자가 실시간으로 채팅에 참여할 수 있도록 설계되었습니다.
이를 통해 사용자 간 베팅 관련 논의와 의견 교환이 원활하게 이루어질 수 있습니다.
안정적인 양방향 통신으로 메시지가 지연 없이 전달됩니다.

핵심 기술적 도전

Important

프로젝트를 진행하며 사용자의 편의성과 시스템의 안정성을 위해 다양한 기술적 도전과 문제 해결을 경험했습니다. 아래는 그 중 핵심적인 내용들입니다.
더 자세한 구현 과정과 문제 해결 방법은 Wiki 페이지에서 확인하실 수 있습니다. Wiki를 통해 구체적인 설정, 코드 스니펫, 심화 내용을 확인해 보세요!

Three.js를 활용한 3D 오리 구매 기능

저희 프로젝트는 베팅으로 얻은 코인으로 Three.js를 활용하여 사용자가 오리를 구매할 수 있는 기능을 구현하였습니다. 개발 과정에서 우리가 직면했던 주요 문제는 3D 모델링 파일(.glb)과 환경 맵핑 파일(.hdr)을 서버에 배포하는 과정이었습니다.

이 문제의 구체적인 원인은 Vite가 기본적으로 이러한 3D 에셋 파일들을 처리하는 방식에 있었습니다. 우리는 Vite의 설정을 수정하여 이 문제를 해결할 수 있었습니다. 문제 해결 과정과 상세한 설정 방법은 아래 링크에서 확인하실 수 있습니다.

자세히 보기: Wiki | Vite 빌드 시 일어나는 작업들

베팅 생성 페이지의 성능 최적화와 검증

해당 페이지에서 값을 입력할 때마다 관련 없는 컴포넌트들이 같이 리렌더링이 되는 문제를 겪었습니다. 이 문제를 해결하기 위하여 상태 관리와 렌더링 최적화를 통해 입력 과정에서의 성능 저하 최소화를 위해서 노력하였고 또한 유효성 검증을 통해 모든 필드가 적절히 입력된 경우에만 요청 전송하도록 설정하여 백엔드와의 통신에서 필수 데이터 검증 및 오류 처리로 신뢰성을 확보 하고자 하였습니다.

자세히 보기: Wiki | 불필요한 리렌더링 방지

Socket.io를 활용한 베팅 기능 구현 중 잘못된 소켓 연결 관리로 인한 서버 다운 문제 발생

CSR(Client-Side Rendering) 방식의 프로젝트에서 소켓 연결을 useEffect로 관리했지만, 클린업 함수에서 소켓 연결이 제대로 종료되지 않아 불필요한 연결이 계속 유지되는 문제가 발생했습니다. 이로 인해 컴포넌트 언마운트나 의존성 배열 변경 시 기존 소켓 연결이 누적되어 메모리 누수와 서버 리소스 낭비로 이어졌습니다.

문제를 해결하기 위해 useEffect의 클린업 함수 작동 원리, 비동기 작업 처리 시 클린업 구현 방법, 상태 초기화를 확실히 보장하는 방법을 학습하고 적용하여 소켓 연결 관리 문제를 해결했습니다.

자세히 보기: Wiki | 소켓 관리 실패로 인한 서버 다운 문제 해결

Redis를 이용한 메시지 큐 구현

자세히 보기: Wiki | Redis Streams 구현

Redis의 List와 Pub/Sub을 활용하여 메시지 큐를 구현하였습니다.

List를 사용해 메시지의 순차적 처리를 보장하고, Pub/Sub을 통해 특정 시점에서 메시지를 소비할 수 있도록 합니다.

또한, ACK Timeout을 통해 처리되지 않은 메시지를 감지하고 재처리하는 로직을 구성하였습니다.

이 메시지 큐는 베팅 종료 후, 사용자들의 오리 코인 업데이트 작업을 처리하는 데 사용되었습니다.

캐시를 통한 성능 최적화

자세히 보기: Wiki | 베팅덕에 적용한 다양한 캐시 전략

시스템 성능 최적화와 데이터 일관성 유지의 균형을 위해 다양한 캐시 전략을 설계하고 구현했습니다.

프로젝트에서는 Read Through, Write Through, Write Back 등 여러 캐시 전략을 상황에 맞게 적용했습니다.

유저 정보 조회에는 Read Through를 사용해 빠른 응답 속도를 확보하고, 베팅 데이터 저장에는 Write Through를 적용해 데이터 정합성을 유지했으며, 실시간 베팅 정보 관리에는 Write Back을 활용해 쓰기 부하를 줄이면서 실시간성을 보장했습니다.

Redis를 활용한 동시성 문제 해결

자세히 보기: Wiki | Redis HINCRBY로 동시성 문제 해결

실시간 베팅 처리에서 Redis와 HINCRBY 명령어를 활용해 동시성 문제를 해결했습니다. Redis의 단일 스레드 기반 특성과 HINCRBY의 원자성을 활용해 데이터 업데이트 과정에서 발생할 수 있는 불일치를 방지했습니다. 이를 검증하기 위해 100만 번의 동시 요청을 처리하는 테스트를 진행하며 안정성을 확인했습니다.

기술 스택

분류	기술 스택	참고
공통		Husky로 commit message에 이슈 번호 추가 자동화하기
Frontend		FE 기술스택 선정 이유
Backend		BE 기술스택 선정 이유
Database
Infrastructure

폴더 구조

WEB14-BOOSTPROJECT/
├── .github/                # GitHub 관련 설정 (워크플로우, 이슈 템플릿 등)
├── .husky/                 # Git 커밋 및 푸시 훅 설정 디렉토리
├── backend/                # 백엔드 소스 코드 디렉토리
├── frontend/               # 프론트엔드 소스 코드 디렉토리
├── node_modules/           # 프로젝트 의존성 패키지가 저장되는 디렉토리
├── shared/                 # 프론트엔드와 백엔드에서 공통으로 사용하는 코드 (예: 유틸리티 함수, 타입 정의 등)
├── .editorconfig           # 코드 스타일 통일을 위한 에디터 설정 파일
├── .gitignore              # Git에 포함하지 않을 파일 및 디렉토리 목록
├── .npmrc                  # npm 설정 파일 (레지스트리 경로, 캐시 설정 등)
├── .nvmrc                  # 프로젝트에서 사용하는 Node.js 버전 명시
├── .prettierrc             # Prettier 코드 포맷 설정 파일
├── docker-compose.yml      # Docker Compose 설정 파일
├── eslint.config.mjs       # ESLint 설정 파일 (코드 품질 검사용)
├── nginx.conf              # Nginx 서버 설정 파일 (프로덕션 환경)
├── nginx.dev.conf          # Nginx 개발 환경 설정 파일
├── package.json            # 프로젝트 종속성 및 스크립트 정보
├── pnpm-lock.yaml          # PNPM 패키지 매니저 잠금 파일 (의존성 버전 고정)
├── pnpm-workspace.yaml     # PNPM 워크스페이스 설정 파일 (모노레포 환경 관리)

프로젝트 아키텍쳐 다이어그램

버그 리포트

서비스 사용 중 문제가 발생했나요?
아래 구글 폼을 통해 버그를 제보해 주세요!
버그 리포트 제출하기

팀 소개

팀원 소개

[BE] J184 이석호	[BE] J221 정동교	[FE] J230 정지호	[FE] J262 최정민