TopPick16 — 모바일 이상형 월드컵 앱

지금 상태 (2026-08-21 기준)

배포까지 끝난 1차 완성. game-toppick16.vercel.app에서 누구나 바로 플레이할 수 있고, 휴대폰에서도 확인 완료.

무엇을

사진 16장을 1:1로 계속 붙여 골라나가 최종 우승 하나를 가리는 “이상형 월드컵” 놀이를, 모바일에 최적화하고 16강 하나로만 고정해 단순화한 웹앱. 영어권을 포함한 글로벌 사용자를 대상으로 한다.

플레이 화면 흐름 (최종):

1. 주제 시작 화면에서 곧바로 지금까지의 Global Rankings를 볼 수 있음 (버튼 클릭 없이 바로 보임)
2. 16강 → 8강 → 4강 → Final까지, 라운드마다 다른 색(청록·초록·주황·빨강)의 숫자 배지로 진행 단계를 표시. 선택하면 고른 쪽은 커지며, 안 고른 쪽은 작아지며 페이드아웃
3. 플레이가 끝나면 “Your picks” 화면에서 내 최종 순위(1위~공동9위, 대진표 구조 그대로)를 확인
4. 이어서 전체 사용자의 누적 Global Rankings(1위~16위, 동점이어도 하나씩 순서대로) 확인
5. 결과 화면에서 Back to My Pick · Vote Again · Home 세 가지로 이어갈 수 있음

왜

한국엔 피쿠(PIKU) 같은 “이상형 월드컵” 전용 사이트가 잘 알려져 있지만, 조사해보니 영어권엔 이 형태(사진 두 개씩 계속 붙여 우승 하나를 가리는 전용 모바일 앱)가 마땅히 없다. 비슷한 “브라켓 투표” 문화 자체는 있지만(미국의 “bracket madness” 등), 대부분 범용 브라켓 제작 툴이거나 스포츠 예측 게임이지, 피쿠처럼 모바일에 최적화된 캐주얼 전용 앱은 없다. 이 빈틈을 채우고 싶다.

또한 피쿠는 (1) 한국어 위주라 비한국어권이 쓰기 불편하고 (2) 모바일 최적화가 안 되어 있다는 두 가지 아쉬움이 있어, 처음부터 모바일 · 영어 · 단순한 규칙으로 설계한다.

누구를 위해

전 세계 누구나 쓸 수 있게 공개한다. (개인 도구가 아니라 다른 사람들도 쓰는 서비스를 지향)

기능 요구사항

1. 관리자 화면 (비공개, Supabase Auth 로그인)

• 새 월드컵 주제(사진 16장 + 이름 + 설명)를 웹페이지에서 업로드해 추가, 기존 주제 설명 수정
• 1차 범위: 콘텐츠(주제·사진)는 당분간 체이스만 관리자 화면에서 올린다. “누구나 만들기” 기능은 반응을 보고 나중에 확장할 과제로 분류
• 설계 변경: 처음엔 주제마다 “대표 이미지(커버)“를 따로 올리게 했었는데, 홈 화면에서 커버 이미지 대신 그 주제의 현재 1·2·3위 아이템 사진을 미니 아이콘으로 보여주는 게 더 정보성이 높아서 커버 이미지 기능 자체를 뺐다 (관리자 업로드 항목·DB 칼럼 모두 제거)

2. 플레이 화면 (모바일 최적화)

• 16강 고정 토너먼트 (다른 강수 선택 없음)
• 사진 두 장을 위아래로 배치(모바일 세로 화면에 맞춤), 고르면 커지는/작아지는 페이드 애니메이션
• 라운드마다 색이 다른 숫자 배지(16=청록, 8=초록, 4=주황, 2=빨강)로 지금 몇 강인지 한눈에 인식
• 주제 시작 화면에서 바로 누적 랭킹을 볼 수 있음 (버튼 클릭 불필요)
• 플레이 종료 후: 내 결과(대진표 순위) → 전체 누적 랭킹 → 다시하기/내 결과 보기/홈으로 세 갈래

3. 투표 집계

• 모든 사용자의 선택을 저장해 항목별 순위를 계산
• 집계 방식 확정: 매치 승리 1번 = 1점, 단순 승수 합산. Elo 같은 가중치 방식은 이번엔 채택하지 않음 (충분히 직관적이고, 대진표 구조상 챔피언이 가장 많이 이기게 되어 있어 별도 보정이 급하지 않다고 판단)

4. 언어

• 영어 기본. 한국어 등 다국어는 이번 범위 밖

구현 방법 — 2026년 8월 기준 조사

Next.js + Supabase + Vercel 조합을 선택했다. 2026년 기준, 이미지 업로드·로그인·투표 집계 DB가 필요한 이런 앱에서 가장 표준적이고 자료가 많은 조합이다.

대안으로 검토한 것: Firebase(구글) — 기능은 비슷하지만, Supabase는 SQL 기반이라 나중에 순위 집계 로직을 짜기 더 직관적이라 판단해 Supabase를 선택.

참고 자료

• Supabase + Next.js 15 Tutorial for Beginners (2026)
• Vercel Supabase: Full Stack Setup and Limits in 2026
• Supabase & Next.js App Router Starter Template for Auth — Vercel

글로벌 시장 조사 메모: “이상형 월드컵”과 똑같은 형태의 전용 서비스는 영어권에 찾지 못함. 비슷한 문화로는 미국의 “bracket madness”(범용 브라켓 투표, 예: College Football Meme Madness)가 있으나, 모바일 전용 캐주얼 앱은 아님. (“Sweet 16”·“March Madness”·“Final Four”는 NCAA 상표라 서비스명에 사용 금지.)

모바일 레이아웃 참고: CGV 모바일 웹(cgv.co.kr)을 참고해, 홈 화면 상단을 큰 그라데이션 배너 대신 로고+아이콘만 있는 얇은 앱바로 압축.

프로젝트 이름

TopPick16 — 폴더/코드: game-toppick16 (별도 리포지토리, /Users/chasekim/Documents/game-toppick16, GitHub 비공개 저장소)

만들면서 겪은 것들

• 레이아웃 버그: <main>에 mx-auto만 있고 w-full이 빠져서, 화면이 콘텐츠 크기만큼만 좁게 잡혀 그 안의 flex-1 진행 라인이 폭 0으로 보이지 않는 문제를 겪음. 색상 문제로 착각했다가, 실제로는 레이아웃 폭 문제였음을 뒤늦게 발견·수정
• 디자인 방향 전환: 단조로운 흑백 UI → 보라·핑크 그라데이션의 트렌디한 모바일 게임 톤으로 전면 개편 → 다시 파란 계열로 브랜드 컬러 변경 (매번 실제 앱에 적용하기 전 Artifact로 초안을 먼저 보여주고 확인받는 방식으로 진행)
• 다크모드 제거: 시스템 다크모드로 전환 시 글자가 배경에 묻히는 문제가 있어, 전체적으로 밝은 테마 하나로 고정

아직 확정 안 된 것

• 사용자가 직접 주제를 만들어 올리는 “누구나 만들기” 기능 (반응 보고 결정)
• 더 정교한 랭킹 집계 방식(Elo 등)으로 바꿀지 여부

이번엔 안 하는 것

• 사용자가 직접 주제를 만들어 올리는 기능 (1차는 체이스만 콘텐츠 관리)
• 다국어 지원 (영어만)
• 플레이어용 회원가입/로그인 (관리자만 로그인 필요)
• 주제 대표 이미지(커버) — 1·2·3위 미니 아이콘으로 대체