치킨 vs 피자, 당신의 선택은? — 밸런스게임 즉석 투표기 만들었어요 ⚖️

"치킨 vs 피자, 당신의 선택은?" 🍗🍕

친구들이랑 카톡방에서 한 번쯤 해본 그 양자택일 밸런스게임, 직접 웹앱으로 만들어 봤어요! 둘 중 마음에 드는 쪽을 딱 누르면, 실시간 투표 비율이 짠 하고 막대 그래프로 차오릅니다. 가볍게 즐기기 딱 좋아요 🎈

주요 기능

• 🃏 좌/우 스플릿 선택 카드 — 대비되는 색감의 카드 두 장이 맞붙고, 가운데엔 통통 튀는 "VS" 뱃지가 콩콩 뛰어요.
• 📊 결과가 차오르는 애니메이션 — 카드를 누르는 순간 막대와 퍼센트 숫자가 스르륵 차오르며 비율을 공개합니다. 이 맛에 자꾸 누르게 돼요.
• 🎲 다음 질문 버튼 — 연애 / 직장 / 일상 / 먹는것 등 가볍게 즐길 큐레이션 질문이 20개 넘게 준비돼 있어요.
• ✍️ 내 질문 만들기 — 좌/우 텍스트만 입력하면 내 밸런스게임이 큐에 추가되고 바로 플레이! 친구들 골탕 먹일 질문도 만들어 보세요 😏
• 📱 반응형 — 데스크톱에선 좌/우 스플릿, 모바일에선 위/아래 스플릿으로 자연스럽게 바뀝니다.

기술 이야기

서버도, DB도 없이 브라우저 안에서만 돌아가는 클라이언트 전용 앱이에요. 그래서 신경 쓴 부분이 두 가지였어요.

하나는 그럴듯한 기초 표. 처음 들어와도 "나 혼자 1표"가 아니라 이미 누가 투표한 것처럼 보여야 재밌잖아요. 그래서 Math.random 대신 질문 ID 기반의 결정론적 해시로 기초 표를 만들었어요. 새로고침해도 항상 같은 출발점을 유지하죠. 거기에 내 투표를 localStorage로 누적해서 얹습니다.

다른 하나는 가벼움. Next.js 16(App Router) + React 19 + TypeScript + Tailwind CSS v4 조합으로, 차트 라이브러리 없이 막대 애니메이션까지 직접 만들어 번들을 가볍게 가져갔어요.

자극적이거나 정치·혐오 주제는 일부러 빼고, 가볍게 웃으며 고를 수 있는 질문만 담았습니다 😊

직접 해보세요

• 🔗 라이브 데모: https://balance-vote.vercel.app
• 💻 GitHub: https://github.com/seokjinjeong-cod/balance-vote

지금 바로 들어가서 "이거!" 한 번 눌러 보세요. 여러분의 선택이 궁금하네요 🥳