Fullstack 114

heo4·2일 전

Fullstack

목록 보기
69/70

풀스택

심심오락실 개발 일지 — 2026-09-30

예능식 퀴즈와 추억의 플래시 게임을 웹에서 즐기는 심심오락실(simsim-arcade) 팀 프로젝트.
Cloudflare Pages + Workers + D1, React + Hono, pnpm 모노레포로 만들고 있다.
오늘은 힌트 퀴즈를 크게 손보고, 두 번째 게임 국기 퀴즈를 새로 만들었다.

오늘 한 일 한눈에 보기

PR내용
#31힌트 퀴즈 — 외국 선수 이름을 국내 통용 표기로 보정, 발음 기호 입력 인정
#32게임 카드 번호를 4명이 돌아가며 자동 배정
#33축구선수 문제를 FC온라인 인기 선수 위주로 교체
#34한 글자 성(요나탄 타, 루크 쇼)도 부분 정답 인정
#35힌트 퀴즈에 ⚾ 야구선수(KBO) 장르 추가
#36🏳️ 새 게임 국기 퀴즈 (카드 5)
#38힌트 퀴즈 동물·음식 50문제씩, 나라 195문제로 확대

(#37 스카이 에이스는 팀원 신영의 새 게임 — 오늘 main 에 같이 들어왔다)


1. 어제 남긴 이슈부터 — 외국 선수 이름 표기 (#31)

힌트 퀴즈 축구선수 문제는 위키데이터에서 자동으로 만든다. 그런데 정답이 위키데이터 한국어 이름 그대로라
"하칸 칼하노글루" 처럼 국내에서 잘 안 쓰는 표기가 정답으로 나오는 문제가 있었다. (보통은 "찰하놀루")

  • 수집 스크립트에 표기 보정 목록(위키데이터 ID → 통용 표기)을 만들어 78명을 고쳤다.
    원래 이름은 별칭으로 남겨서 둘 다 정답으로 인정된다.
  • 영문 입력도 문제였다. Çalhanoğlu, Modrić, Özil 처럼 발음 기호가 붙은 이름이 별칭 필터에 걸려 빠지고 있었다.
    → 발음 기호를 떼서 별칭에 넣고, 정답 비교 함수에도 같은 규칙을 넣었다.
// 라틴 문자만 바꾼다 — 문자열 전체를 NFD 로 바꾸면 한글이 자모로 풀려 버린다
text.replace(/[À-ɏḀ-ỿ]/g, (ch) =>
  ch.normalize('NFD').replace(/[̀-ͯ]/g, ''));

배운 점: normalize('NFD') 를 한글이 섞인 문자열 전체에 걸면 "가" 가 "ㄱ+ㅏ" 로 쪼개진다. 범위를 좁혀서 써야 한다.

2. 게임 카드 번호 규칙 (#32)

팀원 4명이 1인 1게임으로 카드 1~4번을 맡고 있었는데, 이제 두 번째 게임을 만들 차례.
몇 개를 추가하든 자기 번호가 정해지도록 4명이 돌아가며 번호를 받는 규칙으로 바꿨다.

내 n번째 게임의 카드 번호 = (n − 1) × 4 + 내 순번

순번담당카드 번호
1혁1, 5, 9, …
2경수2, 6, 10, …
3신영3, 7, 11, …
4동한4, 8, 12, …

메인 화면 카드 칸도 고정 4칸 대신, 등록된 가장 큰 번호가 속한 4장 묶음까지 자동으로 생기게 했다.
(5번이 등록되면 5~8 칸이 생기고 비어 있는 칸은 "준비 중")

3. 축구선수 문제를 "요즘 선수" 위주로 (#33, #34)

문제를 풀어 보니 옛날 레전드 선수가 너무 많았다. 위키백과 문서 수로 유명도를 매기다 보니
1979년 이전 출생이 36%나 됐다.

그래서 FC온라인에서 인기 있는 선수를 기준으로 바꿨다.

  • 넥슨 Open API 가 공개하는 FC온라인 선수 목록(약 5만 명)을 쓰고,
    특수 시즌 카드가 많을수록 인기 선수로 봤다. 25 LIVE 카드가 없으면 은퇴 선수로 보고 10%까지만.
  • 정답도 FC온라인 표기로 바꿨다. (리로이 사네, 존 스톤스, 레반도프스키 …)
  • 결과: 1979년 이전 출생 36% → 6%, 1995년 이후 출생 13% → 54%

제일 까다로웠던 건 두 데이터를 잇는 일이었다. 위키데이터에 EA 선수 ID 가 없어서 한국어 이름으로 맞춰야 했다.

  • 정확히 같은 이름 → 성만 같은 이름(레반도프스키 → 로베르트 레반도프스키) → 표기만 조금 다른 이름(사네 ↔ 자네) 순서로 연결
  • 그래도 한 단어 이름은 엉뚱하게 이어졌다. "사울" → 로드리고 데 폴, "마르키뉴스" → 아스널 유스 선수, "김도연" → 여자 선수…
    → 연결 결과를 직접 검토해서 틀린 것들을 수동 연결 목록으로 바로잡고, 남자 선수로 한정했다.
  • FC온라인 이름이 "T. 알렉산더-아놀드" 처럼 이니셜이면 위키데이터 이름을 붙여 "트렌트 알렉산더-아놀드" 로 만들었다.
  • 화면에는 넥슨 Open API 약관에 따라 "Data based on NEXON Open API" 출처를 표시했다.

후속으로 "요나탄 타", "루크 쇼" 처럼 성이 한 글자인 선수는 성만 입력하면 오답이던 것도 고쳤다 (#34).
두 글자 이상 성("포든")은 되는데 한 글자만 안 되는 게 어색했다. 앞쪽 한 글자 이름("존", "벤")은 너무 흔해서 계속 오답.

배운 점: 이름으로 두 데이터를 잇는 건 생각보다 틀리기 쉽다. 자동 연결 결과를 사람이 검토하는 단계가 꼭 필요했다.

4. 야구선수(KBO) 장르 추가 (#35)

축구와 같은 방식으로 위키데이터에서 KBO 선수 295명을 만들었다.

  • 이번엔 유명도 기준으로 한국어 위키백과 최근 1년 조회수를 썼다.
    위키백과 문서 수는 최대 20개라 변별력이 없고, 오히려 외국인·은퇴 선수가 위로 올라왔다.
    조회수로 바꾸니 류현진, 이정후, 안현민, 폰세처럼 요즘 화제인 선수가 위로 왔다.
  • 힌트: 국적 → 출생 연도 → 포지션 → KBO 소속팀 → 출신 학교 → 다른 소속팀(MLB·NPB 포함)
  • 신장은 2,400여 명 중 336명만 자료가 있어서 뺐다.

작은 함정도 하나 있었다. 축구 시드가 "위키데이터로 만든 문제"를 전부 지우고 다시 넣고 있었는데,
시드는 파일 이름 순서로 적용되니 hint-quiz-baseball.sql 이 먼저 들어가고 hint-quiz-football.sql 이 야구 문제를 지워 버린다.
→ 각 시드가 자기 장르만 지우도록 삭제 조건에 장르를 추가했다.

5. 새 게임: 국기 퀴즈 🏳️ (#36)

내 두 번째 게임 (카드 5).

  • 모드: 국기 → 나라, 나라 → 수도
  • 10문제 4지선다, 문제당 10초 (3초 안에 맞히면 100점, 늦을수록 줄어 최소 50점)
  • 난이도: 쉬움(잘 알려진 나라 61개) / 전체(195개국, 점수 ×1.5)
  • 오답 보기는 같은 대륙에서 골라서 헷갈리게

신경 쓴 부분

  • 국기 이모지는 윈도우에서 "KR" 같은 글자로 보인다. 그래서 국기 그림은 flag-icons(MIT) SVG 를 게임 폴더에 넣었다.
    Vite 의 import.meta.glob 으로 불러서 화면에 나올 때만 내려받는다.
  • 나라·수도 데이터는 위키데이터에서 한 번 뽑아 다듬었다.
    • "조선민주주의인민공화국 → 북한", "서울특별시 → 서울"
    • 수도가 여럿인 나라는 대표 수도 하나 (인도네시아 자카르타, 볼리비아 수크레)
    • 수도 모드에서 뺀 나라: 수도 논란(이스라엘·팔레스타인), 수도 이름에 나라 이름이 들어 있어 너무 쉬운 곳(싱가포르, 멕시코시티)
  • 헤드리스 Chromium 으로 한 판을 끝까지 돌려서 정답·오답·시간 초과·점수 등록·모바일 화면까지 확인했다.

6. 힌트 퀴즈 나머지 장르 확대 (#38)

장르전후방식
🐾 동물850직접 작성
🍜 음식650직접 작성 (한식 22 · 세계 음식 22)
🌏 나라8195위키데이터 자동 생성
  • 동물·음식은 위키데이터로 만들면 "포유류 / 식육목 / 학명" 같은 딱딱한 힌트만 나와서 직접 썼다.
    예) 하마 — "이름의 뜻은 '강의 말'", 나무늘보 — "일주일에 한 번쯤 땅에 내려와 똥을 눈다"
  • 나라 힌트: 대륙 → 인구 → 면적(순위) → 이웃 나라 → 공용어 → 수도.
    힌트 속 나라 이름은 가렸다 ("프랑스어" → "○○○어").

그리고 테스트에서 재밌는(?) 버그를 찾았다. 외래어 표기 차이를 봐주려고 만든 "비슷한 표기도 정답" 규칙 때문에

  • "이란" 을 쓰면 이라크가 정답
  • "감비아" 를 쓰면 잠비아가 정답
  • "기니" 를 쓰면 적도 기니가 정답

…이런 게 14건이나 나왔다. 선수 이름에서는 유용한 규칙이 나라 이름에서는 독이 됐다.
→ 나라 장르는 정확히 일치(별칭 포함)만 인정하고, 대신 "한국·남한·남아공·usa·uk" 같은 줄임말을 별칭으로 넣었다.

배운 점: 같은 판정 규칙이라도 데이터 성격에 따라 맞고 틀리다. 장르를 추가할 때마다 "다른 문제의 정답이 이 문제에서 정답 처리되는지" 교차 검사를 돌린 게 큰 도움이 됐다.


정리

  • 힌트 퀴즈: 축구 1,000 · 야구 295 · 나라 195 · 동물 50 · 음식 50 문제
  • 새 게임: 국기 퀴즈 (카드 5)
  • 팀 규칙: 게임 카드 번호 자동 배정

오늘의 교훈 세 줄

  1. 공식 자료 기준 ≠ 사람들이 흥미를 느끼는 기준. 인기 지표(게임 카드 수, 위키 조회수)를 따로 찾아야 했다.
  2. 이름으로 데이터를 잇는 건 자동화 + 사람 검토 조합이 답.
  3. 판정 규칙은 장르마다 따로 검증해야 한다.

다음엔 팀원들의 두 번째 게임이 들어올 차례!

0개의 댓글