로또 번호 생성기는 많지만, 대부분 "랜덤 6개"가 전부입니다. 이번엔 반대로 "재미"에 집중했습니다. MBTI 성향별 번호 추천, 스크래치, 당첨 위시리스트, 복권 가계부까지 — 로또 구매의 설렘을 늘려주는 웹앱 LottoFlex의 개발 과정입니다.
로또 용지를 사서 긁는 그 순간의 설렘은 누구나 압니다. 그런데 번호를 찍는 순간은 왜 이렇게 밋밋할까? "번호 고르는 행동 자체를 재미있게 만들면 어떨까"라는 질문에서 이 프로젝트가 시작됐습니다.
단순 랜덤 하나로는 부족하다고 판단해 생성 방식을 세 가지로 나눴습니다.
| 모드 | 동작 방식 | 재미 포인트 |
|---|---|---|
| 자동 | 전통적인 랜덤 6개 생성 | 빠르고 심플 |
| MBTI | 12문항 테스트 → 16가지 성향별 맞춤 번호 | "내 성향 번호"라는 소속감 |
| 스크래치 | 긁으면 번호가 나타나는 인터랙션 | 로또 용지 긁는 촉감 재현 |
MBTI 모드가 가장 재미있었습니다. 12문항 간편 테스트를 앱 안에 넣고, 각 성향마다 번호 생성 규칙을 다르게 부여했습니다. 예를 들어 계획형(J)은 연속 번호를 선호하고, 탐구형(N)은 흩어진 번호를 선호하는 식으로요. 물론 실제 당첨 확률과는 무관하지만, "이 번호는 나를 위한 번호"라는 감성이 생기는 게 중요했습니다.
스크래치 기능은 HTML Canvas의 globalCompositeOperation = 'destination-out'을 이용해 구현했습니다. 마우스나 터치로 긁으면 그 부분이 지워지고, 일정 비율 이상 긁으면 번호가 나타나는 구조입니다.
ctx.globalCompositeOperation = 'destination-out'
ctx.lineWidth = 30
ctx.lineCap = 'round'
// 포인터 이동 이벤트마다 선을 그려 스크래치 구현모바일 터치와 데스크톱 마우스 이벤트를 함께 처리해야 해서 이벤트 정규화가 필요했고, 이 부분이 생각보다 까다로웠습니다.
재미는 기능으로 계속 이어져야 합니다. 번호를 뽑고 나면 "당첨되면 할 일" 위시리스트를 이모지와 함께 적을 수 있게 했고, 매주 구매한 복권 금액을 기록하는 복권 가계부도 넣었습니다. 지출이 쌓이면 "공익기여 금액"으로 자동 계산해 보여주는 게 포인트였습니다. 매주 5,000원을 썼다면 그만큼 복권기금에 기여한 셈이라는, 살짝 긍정적인 프레임 말이죠.
생성한 번호는 최대 20개까지 보관함에 저장하고, 모바일 공유 API(Web Share API)나 클립보드 복사로 친구에게 보낼 수 있게 했습니다. 다크모드 전용의 화려한 네온 디자인은 토이프로젝트라서 더 과감하게 가져가 봤습니다.