밤늦게 축구 경기를 시청하는 팬들의 라이프스타일을 고려하여 눈이 피로하지 않은 어두운 배경(#0b0f19)을 채택했습니다. 여기에 사이버네틱한 네온 블루와 네온 레드 포인트 컬러를 매칭해 트렌디한 스포츠 분석 대시보드 느낌을 연출했습니다.

글자 크기를 대폭 키우고 배경과 글자색의 명도 대비를 확실하게 주어, 모바일 기기의 작은 화면에서도 어떤 국가가 선택되었는지 눈에 확 들어옵니다.

본선 참가국이 48개국으로 늘어남에 따라 스크롤이 너무 길어지는 것을 방지하기 위해, 국가 선택 영역을 컴팩트한 내부 스크롤 박스 구조로 설계했습니다. 손가락 터치가 편하도록 버튼 크기도 넉넉하게 키웠습니다.

• 32강, 16강, 8강, 4강: 사용자는 각 라운드마다 원하는 국가를 최대 5개씩 선택할 수 있습니다.
• 최종 우승국: 단 1개의 국가만 선택할 수 있는 라디오 버튼 시스템입니다.
• 인터랙티브 라이팅: 국가를 클릭하면 실시간으로 테두리에 네온 불빛이 들어와 내가 어떤 팀들을 골랐는지 시각적으로 즉각 인지할 수 있습니다.

• 초과 선택 차단: 유저가 실수로 라운드별로 6개 이상의 국가를 클릭하면 “최대 5개만 마킹할 수 있습니다”라는 경고창과 함께 클릭이 자동 취소됩니다.
• 누락 제출 방지: 5개씩 다 채우지 않거나 우승국을 고르지 않고 제출 버튼을 누르면, 시스템이 이를 감지하여 정확한 입력을 요구하므로 데이터베이스가 꼬이는 오류를 원천 차단합니다.

• 정렬 알고리즘: 사용자가 [예측 데이터 제출] 버튼을 누르는 순간 데이터가 브라우저 저장소(localStorage)에 실시간 누적되며, 가장 많은 표를 얻은 상위 8개 국가를 계산해 1위부터 8위까지 순위를 매깁니다.
• 동적 게이지 차트: 가장 득표가 많은 1위 국가를 기준으로 다른 국가들의 상대적 득표율을 계산하여 실시간으로 늘어나는 세련된 막대그래프를 보여줍니다.
• 우승국 차트 시각화: 우승국 탭을 누르면 그래프가 황제의 자리를 뜻하는 ‘형광 그린-옐로우’ 빛으로 변하여 시각적 재미를 더했습니다.