Football Quiz Web 개발 기록

2026.04 / Vue 3 + Vite + Tailwind CSS + i18n

 

1. 프로젝트 시작

“사진 없이도 축구 퀴즈가 될 수 있을까?”에서 시작한 프로젝트다.

처음에는 선수 사진 기반 퀴즈로 기획했지만,
이미지 저작권 문제와 데이터 수급 문제 때문에 방향을 바꿨다.

👉 최종 방향: 사진 → 선수 인생 스토리 기반 퀴즈

 

2. 기술 스택

• Vue 3 (Composition API)
• Vite
• Tailwind CSS v4
• Vue Router
• vue-i18n (다국어)
• MyMemory API (실시간 번역)
• localStorage (결과 저장)

3. 데이터 정리

초기 선수 데이터는 약 3,660명이었지만
중복과 불완전한 데이터가 많았다.

중복 데이터가 많아 실제 서비스로 쓰기 어려운 상태였다.

그래서 merge 스크립트를 만들어 구조를 정리했다.

 

<JavaScript>

const merged = [
  ...existingMap.values(),
  ...newPlayers.filter(p => !existingMap.has(p.name))
]

 

👉 결과

• 3,660명 → 약 2,090명으로 정제
• 중복 제거 완료
• 데이터 신뢰도 상승

4. UI 구조 변경 (사진 → 스토리)

초기 구조:

• 선수 사진 기반 퀴즈

이미지 의존성보다는 저작권 문제로 인해 안정적으로 유지하기 어려운 구조였다.

그래서 구조를 완전히 변경했다.

 

👉 변경:

• 사진 → 선수 인생 스토리

5. 다국어 시스템 (i18n + 실시간 번역)

지원 언어:

• 한국어
• 영어
• 스페인어
• 포르투갈어
• 아랍어 (RTL 지원)

UI와 콘텐츠 언어가 섞이면서 구조가 복잡해졌다.

구조는 2단계로 나눴다:

1) UI 텍스트

→ vue-i18n으로 정적 처리

2) 선수 스토리

→ MyMemory API로 실시간 번역

 

<JavaScript>

async function translateText(text, targetLang) {
  const key = `${text}|${targetLang}`

  if (cache.has(key)) return cache.get(key)

  try {
    const { data } = await axios.get(
      'https://api.mymemory.translated.net/get',
      { params: { q: text, langpair: `ko|${targetLang}` } }
    )

    const translated = data.responseData.translatedText

    cache.set(key, translated)
    return translated
  } catch (e) {
    return text
  }
}

 

👉 핵심

• 캐싱으로 API 중복 제거
• 실패 시 fallback
• 아랍어 RTL 대응

6. 타이머 로직 분리 (Composable)

 

<JavaScript>

const { timeLeft, start, reset } = useTimer(30, submitAnswer)

 

👉 개선 효과

• UI와 로직 분리
• 재사용 구조
• setInterval 관리 단일화

7. 결과 페이지

퀴즈 종료 후 localStorage에 결과 저장

 

<JavaScript>

results.filter(r => !r.correct)

 

👉 틀린 문제만 오답노트로 분리

 

8. 배포

Netlify → Vercel로 이전

문제:

• /quiz 직접 접근 시 404 발생

해결:

 

<JSON>

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

 

회고

이번 프로젝트는 기능 구현을 넘어서 “데이터 중심 설계”로 사고가 바뀌는 경험이었다.

 

마무리

단순한 퀴즈 앱이 아니라
데이터 + UX + 국제화 + 구조 설계까지 경험한 프로젝트였다.

 

🔗 직접 플레이해보기

이번 글에서 정리한 내용은 실제 서비스에 반영되어 있습니다.
아래 링크에서 확인할 수 있습니다.

→ https://football-quiz-web.vercel.app/

축덕 퀴즈