마니또요(Manitoyo)
마니또 게임을 쉽고 빠르게, 비밀은 끝까지
들어가며
매년 두 번, 방학 시즌이면 2024 컴퓨터공학부 학생회 부장단을 함께한 형, 친구, 그리고 동생들과 함께 여행을 떠납니다.
지난 여행에서는 각자 준비한 선물을 당일에 랜덤 사다리 타기로 나누며 재미를 있게 놀았습니다. 그리고 이번 겨울에는 그 설렘을 이어 '빙어 낚시'를 떠나기로 했습니다.
이 여행 계획을 세우고 있었는데...
마니또 프로젝트
이번 여행에서는 미리 마니또를 정해, 상대방에게 딱 맞는 선물을 준비해보기로 했습니다. 마땅한 마니또 뽑기 서비스를 찾아 구글링을 시작했죠.
찾아본 사이트들은 다 닫혀있고, 구글 상단에 위치한 마니또 사이트는 웹은 들어가지는데 현재 api 서버를 운영하지 않고 있었습니다.
마니또 사이트
https://manittomaker.com/
해당 사이트는 1년 전에 사용해본적이 있어서 이거 사용하면 될 줄 알았지만 이번에 들어가니깐 웹은 접속이 되지만, 서버 응답이 없었어요.
(하지만, 기술 블로그 게시물은 남아있어서 좋은 도움이 되었습니다.)
아마 잠시 서버가 내려갔을 수도 있긴한데 여행 당시에 사용 가능한 서비스가 필요했기에 Pass...
'우린 컴공인데, 이런거 하나 금방 만들지' 라는 생각으로 프로젝트를 시작하게 되었습니다!
사실 AI를 활용하면 3시간 안에도 뚝딱 만들 수 있을 것 같았지만, 이왕 만드는 거 평소 써보고 싶었던 기술들을 녹여내어 제대로 도전해보기로 했습니다.
당신의 사이드 프로젝트를 위한 10가지 팁이라는 게시글에서도 나와있듯이 사이트 프로젝트에 대해 틈새 시장을 찾아서 내가 해보지 않은 기술을 적용해보고자 하는 욕망이 있었다.
고려 사항
vercel
일단 프론트엔드는 React를 사용하고, 평소에는 css를 scss를 위주로 사용했는데 이것저것 접해보고 싶어서 Tailwind Css를 사용하기로 하였습니다. 프론트를 vercel로 배포하기로 정해서 이렇게 된거 서버리스를 챙기고 싶었어요. 또한, 참여자들에게 공유를 쉽게하기 위해서는 모바일 뷰까지도 생각했었습니다.
FireBase
아무래도 마니또의 결과를 저장해야 하니 DB가 필요해지는데 이로 인해 FireBase vs SupaBase 둘 중 어떤걸 선택할 지 고민이 되게 되었습니다. 근데 FireBase의 SupaBase보다 무료 버전이 사용하기가 쉽고, 트래픽이 더 열려있다는 점에서 FireBase를 선택하게 되었습니다. 그리고 구글이 만들어서 그런지 플러그인이 많아서 좋은 장점이 된다고 생각하였습니다.
공유하기
제가 참고했던 마니또 사이트 게시글에서는 카카오톡 공유하기를 사용했는데 해당 기능이 사용자한테 편하다고 생각하였습니다. 비슷한 용도인 시크릿 산타 앱은 직접 주최자가 모든 참여자의 메일과 이름을 치는게 불편했어요. 그래서 저는 주최자가 주최를 간편하게 할 수 있고, 참여자들도 자신의 마니또만 간단하게 확인할 수 있으면 된다고 생각하여 카카오톡 공유를 통한 공유 기능을 만들기로 하였습니다.
선형적 마니또
A, B, C, D라는 이렇게 인원이 있으면 A의 마니또가 B이고, B의 마니또가 A면 서로 한테 선물을 주는거라 별로라고 생각을 하였습니다. 또한 방금 예시처럼 4명일 때는 2명씩 묶이게 되어 친목 다지기인 마니또 게임에서는 피하고 싶었습니다. 그래서 A-> B-> C-> D의 구조가 되도록 알고리즘을 짜봤습니다.
방장도 다른 사람의 마니또를 확인할 수 없게
다른 앱 및 사이트를 참고해봤을 때 아무래도 방장이 다른 사람들한테 링크를 나눠주는거다보니깐 양심에 믿고 해야했습니다. 근데! 이게 보통 마니또라는게 친한 사람들이랑도 하게 될텐데 서로 믿나요? 저는 못믿습니다. 그리고 이런 기능 챙긴 앱이나 사이트는 복잡하게 설정해야해서 단조로운데 방장도 다른 사람의 마니또를 확인할 수 없게 하자가 목표가 되었습니다.
마니또 흐름
-
방장이 마니또 방을 개설한다.
방장이 모임 이름, 방 비밀번호, 참여자 이름을 입력한다.
참여자 중 가장 상단에 방장 이름을 기입한다.
-
방장이 카카오톡 단체방에 공유한다. (보통 여행을 위해서 단톡방이 무조건 있다는 것을 염두하긴 했는데 텍스트 복사 기능도 포함)
[공유하기]
[카카오톡 공유하기]
-
각 참여자는 해당 링크 들어가서 비밀번호를 입력하고 자기 이름에 들어간다.
별 모양 뱃지가 달려있는 참여자가 방장이다.
해당 참여자가 자기 이름에 최초 진입시 비밀번호 설정할 수 있게 한다.
비밀번호 설정이 완료되었으면 아래 캡쳐화면처럼 자물쇠 아이콘이 오른쪽에 생긴다.
초기 비밀번호 설정 후에는 해당 비밀번호를 입력해야 해당 이름에 접근 가능하다.
-
모든 참여자가 자기 마니또를 확인했을 경우에는 방장 개인 비밀번호 입력 후 접근 시 마니또 결과 공개 버튼 사용 가능하다.
결과 공개 버튼을 누르면 참여자한테 마니또 전체 결과를 공개한다.
한번 공개가 된 방은 어떤 참여자든 해당 방에 접근 시 전체 공개 결과가 나오게 된다. -
재매칭을 통해 같은 모임 이름, 비밀번호, 참여자 인원으로 마니또 게임을 다시 진행할 수 있다.
완성
데스크탑, 태블릿, 모바일 여러 개의 비율로 계속 자체 QA를 돌려가면서 잘 작동하는 것을 확인할 수 있었습니다.
Desktap View
여기서 고생했던게 상하 스크롤이 없었으면 좋겠어서 그렇게 했는데 계속 하단의 카피라이트가 짤려서 데스크톱 기준으로는 맞춰놓고, 모바일은 그냥 빼버렸어요.(프론트 어렵당...) -> 사실 이게 제일 힘들었었던 것 같아요.
Mobile View
이렇게 만든 사이트를 바탕으로 같이 여행 다니는 친구들에게 자랑할 수 있는 멋있는 사람이 되었습니다! 앞으로도 기술 블로그 게시물 해당 글 생각하면서 필요한게 있으면 만들고, 이거 돈 좀 될거같은데? 싶으면 만들고 하는 착하고 멋있는 개발자가 되고싶습니다. (지금은 보안 전문가를 목표로 하고 있지만....)
아직은 여행가기 전이라 전체 공개까지는 못해봤는데 여행 갔다와서 실제 써보고 필요한 부분 더 발전 시키도록 해보겠습니다.
지금 만들고 이렇게 친구들에게 이걸로 마니또하자! 해서 다들 마니또를 뽑았는데 마니또로 뭐하지? 그런 이야기가 나오고 있어요 ㅎㅎ 챙겨주기? 선물주기? 이런거 고민하다가
저번에 맥시멈이 8750원이였는데, 다들 돈벌이가 이제 있으니깐 두배인 17500원 맥시멈으로 잡고 그 사람에게 어울리는 선물해주기!로 정해졌습니다. 어울리는 이유까지도 타당해야함!
이걸로 재밌게 놀다 올게요~~
프로젝트를 마치며
이번에는 이론적으로만 알던 FireBase를 통한 서버리스 함수, 카카오톡 공유 SDK 사용, 마니또 매칭 알고리즘을 짜면서 머리가 아프면서도 새로운 기능들을 만들어본다는 거에 즐거운 머리 아픔이였습니다. (뭔가 어렵다기보단 빠른 시일 내에 만들어야한다는 생각에 머리가 꼬이는?)
뭔가 이렇게 여행을 위해서 만들게 되었는데 기왕에 열심히 만든 김에 많은 사람들이 사용했으면 좋겠다는 생각에 이렇게 홍보글을 남겨봐요!
그냥 지금은 보고 지나갔다가 나중에 마니또 게임 해야지 했을 때 해당 사이트를 기억해주세요. 지금은 mvp로 필수적인 기능을 넣었지만, 간간히 발전시킬 예정이라 자주 애용해주세요.
마니또요(Manitoyo)
https://manitoyo.vercel.app/
