🎮 Pik2 게임 UX 개선 & Supabase 연동 후기

최근 Pik2 밸런스 게임에 새로운 변화를 줬습니다. 특히 멀티 게임 모드에서 UX을 개선하고, 실제 투표 결과를 보여줄 수 있도록 Supabase와 연동하는 작업을 진행했어요. 이번 작업을 통해 사용자는 더 빠르게, 더 직관적으로 게임을 즐길 수 있고, 실제 투표 통계까지 확인할 수 있게 되었습니다.

---

✅ 주요 개선 포인트

1. 로딩 시간 75% 단축

기존에는 질문을 넘길 때마다 약 800ms의 대기 시간이 있었어요. 다소 답답한 느낌이 있었죠. 이를 200ms로 줄이면서, 사용자가 자연스럽게 다음 질문으로 넘어갈 수 있게 되었습니다. 작은 변화지만, 체감은 확실히 달라졌습니다.

2. 긴 질문도 깔끔하게 표시

예: "하루에 단 4시간만 일하고 충분한 돈 벌기 vs 지금처럼 일하고 더 많은 돈 벌기" 이런 긴 문장은 화면을 벗어나거나 줄바꿈이 이상하게 되는 문제가 있었어요.

이를 해결하기 위해 CSS 속성인 word-break, overflow-wrap, hyphens 등을 활용했습니다. 이제는 어떤 길이의 텍스트도 보기 좋게 자연스럽게 줄바꿈되며, 모바일, 태블릿, PC에서도 깔끔하게 표시됩니다.

3. 실제 투표 데이터 연동 (Supabase)

기존에는 투표 결과를 보여줄 때, JSON에 넣어둔 임의의 값을 사용했어요. 이제는 Supabase 데이터베이스와 연동해, 실제 유저들의 선택 비율을 보여줄 수 있습니다.

• question_votes 테이블에 투표 데이터를 저장
• 각 질문/질문세트에 대해 실시간 통계 조회
• 정확한 참여자 수와 A/B 선택 비율 반영

💡 기존에 만들어둔 테이블을 그대로 활용했습니다. 새로운 테이블을 만들지 않고, question_id와 question_set_id를 조합해 Custom 모드와 Multi 모드의 데이터를 한 테이블에서 관리하고 있어요. 즉, 하나의 테이블을 공유하면서도 각각의 투표 데이터를 ID로 구분할 수 있도록 설계했습니다. 이 방식 덕분에 구조는 단순하게, 관리와 확장은 유연하게 할 수 있었습니다.

4. 타입 안전성 강화

기존에는 "A" / "B" 문자열을 여러 곳에서 직접 사용하다 보니 실수하거나 일관성을 잃기 쉬웠습니다.

이제는 Choice 타입으로 명확하게 정의해서 사용함으로써 타입 안정성을 확보하고, 코드도 더 깔끔하게 유지할 수 있게 되었습니다.

---

🔧 기술적 접근 요약

Supabase 연동

• 실제 투표 데이터를 Supabase PostgreSQL에 저장
• 조회 시 통계 데이터를 기반으로 사용자에게 반영

하이브리드 저장 방식

• 온라인 상태: Supabase에 저장
• 오프라인 상태: 로컬 스토리지로 임시 저장
• 기존 로컬 데이터를 자동 마이그레이션하여 서버와 동기화

// 투표 결과를 Supabase에 업데이트하는 로직 (요약)
export const updateQuestionVotesInDB = async (
  questionId: string,
  questionSetId: string,
  choice: Choice
): Promise<boolean> => {
  // 기존 데이터를 확인하고, 있으면 업데이트
  // 없으면 새로 생성 (UPSERT 방식)
};

---

✨ 결과 정리

---

🧠 작업을 통해 배운 점

1. 단순하지만 강력한 데이터베이스 설계

question_set_id 하나로 Custom과 Multi 모드를 구분하면서도 복잡한 분기 없이 유연하게 데이터를 관리할 수 있었습니다.

2. 하이브리드 저장 방식의 유용성

Supabase와 로컬 스토리지를 함께 활용함으로써, 온라인/오프라인 환경 모두에서 안정적으로 작동하는 시스템을 만들 수 있었어요.

3. UX는 디테일에서 결정된다

단 0.6초의 로딩 차이, 긴 문장의 줄바꿈 같은 사소한 개선들이 사용자의 몰입과 만족도를 높이는 데 큰 역할을 한다는 걸 다시 한번 느꼈습니다.

---

🎯 마무리하며

이번 개선 작업은 단순히 기능을 추가한 게 아니라, '사용자 중심의 UX'와 '실제 데이터 기반 서비스'로 한 단계 더 도약한 계기였습니다.

앞으로도 Pik2 게임이 더 많은 사용자에게 재미있고 신뢰할 수 있는 경험을 줄 수 있도록 지속적으로 발전시켜 나가겠습니다.

---

🔗 Pick2 체험해보기 (https://pik2.vercel.app/)