lucky-draw - 추첨, 경마

직장 점심 내기

사무실에서 점심 메뉴를 정하거나 누가 커피를 살지 고를 때마다 의견이 갈라졌다. 치킨파, 중국집파, 분식파로 나뉘어 한참을 실랑이를 벌이다 결국 추첨을 하곤 했다. 그런데 매번 제비뽑기나 랜덤 번호 생성기로 하니 너무 밋밋하지 않은가? 그래서 내가 직접 만들어 보기로 했다.

 

내가 만든 'Lucky Draw'는 경마처럼 말들이 달리면서 승자를 가리는 추첨 방식이다. 단순한 번호 추첨이 아니라 레이싱 게임을 보는 것 같은 재미를 주고 싶었다. 테스트로 회사 동료들에게 보여줬더니, 누가 1등으로 들어오나 다들 소리 지르며 응원했고, 갑자기 꼴찌였던 '치킨파'가 부스터를 써서 1등을 탈환하는 장면에서는 다 같이 환호성을 질렀다.

 

'Lucky Draw'는 Three.js 기반의 3D 그래픽으로 만들었다. 이 웹 애플리케이션은 단순한 추첨을 넘어 하나의 작은 이벤트로 만들어주는 게 목표였다.

Lucky Draw의 특징

인원 수를 입력하면 그 수만큼 말(참가자)들이 랜덤한 이름으로 생성된다. 원한다면 직접 이름을 입력해서 커스텀할 수도 있다. 우리 팀은 각자 이름을 넣고 누가 커피를 사게 될지 정하는 데 사용했다. 200m 결승선을 향해 달리는 말들은 단순히 일직선으로 가는 게 아니라 중간중간 랜덤으로 스킬을 사용한다.

1. 1~2개의 말 뒤로 당기기
2. 시간을 멈춰 나 혼자 달리기
3. 부스터를 통한 속도 상승
4. 1등을 꼴등의 뒤로 보내기

이 모든 과정이 생생한 3D 그래픽으로 펼쳐지니 마치 실제 경마장에 있는 듯한 느낌이다. 결승선을 통과하면 1~3등까지 표시되어 누가 우승했는지 한눈에 알 수 있다.

어디서 사용할 수 있을까?

처음에는 이런 용도로 만들었다:

• 회사에서 누가 커피를 살지, 누가 회식 장소를 정할지 결정할 때
• 친구들과 게임할 때 팀 나누기
• 가족 모임에서 좌석 배치나 역할 분담
• 학교나 동아리에서 조 편성이나 발표 순서 정하기
• 그냥 심심할 때 재미로 구경하기

특히 신경 썼던 점은 모바일과 PC 모두에서 잘 작동하도록 반응형으로 만든 것이다. 언제 어디서나 쓸 수 있게 말이다. 결과를 녹화하거나 클립보드로 공유할 수도 있어서 추첨 과정을 기록으로 남길 수도 있다.

기술적으로 어떻게 만들었나?

Lucky Draw는 최신 React 19와 Vite를 사용해 개발했다. 3D 그래픽 구현을 위해 Three.js를 활용했고, CSS3로 반응형 디자인을 구현했다. 직장 동료나 지인들과 함께 무언가를 정할 때 쓰려고 만들었는데, 생각보다 재미있게 나와서 기분이 좋았다. 단순한 필요에서 시작했지만 꽤 만족스러운 웹 애플리케이션으로 완성됐다.

 

Lucky Draw는 Vercel을 통해 배포했고 누구나 무료로 사용할 수 있다.

https://lucky-draw-tawny.vercel.app/

LuckyDraw - 경마다 경마!!