점심 메뉴 고르다 현타 와서 룰렛 웹앱을 만들었습니다 🎡

점심시간마다 "뭐 먹지"로 5분씩 날리는 게 은근 스트레스였어요. 팀 사람들이랑 "아무거나" "난 다 좋아" 돌림노래 하다가 결국 맨날 가던 데 가고... 그래서 그냥 오늘 점심은 룰렛한테 떠넘기기로 했습니다. 돌리기 한 번 누르면 끝.

기본 메뉴를 18개 정도 넣어놨는데 김치찌개, 제육볶음, 국밥처럼 흔하게 먹는 것들 위주로 추렸어요. 돌리기 버튼을 누르면 룰렛이 실제 룰렛처럼 처음엔 빠르게 돌다가 서서히 멈추고, 멈추면 콘페티가 터지면서 결과 모달이 뜹니다. 별것 아닌데 막상 돌려보면 묘하게 두근거려요.

사실 만들면서 제일 오래 붙잡았던 게 이 부분이에요. 룰렛 위 빨간 바늘이 가리키는 칸이랑 실제로 "당첨"이라고 띄우는 메뉴가 안 맞는 버그... 처음엔 대충 각도 맞춘 줄 알았는데 돌릴 때마다 한 칸씩 어긋나더라고요. SVG로 파이 조각을 그리다 보니 조각 시작 각도랑 바늘 위치, 회전 방향 부호까지 전부 따로 놀아서 결국 각도 계산을 처음부터 다시 짰습니다. 눈으로는 못 믿겠어서 7만 번 넘게 돌려보는 테스트까지 만들어 돌렸고, 바늘이 가리킨 칸 = 당첨 메뉴가 100% 맞는 걸 확인하고 나서야 마음이 놓이더라고요.

메뉴는 한식, 중식, 일식, 양식, 분식, 아시안, 건강식으로 나눠놔서 "오늘은 면만" 이런 식으로 카테고리를 켜고 끌 수 있어요. "내 메뉴" 탭에서 직접 메뉴를 추가할 수도 있습니다. 회사 근처 단골집 이름 같은 거 넣어두면 꽤 쓸만해요. 이 설정들은 전부 브라우저 localStorage에 저장돼서 백엔드 서버가 아예 없는데도 새로고침하면 그대로 남아있습니다.

결과가 나오면 이미지 카드로 저장하거나 공유할 수 있게도 해놨어요. 단톡방에 "오늘 점심 이거래 ㅋㅋ" 하고 던지기 좋으라고요. 캡처 라이브러리를 붙일까 하다가, 결과 카드를 캔버스에 직접 그려서 이미지로 뽑고 폰에서는 Web Share API로 바로 공유 시트를 띄우도록 했습니다. 지원 안 되는 브라우저에서는 그냥 이미지 다운로드로 떨어지게 폴백도 넣어놨고요.

디자인은 일부러 다크한 톤 대신 크림색 배경에 음식 느낌 나는 따뜻한 색을 썼어요. 처음엔 흔한 보라/파랑 계열로 갔다가, 점심 메뉴 고르는 앱인데 왜 이렇게 차갑지 싶어서 싹 갈아엎었습니다. 룰렛 조각마다 색을 다르게 주고 글씨는 둥근 서체로 맞췄더니 그제야 "밥 먹는 앱" 같은 느낌이 나더라고요. 다크모드도 지원하고, 폰에서도 꽉 차게 보이도록 반응형으로 맞췄습니다.

기술적으로는 React 19 + TypeScript, 빌드는 Vite, 스타일은 Tailwind CSS v4로 갔어요. 거창한 상태관리 라이브러리 없이 그냥 useState랑 localStorage로 충분한 규모라 일부러 가볍게 가져갔습니다. 룰렛 돌아가는 건 별도 애니메이션 라이브러리 안 쓰고 CSS transition이랑 SVG만으로 처리했고요. 배포는 Vercel에 올려놨습니다.

거의 하루 이틀 만에 뚝딱 만든 작은 토이지만, 막상 점심때마다 진짜로 쓰게 되는 게 좀 웃기더라고요. 점심 메뉴 못 정해서 매번 현타 오는 분들, 한 번 돌려보세요.