🎮 Pick2: 밸런스 게임 웹앱 개발기
선택의 순간들을 재미있게 만들어보고 싶어서 밸런스 게임 웹앱을 만들게 되었습니다. "치킨 vs 피자", "돈 vs 시간" 같은 선택지를 통해 공유할 수 있는 서비스를 목표로 했습니다.
🛠 기술 스택
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Shadcn UI + Radix UI
- 로컬 스토리지 (데이터 저장)
🎯 핵심 기능
1. 다양한 게임 모드
- 랜덤 게임: 8개 카테고리에서 무작위 질문
- 멀티 게임: 여러 질문을 연속으로 플레이
- 커스텀 게임: 직접 만든 질문 세트로 게임
- 월드컵 게임: 토너먼트 방식의 밸런스 게임
2. 8가지 테마 카테고리
음식, 라이프스타일, 초능력, 시간, 날씨, 사회, 돈, 반려동물까지 다양한 주제로 구성했습니다.
3. 반응형 UI/UX 개선
처음엔 드롭다운으로 카테고리를 선택했는데, 카드 기반 UI로 변경하여 직관성을 높였습니다. 특히 A/B 선택 버튼을 모바일에서는 세로, 데스크톱에서는 가로 배치로 반응형 설계했습니다.
🔧 개발 과정의 주요 결정들
데이터 저장 방식
서버 구축 대신 브라우저 로컬 스토리지를 선택했습니다. 개인정보 걱정 없이 빠르게 사용할 수 있지만, 기기간 동기화는 되지 않는 트레이드오프가 있습니다.
추후 계획: 백엔드 서버 연결을 통한 데이터 저장 시스템 구축을 검토 중입니다. 사용자 계정 기반의 개인화된 저장 방식과 누구나 질문을 등록하고 공유할 수 있는 공개형 데이터베이스 방식 중 어떤 접근법이 더 나은 사용자 경험을 제공할지 고민하고 있습니다.
월드컵 모드 설계
단순한 밸런스 게임에서 한 걸음 더 나아가 토너먼트 방식을 도입했습니다. 4강, 8강, 16강, 32강 중 선택해서 최종 승자를 가려내는 재미를 추가했습니다.
사용자 경험 개선
- 드롭다운 → 카드 선택으로 UI 개선
- 결과 페이지에 "전체 보기" 토글 기능 추가
- 로딩 애니메이션과 부드러운 트랜지션 적용
📱 현재 상태와 특징
완성된 기능들
- ✅ 4가지 게임 모드 완전 구현
- ✅ 반응형 디자인 (모바일/데스크톱)
- ✅ 질문 세트 생성/관리 시스템
- ✅ 공유 기능 (URL 기반)
- ✅ 투표 결과 시각화
기술적 고려사항
TypeScript로 타입 안정성을 확보하고, 함수형 컴포넌트와 선언적 프로그래밍을 지향했습니다. Tailwind CSS로 일관된 디자인 시스템을 구축하고, Shadcn UI로 접근성 좋은 컴포넌트를 활용했습니다.
🚀 배운 점과 아쉬운 점
배운 점
- 사용자 테스트 없이도 직관적인 UI의 중요성 실감
- 로컬 스토리지만으로도 충분히 동작하는 웹앱 제작 가능
- 반응형 디자인에서 모바일 우선 접근법의 효과
향후 개선 방향
- 클라우드 저장소 연동으로 기기간 동기화
- 실시간 멀티플레이어 기능
- 소셜 공유 최적화
단순한 아이디어에서 시작해서 점진적으로 기능을 확장해나가는 재미를 느낄 수 있었던 프로젝트였습니다. 특히 사용자 관점에서 "이건 불편하다"라고 생각되는 부분들을 하나씩 개선해나가는 과정이 가장 의미있었습니다.